/* ============================================================
   MOTION — reveals, wipes, and the reduced-motion contract
   Depends on: tokens.css
   Loaded LAST so the reduced-motion overrides win the cascade.

   Only transform, opacity, clip-path and filter are ever animated.
   Never width/height/top/left/margin/padding — those force layout.
   ============================================================ */

/* ============================================================
   REVEAL — progressive enhancement.

   The start state is scoped to .js, which index.html sets in an
   inline script before first paint. Without JS the content is simply
   visible; the classes only ever animate content that is already
   in the document, never gate its existence.
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translate3d(0,var(--reveal-distance),0);
}
.js .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity var(--duration-reveal) var(--ease-out),
             transform var(--duration-reveal) var(--ease-out);
  transition-delay:var(--d,0ms);   /* --d is set per element by js/motion.js */
}

/* Cinematic masked wipe, reserved for headline blocks. */
.js .wipe{clip-path:inset(0 100% 0 0)}
.js .wipe.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path var(--duration-slow) var(--ease-out),
             opacity var(--duration-reveal) var(--ease-out),
             transform var(--duration-reveal) var(--ease-out);
  transition-delay:var(--d,0ms);
}

/* ============================================================
   REDUCED MOTION

   Everything scroll-driven becomes static and every piece of content
   stays visible and readable. The horizontal pin-scroll collapses to
   a plain vertical stack — the !important flags are required to beat
   the sticky/flex rules set in sections.css.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

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

  /* content must never be left hidden by an animation that no longer runs */
  .js .reveal{opacity:1!important;transform:none!important}
  .js .wipe{clip-path:none!important}

  .marquee__track{animation:none!important;transform:none!important}
  .marquee{mask-image:none;-webkit-mask-image:none;overflow-x:auto}

  .hero__plane,.band img{transform:none!important}
  .hero__cue span{animation:none}

  /* pin-scroll -> vertical stack */
  .pinwrap{height:auto!important}
  .pinstage{position:static!important;height:auto!important;overflow:visible!important}
  .pintrack{
    display:grid!important;grid-template-columns:1fr!important;
    width:auto!important;transform:none!important;
  }
  .scene{width:auto!important}
  .pinbar{display:none!important}
}