/* ============================================================
   Kleine effecten — HTML-versie
   Alleen transform/opacity (goedkoop voor de browser), plus één
   klein script (js/effecten.js) dat blokken markeert als ze in beeld
   komen. Met "minder beweging" aan in het besturingssysteem beweegt
   er niets; zonder JavaScript blijft alles gewoon zichtbaar.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

	html{ scroll-behavior: smooth; }

	/* 1. Hero-foto ademt heel langzaam (1,8%) */
	.hero--samen .hero__photo img{
		animation: fx-ademen 10s ease-in-out infinite;
		transform-origin: center;
		will-change: transform;
	}
	@keyframes fx-ademen{
		0%, 100%{ transform: scale(1); }
		50%{ transform: scale(1.018); }
	}
	.hero--samen .hero__photo::before{ animation: fx-drijven 18s ease-in-out infinite; }
	@keyframes fx-drijven{
		0%, 100%{ transform: translate(0, 0) rotate(0deg); }
		50%{ transform: translate(-10px, 8px) rotate(4deg); }
	}

	/* Markeerstift onder het roze deel van de kop, één keer bij laden */
	h1 em, h2 em{
		background: linear-gradient(var(--t-rose-soft), var(--t-rose-soft)) no-repeat 0 88% / 0% .28em;
		animation: fx-markeer 1.1s .5s cubic-bezier(.22,.8,.32,1) forwards;
	}
	@keyframes fx-markeer{ to{ background-size: 100% .28em; } }

	/* 2. Cursuspunten (vinkjeslijsten) één voor één */
	.fx-klaar .list-check > li{
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 500ms ease, transform 500ms ease;
	}
	.fx-klaar .list-check.is-visible > li{ opacity: 1; transform: translateY(0); }
	.fx-klaar .list-check.is-visible > li:nth-child(2){ transition-delay: 80ms; }
	.fx-klaar .list-check.is-visible > li:nth-child(3){ transition-delay: 160ms; }
	.fx-klaar .list-check.is-visible > li:nth-child(4){ transition-delay: 240ms; }
	.fx-klaar .list-check.is-visible > li:nth-child(5){ transition-delay: 320ms; }
	.fx-klaar .list-check.is-visible > li:nth-child(n+6){ transition-delay: 400ms; }

	/* 3. "Voor jullie samen": tekst iets van links, foto iets van rechts */
	.split-samen{ overflow: clip; }
	.fx-klaar .split-samen__body,
	.fx-klaar .split-samen__photo{
		opacity: 0;
		transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
	}
	.fx-klaar .split-samen__body{ transform: translateX(-20px); }
	.fx-klaar .split-samen__photo{ transform: translateX(20px); }
	.fx-klaar .split-samen.is-visible .split-samen__body,
	.fx-klaar .split-samen.is-visible .split-samen__photo{ opacity: 1; transform: translateX(0); }

	/* 2b. Generieke versie van "2." voor andere paginas: zet .fx-stagger op
	   een raster/lijst en de directe kinderen komen één voor één in beeld
	   (kaarten, cursusdata, blogposts, ...) - zelfde patroon, geen vaste
	   klassenaam per pagina nodig. */
	.fx-klaar .fx-stagger > *{
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 500ms ease, transform 500ms ease;
	}
	.fx-klaar .fx-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
	.fx-klaar .fx-stagger.is-visible > *:nth-child(2){ transition-delay: 60ms; }
	.fx-klaar .fx-stagger.is-visible > *:nth-child(3){ transition-delay: 120ms; }
	.fx-klaar .fx-stagger.is-visible > *:nth-child(4){ transition-delay: 180ms; }
	.fx-klaar .fx-stagger.is-visible > *:nth-child(5){ transition-delay: 240ms; }
	.fx-klaar .fx-stagger.is-visible > *:nth-child(6){ transition-delay: 300ms; }
	.fx-klaar .fx-stagger.is-visible > *:nth-child(n+7){ transition-delay: 340ms; }

	/* 3b. Generieke versie van "3.": zet .fx-split op een container met
	   precies twee kinderen (bijv. tekst + foto) en ze schuiven vanaf
	   weerszijden in beeld, zoals bij "Voor jullie samen". */
	.fx-split{ overflow: clip; }
	.fx-klaar .fx-split > *{
		opacity: 0;
		transition: opacity 700ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
	}
	.fx-klaar .fx-split > *:first-child{ transform: translateX(-20px); }
	.fx-klaar .fx-split > *:last-child{ transform: translateX(20px); }
	.fx-klaar .fx-split.is-visible > *{ opacity: 1; transform: translateX(0); }

	/* 3b. Prijsblokken en kaarten liften bij aanwijzen (alleen met muis) */
	@media (hover: hover){
		.card, .week-kaart{ transition: transform 250ms ease, box-shadow 250ms ease; }
		.card:hover, .week-kaart:hover{ transform: translateY(-5px); box-shadow: 0 16px 34px rgba(60,30,30,.12); }
		.quote:hover{ transform: none; }
	}

	/* 4. Recensies faden en schuiven in zodra ze verschijnen */
	.fx-klaar .quote{
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 600ms ease, transform 600ms ease;
	}
	.fx-klaar .is-visible > .quote{ opacity: 1; transform: translateY(0); }
	.fx-klaar .is-visible > .quote:nth-child(2){ transition-delay: 100ms; }
	.fx-klaar .is-visible > .quote:nth-child(3){ transition-delay: 200ms; }

	/* 4b. Zachte, organische blob achter bepaalde secties
	   (radial-gradient i.p.v. filter: blur: zelfde zachte rand, maar
	   de telefoon hoeft niets te vervagen tijdens het bewegen) */
	.samen-blob, main > .section--tight:first-child{
		position: relative;
		isolation: isolate;
		overflow: clip;
	}
	.samen-blob::before, main > .section--tight:first-child::before{
		content: "";
		position: absolute;
		top: 8%; right: 6%;
		width: 380px; height: 380px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(240,190,200,.42) 0%, rgba(240,190,200,.18) 40%, rgba(240,190,200,0) 70%);
		z-index: -1;
		pointer-events: none;
		will-change: transform;
		animation: fx-zweven 12s ease-in-out infinite alternate;
	}
	.samen-blob--links::before{ right: auto; left: 4%; top: auto; bottom: 6%; }
	@keyframes fx-zweven{
		from{ transform: translate3d(-20px, -10px, 0); }
		to{ transform: translate3d(30px, 20px, 0); }
	}
	@media (max-width: 640px){
		.samen-blob::before, main > .section--tight:first-child::before{ width: 240px; height: 240px; right: -40px; }
	}

	/* Header-schaduw bij scrollen en leesvoortgang (alleen opacity/transform) */
	@supports (animation-timeline: scroll()){
		.site-header::after{
			content: ""; position: absolute; inset: auto 0 0 0; height: 18px; transform: translateY(100%);
			background: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,0));
			pointer-events: none;
			animation: fx-schaduw linear both;
			animation-timeline: scroll(root);
			animation-range: 0 140px;
		}
		@keyframes fx-schaduw{ from{ opacity: 0; } to{ opacity: 1; } }

		body:not(:has(.hero--samen))::after{
			content: "";
			position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000;
			background: var(--t-rose);
			transform-origin: left center;
			animation: fx-voortgang linear both;
			animation-timeline: scroll(root);
			pointer-events: none;
		}
		@keyframes fx-voortgang{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
	}
}