/* =========================================================================
   De Druppel — motion.css
   Begintoestanden voor de scroll-animaties uit main.js. Alles staat onder
   html.js:not(.reduce-motion): zonder JavaScript, bij reduced-motion, of als
   GSAP niet op tijd laadt (vangnet in de head zet dan .reduce-motion) is alle
   content gewoon zichtbaar. Alleen transform-eigenschappen en opacity.
   Geen smooth-scroll: het scrollen zelf blijft van de browser.
   ========================================================================= */

/* --- Reveals ---------------------------------------------------------------
   GSAP animeert naar de natuurlijke stand, zet daarna .is-in en ruimt zijn
   inline-stijlen op, zodat hover-effecten van de componenten weer werken. */
html.js:not(.reduce-motion) [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--dd-space-6)); }
html.js:not(.reduce-motion) [data-reveal][data-anim="schaal"]:not(.is-in) { transform: translateY(var(--dd-space-5)) scale(.92); }
html.js:not(.reduce-motion) [data-reveal][data-anim="links"]:not(.is-in) { transform: translateX(calc(-1 * var(--dd-space-6))); }
html.js:not(.reduce-motion) [data-reveal][data-anim="rechts"]:not(.is-in) { transform: translateX(var(--dd-space-6)); }
html.js:not(.reduce-motion) [data-reveal][data-anim="kantel"]:not(.is-in) { transform: translateY(var(--dd-space-7)) rotate(-3deg); }
html.js:not(.reduce-motion) [data-reveal][data-anim="pop"]:not(.is-in) { transform: scale(.7); }
html.js:not(.reduce-motion) [data-reveal][data-anim="flow"]:not(.is-in) { transform: translateX(var(--flow-x, var(--dd-space-6))); }

/* --- Koppen: woord voor woord omhoog uit een masker ------------------------
   main.js splitst de h2's direct bij het laden. Tot die tijd zijn ze
   onzichtbaar, zodat er niets flitst. De negatieve marge houdt de regelhoogte
   exact gelijk aan platte tekst (geen layout shift). */
.kop-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .08em .16em; margin-block: -.08em -.16em; }
.kop-w__i { display: inline-block; }
html.js:not(.reduce-motion) main h2:not(.card__kop):not(.h3):not(.lightbox__titel):not([data-gesplitst]) { opacity: 0; }
html.js:not(.reduce-motion) [data-gesplitst]:not(.is-in) .kop-w__i { transform: translateY(115%); }

/* --- Eyebrow-lijn tekent zich ------------------------------------------------ */
html.js:not(.reduce-motion) .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform var(--dd-dur-lang) var(--dd-ease-out) var(--dd-dur-fast); }
html.js:not(.reduce-motion) .eyebrow.is-getekend::before { transform: scaleX(1); }
html.js:not(.reduce-motion) .hero .eyebrow::before { animation: lijn-in var(--dd-dur-lang) var(--dd-ease-out) var(--dd-dur-base) both; }
@keyframes lijn-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Sterren springen een voor een aan --------------------------------------- */
html.js:not(.reduce-motion) [data-reveal] .review__sterren .icon {
  transform: scale(0);
  transition: transform var(--dd-dur-slow) var(--dd-ease-veer);
}
html.js:not(.reduce-motion) [data-reveal].is-komend .review__sterren .icon,
html.js:not(.reduce-motion) [data-reveal].is-in .review__sterren .icon { transform: scale(1); }
[data-reveal] .review__sterren .icon:nth-child(1) { transition-delay: calc(var(--dd-dur-base) + var(--dd-stagger) * 1); }
[data-reveal] .review__sterren .icon:nth-child(2) { transition-delay: calc(var(--dd-dur-base) + var(--dd-stagger) * 2); }
[data-reveal] .review__sterren .icon:nth-child(3) { transition-delay: calc(var(--dd-dur-base) + var(--dd-stagger) * 3); }
[data-reveal] .review__sterren .icon:nth-child(4) { transition-delay: calc(var(--dd-dur-base) + var(--dd-stagger) * 4); }
[data-reveal] .review__sterren .icon:nth-child(5) { transition-delay: calc(var(--dd-dur-base) + var(--dd-stagger) * 5); }

/* --- Parallax binnen fotokaders ----------------------------------------------
   GSAP zet --py tijdens het scrollen (direct gekoppeld, geen naloop). De
   aparte translate/scale-eigenschappen botsen niet met de hover-zoom (transform). */
html.js:not(.reduce-motion) [data-parallax] img { translate: 0 var(--py, 0px); scale: 1.12; }
/* --- Voortgangslijn onder de header ------------------------------------------ */
.header__voortgang {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--dd-brass-500); transform-origin: left; transform: scaleX(0);
  opacity: 0; pointer-events: none;
}
html.motion-klaar:not(.reduce-motion) .header__voortgang { opacity: 1; }