/* ==========================================================================
   Motion system — subtle, performant (transform + opacity only)
   Respects prefers-reduced-motion (see base reset in style.css)
   ========================================================================== */

[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Staggered groups: children get incremental delay via inline style set by JS */
[data-reveal-group] [data-reveal]{ transition-delay: var(--reveal-delay, 0ms); }

[data-reveal="fade"]{ transform: none; }
[data-reveal="left"]{ transform: translateX(-18px); }
[data-reveal="left"].is-visible{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(18px); }
[data-reveal="right"].is-visible{ transform: translateX(0); }
[data-reveal="scale"]{ transform: scale(0.96); }
[data-reveal="scale"].is-visible{ transform: scale(1); }

/* Hero entrance (on load, not scroll) */
.hero [data-hero-in]{
  opacity: 0;
  transform: translateY(16px);
  animation: hero-in 700ms var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}
@keyframes hero-in{
  to{ opacity: 1; transform: translateY(0); }
}

/* Counter number tick-in */
.stat-card b{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .hero [data-hero-in]{ opacity: 1 !important; transform: none !important; animation: none !important; }
}