/* ============================================================
   BrightFlow reveal
   Eén bron voor alle scroll-in animaties op de site.
   Stel je effect hier bij, nergens anders.

   Subtiel & gericht (juni 2026): een rustige fade-up zoals de oude
   brightflow.nl — geen blur, geen zoom. Kaarten in een raster komen één
   voor één van onderaf op (stagger); sectie-intro's faden subtiel op.

   FLITSVRIJ: de beginstaat (verborgen) hangt aan de MARKUP zelf —
   [data-animate] en de directe kinderen van [data-animate-stagger] — onder
   html.bf-reveal-ready. Een mini head-script zet die klasse vóór de eerste
   paint (met failsafe die alles alsnog toont als bf-reveal.js niet draait).
   Zonder JS: geen .bf-reveal-ready → niets verborgen. bf-reveal.js voegt
   .bf-reveal-in toe zodra een element in beeld komt (eindstaat).
   ============================================================ */

:root {
  --bf-reveal-distance: 40px;   /* duidelijke "fade-up": afstand van onderaf */
  --bf-reveal-duration: 0.7s;   /* rustige glijbeweging                      */
  --bf-reveal-stagger: 160ms;   /* increment tussen gestaggerde kaarten      */
  --bf-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); /* soepele ease-out       */
}

/* Beginstaat (verborgen) — aan de markup, niet aan de laat-toegevoegde klasse.
   Alleen translateY (zuivere fade-up): geen blur, geen scale. */
html.bf-reveal-ready [data-animate],
html.bf-reveal-ready [data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(var(--bf-reveal-distance));
  transition:
    opacity var(--bf-reveal-duration) var(--bf-reveal-ease),
    transform var(--bf-reveal-duration) var(--bf-reveal-ease);
  transition-delay: calc(var(--bf-reveal-i, 0) * var(--bf-reveal-stagger));
  will-change: opacity, transform;
}

/* Richtingvarianten — gestuurd op het data-animate-type-attribuut, zodat de
   beginstaat al vóór de paint klopt (niet via de JS-klasse). */
html.bf-reveal-ready [data-animate][data-animate-type="fadeIn"] {
  transform: none;   /* zuivere fade, geen verschuiving */
}
html.bf-reveal-ready [data-animate][data-animate-type="left"] {
  transform: translateX(calc(var(--bf-reveal-distance) * -1));
}
html.bf-reveal-ready [data-animate][data-animate-type="right"] {
  transform: translateX(var(--bf-reveal-distance));
}

/* Eindstaat (in beeld) — .bf-reveal-in komt van bf-reveal.js op het juiste
   moment (na de paint, bij scroll-in). Hogere specificiteit dan de beginstaat. */
html.bf-reveal-ready [data-animate].bf-reveal-in,
html.bf-reveal-ready [data-animate-stagger] > .bf-reveal-in {
  opacity: 1;
  transform: none;
}

/* Verminderde beweging: alles meteen zichtbaar, geen beweging. */
@media (prefers-reduced-motion: reduce) {
  html.bf-reveal-ready [data-animate],
  html.bf-reveal-ready [data-animate-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}