/* ==========================================================================
   Reveal — inhoud schuift zacht in beeld bij scrollen
   --------------------------------------------------------------------------
   <p class="reveal" data-delay="1">…</p>

   Standaard zichtbaar. De begintoestand geldt alleen als assets/js/reveal.js
   html.js-reveal heeft gezet, alleen op scherm en alleen zonder
   reduced-motion. Blijft het script weg, dan blijft alles staan.
   data-delay 1–4: stapsgewijs later binnenkomen (1–4 x --stagger).
   ========================================================================== */

@media screen and (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    transition:
      opacity var(--dur-5) var(--ease-out),
      transform var(--dur-5) var(--ease-out);
  }

  .js-reveal .reveal:not(.is-in) {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
  }

  /* Vertraging alleen bij binnenkomen, niet als begintoestand. */
  .js-reveal .reveal.is-in[data-delay="1"] { transition-delay: var(--stagger); }
  .js-reveal .reveal.is-in[data-delay="2"] { transition-delay: calc(2 * var(--stagger)); }
  .js-reveal .reveal.is-in[data-delay="3"] { transition-delay: calc(3 * var(--stagger)); }
  .js-reveal .reveal.is-in[data-delay="4"] { transition-delay: calc(4 * var(--stagger)); }
}