@media (prefers-reduced-motion: reduce) {
  [data-anim]{ transition:none!important; animation:none!important; }
}

/* Globals */
:root{
  --anim-duration:.8s;
  --anim-delay:0s;
  --anim-ease:cubic-bezier(.22,.61,.36,1);
  --anim-distance:24px;
  --anim-scale:.94;
}

/* Base (no transitions yet) */
[data-anim]{
  opacity:0;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transform-style:preserve-3d;
  contain:layout paint style;   /* reduce reflow jank */
  will-change:transform,opacity;
}

/* Enable transitions only after prep */
.is-prep[data-anim]{
  transition:
    transform var(--anim-duration) var(--anim-ease) var(--anim-delay),
    opacity  var(--anim-duration) var(--anim-ease) var(--anim-delay);
}

/* Variants = initial states */
[data-anim="fade-up"]    { transform:translate3d(0, var(--anim-distance), 0); }
[data-anim="fade-down"]  { transform:translate3d(0, calc(var(--anim-distance)*-1), 0); }
[data-anim="fade-left"]  { transform:translate3d(var(--anim-distance), 0, 0); }
[data-anim="fade-right"] { transform:translate3d(calc(var(--anim-distance)*-1), 0, 0); }
[data-anim="zoom-in"]    { transform:scale(var(--anim-scale)); }

/* Final */
.is-inview[data-anim]{ opacity:1; transform:none; }

/* Stagger container */
[data-anim-group] > *[data-anim]{ --anim-delay:0s; }

/* Helpers */
.anim-slow{ --anim-duration:1.2s; } .anim-fast{ --anim-duration:.5s; }
.anim-delay1{ --anim-delay:.15s; } .anim-delay2{ --anim-delay:.3s; } .anim-delay3{ --anim-delay:.45s; }