/* ==========================================================================
   MOTION — keyframes, scroll-driven enhancement, reveal states, a11y opt-out
   ========================================================================== */

@keyframes rec-blink {
  0%, 55%  { opacity: 1; }
  56%, 100% { opacity: 0.15; }
}

@keyframes marquee-slide {
  to { translate: -100% 0; }
}

@keyframes sweep-across {
  0%   { inset-inline-start: 0;    opacity: 0; }
  12%  { opacity: 1; }
  100% { inset-inline-start: 100%; opacity: 0; }
}

@keyframes grain-drift {
  0%   { translate: 0 0; }
  25%  { translate: -3% 2%; }
  50%  { translate: 2% -3%; }
  75%  { translate: -2% -2%; }
  100% { translate: 0 0; }
}

@keyframes shot-parallax {
  from { scale: 1.24; translate: 0 -3%; }
  to   { scale: 1.02; translate: 0 3%; }
}

@keyframes shot-content {
  0%   { opacity: 0; translate: 0 4.5rem; }
  28%  { opacity: 1; translate: 0 0; }
  68%  { opacity: 1; translate: 0 0; }
  90%  { opacity: 0; translate: 0 -2.5rem; }
  100% { opacity: 0; translate: 0 -2.5rem; }
}

@keyframes hero-exit {
  to { opacity: 0; translate: 0 -14%; filter: blur(7px); }
}

.grain { animation: grain-drift 8s steps(6, end) infinite; }

/* --- Cross-document view transitions ------------------------------------ */

.site-header { view-transition-name: chrome-top; }
.hud { view-transition-name: chrome-bottom; }

@keyframes vt-out { to { opacity: 0; scale: 1.015; filter: brightness(2.2); } }
@keyframes vt-in  { from { opacity: 0; scale: 0.99; filter: brightness(0.2); } }

::view-transition-old(root) { animation: vt-out 0.28s var(--ease-in) both; }
::view-transition-new(root) { animation: vt-in 0.45s var(--ease-out) both; }

/* --- Reveal (baseline, driven by IntersectionObserver) ------------------ */

[data-js] [data-reveal] {
  opacity: 0;
  translate: 0 2.5rem;
  transition:
    opacity 0.9s var(--ease-out) var(--reveal-delay, 0s),
    translate 1s var(--ease-out) var(--reveal-delay, 0s),
    clip-path 1s var(--ease-out) var(--reveal-delay, 0s);
}

[data-js] [data-reveal='wipe'] { clip-path: inset(0 100% 0 0); translate: 0 0; }

[data-js] [data-reveal][data-in='true'] {
  opacity: 1;
  translate: 0 0;
  clip-path: inset(0 0 0 0);
}

/* --- Scroll-driven enhancement ----------------------------------------- */

@supports (animation-timeline: view()) {
  .shot { view-timeline: --shot block; }

  .shot__art {
    animation: shot-parallax linear both;
    animation-timeline: --shot;
    animation-range: cover 0% cover 100%;
    will-change: scale, translate;
  }

  .shot__inner {
    animation: shot-content linear both;
    animation-timeline: --shot;
    animation-range: cover 0% cover 100%;
  }

  .hero__content {
    animation: hero-exit linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 92svh;
  }
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-js] [data-reveal] { opacity: 1; translate: none; clip-path: none; }

  .grain,
  .scanlines,
  .cursor { display: none; }

  .hud__dot { animation: none; }

  .marquee__row { animation: none; }
  .marquee { mask-image: none; overflow-x: auto; }

  /* Collapse the cinematic pinning into a plain stacked layout. */
  .shot { block-size: auto; }
  .shot__sticky { position: static; block-size: auto; min-block-size: 70svh; }

  @supports (animation-timeline: view()) {
    .shot__art,
    .shot__inner,
    .hero__content { animation: none; }
  }
}