html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

html.js .reveal.in {
  opacity: 1;
  transform: none;
}

html.js .hero-reveal > * {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 900ms var(--ease) forwards;
}

html.js .hero-reveal > *:nth-child(1) { animation-delay: 40ms; }
html.js .hero-reveal > *:nth-child(2) { animation-delay: 160ms; }
html.js .hero-reveal > *:nth-child(3) { animation-delay: 280ms; }
html.js .hero-reveal > *:nth-child(4) { animation-delay: 400ms; }

.stage.hero-device {
  opacity: 0;
  animation: device-in 1200ms var(--ease) 280ms forwards;
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@keyframes device-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

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

.story {
  height: 240vh;
}

.story-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  height: calc(100vh - var(--nav-h) - 48px);
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  width: min(var(--max), calc(100% - 48px));
  margin-inline: auto;
}

.beat { display: none; }
.beat.on { display: block; }

.panel { display: none; }
.panel.on { display: block; width: 100%; }

@media (max-width: 900px) {
  .story { height: auto; }
  .story-sticky {
    position: static;
    height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 96px 0;
  }
  .beat, .panel { display: block; }
  .beat + .beat, .panel + .panel { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal,
  html.js .hero-reveal > *,
  .stage.hero-device {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  .marquee-track { animation: none; }
  .story { height: auto; }
  .story-sticky {
    position: static;
    height: auto;
    display: block;
  }
  .beat, .panel { display: block; margin-top: 32px; }
}