@media (prefers-reduced-motion: no-preference) {
  /* Base helpers */
  .nav-animate,
  .hero-animate,
  .scroll-animate,
  .scroll-animate-child,
  .scroll-animate-image,
  .scroll-animate-cta {
    will-change: opacity, transform;
  }

  /* Navigation on page load (fade down) */
  .nav-animate {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }

  .nav-animate.nav-animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hero headline / subheadline on page load (fade up, staggered) */
  .hero-animate {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }

  .hero-animate.hero-animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Sections on scroll (container fade up) */
  .scroll-animate {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }

  .scroll-animate.scroll-animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Child elements (cards, tiles, list items) */
  .scroll-animate-child {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 450ms ease-out, transform 450ms ease-out;
  }

  .scroll-animate-child.scroll-animate-child-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Images fade slightly slower */
  .scroll-animate-image {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 550ms ease-out, transform 550ms ease-out;
  }

  .scroll-animate-image.scroll-animate-image-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* CTA buttons fade in last */
  .scroll-animate-cta {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }

  .scroll-animate-cta.scroll-animate-cta-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger helpers (up to 10 items) */
  .delay-0 { transition-delay: 0ms; }
  .delay-1 { transition-delay: 80ms; }
  .delay-2 { transition-delay: 160ms; }
  .delay-3 { transition-delay: 240ms; }
  .delay-4 { transition-delay: 320ms; }
  .delay-5 { transition-delay: 400ms; }
  .delay-6 { transition-delay: 480ms; }
  .delay-7 { transition-delay: 560ms; }
  .delay-8 { transition-delay: 640ms; }
  .delay-9 { transition-delay: 720ms; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-animate,
  .hero-animate,
  .scroll-animate,
  .scroll-animate-child,
  .scroll-animate-image,
  .scroll-animate-cta {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}