/* ============================================================
   ANIMATIONS — hero load, scroll-reveal, reduced-motion gate
   All animations are gated on html.js; without JS, elements
   remain fully visible at all times.
   ============================================================ */

/* --- Hero load animation ----------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.js .hero-headline {
  animation: fadeUp var(--duration-slow) var(--ease-base) both;
  animation-delay: 0ms;
}

html.js .hero-sub {
  animation: fadeUp var(--duration-slow) var(--ease-base) both;
  animation-delay: 150ms;
}

html.js .hero-cta {
  animation: fadeUp var(--duration-slow) var(--ease-base) both;
  animation-delay: 300ms;
}

html.js .hero-img-col {
  animation: fadeUp var(--duration-slow) var(--ease-base) both;
  animation-delay: 200ms;
}

/* --- Scroll-reveal ----------------------------------------- */
/* Hidden state only applied when JS is present                */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-slow) var(--ease-base),
    transform var(--duration-slow) var(--ease-base);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for service cards */
.services-grid [data-reveal]:nth-child(2) { --reveal-delay: 120ms; }
.services-grid [data-reveal]:nth-child(3) { --reveal-delay: 240ms; }

/* Stagger delays for testimonials */
.testimonials-grid [data-reveal]:nth-child(2) { --reveal-delay: 120ms; }
.testimonials-grid [data-reveal]:nth-child(3) { --reveal-delay: 240ms; }

/* --- Reduced motion override ------------------------------- */
/* Strip animations and transitions — show elements instantly  */
@media (prefers-reduced-motion: reduce) {
  html.js .hero-headline,
  html.js .hero-sub,
  html.js .hero-cta,
  html.js .hero-img-col {
    animation: none;
    opacity: 1;
    transform: none;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}