/* ===== Base + tokens ===== */
:root{
  --fx-duration: 700ms;
  --fx-delay: 0ms;
  --fx-ease: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce){
  [data-effect]{
    animation: none !important;
    transition: none !important;
  }
}

/* Start state (before in-view) */
[data-effect]{
  will-change: transform, opacity, filter;
  opacity: 0;
  transform: none;
  transition:
    opacity var(--fx-duration,700ms) var(--fx-ease,.22,.61,.36,1) var(--fx-delay,0ms),
    transform var(--fx-duration,700ms) var(--fx-ease,.22,.61,.36,1) var(--fx-delay,0ms),
    filter var(--fx-duration,700ms) var(--fx-ease,.22,.61,.36,1) var(--fx-delay,0ms);
}

/* When in view */
[data-effect].is-inview{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1) rotate(0);
  filter: blur(0) saturate(1);
}

/* ===== Effects ===== */

/* slide-up */
[data-effect="slide-up"]{ transform: translate3d(0,24px,0); }
[data-effect="slide-up"].is-inview{ transform: translate3d(0,0,0); }

/* slide-down */
[data-effect="slide-down"]{ transform: translate3d(0,-24px,0); }

/* slide-left / slide-right */
[data-effect="slide-left"]{ transform: translate3d(24px,0,0); }
[data-effect="slide-right"]{ transform: translate3d(-24px,0,0); }

/* fade-in (just opacity) */
[data-effect="fade-in"]{ opacity: 0; }

/* zoom-in */
[data-effect="zoom-in"]{ transform: scale(.92); }

/* blur-in */
[data-effect="blur-in"]{ filter: blur(8px); }

/* tilt-in (subtle rotate) */
[data-effect="tilt-in"]{ transform: translate3d(0,16px,0) rotate(-1.5deg) scale(.98); }

/* You can combine: e.g. slide-up + blur-in via a compound effect */
[data-effect="slide-up-blur"]{
  transform: translate3d(0,22px,0);
  filter: blur(10px);
}

/* ===== Optional: per-effect custom defaults ===== */
[data-effect][data-fast]{
  --fx-duration: 450ms;
}
[data-effect][data-slow]{
  --fx-duration: 1000ms;
}

/* ===== Simple stagger utility (applied by tiny JS) ===== */
[data-stagger] > *[data-effect]{
  --fx-delay: 0ms; /* JS will set incremental delays */
}