/* motion.css — scroll reveals, off-screen pausing, and the reduced-motion contract.
 *
 * Same contract as pratham-nimantran (see the long-scroll layer notes there): a hidden
 * element waits IN PLACE at opacity 0; the rise is a one-shot keyframe with fill-mode
 * `backwards`, so nothing stays composited after it lands and no resting offset pushes
 * one block into the next.
 */

[data-reveal] {
  opacity: 0;
}

[data-reveal].is-in {
  opacity: 1;
  animation: reveal-rise 950ms var(--ease-out) backwards;
  animation-delay: calc(var(--d, 0) * var(--stagger));
}

@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: none; }
}

/* js/ambient.js marks sections far from the viewport .is-away */
.is-away .marquee__track,
.is-away .gate__dot,
.is-away .knot__end::before {
  animation-play-state: paused;
}

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

  [data-reveal],
  [data-reveal].is-in {
    opacity: 1;
    animation: none;
  }

  .hero.is-in .hero__name .ch,
  .hero.is-in .hero__amp,
  .hero.is-in .hero__tagline,
  .hero.is-in .hero__date,
  .hero.is-in .hero__invocation,
  .hero.is-in .hero__kicker,
  .hero.is-drawing .hero__art img,
  .marquee__track,
  .gate__dot,
  .knot__end::before,
  .cd__num.is-tick,
  .rsvp.is-in {
    animation: none !important;
  }

  .hero.is-drawing .hero__art img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .gate {
    transition-duration: 300ms;
  }
}