/* Minecare Evolution — motion
   One signature hero entrance on load, staggered reveals for card grids
   (not whole-section fades), a data count-up for the impact stats, and
   restrained micro-interactions on buttons/forms/header. Quiet, no bounce —
   matches --ease-standard / --dur-base already used for hover states. */

/* ---------------------------------------------------------------------
   Hero entrance. Base state is fully visible with no animation — a
   hidden/backgrounded tab (a real failure mode: prerendering, headless
   screenshots, a tab opened but not focused) pauses CSS animations, and
   an ungated `from { opacity: 0 }` keyframe would ship the hero blank.
   JS opts into the animated version only once it has actually run.
   --------------------------------------------------------------------- */
@keyframes me-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.js-hero-ready .hero-content > * {
  animation: me-rise-in var(--dur-entrance) var(--ease-standard) both;
}
.js-hero-ready .hero-content > *:nth-child(1) { animation-delay: 0ms; }
.js-hero-ready .hero-content > *:nth-child(2) { animation-delay: var(--stagger-step); }
.js-hero-ready .hero-content > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 2); }
.js-hero-ready .hero-content > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 3); }

/* ---------------------------------------------------------------------
   Card-grid stagger reveal — sibling stagger within a grid, not a
   whole-section fade. Base state is fully visible; JS opts a group into
   the pre-hidden state only once it has confirmed it can also reveal it
   (see js/animations.js), so no-JS/failed-JS visitors always see full
   content immediately.
   --------------------------------------------------------------------- */
.js-reveal-ready .reveal-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-standard), transform var(--dur-reveal) var(--ease-standard);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
.js-reveal-ready .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------
   Button micro-interactions — subtle lift/press, no scale-bounce.
   --------------------------------------------------------------------- */
.btn {
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }

/* ---------------------------------------------------------------------
   Header — shadow steps in once the page has scrolled past the hero,
   giving the sticky nav depth only when it's floating over content.
   --------------------------------------------------------------------- */
.me-header {
  transition: box-shadow var(--dur-base) var(--ease-standard);
}
.me-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------
   Contact form — cross-fade between the form and the thank-you state
   instead of an instant swap.
   --------------------------------------------------------------------- */
#form-wrap, #thank-you {
  transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
#form-wrap.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
}
#thank-you.is-entering {
  opacity: 0;
  transform: translateY(10px);
}

/* ---------------------------------------------------------------------
   Reduced motion — every animation/transition above (and elsewhere)
   collapses to an effectively instant state change.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-content > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js-reveal-ready .reveal-item { opacity: 1 !important; transform: none !important; }
}