/* ===== Scroll reveal primitives ===== */
:root {
  --reveal-y: 22px;
  --reveal-dur: .7s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger > * { transition: none !important; }
}

/* Base */
.reveal {
  opacity: 0;
  transform: translate3d(0,var(--reveal-y),0);
  transition: opacity var(--reveal-dur) var(--reveal-ease),
              transform var(--reveal-dur) var(--reveal-ease);           
}
.reveal:not(.is-inview) {
  will-change: opacity, transform; 
}

.reveal.is-inview {
  opacity: 1;
  transform: translate3d(0,0,0);
  will-change: auto;
}


/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translate3d(0,12px,0);
  transition: opacity .6s var(--reveal-ease), transform .6s var(--reveal-ease);
  transition-delay: calc(var(--i, 0) * 350ms);
}
.stagger.is-inview > * {
  opacity: 1;
  transform: none;
}