/* Motion support (§11). GSAP owns every entrance and scroll animation; this
   file only (1) hides the hero's first frame so GSAP can bring it in without a
   flash, and (2) guarantees everything shows if the scripts never run. */

.js :is(.hero, .page-hero) .line__inner {
  transform: translateY(105%);
  animation: motion-failsafe-y 0.01s linear 1.6s forwards;
}

.js :is(.hero__eyebrow, .hero__lead, .hero__actions, .hero__contact, .hero__media,
        .crumbs, .page-hero__lead, .page-hero__art, .chapter-index, .tiles) {
  opacity: 0;
  animation: motion-failsafe 0.01s linear 1.6s forwards;
}

/* motion.js has taken over: it sets inline end states, so drop the failsafe */
.motion-ready :is(.hero, .page-hero) .line__inner,
.motion-ready :is(.hero__eyebrow, .hero__lead, .hero__actions, .hero__contact, .hero__media,
                  .crumbs, .page-hero__lead, .page-hero__art, .chapter-index, .tiles) {
  animation: none;
}

/* No motion (reduced motion, or GSAP missing): final state, immediately */
.motion-off :is(.hero, .page-hero) .line__inner {
  transform: none;
  animation: none;
}

.motion-off :is(.hero__eyebrow, .hero__lead, .hero__actions, .hero__contact, .hero__media,
                .crumbs, .page-hero__lead, .page-hero__art, .chapter-index, .tiles) {
  opacity: 1;
  animation: none;
}

@keyframes motion-failsafe {
  to { opacity: 1; }
}

@keyframes motion-failsafe-y {
  to { transform: none; }
}

/* Word-by-word statement: spans created by motion.js */
.manifesto__text .w {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .js :is(.hero, .page-hero) .line__inner {
    transform: none;
    animation: none;
  }

  .js :is(.hero__eyebrow, .hero__lead, .hero__actions, .hero__contact, .hero__media,
          .crumbs, .page-hero__lead, .page-hero__art, .chapter-index, .tiles) {
    opacity: 1;
    animation: none;
  }

  .art-led,
  .hero__cue-line::after {
    animation: none;
  }
}