/* ── Scroll reveal ───────────────────────────────────────────────
   Elements with .reveal fade + slide up when they enter the viewport
   (an IntersectionObserver toggles .in-view). .reveal-stagger cascades
   its direct children L→R / top-to-bottom. Opt-in per element. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal-stagger>* {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

.reveal-stagger.in-view>* {
  opacity: 1;
  transform: none;
}

.reveal-stagger.in-view>*:nth-child(1) {
  transition-delay: 0s;
}

.reveal-stagger.in-view>*:nth-child(2) {
  transition-delay: .08s;
}

.reveal-stagger.in-view>*:nth-child(3) {
  transition-delay: .16s;
}

.reveal-stagger.in-view>*:nth-child(4) {
  transition-delay: .24s;
}

.reveal-stagger.in-view>*:nth-child(5) {
  transition-delay: .32s;
}

.reveal-stagger.in-view>*:nth-child(6) {
  transition-delay: .40s;
}

.reveal-stagger.in-view>*:nth-child(7) {
  transition-delay: .48s;
}

.reveal-stagger.in-view>*:nth-child(8) {
  transition-delay: .56s;
}

.reveal-stagger.in-view>*:nth-child(9) {
  transition-delay: .64s;
}

.reveal-stagger.in-view>*:nth-child(10) {
  transition-delay: .72s;
}

@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-stagger>* {
    opacity: 1;
    transform: none;
    transition: none;
  }
}