/* ==========================================================================
   animations.css — onthullen bij scrollen, woord-voor-woord koppen,
   sectie-overgangen en 3D-kantelingen.
   - Alleen transform/opacity/filter → geen layout shift (CLS 0).
   - Werkt alleen als <html class="js"> (gezet in <head>) én beweging is toegestaan.
   - Zonder JS of met "minder beweging" is alles direct zichtbaar.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Basis: tekst en blokken schuiven zacht omhoog */
	.js body:not(.geen-animaties) [data-reveal]:not([data-reveal="woorden"]) {
		opacity: 0; transform: translateY(26px);
		transition: opacity .8s var(--ease), transform .9s var(--ease);
		transition-delay: calc(var(--vertraging, 0) * 1ms);
	}
	/* Kaarten: komen in 3D naar voren (lichte kanteling + schaal) */
	.js body:not(.geen-animaties) [data-reveal="kaart"] {
		transform: perspective(1000px) translateY(48px) rotateX(14deg) scale(.96);
		transform-origin: 50% 100%;
		transition: opacity .9s var(--ease), transform 1.1s var(--ease);
	}
	.js body:not(.geen-animaties) [data-reveal].is-zichtbaar { opacity: 1; transform: none; }

	/* Koppen: woord voor woord met blur-in */
	.js body:not(.geen-animaties) [data-reveal="woorden"] .woord {
		display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(.35em);
		transition: opacity .7s var(--ease), filter .7s var(--ease), transform .8s var(--ease);
		transition-delay: calc(var(--w, 0) * 55ms);
	}
	.js body:not(.geen-animaties) [data-reveal="woorden"].is-zichtbaar .woord { opacity: 1; filter: none; transform: none; }
	/* LCP en Speed Index: alles in het eerste scherm (hero en paginabanner) is meteen zichtbaar.
	   De hero-kop beweegt alleen nog licht omhoog (transform), zonder onzichtbare of wazige start:
	   een element met opacity 0 telt niet mee voor LCP, waardoor anders de cookiebanner het
	   grootste element werd en LCP pas na 3,5 s viel. */
	.js body:not(.geen-animaties) .hero__titel .woord,
	.js body:not(.geen-animaties) .hero [data-reveal="woorden"] .woord,
	.js body:not(.geen-animaties) .banner [data-reveal="woorden"] .woord {
		opacity: 1; filter: none;
		transition: transform .6s var(--ease); transition-delay: calc(var(--w, 0) * 30ms);
	}
	.js body:not(.geen-animaties) .hero [data-reveal]:not([data-reveal="woorden"]),
	.js body:not(.geen-animaties) .banner [data-reveal]:not([data-reveal="woorden"]),
	/* De eerste sectie onder de banner staat op mobiel deels in beeld: tekst daar ook direct tonen
	   (kaarten mogen nog wel binnenkomen). Anders werd bijv. de eerste alinea van een project het
	   LCP-element pas na het laden van JavaScript. */
	.js body:not(.geen-animaties) :is(.banner, .hero) + .sectie [data-reveal]:not([data-reveal="woorden"]):not([data-reveal="kaart"]) {
		opacity: 1; transform: none; transition: none;
	}

	/* Sectie-overgang: zachte vlakken (sectie--soft, CTA) schalen open bij binnenkomst */
	.js body:not(.geen-animaties) [data-scroll="sectie"] {
		--p: 0;
		transform: scale(calc(.94 + var(--p) * .06));
		border-radius: calc(var(--radius-lg) + (1 - var(--p)) * 30px);
		transition: transform .12s linear;
	}

	/* 3D-kanteling van projectkaarten bij scrollen (--p via JS) */
	.js body:not(.geen-animaties) [data-tilt] { --p: 1; perspective: 1200px; }
	.js body:not(.geen-animaties) [data-tilt] .projectkaart__beeld {
		transform: rotateX(calc((1 - var(--p)) * 18deg)) translateZ(0);
		transform-origin: 50% 100%;
		transition: transform .12s linear;
	}

	/* Over-ons beeld: parallax */
	.js body:not(.geen-animaties) [data-scroll="parallax"] .over__frame { transform: translateY(calc((.5 - var(--p, .5)) * 50px)); transition: transform .12s linear; }
	.js body:not(.geen-animaties) [data-scroll="parallax"] .zweefkaart--1 { transform: translateY(calc((.5 - var(--p, .5)) * 110px)); transition: transform .12s linear; }
	.js body:not(.geen-animaties) [data-scroll="parallax"] .zweefkaart--2 { transform: translateY(calc((.5 - var(--p, .5)) * -80px)); transition: transform .12s linear; }
}

/* Woorden blijven netjes op één regel waar ze horen */
.woord { white-space: pre; }
.accent .woord, .accent--pil { white-space: nowrap; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.projectbeeld > * { transform: none !important; }
}
.geen-animaties .projectbeeld > * { transform: none; }