/* ════════════════════════════════════════════════════════════════════
   SHARED SCROLL-REVEAL — elements fade-in + rise slightly when they
   enter the viewport. The .reveal-in class is added by partials/
   scroll-reveal.js so no-JS users see content immediately. The
   IntersectionObserver flips .is-revealed when each element scrolls
   into view. Stagger delays on sibling cards give a cascade rather
   than a wall.
   ════════════════════════════════════════════════════════════════════ */

.reveal-in {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal-in.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger sibling cards in grids — works on both homepage (.features-grid,
   .steps-grid) and pricing (.plans-grid, .topup-grid). */
.features-grid > .reveal-in:nth-child(1),
.steps-grid    > .reveal-in:nth-child(1),
.plans-grid    > .reveal-in:nth-child(1),
.topup-grid    > .reveal-in:nth-child(1) { transition-delay: 0ms; }
.features-grid > .reveal-in:nth-child(2),
.steps-grid    > .reveal-in:nth-child(2),
.plans-grid    > .reveal-in:nth-child(2),
.topup-grid    > .reveal-in:nth-child(2) { transition-delay: 80ms; }
.features-grid > .reveal-in:nth-child(3),
.steps-grid    > .reveal-in:nth-child(3),
.plans-grid    > .reveal-in:nth-child(3),
.topup-grid    > .reveal-in:nth-child(3) { transition-delay: 160ms; }
.features-grid > .reveal-in:nth-child(4),
.steps-grid    > .reveal-in:nth-child(4),
.plans-grid    > .reveal-in:nth-child(4) { transition-delay: 240ms; }
.features-grid > .reveal-in:nth-child(5) { transition-delay: 320ms; }
.features-grid > .reveal-in:nth-child(6) { transition-delay: 400ms; }

/* Capabilities cards animate as a single block — no per-child stagger */
#capabilities .features-grid > .reveal-in { transition-delay: 0ms !important; }