/* ===== Scroll Reveal: base ===== */
:root {
  --reveal-duration: 600ms;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
  --reveal-delay: 0ms;          /* can override per element */
  --reveal-translate: 16px;     /* default offset for slide/fade-up */
  --reveal-scale: .96;          /* default for zoom-in */
  --reveal-stagger-step: 90ms;  /* per-child increment when using data-stagger */
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
}

/* Start hidden (no layout jump) */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-translate), 0) scale(1);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
  will-change: opacity, transform;
}

/* When visible */
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

/* ===== Variants (set with data-animate="...") ===== */

/* fade-in (no movement) */
.reveal[data-animate="fade-in"] {
  transform: none;
}

/* fade-up (default) */
.reveal[data-animate="fade-up"] {
  --reveal-translate: 18px;
}

/* slide-left / slide-right */
.reveal[data-animate="slide-left"]  { transform: translate3d(var(--reveal-translate),0,0) }
.reveal[data-animate="slide-right"] { transform: translate3d(calc(var(--reveal-translate) * -1),0,0) }

/* zoom-in */
.reveal[data-animate="zoom-in"] {
  transform: scale(var(--reveal-scale));
}

/* blur-in (optional flair) */
.reveal[data-animate="blur-in"] {
  filter: blur(6px);
}
.reveal.is-visible[data-animate="blur-in"] {
  filter: blur(0);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    filter var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
}

/* ===== Stagger: add data-stagger to a parent ===== */
[data-stagger] > .reveal {
  --_stagger-index: 0; /* JS sets this */
  transition-delay: calc(var(--reveal-delay) + var(--_stagger-index) * var(--reveal-stagger-step));
}

/* Handy speed tokens (opt-in) */
.reveal[data-speed="fast"] { --reveal-duration: 380ms; }
.reveal[data-speed="slow"] { --reveal-duration: 900ms; }