@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .hero-copy > * {
    animation: motion-rise 720ms cubic-bezier(0.22, 0.8, 0.25, 1) both;
  }

  html.motion-ready .hero-copy > :nth-child(1) {
    animation-delay: 80ms;
  }
  html.motion-ready .hero-copy > :nth-child(2) {
    animation-delay: 150ms;
  }
  html.motion-ready .hero-copy > :nth-child(3) {
    animation-delay: 220ms;
  }
  html.motion-ready .hero-copy > :nth-child(4) {
    animation-delay: 290ms;
  }
  html.motion-ready .hero-copy > :nth-child(5) {
    animation-delay: 360ms;
  }

  html.motion-ready .hero-image,
  html.motion-ready .hero-visual img {
    animation: motion-image-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  html.motion-ready .motion-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 650ms ease,
      transform 650ms cubic-bezier(0.22, 0.8, 0.25, 1);
  }

  html.motion-ready .motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .card,
  .step,
  .result-card,
  .form-card {
    transition:
      transform 220ms ease,
      box-shadow 220ms ease,
      border-color 220ms ease;
  }

  .card:hover,
  .step:hover,
  .result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(10, 20, 28, 0.12);
  }

  .btn,
  button {
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      filter 180ms ease;
  }

  .btn:hover,
  button:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  }
}

@keyframes motion-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}