/* Reveal base state */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  /* delay is controlled via --delay (defaults to 0ms) */
  transition: transform .6s ease var(--delay, 0ms),
              opacity   .6s ease var(--delay, 0ms);
  will-change: transform, opacity;
}

/* Slide helpers */
.slide-up    { transform: translateY(18px); }
.slide-down  { transform: translateY(-18px); }
.slide-left  { transform: translateX(24px); }
.slide-right { transform: translateX(-24px); }

/* Visible state */
.reveal.is-visible{
  opacity: 1;
  transform: translate(0,0);
}

/* Staggered groups */
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(16px);
  transition: transform .6s ease var(--delay, 0ms),
              opacity   .6s ease var(--delay, 0ms);
}

/* When the group is visible:
   - children inherit --delay from the group (or can override individually)
   - plus a per-child increment (--stagger-step, default 60ms) */
.reveal-stagger.is-visible > *{
  opacity: 1;
  transform: translate(0,0);
  transition-delay: calc(var(--delay, 0ms) + var(--stagger-step, 60ms) * var(--i, 0));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-stagger > *{
    transition: none !important;
    transition-delay: 0ms !important;
    opacity: 1 !important;
    transform: none !important;
  }
}