/* ── Tool card scenes — ambient animation ──────────────────────────────────
   The tool cards on /tools carry small looping SVG scenes instead of static
   icons. Same animation language as the brew-timeline scenes (spin, falling
   grain, steam) but scoped to .tool-scene so this stylesheet stays
   independent of brew_timeline.css. transform-origin values are SVG user
   units (default transform-box: view-box), pinned to each scene's pivot.
   All motion is decorative; it pauses for prefers-reduced-motion.

   Tailwind-first refactor (2026-08-06, task 3): audited rule by rule and
   nothing here converts. Every declaration is either paired with an
   `animation` shorthand (the transform-origin values are the animation's
   pivot, not a standalone layout value), a @keyframes definition, or the
   prefers-reduced-motion !important override that has to win regardless of
   any utility's specificity. All three are explicit KEEP categories — see
   task-3-report.md for the full rule-by-rule table. `.tool-scene .pulse`
   and its `ts-pulse` keyframe were removed as dead code: no view anywhere
   renders an element with class="pulse" inside .tool-scene (grep -rn
   confirms only an unrelated `.pulse.ambient` class exists, scoped to the
   brew-timeline pour scene, not this file). */

.tool-scene .hand{transform-origin:32px 36px;animation:ts-spin 4s linear infinite}
.tool-scene .rotor{transform-origin:32px 32px;animation:ts-spin 6s linear infinite}
.tool-scene .seesaw{transform-origin:32px 15px;animation:ts-seesaw 3.4s ease-in-out infinite}
.tool-scene .fall{animation:ts-fall 1.7s linear infinite}
.tool-scene .fall-2{animation:ts-fall 1.7s linear infinite .6s}
.tool-scene .steam{animation:ts-steam 2.4s ease-in-out infinite}
.tool-scene .steam-2{animation:ts-steam 2.4s ease-in-out infinite 1.2s}
.tool-scene .orbit{animation:ts-orbit 2.8s ease-in-out infinite}
.tool-scene .orbit-2{animation:ts-orbit 2.8s ease-in-out infinite 1.4s}
.tool-scene .glow{animation:ts-glow 2.2s ease-in-out infinite}

@keyframes ts-spin{to{transform:rotate(360deg)}}
@keyframes ts-seesaw{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes ts-fall{0%{transform:translateY(-5px);opacity:0}20%{opacity:1}85%{opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes ts-steam{0%{transform:translateY(3px);opacity:0}30%{opacity:.7}100%{transform:translateY(-9px);opacity:0}}
@keyframes ts-orbit{0%,100%{transform:translate(0,-1.5px)}50%{transform:translate(0,2px)}}
@keyframes ts-glow{0%,100%{opacity:.35}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .tool-scene .hand,.tool-scene .rotor,.tool-scene .seesaw,.tool-scene .fall,.tool-scene .fall-2,
  .tool-scene .steam,.tool-scene .steam-2,.tool-scene .orbit,.tool-scene .orbit-2,
  .tool-scene .glow{animation:none !important}
}