/* motion.css — scroll reveals, the hero entrance, and reduced motion. */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out) calc(var(--d, 0) * 90ms), transform 800ms var(--ease-out) calc(var(--d, 0) * 90ms);
}

/* hero entrance: waits for the gate, then letters punch up one by one */
.hero__copy > * {
  opacity: 0;
}

.is-entered .hero__copy > * {
  animation: rise 700ms var(--ease-out) both;
  animation-delay: calc(300ms + var(--o, 0) * 120ms);
}

.is-entered .hero__copy .pill {
  --o: 0;
}
.is-entered .hero__names {
  --o: 1;
}
.is-entered .hero__fest {
  --o: 5;
}
.is-entered .hero__when {
  --o: 6;
}
.is-entered .hero__tag {
  --o: 7;
}

.hero__name .ch {
  opacity: 0;
  transform: translateY(0.6em) rotate(8deg);
}

.is-entered .hero__name .ch {
  animation: ch-in 700ms var(--ease-spring) both;
  animation-delay: calc(420ms + var(--c) * 55ms);
}

@keyframes ch-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.hero__amp {
  opacity: 0;
}

.is-entered .hero__amp {
  animation: amp-in 900ms var(--ease-spring) 900ms both;
}

@keyframes amp-in {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-40deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- reduced motion: final frames, every interaction kept ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .marquee__track {
    animation: none !important;
  }

  [data-reveal],
  .hero__copy > *,
  .hero__name .ch,
  .hero__amp {
    opacity: 1;
    transform: none;
  }
}