.reveal {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s ease;
}

@keyframes word-rise {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-parallax {
  from {
    transform: translate3d(0, -18px, 0) scale(1.05);
  }

  to {
    transform: translate3d(0, 72px, 0) scale(1.05);
  }
}

@supports (animation-timeline: scroll()) {
  .hero-media {
    animation: hero-parallax 1ms linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90vh;
    will-change: transform;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .js .legend-mark,
  .js .legend-copy {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  .hero-media,
  .word-reveal span,
  .btn,
  .btn-primary::after {
    transform: none !important;
    will-change: auto !important;
  }

  .word-reveal span {
    opacity: 1;
  }
}