/* ==========================================================================
   animations.css — keyframes, pre-JS reveal states, reduced motion
   The .motion class is set in <head> only when the visitor allows motion;
   JS removes it if GSAP fails to load, so content is never stuck hidden.
   ========================================================================== */

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

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

@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  55%,
  100% {
    transform: translateY(100%);
  }
}

@keyframes scan {
  0% {
    transform: translateY(-110%);
  }
  100% {
    transform: translateY(340%);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Marquee runs only while on screen (class toggled by IntersectionObserver) */
.marquee__track {
  animation: marquee 48s linear infinite;
  animation-play-state: paused;
}

.marquee.is-inview .marquee__track {
  animation-play-state: running;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ---------- Pre-JS hidden states (prevent flash before GSAP runs) ---------- */
.motion [data-reveal],
.motion [data-split] {
  opacity: 0;
}

.motion .hero__line > span {
  transform: translateY(110%);
}

.motion .portrait__media {
  clip-path: inset(100% 0 0 0);
}

.motion .portrait__frame,
.motion .portrait__mark {
  opacity: 0;
}

/* Word masks produced by the split helper */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block-end: 0.08em;
  margin-block-end: -0.08em;
}

.split-word__inner {
  display: inline-block;
}

/* Curtain cover state when arriving from a transition */
.curtain.is-cover {
  transform: translateY(0);
}

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

  .marquee__track {
    animation: none;
    flex-wrap: wrap;
    inline-size: auto;
  }

  .marquee__group[aria-hidden="true"] {
    display: none;
  }

  .marquee__group {
    flex-wrap: wrap;
    row-gap: var(--s-2);
  }

  .scroll-cue__line::after,
  .hero__role::before {
    animation: none;
  }

  .scroll-cue__line::after {
    transform: none;
  }

  .card__inner:hover .card__screen::after {
    animation: none;
    opacity: 0;
  }

  .preloader__mark path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .mobile-menu,
  .mobile-menu.is-open,
  .demo-modal,
  .mobile-menu__link span,
  .curtain.is-in,
  .curtain.is-leaving {
    transition-duration: 0.01s;
  }
}