/* Beweging in koffiestijl. Zie beweging.php. */

:root {
	--nrd-b-rustig: cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * 1. Infaden bij scrollen. Het script zet nrd-onthul op wat onder de vouw
 * staat en is-gezien zodra het in beeld komt. Alleen op een scherm, zodat
 * afdrukken nooit een leeg vlak geeft.
 *
 * Met een animatie, niet met transition: een blok dat zijn eigen transition
 * heeft (de productkaart in productkaart.css: alleen box-shadow) zou anders
 * in een keer verschijnen. Een animatie gaat daar in de cascade boven, zonder
 * zwaardere selector.
 */
@media screen and (prefers-reduced-motion: no-preference) {
	.nrd-onthul:not(.is-gezien) {
		opacity: 0;
	}

	/* Tekst en blokken: komen omhoog uit de damp. */
	.nrd-onthul.is-gezien {
		animation: nrd-b-op 0.8s var(--nrd-b-rustig) var(--nrd-b-wacht, 0ms) both;
	}

	/* Afbeeldingen: komen iets omhoog en worden scherp, zoals wazig-laden.css. */
	.nrd-onthul--beeld.is-gezien {
		animation-name: nrd-b-beeld;
	}

	/* De oranje streep onder een kop tekent zich van het midden uit. */
	.nrd-onthul--streep.is-gezien {
		animation: nrd-b-streep 0.7s var(--nrd-b-rustig) calc(var(--nrd-b-wacht, 0ms) + 150ms) both;
	}
}

/* De dekking is na 60% al vol; de beweging loopt rustig uit. */
@keyframes nrd-b-op {
	from {
		opacity: 0;
		transform: translateY(48px);
		filter: blur(6px);
	}
	60% {
		opacity: 1;
		filter: blur(0);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes nrd-b-beeld {
	from {
		opacity: 0;
		transform: translateY(32px) scale(1.06);
		filter: blur(10px);
	}
	60% {
		opacity: 1;
		filter: blur(0);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes nrd-b-streep {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
	30% {
		opacity: 1;
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * 2. De luiaard op de homepage schommelt aan zijn liaan, zoals in de
 * paginakop. Het script zet is-in-beeld; daarbuiten staat hij stil.
 */
@media (prefers-reduced-motion: no-preference) {
	.nrd-home-fan-van-koffie-niet-van__beeld img {
		transform-origin: 50% 0;
		animation: nrd-b-schommel 7s ease-in-out infinite alternate;
		animation-play-state: paused;
	}

	.nrd-home-fan-van-koffie-niet-van__beeld.is-in-beeld img {
		animation-play-state: running;
	}
}

@keyframes nrd-b-schommel {
	from { rotate: -1.5deg; }
	to { rotate: 1.5deg; }
}

/*
 * 3. Maalgraad naast het label Maling. Zelfde plek als de knop "Hoeveel heb
 * ik nodig?" bij Gewicht (keuzehulp.css): de rij is relative, het beeld staat
 * rechtsboven. Het label krijgt ruimte, zodat een lange keuze er niet
 * onderdoor loopt.
 */
.nrd-maal {
	display: block;
	width: 60px;
	height: 28px;
	overflow: visible;
	pointer-events: none;
}

/* De binnenste <g> trilt en valt; de buitenste houdt plek en draaiing. */
.nrd-maal__boon > g {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.nrd-maal__boon-lijf {
	fill: #7a4b2a;
}

/*
 * Sinds 8 oktober 2026 is het beeld een canvas (beweging.js, 3b). Dat is
 * groter dan de 60 bij 28 van het beeld: 40 pixels links om het oude hoopje
 * weg te vegen en 36 boven voor de bonen die invallen. De negatieve marges
 * houden het beeld zelf op dezelfde plek.
 */
.nrd-maal--doek {
	width: 100px;
	height: 66px;
	margin: -36px 0 -2px -40px;
}

.nrd-maal__boon-naad {
	fill: none;
	stroke: #3d2415;
	stroke-width: 1.1;
	stroke-linecap: round;
}

/* Iets terug in kleur, zodat het naast de knoppen niet de aandacht trekt. */
.nrd-maal {
	opacity: 0.85;
}

.nrd-maal__korrel--1 { fill: #5b3820; }
.nrd-maal__korrel--2 { fill: #7a4b2a; }
.nrd-maal__korrel--3 { fill: #3f2616; }

/*
 * Alleen als het beeld los in de rij staat (> .nrd-maal). Naast de knoppen
 * (3c hieronder) staat het in het blok met de knoppen en gelden deze regels
 * niet.
 */
@supports selector(:has(*)) {
	table.variations tr:has(> .nrd-maal) {
		position: relative;
	}

	table.variations tr:has(> .nrd-maal) th.label {
		padding-right: 72px;
	}

	table.variations tr:has(> .nrd-maal) .nrd-maal {
		position: absolute;
		top: -4px;
		right: 0;
	}

	table.variations tr:has(> .nrd-maal) .nrd-maal--doek {
		top: -40px;
		margin: 0;
	}
}

/*
 * 3c. De maalgraad naast de knoppen (live sinds 12 oktober 2026).
 * Met de hulp "Welke heb ik nodig?" staat naast het label de knop van de
 * hulp. Het beeld staat dan in het blok met de knoppen, rechts van de eerste
 * twee regels: de bonen naast "Hele boon", het hoopje naast "Of vers
 * gemalen, voor". Het script (beweging.js, 3c) meet de plek na en zet left,
 * top, width en height; past het er niet naast, dan zet het hidden.
 */
.nrd-maal-plek {
	position: relative;
}

.nrd-maal--bij {
	position: absolute;
	margin: 0;
}

.nrd-maal[hidden] {
	display: none;
}

/*
 * 4. De golven tussen de secties en de golven met koffie. De vaste vormen
 * staan in homepage-volgorde.css, smaakbewijs.css en footer-golven.css.
 *
 * Van 7 tot 15 oktober 2026 golfden de golven tussen de secties zolang ze
 * in beeld waren (een SVG die zelf bewoog), en schoven ze langzaam opzij
 * met een masker dat 12% breder was dan de rand. Sinds 15 oktober 2026
 * staan ze stil (snelheid.md, "Scrollen bij binnenkomst"); die regels zijn
 * weg, zie git. Wat bleef: het masker is 112% breed en staat op zijn
 * midden. Zo stonden ze de laatste dagen, met de animatie op pauze; zonder
 * deze regel wordt de vorm smaller. Bij "minder beweging" liep die animatie
 * nooit, en is het masker 100% breed, zoals altijd.
 *
 * Hier en niet in homepage-volgorde.css of footer-golven.css: footer-golven.css
 * laadde tot 22 oktober 2026 ook waar beweging.css niet laadde (het mandje en
 * de bedankpagina), en daar was de golf boven de nieuwsbrief 100% breed.
 * Sinds dan laadt beweging.css overal waar de footer staat; alleen het
 * afrekenformulier niet, en dat heeft geen footer.
 *
 * De onderste golf van de smaakband is een achtergrond, 140% breed en
 * gecentreerd (smaakbewijs.css). Die stond met de animatie op pauze ook al
 * op zijn midden en heeft hier niets nodig.
 *
 * De koffie (de bovenrand van de smaakband en de footerbalk) golft nog wel,
 * op een canvas (crema.js). De footerbalk schenkt in: onder de vouw wacht
 * hij vlak tot zijn rand op 80% van de schermhoogte staat (golven() in
 * beweging.js). Waar het canvas staat, schrijft scripts/golven-golvend.py
 * tussen de markeringen hieronder; pas het daar aan, niet hier.
 */
@media (prefers-reduced-motion: no-preference) {
	.nrd-home--zonder-categorieen::after,
	.nrd-home-sectie-7::after,
	.nrd-methodes:not(.nrd-methodes--categorie)::after,
	.nrd-home-categorieen::after,
	#footer > [data-row="middle"]::before {
		--nrd-golf-breedte: 112%;
	}

	/* golven-golvend.py: begin */
	#footer > [data-row="bottom"] > .nrd-crema {
		bottom: calc(100% - 1px - 14px);
		height: calc(27px + 1px + 14px + 16px);
	}

	@media (max-width: 767px) {
		#footer > [data-row="bottom"] > .nrd-crema {
			bottom: calc(100% - 1px - 10px);
			height: calc(27px * 0.58 + 1px + 10px + 16px);
		}
	}

	#footer > [data-row="bottom"].nrd-crema-aan::before {
		visibility: hidden;
	}

	.nrd-smaak--band > .nrd-crema {
		bottom: calc(100% - 2px - 24px);
		height: calc(48px + 2px + 24px + 170px);
	}

	@media (max-width: 767px) {
		.nrd-smaak--band > .nrd-crema {
			bottom: calc(100% - 2px - 16px);
			height: calc(27px + 2px + 16px + 170px);
		}
	}

	.nrd-smaak--band.nrd-crema-aan::before {
		visibility: hidden;
	}
	/* golven-golvend.py: eind */
}

/*
 * Het canvas van crema.js, over een golf met crema of melkschuim heen (live
 * sinds 8 oktober 2026). Waar het per golf staat en hoe hoog het is, staat
 * in het blok van golven-golvend.py hierboven.
 */
.nrd-crema {
	position: absolute;
	z-index: 1;
	left: 0;
	width: 100%;
	pointer-events: none;
}

/*
 * De koffie op de smaakband als WebGL (live sinds 9 oktober 2026; crema.js,
 * koffieGL). Het canvas loopt --nrd-koffie-onder verder de
 * band in, voor de gloed, de slierten en de belletjes in de koffie, en ligt
 * onder de tekst van de band (z-index -1 in de stapel van de band). De
 * maten zonder --nrd-koffie-onder zijn die van het blok van
 * golven-golvend.py hierboven; verander je die, verander ze dan hier ook.
 * Tot het eerste beeld, en zonder WebGL2, staat er een stilstaand beeld
 * van dezelfde koffie (smaakbewijs.css).
 */
.nrd-smaak--band > .nrd-crema.nrd-crema--gl {
	--nrd-koffie-onder: 240px;
	z-index: -1;
	bottom: calc(100% - 2px - 24px - var(--nrd-koffie-onder));
	height: calc(48px + 2px + 24px + 170px + var(--nrd-koffie-onder));
}

@media (max-width: 767px) {
	.nrd-smaak--band > .nrd-crema.nrd-crema--gl {
		--nrd-koffie-onder: 150px;
		bottom: calc(100% - 2px - 16px - var(--nrd-koffie-onder));
		height: calc(27px + 2px + 16px + 170px + var(--nrd-koffie-onder));
	}
}

/*
 * Kantelen zonder grens (live sinds 12 oktober 2026, Aart; crema.js,
 * LEUN). Houd je de telefoon schuin, dan draait de koffie om zijn
 * midden: aan de hoge kant zakt hij het blok in, aan de lage kant komt hij
 * over het blok erboven. Het canvas loopt daarvoor verder door; die maat
 * zet het script zelf (maat in crema.js), hier staat er niets van.
 *
 * Waar de koffie wegzakt staat de tekst van de band en van de balk in de
 * footer op de kleur van het blok erboven (nrd-kantelt). Waar hij opkomt
 * staat de donkere tekst van het blok erboven op de koffie
 * (nrd-koffie-rand). Een rand houdt de letters dan leesbaar: in de kleur
 * van de koffie om de lichte tekst, en in de kleur van hun eigen achtergrond
 * om de donkere (--nrd-rand, voor het blok erboven gezet door het script).
 * Op hun gewone ondergrond zie je hem niet. Acht keer een pixel opzij voor
 * een scherp randje, en twee zachte lagen eromheen. Alleen op een toestel
 * dat zijn stand meldt.
 *
 * In de footer de kleur van de koffie met melk: de tekst staat daar in het
 * lichte deel van de cappuccino, en met het bijna zwart van de balk kreeg
 * hij rechtop een donkere schaduw.
 */
.nrd-kantelt {
	--nrd-rand: var(--nrd-golf-kleur);
}

.nrd-kantelt,
.nrd-koffie-rand {
	text-shadow:
		1px 0 0 var(--nrd-rand),
		-1px 0 0 var(--nrd-rand),
		0 1px 0 var(--nrd-rand),
		0 -1px 0 var(--nrd-rand),
		0.7px 0.7px 0 var(--nrd-rand),
		-0.7px 0.7px 0 var(--nrd-rand),
		0.7px -0.7px 0 var(--nrd-rand),
		-0.7px -0.7px 0 var(--nrd-rand),
		0 0 3px var(--nrd-rand),
		0 1px 6px var(--nrd-rand);
}

/*
 * Het blok erboven is soms een eigen stapel, alleen om een beeld achter de
 * inhoud te leggen (de jungle op Cafeinevrij: isolation, en het beeld op
 * z-index -1). Dan kan de inhoud niet boven de koffie komen. Het script
 * zet daar deze klassen op: het blok los, het beeld op 0, en de inhoud
 * zelf tilt het naar 2 (til in crema.js). Zo ligt alles als eerst.
 */
.nrd-koffie-los {
	isolation: auto;
}

.nrd-koffie-los--voor::before,
.nrd-koffie-los--na::after {
	z-index: 0;
}

#footer > [data-row="bottom"].nrd-kantelt {
	--nrd-rand: #6b4021;
}

/*
 * Niet in de lijst die openklapt: die ligt zo diep dat hij alleen droogvalt
 * als de telefoon bijna op zijn kant ligt, en het zijn honderd reviews die
 * de browser dan allemaal met schaduw moet tekenen.
 */
.nrd-smaak--band.nrd-kantelt .nrd-smaak__meer > :not(summary) {
	text-shadow: none;
}

/* Een pijltje of een pictogram is een tekening, geen letter. */
.nrd-kantelt svg,
.nrd-koffie-rand svg {
	filter: drop-shadow(0 0 0.6px var(--nrd-rand)) drop-shadow(0 0 1px var(--nrd-rand)) drop-shadow(0 0 2px var(--nrd-rand));
}

/*
 * De knop "Lees nog ... beoordelingen" is een doorzichtig wit vlak op de
 * koffie. Dezelfde kleur, maar dekkend: zo blijft het een knop als de
 * koffie eronder weg is.
 */
.nrd-smaak--band.nrd-kantelt .nrd-smaak__meer > summary {
	background-color: color-mix(in srgb, #fff 8%, var(--nrd-golf-kleur));
}

/*
 * De footer als cappuccino (live sinds 9 oktober 2026; crema.js,
 * CAPPU). Het canvas begint --nrd-koffie-top boven de balk (sinds 9 oktober
 * 2026 240px, telefoon 190px, voor hogere stoom; eerst 120 en 96) en loopt door tot
 * onderaan, onder de tekst van de balk (z-index -1; de balk heeft een eigen
 * stapel, footer-golven.css). Tot het eerste beeld, en zonder WebGL2, staat
 * daar een stilstaand beeld van dezelfde cappuccino. Het schuim golft
 * tussen --nrd-koffie-golf en --nrd-koffie-golf-onder boven de balk; de
 * laatste regel van de footer staat op 96px (telefoon 73px).
 */
#footer > [data-row="bottom"] > .nrd-crema.nrd-crema--gl {
	--nrd-koffie-top: 240px;
	--nrd-koffie-golf: 84px;
	--nrd-koffie-golf-onder: 48px;
	z-index: -1;
	bottom: 0;
	/* Een canvas krijgt met top en bottom geen hoogte, dus zo. */
	height: calc(100% + var(--nrd-koffie-top));
}

@media (max-width: 767px) {
	#footer > [data-row="bottom"] > .nrd-crema.nrd-crema--gl {
		--nrd-koffie-top: 190px;
		--nrd-koffie-golf: 66px;
		--nrd-koffie-golf-onder: 38px;
	}
}

/*
 * Van stilstaand beeld naar animatie (live sinds 9 oktober 2026). Aart: dat mag faden, en daarna iets langzamer (eerst 0,9
 * seconde). Het canvas komt in 1,6 seconde op over het beeld heen, en het
 * beeld verdwijnt pas als dat klaar is. Stopt de shader, dan staat het
 * beeld er meteen weer (de vertraging hoort alleen bij nrd-crema-aan).
 * Alleen als je op het canvas wachtte: was de shader al klaar toen je
 * erheen scrolde, dan zet crema.js nrd-koffie-direct en wisselt het
 * meteen. De duur
 * staat in een variabele, zodat die klasse niet zwaarder hoeft te zijn dan
 * de regel met #footer.
 */
.nrd-crema.nrd-crema--gl {
	opacity: 0;
	transition: opacity var(--nrd-koffie-fade, 1.6s) ease-out;
}

.nrd-koffie-aan > .nrd-crema.nrd-crema--gl {
	opacity: 1;
}

.nrd-smaak--band.nrd-crema-aan::before,
#footer > [data-row="bottom"].nrd-crema-aan::before {
	transition: visibility 0s linear var(--nrd-koffie-fade, 1.6s);
}

.nrd-koffie-direct {
	--nrd-koffie-fade: 0s;
}

/*
 * Roeren met een vinger (live sinds 9 oktober 2026; crema.js,
 * maakRoervlak). Onzichtbaar vlak over de strook van de crema, alleen op
 * aanraakschermen. Heen en weer roert, omhoog en omlaag scrollt.
 */
.nrd-roervlak {
	position: absolute;
	z-index: 2;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}