/*
 * Motion contract (docs/design/VEGAS-REDESIGN.md §4.3–§4.6, §8.1.2). Loaded last.
 * - Hidden-until-revealed exists ONLY under html.js-motion (set by vg-boot.js before first paint).
 * - Only opacity and transform are animated.
 * - Modes on <html>: js-motion (full|lite) · vg-lite · vg-still (lights off or OS reduced) ·
 *   vg-lights-off (visitor switched lights off) · vg-force-motion · vg-ready · vg-tab-hidden · vg-failsafe.
 * Sign ignition and bulb chase keyframes live in vg-marquee.css; this file only overrides them per mode.
 */

/* ---------- Reveal contract (reveal.js adds .is-in via IntersectionObserver) ---------- */

html.js-motion [data-vg-reveal]:not(.is-in),
html.js-motion [data-vg-stagger]:not(.is-in) > * {
  opacity: 0;
  transform: translateY(16px);
}

html.js-motion [data-vg-reveal],
html.js-motion [data-vg-stagger] > * {
  transition: opacity var(--vg-d-reveal) var(--vg-ease-out), transform var(--vg-d-reveal) var(--vg-ease-out);
}

/* Stagger 70 ms per child, capped at the 8th (§4.1 vg-reveal). */
html.js-motion [data-vg-stagger] > :nth-child(2) { transition-delay: 70ms; }
html.js-motion [data-vg-stagger] > :nth-child(3) { transition-delay: 140ms; }
html.js-motion [data-vg-stagger] > :nth-child(4) { transition-delay: 210ms; }
html.js-motion [data-vg-stagger] > :nth-child(5) { transition-delay: 280ms; }
html.js-motion [data-vg-stagger] > :nth-child(6) { transition-delay: 350ms; }
html.js-motion [data-vg-stagger] > :nth-child(7) { transition-delay: 420ms; }
html.js-motion [data-vg-stagger] > :nth-child(n+8) { transition-delay: 490ms; }

/* Lite: 240 ms (token) and no stagger. */
html.js-motion.vg-lite [data-vg-stagger] > * {
  transition-delay: 0ms;
}

/* ---------- Failsafe (§8.1.2): nothing stays hidden if main.js never starts ---------- */

html.js-motion:not(.vg-ready) [data-vg-reveal]:not(.is-in),
html.js-motion:not(.vg-ready) [data-vg-stagger]:not(.is-in) > * {
  animation: vg-failsafe 1ms linear 2500ms forwards;
}

html.vg-failsafe [data-vg-reveal],
html.vg-failsafe [data-vg-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Loop pausing (§4.6): off-screen loops and hidden tabs ---------- */

[data-vg-loop].is-paused,
[data-vg-loop].is-paused::before,
[data-vg-loop].is-paused::after,
[data-vg-loop].is-paused *,
[data-vg-loop].is-paused *::before,
[data-vg-loop].is-paused *::after,
html.vg-tab-hidden *,
html.vg-tab-hidden *::before,
html.vg-tab-hidden *::after {
  animation-play-state: paused !important;
}

/* ---------- Lite (§4.5): one 300 ms fade, no faulty letter, loops rest lit ---------- */

html.js-motion.vg-lite [data-vg-ignite] .vg-neon__l::before,
html.js-motion.vg-lite [data-vg-ignite] [data-vg-faulty]::before {
  animation: vg-fade-in 300ms linear both;
}

/* Hot switch to lite by the frame probe (vg-slow): halos rest lit instead of re-running the fade. */
html.js-motion.vg-slow [data-vg-ignite] .vg-neon__l::before,
html.js-motion.vg-slow [data-vg-ignite] [data-vg-faulty]::before {
  animation: none;
  opacity: var(--halo, 1);
}

html.js-motion.vg-lite .vg-bulbs > i,
html.js-motion.vg-lite .vg-arrow > svg,
html.js-motion.vg-lite .vg-star {
  animation: none;
  opacity: 1;
}

/* ---------- Still (§4.5: lights off or OS reduced motion): nothing moves ---------- */

html.vg-still *,
html.vg-still *::before,
html.vg-still *::after {
  animation: none !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

/* Lights switched off by the visitor: bulbs, arrow and stars rest at .75 (halos at .5 via --halo). */
html.vg-lights-off .vg-bulbs > i,
html.vg-lights-off .vg-arrow > svg,
html.vg-lights-off .vg-star {
  opacity: .75;
}

/* ---------- OS reduced motion safety net (§4.5) ---------- */

@media (prefers-reduced-motion: reduce) {
  html:not(.vg-force-motion) *,
  html:not(.vg-force-motion) *::before,
  html:not(.vg-force-motion) *::after {
    animation: none !important;
    transition-duration: 0ms !important;
  }

  /* Lights forced on over an OS reduce preference: still no faulty flicker and no chase loops. */
  html.js-motion.vg-force-motion:not(.vg-lite) [data-vg-ignite] [data-vg-faulty]::before {
    animation: vg-ignite-letter var(--vg-d-letter) linear calc(300ms + var(--i, 0) * 45ms) forwards;
  }

  html.js-motion.vg-force-motion:not(.vg-lite) .vg-bulbs > i {
    animation: vg-power 200ms ease-out var(--pd, 0ms) forwards;
  }

  html.js-motion.vg-force-motion .vg-arrow > svg {
    animation: none;
    opacity: 1;
  }
}

/* ---------- Generic keyframes ---------- */

@keyframes vg-failsafe {
  to { opacity: 1; transform: none; }
}

@keyframes vg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vg-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes vg-press {
  0%, 100% { transform: none; }
  50% { transform: scale(.97); }
}