.button,
.text-link,
.desktop-nav a,
.mobile-menu a,
.menu-toggle span,
.faq summary::after {
  transition-duration: var(--motion-duration-fast);
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-timing-function: var(--motion-ease-out);
}

.hero-media,
.hero-copy,
.hero-light {
  will-change: transform, opacity;
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }

  .hero-media,
  .hero-copy,
  .hero-light {
    will-change: auto;
  }
}