/* ============================================================
   BESPOKE CARD SCENES — animation library (ca-*)
   Used by js/ui/card-scenes.js. Every animated group is tuned per
   element with CSS custom properties:
     --d   duration        --dl  delay
     --r   rotation swing  --y   bob distance   --x  drift distance
     --o   transform-origin
   Board minis (.scene--static) freeze everything via cards.css.
   ============================================================ */

.ca {
  transform-box: fill-box;
  transform-origin: var(--o, 50% 50%);
}

/* pendulum sway — tails, balloons, signs, hanging things */
.ca-sway { animation: ca-sway var(--d, 3s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-sway { from { transform: rotate(calc(var(--r, 4deg) * -1)); } to { transform: rotate(var(--r, 4deg)); } }

/* soft vertical bob — floating, breathing, hovering */
.ca-bob { animation: ca-bob var(--d, 2.6s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-bob { from { transform: translateY(0); } to { transform: translateY(var(--y, -3px)); } }

/* slow horizontal drift, back and forth — clouds, mist */
.ca-drift { animation: ca-drift var(--d, 14s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-drift { from { transform: translateX(0); } to { transform: translateX(var(--x, 10px)); } }

/* continuous rotation — wheels, rotors, orbit carriers */
.ca-spin { animation: ca-spin var(--d, 1.2s) linear var(--dl, 0s) infinite; }
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* nervous jitter — rattling machines (rotation) */
.ca-wobble { animation: ca-wobble var(--d, 0.18s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-wobble { from { transform: rotate(calc(var(--r, 1.5deg) * -1)); } to { transform: rotate(var(--r, 1.5deg)); } }

/* a hard jolt every few seconds, then stillness — jammed things fighting back */
.ca-jolt { animation: ca-jolt var(--d, 3.4s) var(--dl, 0s) infinite; }
@keyframes ca-jolt {
  0%, 78% { transform: translate(0, 0) rotate(0deg); }
  80% { transform: translate(-1.6px, 0.4px) rotate(-2deg); }
  82% { transform: translate(1.6px, -0.4px) rotate(2deg); }
  84% { transform: translate(-1.2px, 0) rotate(-1.4deg); }
  86% { transform: translate(1px, 0) rotate(1deg); }
  88%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* star twinkle */
.ca-twinkle { animation: ca-twinkle var(--d, 3.4s) ease-in-out var(--dl, 0s) infinite; }
@keyframes ca-twinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }

/* steady lamp/halo breathing */
.ca-pulse { animation: ca-pulse var(--d, 3s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-pulse { from { opacity: var(--lo, 0.1); } to { opacity: var(--hi, 0.24); } }

/* clean on/off blink (indicator lights) */
.ca-blink { animation: ca-blink var(--d, 1.2s) steps(1) var(--dl, 0s) infinite; }
@keyframes ca-blink { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0.08; } }

/* broken electrics: erratic, misfiring flicker */
.ca-misfire { animation: ca-misfire var(--d, 2.8s) steps(1) var(--dl, 0s) infinite; }
@keyframes ca-misfire {
  0%, 7% { opacity: 1; } 8%, 12% { opacity: 0.05; } 13%, 18% { opacity: 1; }
  19%, 42% { opacity: 0.05; } 43%, 46% { opacity: 0.8; } 47%, 52% { opacity: 0.05; }
  53%, 70% { opacity: 1; } 71%, 100% { opacity: 0.05; }
}

/* electric spark burst, mostly off */
.ca-spark { animation: ca-spark var(--d, 2.2s) steps(1) var(--dl, 0s) infinite; }
@keyframes ca-spark {
  0%, 5% { opacity: 1; } 6%, 30% { opacity: 0; } 31%, 36% { opacity: 1; }
  37%, 60% { opacity: 0; } 61%, 63% { opacity: 0.9; } 64%, 100% { opacity: 0; }
}

/* animal eyes: long stare, quick double-blink */
.ca-eyes { animation: ca-eyes var(--d, 4.2s) steps(1) var(--dl, 0s) infinite; }
@keyframes ca-eyes { 0%, 82% { opacity: 1; } 83%, 87% { opacity: 0; } 88%, 91% { opacity: 1; } 92%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }

/* fireflies / motes: fade through a lazy climb */
.ca-mote { animation: ca-mote var(--d, 4.6s) ease-in-out var(--dl, 0s) infinite; }
@keyframes ca-mote {
  0% { opacity: 0; transform: translate(0, 0); }
  25% { opacity: 0.95; }
  55% { opacity: 0.5; }
  80% { opacity: 0; }
  100% { opacity: 0; transform: translate(var(--x, 6px), var(--y, -12px)); }
}

/* a leaf letting go: fall, seesaw, fade — long rests between */
.ca-leaf { animation: ca-leaf var(--d, 7s) ease-in var(--dl, 0s) infinite; }
@keyframes ca-leaf {
  0%, 55% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  58% { opacity: 0.95; }
  70% { transform: translate(-6px, 18px) rotate(-50deg); }
  82% { transform: translate(3px, 34px) rotate(30deg); opacity: 0.9; }
  94%, 100% { transform: translate(-2px, 50px) rotate(-15deg); opacity: 0; }
}

/* scrolling motion dashes */
.ca-dash path, path.ca-dash { animation: ca-dash var(--d, 0.5s) linear var(--dl, 0s) infinite; }
@keyframes ca-dash { to { stroke-dashoffset: var(--x, -30px); } }

/* rising steam/smoke puffs */
.ca-puff { animation: ca-puff var(--d, 3.6s) ease-out var(--dl, 0s) infinite; }
@keyframes ca-puff {
  0% { opacity: 0; transform: translateY(2px) scale(0.5); }
  18% { opacity: 0.6; }
  70% { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(var(--y, -16px)) scale(1.25); }
}

/* water: lapping horizontal slosh (loop-safe: full period translate) */
.ca-slosh { animation: ca-slosh var(--d, 3.4s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-slosh { from { transform: translateX(0); } to { transform: translateX(var(--x, -14px)); } }

/* floating on water: bob + tilt together */
.ca-float { animation: ca-float var(--d, 3.2s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-float {
  from { transform: translateY(0) rotate(calc(var(--r, 4deg) * -1)); }
  to { transform: translateY(var(--y, -2.5px)) rotate(var(--r, 4deg)); }
}

/* a drip: swell at the ceiling, fall, vanish */
.ca-drip { animation: ca-drip var(--d, 2.8s) cubic-bezier(0.6, 0, 1, 0.6) var(--dl, 0s) infinite; }
@keyframes ca-drip {
  0%, 35% { opacity: 0; transform: translateY(0) scaleY(0.6); }
  45% { opacity: 1; transform: translateY(1px) scaleY(1); }
  100% { opacity: 0.9; transform: translateY(var(--y, 30px)) scaleY(1.3); }
}

/* dizzy orbit — stars circling a spinning head */
.ca-orbit { animation: ca-spin var(--d, 2.4s) linear var(--dl, 0s) infinite; }

/* appear-and-vanish pop (spray clouds, honk arcs) */
.ca-pop { animation: ca-pop var(--d, 2.4s) ease-out var(--dl, 0s) infinite; }
@keyframes ca-pop {
  0%, 12% { opacity: 0; transform: scale(0.4); }
  18% { opacity: 0.95; transform: scale(1.06); }
  38% { opacity: 0.8; transform: scale(1); }
  55%, 100% { opacity: 0; transform: scale(1.1); }
}

/* paint runs: growing drips down a wall */
.ca-run { transform-box: fill-box; transform-origin: 50% 0%; animation: ca-run var(--d, 5s) ease-in var(--dl, 0s) infinite; }
@keyframes ca-run {
  0% { transform: scaleY(0.2); opacity: 0.9; }
  60%, 100% { transform: scaleY(1); opacity: 0.9; }
}

/* the swoon: a slow reed-like wobble past vertical */
.ca-swoon { animation: ca-swoon var(--d, 3.6s) ease-in-out var(--dl, 0s) infinite; }
@keyframes ca-swoon {
  0%, 100% { transform: rotate(-4deg); }
  30% { transform: rotate(5deg); }
  55% { transform: rotate(-6.5deg); }
  75% { transform: rotate(3deg); }
}

/* zoomies: joyful bounding (bob + pitch) */
.ca-bound { animation: ca-bound var(--d, 0.55s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-bound {
  from { transform: translateY(0) rotate(-3deg); }
  to { transform: translateY(-4.5px) rotate(4deg); }
}

/* light cone shimmer */
.ca-beam { animation: ca-beam var(--d, 4.4s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes ca-beam { from { opacity: var(--lo, 0.1); } to { opacity: var(--hi, 0.2); } }

/* elevator cab: strains, slips an inch, catches */
.ca-strain { animation: ca-strain var(--d, 4.2s) var(--dl, 0s) infinite; }
@keyframes ca-strain {
  0%, 30% { transform: translateY(0); }
  33% { transform: translateY(0.8px); }
  36% { transform: translateY(0.2px); }
  55%, 62% { transform: translateY(0.4px); }
  64% { transform: translateY(2.4px); }
  67% { transform: translateY(1.8px); }
  70%, 100% { transform: translateY(2px); }
}

/* wifi arcs dying: each arc gets weaker treatment via delay */
.ca-wifi { animation: ca-wifi var(--d, 3.2s) steps(1) var(--dl, 0s) infinite; }
@keyframes ca-wifi {
  0%, 20% { opacity: 0.9; } 22%, 30% { opacity: 0.1; } 32%, 38% { opacity: 0.9; }
  40%, 88% { opacity: 0.1; } 90%, 96% { opacity: 0.55; } 97%, 100% { opacity: 0.1; }
}

/* seesaw settle of a spun coin/cover — heavy metal wobble */
.ca-teeter { animation: ca-teeter var(--d, 3.8s) ease-in-out var(--dl, 0s) infinite; }
@keyframes ca-teeter {
  0%, 12% { transform: rotate(6deg); }
  30% { transform: rotate(-4.5deg); }
  46% { transform: rotate(3.5deg); }
  60% { transform: rotate(-2deg); }
  72% { transform: rotate(1deg); }
  80%, 84% { transform: rotate(0deg); }
  92% { transform: rotate(4deg); } /* someone stepped near it again */
  100% { transform: rotate(6deg); }
}