/* ============================================================
   Beval Samen — kleine effecten
   Alleen transform/opacity (goedkoop voor de browser), plus één
   klein script (assets/js/effecten.js) dat blokken markeert als ze
   in beeld komen. Wie in het besturingssysteem
   "minder beweging" heeft aangezet, ziet niets bewegen.
   Uitzetten: verwijder de regel voor effecten.css in functions.php.
   ============================================================ */

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

	html{ scroll-behavior: smooth; }

	/* 1. Hero-foto ademt heel langzaam (1,8%) */
	.samen-hero__foto img{
		animation: samen-ademen 10s ease-in-out infinite;
		transform-origin: center;
		will-change: transform;
	}
	@keyframes samen-ademen{
		0%, 100%{ transform: scale(1); }
		50%{ transform: scale(1.018); }
	}

	/* 2. Het roze vlak achter de hero-foto drijft zachtjes mee */
	.samen-hero__foto::before{
		animation: samen-drijven 18s ease-in-out infinite;
	}
	@keyframes samen-drijven{
		0%, 100%{ transform: translate(0, 0) rotate(0deg); }
		50%{ transform: translate(-10px, 8px) rotate(4deg); }
	}

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

	/* 4. Hero-tekst komt rustig binnen */
	.samen-hero__tekst > *{
		animation: samen-binnen .8s cubic-bezier(.22,.8,.32,1) both;
	}
	.samen-hero__tekst > :nth-child(2){ animation-delay: .08s; }
	.samen-hero__tekst > :nth-child(3){ animation-delay: .16s; }
	.samen-hero__tekst > :nth-child(4){ animation-delay: .24s; }
	.samen-hero__tekst > :nth-child(5){ animation-delay: .32s; }
	@keyframes samen-binnen{
		from{ opacity: 0; transform: translateY(14px); }
		to{ opacity: 1; transform: none; }
	}

	/* 6. Sterren in de topbalk twinkelen af en toe */
	.samen-sterren{
		display: inline-block;
		animation: samen-twinkel 6s ease-in-out infinite;
	}
	@keyframes samen-twinkel{
		0%, 88%, 100%{ opacity: 1; transform: scale(1); }
		92%{ opacity: .6; transform: scale(.94); }
		96%{ opacity: 1; transform: scale(1.06); }
	}

	/* 7. Handschrift-teksten wiegen heel licht */
	.is-style-script{
		display: inline-block;
		animation: samen-wiegen 7s ease-in-out infinite;
		transform-origin: left center;
	}
	@keyframes samen-wiegen{
		0%, 100%{ transform: rotate(-2deg); }
		50%{ transform: rotate(1deg); }
	}
}

/* ------------------------------------------------------------
   In beeld komen (met assets/js/effecten.js)
   Het scriptje zet .is-visible zodra een blok in beeld komt, één
   keer. De klasse .fx-klaar op <html> zet het script zelf: zonder
   JavaScript blijft alles dus gewoon zichtbaar.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){

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

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

	/* 10. Prijsblokken en andere kaarten liften bij aanwijzen (alleen met muis) */
	@media (hover: hover){
		.wp-block-group.is-style-kaart,
		.wp-block-group.is-style-kaart-donker{
			transition: transform 250ms ease, box-shadow 250ms ease;
		}
		.wp-block-group.is-style-kaart:hover,
		.wp-block-group.is-style-kaart-donker:hover{
			transform: translateY(-5px);
			box-shadow: 0 16px 34px rgba(60,30,30,.12);
		}
	}

	/* 11. Recensies faden en schuiven in zodra de sectie verschijnt */
	.fx-klaar .samen-recensie{
		opacity: 0;
		transform: translateY(15px);
		transition: opacity 600ms ease, transform 600ms ease, box-shadow 250ms ease;
	}
	.fx-klaar .samen-recensie.is-visible{ opacity: 1; transform: translateY(0); }
	.fx-klaar .wp-block-column:nth-child(2) > .samen-recensie.is-visible{ transition-delay: 100ms; }
	.fx-klaar .wp-block-column:nth-child(3) > .samen-recensie.is-visible{ transition-delay: 200ms; }

	/* 12. 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, .samen-paginakop{
		position: relative;
		isolation: isolate;
		overflow: clip;
	}
	.samen-blob::before, .samen-paginakop::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: samen-zweven 12s ease-in-out infinite alternate;
	}
	.samen-blob.samen-blob--links::before{ right: auto; left: 4%; top: auto; bottom: 6%; }
	@keyframes samen-zweven{
		from{ transform: translate3d(-20px, -10px, 0); }
		to{ transform: translate3d(30px, 20px, 0); }
	}
	@media (max-width: 640px){
		.samen-blob::before, .samen-paginakop::before{ width: 240px; height: 240px; right: -40px; }
	}

	/* Header: zachte schaduw zodra je scrolt (alleen opacity, geen herberekening) */
	@supports (animation-timeline: scroll()){
		.samen-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: samen-schaduw linear both;
			animation-timeline: scroll(root);
			animation-range: 0 140px;
		}
		@keyframes samen-schaduw{ from{ opacity: 0; } to{ opacity: 1; } }

		/* Leesvoortgang: dun roze lijntje bovenaan (niet op de homepage) */
		body:not(.home)::after{
			content: "";
			position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000;
			background: var(--s-rose);
			transform-origin: left center;
			animation: samen-voortgang linear both;
			animation-timeline: scroll(root);
			pointer-events: none;
		}
		@keyframes samen-voortgang{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
	}
}