/* ============================================================
   HYGENTRA ILLUSTRATION MOTION KIT
   Shared primitives for the inline-SVG illustrations.
   Each SVG carries only its own timing (delays) in a
   prefixed <style>; everything reusable lives here.

   Lifecycle (driven by illo.js):
     .illo               mounted, story hidden in its start state
     .illo.is-visible    on screen: ambient loops run
     .illo.is-playing    story layer plays once, then holds
     .illo.is-static     reduced motion / no JS: final frame, no motion
   ============================================================ */

:root {
  --illo-micro: 180ms;
  --illo-el: 420ms;
  --illo-beat: 700ms;
  --illo-draw: 1200ms;
  --illo-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --illo-mint: var(--mint, #36ffab);
  --illo-red: #ff5f5f;
  --illo-ink: var(--ink, #f6efea);
  --illo-mute: #7f7470;
  --illo-tile: #1e1e1e;
}

.illo {
  display: block;
  position: relative;
  color: var(--illo-ink);
}
.illo > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.illo [class^="il-"],
.illo [class*=" il-"] {
  transform-box: fill-box;
  transform-origin: center;
  will-change: auto;
}

/* daylight (paper) pages: darker signal green so labels stay legible on paper */
html[data-theme="daylight"] .illo,
:not(html)[data-theme="paper"] .illo {
  --illo-mint: #0f9d63;
  --illo-red: #d9463e;
  --illo-tile: #fbfaf7;
}

/* ---- start states (before the story plays) ------------------ */
.illo .il-rise,
.illo .il-fade,
.illo .il-stamp,
.illo .il-zoom,
.illo .il-pop { opacity: 0; }
.illo .il-wipe { transform: scaleX(0); transform-origin: left center; }
.illo .il-grow { transform: scaleY(0); transform-origin: center bottom; }
.illo .il-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.illo .il-hit { fill: transparent; }
.illo .il-dim { opacity: 1; }
.illo .il-slide { transform: translate(var(--from-x, 0px), var(--from-y, 0px)); }
.illo .il-vanish { opacity: 1; }

/* ---- story layer: applied only while playing ----------------- */
.illo.is-playing .il-rise { animation: il-rise var(--illo-el) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-fade { animation: il-fade var(--illo-el) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-wipe { animation: il-wipe var(--illo-el) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-grow { animation: il-grow var(--illo-el) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-draw { animation: il-draw var(--dur, var(--illo-draw)) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-stamp { animation: il-stamp 520ms var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-pop { animation: il-pop 360ms var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-zoom { animation: il-zoom var(--dur, 600ms) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-hit { animation: il-hit var(--illo-micro) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-dim { animation: il-dim var(--illo-el) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-slide { animation: il-slide var(--dur, 600ms) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-vanish { animation: il-vanish var(--illo-micro) linear var(--d, 0s) both; }
.illo.is-playing .il-cursor { animation: il-cursor var(--dur, 900ms) var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-ring { animation: il-ring 480ms var(--illo-ease) var(--d, 0s) both; }
.illo.is-playing .il-halo { animation: il-halo 640ms var(--illo-ease) var(--d, 0s) both; }

/* ---- ambient layer: loops only while visible ----------------- */
.illo .il-march { animation: il-march var(--dur, 1.2s) linear infinite; animation-play-state: paused; }
.illo .il-twinkle { animation: il-twinkle 1.4s ease-in-out var(--d, 0s) infinite; animation-play-state: paused; }
.illo .il-float { animation: il-float var(--dur, 6s) ease-in-out var(--d, 0s) infinite; animation-play-state: paused; }
.illo .il-sweep { animation: il-sweep var(--dur, 4s) linear infinite; animation-play-state: paused; }
.illo .il-breathe { animation: il-breathe 3.2s ease-in-out var(--d, 0s) infinite; animation-play-state: paused; }
.illo.is-visible .il-march,
.illo.is-visible .il-twinkle,
.illo.is-visible .il-float,
.illo.is-visible .il-sweep,
.illo.is-visible .il-breathe { animation-play-state: running; }

/* ---- cursor: start hidden until its beat --------------------- */
.illo .il-cursor { opacity: 0; }
.illo .il-ring { opacity: 0; }
.illo .il-halo { opacity: 0; }

/* ---- static: final frame, no motion -------------------------- */
.illo.is-static [class^="il-"],
.illo.is-static [class*=" il-"] { animation: none !important; }
.illo.is-static .il-rise,
.illo.is-static .il-fade,
.illo.is-static .il-stamp,
.illo.is-static .il-zoom,
.illo.is-static .il-pop,
.illo.is-static .il-cursor { opacity: 1; transform: none; }
.illo.is-static .il-wipe,
.illo.is-static .il-grow { transform: none; }
.illo.is-static .il-draw { stroke-dashoffset: 0; }
.illo.is-static .il-hit { fill: var(--hit, var(--illo-mint)); }
.illo.is-static .il-dim { opacity: 0.4; }
.illo.is-static .il-slide { transform: none; }
.illo.is-static .il-vanish { opacity: 0; }
.illo.is-static .il-ring,
.illo.is-static .il-halo { opacity: 0; }
.illo.is-static .il-cursor { transform: translate(var(--tx, 0), var(--ty, 0)); }

@media (prefers-reduced-motion: reduce) {
  .illo [class^="il-"],
  .illo [class*=" il-"] { animation: none !important; }
  .illo .il-rise, .illo .il-fade, .illo .il-stamp, .illo .il-zoom, .illo .il-pop { opacity: 1; transform: none; }
  .illo .il-wipe, .illo .il-grow { transform: none; }
  .illo .il-draw { stroke-dashoffset: 0; }
  .illo .il-hit { fill: var(--hit, var(--illo-mint)); }
  .illo .il-dim { opacity: 0.4; }
  .illo .il-slide { transform: none; }
  .illo .il-vanish { opacity: 0; }
  .illo .il-ring, .illo .il-halo { opacity: 0; }
  .illo .il-cursor { opacity: 1; transform: translate(var(--tx, 0), var(--ty, 0)); }
}

/* ---- keyframes ---------------------------------------------- */
@keyframes il-rise {
  from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 10px)) rotate(var(--rot, 0deg)); }
  to { opacity: 1; transform: none; }
}
@keyframes il-zoom {
  from { opacity: 0; transform: scale(var(--from-s, 0.6)); }
  to { opacity: 1; transform: none; }
}
@keyframes il-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes il-wipe {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes il-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes il-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes il-stamp {
  0% { opacity: 0; transform: scale(0.6); }
  55% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes il-pop {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.25); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes il-hit {
  from { fill: transparent; }
  to { fill: var(--hit, var(--illo-mint)); }
}
@keyframes il-dim {
  from { opacity: 1; }
  to { opacity: 0.4; }
}
@keyframes il-slide {
  from { transform: translate(var(--from-x, 0px), var(--from-y, 0px)); }
  to { transform: none; }
}
@keyframes il-vanish {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* cursor: fade in, travel to (--tx, --ty) on a shallow arc, then click-dip */
@keyframes il-cursor {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  48% { transform: translate(calc(var(--tx, 0px) * 0.55), calc(var(--ty, 0px) * 0.75)); }
  78% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1); }
  88% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.85); }
  100% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(1); }
}
/* ring and halo: 0% is hidden so `both` fill shows nothing during the delay */
@keyframes il-ring {
  0% { opacity: 0; transform: scale(0.4); }
  4% { opacity: 0.9; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes il-halo {
  0% { opacity: 0; transform: scale(0.7); }
  4% { opacity: 0.55; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(2.2); }
}
@keyframes il-march {
  to { stroke-dashoffset: var(--march, -24); }
}
@keyframes il-twinkle {
  0%, 100% { opacity: calc(var(--o, 0.6) * 0.25); }
  50% { opacity: var(--o, 0.6); }
}
@keyframes il-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(var(--dy, -3px)) rotate(var(--rot, 0deg)); }
}
@keyframes il-sweep {
  to { transform: rotate(360deg); }
}
@keyframes il-breathe {
  0%, 100% { opacity: var(--o-lo, 0.35); }
  50% { opacity: var(--o-hi, 1); }
}