/* Deck motion choreography. Pairs with viewer.js + motion-engine.js.
 * Link after the pinned design-system fonts.css and tokens.css; every value
 * here reads a --sv-* token. Content is visible without JavaScript: hidden
 * start states apply only once the engine adds .motion-ready to <html>.
 * The engine adds .is-playing to the active section (restarted on replay)
 * and sets --seek, so a QA seek lands on the same frame as live playback. */

/* ---------- Slide crossfade ---------- */
[data-deck-section] {
  opacity: 0; visibility: hidden;
  transition: opacity var(--sv-dur-slow) var(--sv-ease-out), visibility 0s linear var(--sv-dur-slow);
}
[data-deck-section].active {
  opacity: 1; visibility: visible;
  transition: opacity var(--sv-dur-slow) var(--sv-ease-out);
}

/* ---------- Line rise: <span class="ln"><span data-m style="--d:80ms">Line</span></span> ---------- */
.ln { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.motion-ready .ln > [data-m] { display: inline-block; transform: translateY(110%); filter: blur(6px); opacity: 0; }
.motion-ready .is-playing .ln > [data-m] {
  animation: motion-rise var(--sv-dur-cine) var(--sv-ease-out) forwards;
  animation-delay: calc(150ms + var(--d, 0ms) - var(--seek, 0ms));
}

/* ---------- Fade up: data-m="fade" ---------- */
.motion-ready [data-m="fade"] { opacity: 0; }
.motion-ready .is-playing [data-m="fade"] {
  animation: motion-fadeup var(--sv-dur-slow) var(--sv-ease-out) forwards;
  animation-delay: calc(var(--d, 0ms) - var(--seek, 0ms));
}

/* ---------- Wipe in (images, bands): data-m="wipe" ---------- */
.motion-ready [data-m="wipe"] { clip-path: inset(0 100% 0 0); }
.motion-ready .is-playing [data-m="wipe"] {
  animation: motion-wipe 1200ms var(--sv-ease-inout) forwards;
  animation-delay: calc(var(--d, 0ms) - var(--seek, 0ms));
}

/* ---------- Slow settle for full-bleed photography: data-m="drift" on the <img> ---------- */
.motion-ready .is-playing [data-m="drift"] { animation: motion-drift 14s linear both; animation-delay: calc(0ms - var(--seek, 0ms)); }

/* ---------- Bars that grow from the baseline: <i data-m="grow"> ---------- */
.motion-ready [data-m="grow"] { transform: scaleY(0); transform-origin: bottom; }
.motion-ready .is-playing [data-m="grow"] {
  animation: motion-grow 900ms var(--sv-ease-out) forwards;
  animation-delay: calc(var(--d, 0ms) - var(--seek, 0ms));
}

/* ---------- State classes a scene toggles (is-on / is-done) ---------- */
.motion-ready [data-state] { opacity: 0.25; transition: opacity var(--sv-dur-slow) var(--sv-ease-out); }
.motion-ready [data-state].is-on, .motion-ready [data-state].is-done { opacity: 1; }

@keyframes motion-rise { to { transform: none; filter: none; opacity: 1; } }
@keyframes motion-fadeup { from { opacity: 0; transform: translateY(var(--sv-reveal-distance)); } to { opacity: 1; transform: none; } }
@keyframes motion-wipe { to { clip-path: inset(0); } }
@keyframes motion-drift { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes motion-grow { to { transform: scaleY(1); } }
@keyframes motion-timing { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Trailer timing on the current dot: <button data-deck-dot><i></i></button> ---------- */
[data-deck-dot] i { display: block; height: 2px; background: var(--sv-hairline); position: relative; overflow: hidden; }
[data-deck-dot] i::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: scaleX(0); transform-origin: left; }
[data-deck-dot].active i::after { transform: scaleX(1); }
.motion-trailer [data-deck-dot].active i::after { animation: motion-timing var(--motion-dur) linear forwards; }

/* ---------- Canvas stage ---------- */
.motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- HUD chip over a living scene (Liquid Glass thin: floating chrome only) ---------- */
.motion-hud {
  background: var(--sv-glass-tint-thin);
  -webkit-backdrop-filter: saturate(var(--sv-glass-saturate)) blur(var(--sv-glass-blur-thin));
  backdrop-filter: saturate(var(--sv-glass-saturate)) blur(var(--sv-glass-blur-thin));
  box-shadow: inset 0 0 0 1px var(--sv-glass-edge), inset 0 1px 0 var(--sv-glass-specular);
  border-radius: 20px;
  color: var(--sv-glass-ink);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .motion-hud { background: var(--sv-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .motion-hud { background: var(--sv-surface); }
}

/* ---------- Reduced motion: the settled final frame, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-m], .motion-ready .ln > [data-m] {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
  }
  [data-deck-section], [data-deck-section].active { transition: none; }
  .motion-trailer [data-deck-dot].active i::after { animation: none; transform: scaleX(1); }
}