/* ==========================================================================
   REKO Raalte — beweging
   --------------------------------------------------------------------------
   Deze laag vervangt de nagebouwde Divi-animaties. Wat er stond, gemeten in de
   oude post_content: 99 modules met animation_style="slide", waarvan 86 naar
   rechts, plus een fadeBottom op de USP-lijsten. Eén curve (ease-in-out), één
   duur (1s), één afstand (50px) en één richting voor de hele site — en het
   hele blok bewoog als één plaat.

   Drie dingen gaan hier anders, en dat is de hele reden van deze herziening:

     1. KORTER EN STRAKKER. 460ms in plaats van 1000ms, 14px in plaats van
        50px, en een curve die snel begint en zacht uitloopt
        (cubic-bezier(.22,1,.36,1)) in plaats van ease-in-out, dat juist traag
        begint. Een animatie van een seconde die traag begint leest als
        vertraging; dat is precies waarom de oude beweging mat aanvoelde.

     2. PER ELEMENT, NIET PER BLOK. Kop, tekst, beeld en knop komen kort na
        elkaar in (70ms ertussen). In een raster staffelt elke visuele RIJ van
        links naar rechts en begint de volgende rij weer bij nul; welke kaarten
        bij elkaar in een rij staan rekent reko.js uit met offsetTop, want dat
        hangt van het kolomaantal af en dus van de breedte van het venster.

     3. TWEE NIVEAUS. Tekst krijgt de rustige variant; de blikvangers — hero,
        specificatiekaarten, productrasters, kaartrasters, CTA-koppen — krijgen
        de rijke: verder weg, een lichte schaal erbij, langere uitloop.

   TWEE TRANSFORM-KANALEN, en dat is geen detail. De reveal gebruikt de losse
   eigenschappen `translate` en `scale`; hover en interactie gebruiken
   `transform`. De browser rekent die na elkaar door, dus ze kunnen elkaar niet
   overschrijven. Zonder die scheiding zou de knop in het button-blok — die is
   tegelijk reveal-doel en hover-doel — bij de eerste hover terugspringen naar
   zijn beginpositie.

   ALLES HANGT AAN .reko-motion OP <html>. Die class zet reko.js zelf, en
   alleen als de bezoeker beweging niet heeft afgezet. Zonder JavaScript, met
   een JS-fout, of met prefers-reduced-motion staat er dus geen enkele regel
   uit dit bestand aan en is alle inhoud gewoon zichtbaar. Een animatiebestand
   mag nooit inhoud kunnen verbergen.
   ========================================================================== */

:root {
	/* --- Duren ----------------------------------------------------------- */
	--reko-anim-snel: 220ms;        /* micro-interactie: hover, focus         */
	--reko-anim-duur: 460ms;        /* rustige reveal (tekst)                 */
	--reko-anim-rijk: 700ms;        /* blikvangers                            */

	/* --- Curves ---------------------------------------------------------- *
	 * Snel op gang, zacht uitlopend. ease-in-out (de oude waarde) doet het
	 * omgekeerde en leest daarom als vertraging.                           */
	--reko-anim-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--reko-anim-ease-rijk: cubic-bezier(0.16, 1, 0.3, 1);
	--reko-anim-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Afstanden ------------------------------------------------------- */
	--reko-anim-shift: 14px;
	--reko-anim-shift-rijk: 28px;

	/* --- Staffeling ------------------------------------------------------ *
	 * 70ms leest als één beweging die door de groep loopt; de oude 400ms
	 * liet elk item apart aankomen, wat de pagina traag maakte.            */
	--reko-anim-stap: 70ms;
}

/* ==========================================================================
   1. Reveal — beginstaat
   Alleen met JavaScript, en alleen zolang het element nog niet in beeld was.
   ========================================================================== */

.reko-motion .reko-anim {
	opacity: 0;
	will-change: opacity, translate, scale;
	transition-property: opacity, translate, scale, clip-path;
	transition-duration: var(--reko-anim-duur);
	transition-timing-function: var(--reko-anim-ease);
	transition-delay: calc(var(--reko-i, 0) * var(--reko-anim-stap));
}

/* --- Varianten ----------------------------------------------------------- */

/* Rustig: alleen omhoog. De standaard voor koppen, tekst en lijsten. */
.reko-motion .reko-anim.reko-anim--rustig { translate: 0 var(--reko-anim-shift); }

/* Rijk: verder weg, iets kleiner, langere uitloop. Voor kaarten en rasters. */
.reko-motion .reko-anim.reko-anim--rijk {
	translate: 0 var(--reko-anim-shift-rijk);
	scale: 0.97;
	transition-duration: var(--reko-anim-rijk);
	transition-timing-function: var(--reko-anim-ease-rijk);
}

/* Alleen doorschijnen: voor wat niet mag verschuiven, zoals tabelrijen —
   verschuiven zou de kolommen laten trillen. */
.reko-motion .reko-anim.reko-anim--fade { translate: none; }

/* Zijwaarts. Blijft bestaan omdat de oude site 86 modules naar rechts liet
   schuiven; nu spaarzaam, voor tekst naast een beeld. */
.reko-motion .reko-anim.reko-anim--links  { translate: var(--reko-anim-shift-rijk) 0; }
.reko-motion .reko-anim.reko-anim--rechts { translate: calc(-1 * var(--reko-anim-shift-rijk)) 0; }

/*
 * Kop: een maskering die van boven naar onder openveegt, met de tekst die
 * meeschuift. Bewust GEEN opsplitsing in losse woorden of regels: de koppen op
 * deze site bevatten een <span> die één woord groen maakt en soms een <br>, en
 * die zou een splitser stukmaken. Een schermlezer leest de kop hier ongewijzigd
 * voor; bij losse woord-spans wordt dat hakkelig.
 *
 * Dit is de enige variant die het doel wél klipt, en dus de enige die niet zelf
 * waargenomen kan worden — zie de proxy in reko.js (functie `waarnemer`).
 */
.reko-motion .reko-anim.reko-anim--kop {
	translate: 0 var(--reko-anim-shift-rijk);
	clip-path: inset(0 0 105% 0);
	transition-duration: var(--reko-anim-rijk);
	transition-timing-function: var(--reko-anim-ease-rijk);
}

/*
 * Beeld: veegt open van links naar rechts.
 *
 * BEWUST GEEN clip-path op het element zelf. Een IntersectionObserver rekent de
 * klip van het doel mee, dus een volledig geklipt element meldt zich NOOIT als
 * in beeld — het bleef dan voor altijd onzichtbaar staan. Gemeten op
 * /alle-afvalcontainers/, /contact/ en de productpagina: het beeld haalde zijn
 * startsein niet.
 *
 * Het effect komt nu van de omhulling: die staat op overflow:hidden en de
 * afbeelding erbinnen schuift van links naar zijn plek. Zelfde beeldtaal, en
 * het doel blijft voor de waarnemer gewoon zichtbaar.
 */
.reko-motion .reko-anim.reko-anim--veeg {
	overflow: hidden;
	transition-duration: var(--reko-anim-rijk);
	transition-timing-function: var(--reko-anim-ease-rijk);
}

.reko-motion .reko-anim.reko-anim--veeg > img,
.reko-motion .reko-anim.reko-anim--veeg img {
	translate: -12% 0;
	scale: 1.04;
	transition:
		translate var(--reko-anim-rijk) var(--reko-anim-ease-rijk),
		scale var(--reko-anim-rijk) var(--reko-anim-ease-rijk);
	transition-delay: inherit;
}

.reko-motion .reko-anim.reko-anim--veeg.is-in img {
	translate: none;
	scale: none;
}

/* Zoom: voor los beeld dat al op zijn plek staat. */
.reko-motion .reko-anim.reko-anim--zoom {
	scale: 1.06;
	transition-duration: var(--reko-anim-rijk);
	transition-timing-function: var(--reko-anim-ease-rijk);
}

/* ==========================================================================
   2. Reveal — afspelen
   ========================================================================== */

.reko-motion .reko-anim.is-in {
	opacity: 1;
	translate: none;
	scale: none;
	clip-path: inset(0 0 0 0);
}

/*
 * Klaar: de laag vrijgeven en de vertraging weghalen. will-change laten staan
 * kost per element een eigen compositielaag, en op een pagina met vijftig
 * geanimeerde elementen is dat merkbaar in het geheugen.
 *
 * clip-path gaat naar `none` en niet naar inset(0): een inset-masker knipt
 * schaduwen en focusringen af die buiten de doos vallen.
 */
.reko-motion .reko-anim.is-done {
	will-change: auto;
	transition-delay: 0s;
	clip-path: none;
}

/* ==========================================================================
   3. Pagina-intro
   De hero animeert bij het laden, niet bij het scrollen — hij staat er al.
   reko.js zet .reko-intro-klaar op <html> zodra de eerste frame getekend is.
   ========================================================================== */

.reko-motion .reko-hero__text {
	opacity: 0;
	translate: 0 var(--reko-anim-shift-rijk);
	transition:
		opacity var(--reko-anim-rijk) var(--reko-anim-ease-rijk) 120ms,
		translate var(--reko-anim-rijk) var(--reko-anim-ease-rijk) 120ms;
}

.reko-motion.reko-intro-klaar .reko-hero__text {
	opacity: 1;
	translate: none;
}

/* Het beeld eronder zoomt langzaam uit, zodat de hero niet stilstaat. */
.reko-motion .reko-hero__video,
.reko-motion .reko-hero__mobile {
	scale: 1.05;
	transition: scale 1400ms var(--reko-anim-ease-rijk);
}

.reko-motion.reko-intro-klaar .reko-hero__video,
.reko-motion.reko-intro-klaar .reko-hero__mobile { scale: 1; }

/* ==========================================================================
   4. Interactie — knoppen
   De eindkleur blijft ongemoeid: groen hovert naar zwart, dat is de gemeten
   conventie van de site. Wat erbij komt is de MANIER waarop: de zwarte vulling
   veegt van onder naar boven in plaats van hard te wisselen.
   ========================================================================== */

.reko-motion .reko-btn,
.reko-motion .woocommerce a.button,
.reko-motion .woocommerce button.button,
.reko-motion .woocommerce input.button {
	transition:
		background-color var(--reko-anim-snel) var(--reko-anim-ease-ui),
		color var(--reko-anim-snel) var(--reko-anim-ease-ui),
		transform var(--reko-anim-snel) var(--reko-anim-ease);
}

/*
 * De tekstknop heeft precies ÉÉN hover-effect: letter-spacing naar 2px (de
 * gemeten waarde van de oude .LeesMeerOverOns). Die eigenschap staat niet in de
 * transition van de knopbasis hierboven — en omdat die regel specifieker is dan
 * `.reko-btn--text` in main.css én later laadt, viel de `transition:
 * letter-spacing` daar helemaal weg. Gevolg: de letters sprongen in één keer
 * uit elkaar, zonder overgang. Vandaar een eigen regel.
 *
 * letter-spacing is een layout-eigenschap en dus geen composited animatie. Op
 * één regel tekst in één element is dat geen bezwaar, en de onderlijn hoort mee
 * te groeien — dat IS het effect. Verbreedt een tekstknop ooit een raster om
 * zich heen, animeer dan de onderlijn in plaats van de letters.
 *
 * Duur en curve uit de tokens (220ms) en niet de 300ms die in main.css stond:
 * dit is een micro-interactie en hoort bij de andere hovers van de site.
 */
.reko-motion .reko-btn--text {
	transition:
		letter-spacing var(--reko-anim-snel) var(--reko-anim-ease-ui),
		color var(--reko-anim-snel) var(--reko-anim-ease-ui),
		border-color var(--reko-anim-snel) var(--reko-anim-ease-ui),
		/* transform hoort erbij te blijven: deze regel VERVANGT de transition van
		   de knopbasis, en `.reko-btn:active` zet een translateY(1px). Zonder deze
		   regel zou juist die indruk-beweging van de tekstknop instant worden. */
		transform var(--reko-anim-snel) var(--reko-anim-ease);
}

/*
 * De veeg zit in een eigen laag achter de tekst. isolation:isolate houdt de
 * z-index:-1 binnen de knop, zodat die laag nooit achter de sectie-achtergrond
 * verdwijnt of over een buurelement valt.
 */
.reko-motion .reko-btn:not(.reko-btn--text) {
	position: relative;
	isolation: isolate;
}

.reko-motion .reko-btn:not(.reko-btn--text)::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--reko-green-hover);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-btn:not(.reko-btn--text):hover::after,
.reko-motion .reko-btn:not(.reko-btn--text):focus-visible::after {
	transform: scaleY(1);
}

/* De veeg van een zwarte knop moet WEL te zien zijn. Hier stond
   --reko-near-black (#212121), exact dezelfde kleur als de hover zelf -- dus
   veegde er zwart over zwart en zag je niets. Nu #424242 via het token. */
.reko-motion .reko-btn--black::after { background: var(--reko-black-hover); }

/* Indrukken mag voelbaar zijn. 1px is genoeg; meer leest als een spel. */
.reko-motion .reko-btn:active { transform: translateY(1px); }

/* Laadstaat: WooCommerce zet .loading op de knop, de postcodecheck zet
   [disabled]. Beide krijgen een rustige puls in plaats van stil te staan. */
.reko-motion .reko-btn:disabled,
.reko-motion .reko-pc__submit:disabled,
.reko-motion .woocommerce .button.loading {
	animation: reko-puls 1200ms var(--reko-anim-ease-ui) infinite;
	cursor: progress;
}

@keyframes reko-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.6; }
}

/* ==========================================================================
   5. Interactie — kaarten, rasters en beeld
   Het beeld beweegt, de doos staat stil. Zo blijft de rasterlijn recht en
   raken we de gemeten hover van de dienstenkaart (scale 1.03) niet aan.
   ========================================================================== */

/*
 * HET KAARTENBLOK ZOOMT ZIJN FOTO NIET. Hier stond dat wel, en dat was fout:
 * de dienstenkaart schaalt op hover al als geheel (scale 1.03, gemeten uit de
 * Divi-bron, zie blocks/card.css) en de overlaykaart doet hetzelfde. Een foto
 * die daar bovenop nog eens 1.05 opschaalt geeft twee groeibewegingen in
 * hetzelfde ding — zichtbaar op het kaartenblok onder "Kwaliteit en service in
 * elke schakel". Bij de vlakke variant staat in card.css zelfs expliciet dat
 * het beeld rustig blijft.
 *
 * De regel blijft dus: verandert de doos van FORMAAT, dan blijft de foto stil.
 * Carrousel, blogposts en productkaarten wisselen op hover alleen kleur, en de
 * specificatiekaart komt 3px op zonder van maat te veranderen — daar mag de
 * foto wel meebewegen.
 */
.reko-motion .reko-carousel__media,
.reko-motion .reko-posts__media,
.reko-motion .reko-image__figure { overflow: hidden; }

.reko-motion .reko-carousel__img,
.reko-motion .reko-posts__img,
.reko-motion .reko-specs__img,
.reko-motion .reko-image__link .reko-image__img {
	transition: transform 520ms var(--reko-anim-ease);
}

.reko-motion .reko-carousel__item:hover .reko-carousel__img,
.reko-motion .reko-posts__item:hover .reko-posts__img,
.reko-motion .reko-specs__card:hover .reko-specs__img,
.reko-motion .reko-image__link:hover .reko-image__img { transform: scale(1.05); }

/* De specificatiekaart zelf komt een fractie op. Geen schaal: de kaarten
   staan onder 1370px in een scroll-snap-baan en een geschaalde kaart valt
   buiten zijn snap-positie. */
.reko-motion .reko-specs__card,
.reko-motion .reko-specs__promo {
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-specs__card:hover,
.reko-motion .reko-specs__promo:hover { transform: translateY(-3px); }

/* Productkaarten (winkel en gerelateerde producten): de hele kaart komt 3px op,
   net als de specificatiekaart hierboven, en de titel kleurt mee.

   Dit was een zoom van 5% op alleen de foto. Die zat niet in een kader dat hem
   afsnijdt, dus groeide hij over de grijze rand van de kaart heen terwijl de
   kaart zelf stil bleef staan.

   De overgang pas na .is-done: de kaarten schuiven ook in met .reko-anim, en
   deze regel is zwaarder dan die van §2. Gold hij meteen, dan verving hij de
   overgang op opacity en translate, stond de kaart er zonder invloeien en kwam
   er geen transitionend, dus ook nooit een .is-done. */
.reko-motion .woocommerce ul.products li.product:not(.reko-anim),
.reko-motion .woocommerce ul.products li.product.is-done {
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .woocommerce ul.products li.product:hover { transform: translateY(-3px); }

/* Niet in de slider met gerelateerde producten: die scrollt horizontaal, en
   overflow-x: auto snijdt dan ook de bovenkant af. Een opgetilde kaart kreeg
   daar een afgeknipte bovenrand. */
@media (max-width: 981px) {
	.reko-motion .woocommerce .reko-related ul.products li.product:hover { transform: none; }
}

.reko-motion .woocommerce ul.products li.product .woocommerce-loop-product__title {
	transition: color var(--reko-anim-snel) var(--reko-anim-ease-ui);
}

.reko-motion .woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
	color: var(--reko-green);
}

/* ==========================================================================
   6. Interactie — links en menu
   ========================================================================== */

/* Hoofdmenu: een lijn die vanuit het midden uitgroeit. */
.reko-motion .reko-menu > li > a { position: relative; }

.reko-motion .reko-menu > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background: var(--reko-green);
	transform: scaleX(0);
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-menu > li > a:hover::after,
.reko-motion .reko-menu > li > a:focus-visible::after,
.reko-motion .reko-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/*
 * Footerlinks en sociale iconen schuiven een paar pixels op. Geen kleurwissel:
 * die staat al in layout.css en is gemeten.
 *
 * De transform staat op de <li> en NIET op de <a>. Een transform doet niets op
 * een inline element, dus daarvoor zou de <a> naar inline-block moeten — en dat
 * kan hier niet: .reko-footer__contact a is display:flex (icoon naast tekst,
 * gemeten uitlijning) en die zou erdoor breken. Bovendien komt .reko-motion pas
 * ná de eerste frame, dus een display-wissel zou de footer laten verspringen.
 * Een <li> is altijd een blok en mag dus wél bewegen.
 */
.reko-motion .reko-footer__list li,
.reko-motion .reko-footer__contact li,
.reko-motion .reko-footer__socials li {
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-footer__list li:has(a:hover),
.reko-motion .reko-footer__contact li:has(a:hover) { transform: translateX(4px); }

.reko-motion .reko-footer__socials li:has(a:hover) { transform: translateY(-3px) scale(1.08); }

/* ==========================================================================
   7. Interactie — formulier en bediening
   ========================================================================== */

/*
 * HIER STAAT GEEN EIGEN FOCUSSTIJL MEER, en dat is met opzet.
 *
 * Er stond een `box-shadow: inset 0 -2px 0 0` groen op :focus. Het thema heeft
 * al een focusring — main.css: `:focus-visible { outline: 2px solid groen;
 * outline-offset: 2px }`, met de motivering dat de huisstijl vlak en hoekig is —
 * en configurator.css herhaalt die voor de keuzelijsten. Twee stijlen op
 * hetzelfde moment leverden een groene lijn BOVEN én ONDER het veld: de ring met
 * zijn offset, plus mijn streep binnenin. Zichtbaar op de configurator van een
 * containerproduct bij "Zand/grond bijbestellen".
 *
 * Focus is een toegankelijkheidsvoorziening en hoort niet in een bewegingslaag
 * die met prefers-reduced-motion uitgaat; wie de ring anders wil, past de regel
 * in main.css aan.
 */

/* Wel bewegen: de aantalstepper en andere bediening naast de velden. */
.reko-motion .reko-qty-steps button,
.reko-motion .reko-loop__form .qty-btn {
	transition: color var(--reko-anim-snel) var(--reko-anim-ease-ui),
		background-color var(--reko-anim-snel) var(--reko-anim-ease-ui);
}

/* Pijlen bij de specificatieslider. */
.reko-motion .reko-specs__arrow {
	transition:
		transform var(--reko-anim-snel) var(--reko-anim-ease),
		opacity var(--reko-anim-snel) var(--reko-anim-ease-ui);
}

.reko-motion .reko-specs__arrow--prev:hover:not(:disabled) { transform: translateX(-3px); }
.reko-motion .reko-specs__arrow--next:hover:not(:disabled) { transform: translateX(3px); }

/* ==========================================================================
   7b. Configurator: vervolgvelden die verschijnen
   De groep "Soort/Volume zand/grond" hangt onder "Zand/grond bijbestellen"
   en staat op display:none tot de bezoeker "Ja" kiest. Die velden stonden er
   dan ineens, en alles eronder sprong mee naar beneden.

   reko-configurator.js zet .is-verschenen op het moment dat een groep ECHT
   opengaat, en haalt hem er na de animatie weer af.
   ========================================================================== */

/* Terugval: doorschijnen en een kort stukje omhoog. Werkt overal. */
.reko-motion .reko-config__group.is-verschenen {
	animation: reko-veld-in 340ms var(--reko-anim-ease) both;
}

@keyframes reko-veld-in {
	from { opacity: 0; translate: 0 -8px; }
	to   { opacity: 1; translate: none; }
}

/*
 * Waar het kan: echt uitvouwen, zodat de knop en de prijs eronder meeschuiven
 * in plaats van te verspringen. Dat vraagt een hoogte van 0 naar `auto`, en
 * die is alleen te animeren met interpolate-size. Browsers die dat niet
 * kennen houden de terugval hierboven.
 *
 * overflow:hidden hoort bij de animatie en niet bij de groep zelf: het staat
 * alleen op .is-verschenen, en die class haalt de JS er na de animatie af.
 */
@supports (interpolate-size: allow-keywords) {
	.reko-motion .reko-config__group.is-verschenen {
		interpolate-size: allow-keywords;
		overflow: hidden;
		animation: reko-veld-uitvouwen 340ms var(--reko-anim-ease) both;
	}

	@keyframes reko-veld-uitvouwen {
		from { opacity: 0; height: 0; }
		to   { opacity: 1; height: auto; }
	}
}

/* ==========================================================================
   8. Accordeon
   <details> is native, dus het openklappen sprong hard. ::details-content en
   interpolate-size maken daar een overgang van. Browsers die het niet kennen
   klappen open zoals nu — vandaar @supports en niet een JS-hoogtemeting.
   interpolate-size staat op het item zelf en niet op :root: de eigenschap
   erft, en globaal aanzetten laat óók transities elders plots naar `auto`
   animeren.
   ========================================================================== */

@supports selector(::details-content) {
	.reko-motion .reko-accordion__item {
		interpolate-size: allow-keywords;
	}

	.reko-motion .reko-accordion__item::details-content {
		block-size: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			block-size 320ms var(--reko-anim-ease-ui),
			opacity 260ms var(--reko-anim-ease-ui),
			content-visibility 320ms allow-discrete;
	}

	.reko-motion .reko-accordion__item[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

/* Het plusteken wordt een min. Eindstaat gelijk aan de gemeten versie
   (verticale streep weg), maar draaiend in plaats van knipperend. */
.reko-motion .reko-accordion__teken::before,
.reko-motion .reko-accordion__teken::after {
	transition:
		opacity var(--reko-anim-snel) var(--reko-anim-ease-ui),
		transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-accordion__item[open] .reko-accordion__teken::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* ==========================================================================
   8b. Inklapbaar tekstblok onder 768px

   "Wat mag wel" en "Wat mag niet" op /afvalbrengstation-recycling/ klapten
   zonder enige overgang open: gemeten op 390px sprong het paneel in ÉÉN frame
   van 0 naar 724px (elke uitlezing daarna gaf weer 724, dus geen tussenwaarde).

   WAAROM sectie 8 hierboven dat niet ving, en dat is geen selectorfoutje:

     1. Het is wél een <details>, maar niet dezelfde vorm. Bij de accordeon
        staat de inhoud IN het element; bij dit blok staat er alleen een
        <summary> in en is het paneel (.reko-rte) een ZUS van de <details> —
        gemeten `:scope > :not(summary)` = 0 kinderen. ::details-content is
        daar dus leeg en er valt niets te animeren. Die opzet is bewust: het
        `open`-attribuut is met CSS niet weg te halen, dus boven 768px moet het
        paneel buiten de <details> staan om zichtbaar te kunnen blijven (zie de
        toelichting in template-parts/blocks/text.php).
     2. Het verbergen gebeurt met `display: none` op die zus, en display is
        alleen te animeren als hij in de transition-lijst staat met
        allow-discrete.

   Dus animeren we de zus. Dezelfde duren en curve als de accordeon, zodat de
   twee soorten uitklap even snel lopen: hoogte 320ms, doorschijnen 260ms.

   De DICHTE staat houdt `display: none` en dat is wezenlijk: reko.js meldt een
   element alleen bij de reveal aan als het getekend wordt (getClientRects),
   en de waarnemer heeft een threshold van 0,01 die een paneel van 0px hoog
   nooit haalt. Met `height: 0` in plaats van `display: none` zou het paneel op
   opacity 0 blijven staan nádat het is opengeklapt.

   @starting-style is nodig omdat het paneel uit display:none komt: zonder
   beginwaarden is er geen vorige staat om vanaf te animeren en springt de
   hoogte alsnog.

   overflow-y en niet overflow: `.reko-rte` heeft onder 768px `overflow-x: auto`
   voor een brede tabel (blocks/_base.css), en die zijwaartse baan blijft zo
   staan terwijl de hoogte wel wordt afgeknipt.
   ========================================================================== */

@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
	@media (max-width: 767px) {
		.reko-motion .reko-text--inklap .reko-text__inklap ~ .reko-rte {
			interpolate-size: allow-keywords;
			height: auto;
			/* Opacity staat er expliciet en niet als "de standaard 1". Wie de
			   pagina op desktop opent en dan naar telefoonbreedte gaat zonder
			   langs de band te scrollen, houdt een paneel met .reko-anim maar
			   zonder .is-in: dat staat op opacity 0 en de waarnemer kan hem niet
			   meer vrijgeven, want dichtgeklapt is hij display:none en komt hij
			   dus nooit "in beeld". Zonder deze regel klapt het paneel dan open
			   met onzichtbare tekst. */
			opacity: 1;
			overflow-y: hidden;
			transition:
				height 320ms var(--reko-anim-ease-ui),
				opacity 260ms var(--reko-anim-ease-ui),
				display 320ms allow-discrete;
		}

		/* Eén class zwaarder dan `.reko-text--inklap .reko-text__inklap:not([open])
		   ~ .reko-rte` in blocks/text.css (0,4,0): dat bestand laadt ná motion.css,
		   dus alleen specificiteit kan de display:none daar aanvullen. */
		.reko-motion .reko-text--inklap .reko-text__inklap:not([open]) ~ .reko-rte {
			display: none;
			height: 0;
			opacity: 0;
		}

		@starting-style {
			.reko-motion .reko-text--inklap .reko-text__inklap[open] ~ .reko-rte {
				height: 0;
				opacity: 0;
			}
		}
	}
}

/* ==========================================================================
   9. Header bij scrollen
   Voorbij 60px komt er een schaduw onder de header en krimpt het logo. De
   hoogte blijft door de bestaande ResizeObserver in --reko-menu-height
   bijgehouden, dus de content eronder schuift netjes mee.
   ========================================================================== */

.reko-motion .reko-header {
	transition: box-shadow 300ms var(--reko-anim-ease-ui);
}

.reko-motion .reko-header.is-scrolled {
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.09);
}

.reko-motion .reko-header__logo img {
	transform-origin: left center;
	transition: transform 300ms var(--reko-anim-ease-ui);
}

.reko-motion .reko-header.is-scrolled .reko-header__logo img {
	transform: scale(0.88);
}

.reko-motion .reko-cart__icon {
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-cart:hover .reko-cart__icon { transform: translateX(3px); }

/* Winkelwagenteller springt op zodra er iets bij komt. reko.js zet de class
   bij de WooCommerce-fragmentvernieuwing. */
.reko-motion .sellabees-cart-count.is-gewijzigd {
	animation: reko-tel-op 420ms var(--reko-anim-ease-rijk);
}

@keyframes reko-tel-op {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* ==========================================================================
   10. Mobiel menu
   Het paneel staat op [hidden] als het dicht is, dus er valt niets te
   animeren zolang display:none erop staat. reko.js haalt hidden er eerst af,
   zet dan .is-open, en wacht bij sluiten op het einde van de overgang.
   ========================================================================== */

.reko-motion .reko-mobile-menu {
	opacity: 0;
	translate: 0 -8px;
	transition:
		opacity 260ms var(--reko-anim-ease-ui),
		translate 260ms var(--reko-anim-ease);
}

.reko-motion .reko-mobile-menu.is-open {
	opacity: 1;
	translate: none;
}

/* De regels komen er één voor één in. */
.reko-motion .reko-mobile-menu.is-open > .reko-mobile-menu__list > li {
	animation: reko-menu-regel 320ms var(--reko-anim-ease) both;
	animation-delay: calc(var(--reko-i, 0) * 40ms);
}

@keyframes reko-menu-regel {
	from { opacity: 0; translate: 0 -6px; }
	to   { opacity: 1; translate: none; }
}

/* ==========================================================================
   11. Postcode-pop-up
   De overlay wordt door reko-configurator.js in de DOM gezet. Een CSS-animatie
   start bij het inbrengen van een element, dus hier is géén extra class en dus
   geen wijziging in dat script voor nodig.
   ========================================================================== */

.reko-motion .reko-pc-modal {
	animation: reko-modal-in 240ms var(--reko-anim-ease-ui) both;
}

.reko-motion .reko-pc-modal__box {
	animation: reko-modal-box-in 380ms var(--reko-anim-ease-rijk) both;
}

@keyframes reko-modal-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes reko-modal-box-in {
	from { opacity: 0; translate: 0 16px; scale: 0.96; }
	to   { opacity: 1; translate: none; scale: 1; }
}

/* Alleen het kruisje draait, niet de knop. Draaide het hele vlak, dan staken
   de hoeken halverwege 45 graden buiten het kader uit (hij zit in de hoek
   ervan) en sprong het groen er in één keer op terwijl de draai nog liep. */
.reko-motion .reko-pc-modal__close {
	transition: background-color var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-pc-modal__close-icon {
	transition: transform var(--reko-anim-snel) var(--reko-anim-ease);
}

.reko-motion .reko-pc-modal__close:hover .reko-pc-modal__close-icon { transform: rotate(90deg); }

/* ==========================================================================
   12. Toegankelijkheid
   Wie beweging heeft afgezet krijgt hier niets van te zien: reko.js zet
   .reko-motion dan niet eens. Deze blokkade staat er voor het geval de class
   er tóch staat — bijvoorbeeld omdat de bezoeker de voorkeur wijzigt terwijl
   de pagina open staat.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.reko-motion .reko-anim,
	.reko-motion .reko-hero__text,
	.reko-motion .reko-hero__video,
	.reko-motion .reko-hero__mobile,
	.reko-motion .reko-mobile-menu {
		opacity: 1 !important;
		translate: none !important;
		scale: none !important;
		clip-path: none !important;
		transition: none !important;
	}

	.reko-motion *,
	.reko-motion *::before,
	.reko-motion *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}