/* ═══════════════════════════════════════════
   TANDHEELKUNDIG CENTRUM BORNEBROEK & DE BOER
   reveal.css — Scroll-reveal engine v3
   • Rows/grids cascade in one-by-one
   • Photos "develop" in with a soft zoom
   • Snappier timing, tuned for mobile
   Loaded LAST so it wins over older reveal rules.
═══════════════════════════════════════════ */

:root{
  /* Snappier base reveal for standalone .reveal elements */
  --reveal-dur: .72s;
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ── SEQUENTIAL CASCADE ────────────────────────────────
   Children of these containers are hidden from first paint
   (render-blocking CSS, so no flash) and revealed one-by-one
   by main.js, which sets an increasing transition-delay.     */
.about-stats > *,
#treat-track > *,
.team-grid > *,
.gallery-grid > *,
.info-blocks > *,
.footer-grid > *,
/* subpages — same one-by-one cascade */
.info-grid-3 > *,
.tip-list > *,
.cat-grid > *,
.pay-flow > *,
.pub-grid > *,
.steps > * {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity .7s var(--reveal-ease),
    transform .7s var(--reveal-ease);
  will-change: opacity, transform;
}

/* Cards get a hair of scale for a richer settle */
.team-grid > *,
.gallery-grid > *,
#treat-track > *,
.info-grid-3 > *,
.cat-grid > *,
.pub-grid > * {
  transform: translate3d(0, 40px, 0) scale(.965);
}

.about-stats > *.visible,
#treat-track > *.visible,
.team-grid > *.visible,
.gallery-grid > *.visible,
.info-blocks > *.visible,
.footer-grid > *.visible,
.info-grid-3 > *.visible,
.tip-list > *.visible,
.cat-grid > *.visible,
.pay-flow > *.visible,
.pub-grid > *.visible,
.steps > *.visible {
  opacity: 1;
  transform: none;
}

/* ── PHOTOS DEVELOP IN ─────────────────────────────────
   The image inside each card starts zoomed and eases to
   full as its card reveals — like a photo coming into focus. */
.team-avatar img,
.gallery-item img {
  transform: scale(1.14);
}
.team-card.visible .team-avatar img,
.gallery-item.visible img {
  transform: scale(1);
}

/* ── STANDALONE REVEALS — a touch smoother ─────────────── */
.reveal        { transform: translate3d(0, 40px, 0) scale(.99); }
.reveal-l      { transform: translate3d(-48px, 0, 0); }
.reveal-r      { transform: translate3d(48px, 0, 0); }
.reveal-scale  { transform: translate3d(0, 24px, 0) scale(.94); }

/* ── MOBILE: lighter movement, quicker settle ──────────── */
@media (max-width: 768px) {
  .about-stats > *,
  #treat-track > *,
  .team-grid > *,
  .gallery-grid > *,
  .info-blocks > *,
  .footer-grid > *,
  .info-grid-3 > *,
  .tip-list > *,
  .cat-grid > *,
  .pay-flow > *,
  .pub-grid > *,
  .steps > * {
    transform: translate3d(0, 22px, 0);
    transition-duration: .55s;
  }
  .team-grid > *,
  .gallery-grid > *,
  #treat-track > *,
  .info-grid-3 > *,
  .cat-grid > *,
  .pub-grid > * {
    transform: translate3d(0, 24px, 0) scale(.97);
  }
  .team-avatar img,
  .gallery-item img {
    transform: scale(1.08);
  }
}

/* ── REDUCED MOTION: no transforms, no delays ──────────── */
@media (prefers-reduced-motion: reduce) {
  .about-stats > *,
  #treat-track > *,
  .team-grid > *,
  .gallery-grid > *,
  .info-blocks > *,
  .footer-grid > *,
  .info-grid-3 > *,
  .tip-list > *,
  .cat-grid > *,
  .pay-flow > *,
  .pub-grid > *,
  .steps > *,
  .team-avatar img,
  .gallery-item img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}