/* =========================================================
   Smooth scroll & site-wide reveal
   - Native smooth scroll voor in-page anchors
   - scroll-padding zodat ankerlinks niet onder de sticky header
     verdwijnen
   - Pre-state voor secties/elementen die door scroll.js worden
     onthuld (fade + lichte translate). De JS voegt 'is-revealed'
     toe zodra het element in beeld komt.
========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: clamp(72px, 8vw, 112px);
}

/* =========================================================
   Lenis smooth scroll — vereiste base styles
========================================================= */

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis-smooth {
  /* Wanneer Lenis actief is, schakelt CSS smooth-scroll uit zodat
     ze elkaar niet tegenwerken. */
  scroll-behavior: auto;
}

html.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

html.lenis-stopped {
  overflow: hidden;
}

html.lenis-scrolling iframe {
  pointer-events: none;
}

/* ---------- Reveal pre-state (zonder JS: gewoon zichtbaar) ---------- */

/* Premium reveal — fade + lichte translate met soepele easing.
   GEEN will-change of backface-visibility op de base state:
   anders krijgt elk reveal-element een eigen GPU-layer vanaf
   page load, ook voordat het in beeld komt. Dat stapelt enorm
   op lange pagina's. JS zet will-change vlak vóór de animatie
   en haalt 'm na transitionend weer weg (zie .is-reveal-arm
   en .is-reveal-done). */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity   var(--dur-reveal, .6s) var(--ease-premium, cubic-bezier(.16,1,.3,1)),
    transform var(--dur-reveal, .6s) var(--ease-premium, cubic-bezier(.16,1,.3,1));
  transition-delay: calc(var(--reveal-i, 0) * 50ms);
}

/* Vlak vóór de reveal-animatie hint geven aan de compositor.
   Wordt door scroll.js gezet zodra het element ge-observeerd
   wordt (rootMargin +20%, dus net buiten viewport). */
.js [data-reveal].is-reveal-arm {
  will-change: opacity, transform;
}

.js [data-reveal="fade"] {
  transform: none;
}

.js [data-reveal="fade-right"] {
  transform: translate3d(-16px, 0, 0);
}

.js [data-reveal="fade-left"] {
  transform: translate3d(16px, 0, 0);
}

/* Onthuld */
.js [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Geheugen vrijgeven na reveal — JS zet deze klasse zodra de
   transitie klaar is (transitionend), zodat de browser de GPU-
   layer kan opruimen. Voorkomt sluipende GPU-druk op lange pagina's. */
.js [data-reveal].is-reveal-done {
  will-change: auto;
}

/* Cap de cumulatieve stagger — voorkomt dat het 6e+ item nog 300ms wacht */
.js [data-reveal][style*="--reveal-i"].is-revealed {
  transition-delay: calc(min(var(--reveal-i, 0), 5) * 50ms);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}