@media (prefers-reduced-motion: no-preference) {
  .fade-in {
    animation: fade-in 420ms ease both;
  }

  .hero-label {
    animation: fade-up 560ms ease 60ms both;
  }

  .hero-title {
    animation: fade-up 640ms ease 140ms both;
  }

  .hero-copy {
    animation: fade-up 640ms ease 240ms both;
  }

  .hero-actions {
    animation: fade-up 640ms ease 340ms both;
  }

  .hero-visual {
    animation: image-fade 800ms ease 300ms both;
  }

  .hero-card-rating {
    animation: card-rise 560ms ease 640ms both;
  }

  .hero-card-health {
    animation: card-rise 560ms ease 760ms both;
  }

  .hero-card-kittens {
    animation: card-rise 560ms ease 880ms both;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-up {
    from {
      opacity: 0;
      transform: translateY(18px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes image-fade {
    from {
      opacity: 0;
      transform: scale(0.985);
    }

    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes card-rise {
    from {
      opacity: 0;
      transform: translateY(14px) scale(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-label,
  .hero-title,
  .hero-copy,
  .hero-actions,
  .hero-visual,
  .hero-card {
    opacity: 1;
  }
}