/* Bewegende kop van Home (Henrik 03-11): drie schermen vertellen wat Aegolius doet, meten, leren, aantonen.
   Een groep met de blokstijl "Bewegende kop" bevat een HTML-blok .lokaal-beeld (de drie schermen en de drie woorden) en de
   gewone kolommen met kop, tekst en knop. Zonder script, met minder beweging en in de editor staat er meteen het eindbeeld:
   lichtblauw, de schermen klein en verbleekt, de tekst erover. Het script (in functions.php) zet html.lk-js en speelt dan één
   keer het verhaal, zodra de banner half in beeld is: donker, per scherm een woord, het scherm en een klik van de cursor, een
   stippellijn naar het volgende; daarna gaat het licht aan, krimpen de schermen en komt de tekst erover.
   Desktop (vanaf 782): het beeld is de banner achter de tekst. Telefoon: eerst de tekst (zoals Digi en ERP, de knop in het
   eerste scherm), daaronder het beeld met één scherm tegelijk en een stapper. */

.wp-block-group.is-style-bewegende-kop{position:relative;container-type:inline-size;margin-block-start:16px}
.lokaal-beeld{--lk-nacht:#1c2f45;--lk-decor:rgba(255,255,255,.06);--lk-decor-rand:rgba(255,255,255,.16);position:relative;overflow:hidden;background:var(--wp--preset--color--merk-licht);box-shadow:0 0 0 1px #bad6ec,0 22px 40px -20px rgba(70,85,110,.36);transition:background 1.2s ease}

/* De schermen: getekend op 320 x 192 en geschaald, zodat de inhoud overal dezelfde verhouding houdt. De plek staat in de transform
   (translate + scale), niet in left/top: transform draait op de grafische kaart, left/top niet, en als die twee uit de pas liepen
   schoten de schermen eerst naar linksboven en pas daarna naar het midden (Henrik 03-11). 50cqw + 64px = het midden van het beeld. */
.lokaal-venster{position:absolute;left:0;top:0;width:320px;height:192px;background:var(--wp--preset--color--base);border-radius:12px;overflow:hidden;transform-origin:0 0;box-shadow:0 0 0 1px rgba(35,58,82,.10),0 12px 28px -12px rgba(35,58,82,.35);transition:opacity .5s,transform 1s cubic-bezier(.65,0,.25,1),filter 1s,box-shadow 1.2s}
.lokaal-venster:nth-child(1){--i:0;z-index:1}
.lokaal-venster:nth-child(2){--i:1;z-index:2}
.lokaal-venster:nth-child(3){--i:2;z-index:3}
.lokaal-balk{height:28px;display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:0 12px;background:var(--wp--preset--color--grond);border-bottom:1px solid var(--wp--preset--color--lijn);box-sizing:border-box}
.lokaal-balk i{width:8px;height:8px;border-radius:50%;background:#c3cfdb}
.lokaal-romp{position:absolute;left:0;right:0;top:28px;bottom:0}
.lokaal-rg{position:absolute;left:18px;height:7px;border-radius:4px;background:var(--wp--preset--color--lijn)}
.lokaal-rg.kop{height:8px;background:var(--wp--preset--color--inkt)}
.lokaal-pil{position:absolute;left:18px;width:170px;height:22px;border-radius:11px;background:var(--wp--preset--color--base);border:1.5px solid #c3cfdb;box-sizing:border-box;transition:background .2s,border-color .2s}
.lokaal-pil[data-doel]{background:var(--wp--preset--color--merk-licht);border-color:var(--wp--preset--color--merk)}
/* Afspelen rood zoals in de speler van Test IT (Henrik 03-11): de hoofdactie van het scherm. */
.lokaal-speel{position:absolute;right:26px;top:40px;width:46px;height:46px;border-radius:50%;background:var(--wp--preset--color--actie)}
.lokaal-speel::after{content:"";position:absolute;left:18px;top:13px;border-left:14px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.lokaal-balkje{position:absolute;left:18px;right:18px;top:116px;height:8px;border-radius:4px;background:var(--wp--preset--color--merk-licht)}
.lokaal-balkje i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:4px;background:var(--wp--preset--color--merk);transition:width 1.3s ease-out}
/* Het certificaat in het midden van het venster, de downloadknop rechtsonder op de onderkant ervan, zoals een documentviewer. */
.lokaal-cert{position:absolute;left:108px;top:14px;width:104px;height:138px;background:var(--wp--preset--color--base);border:1.5px solid #c3cfdb;border-radius:4px;box-sizing:border-box}
.lokaal-cert .lokaal-rg{left:14px}
/* Medaille (goed-rand, Henrik 03-11): staat er vanaf het begin, anders lijkt het eerst een gewoon document. Rechtsonder, de ring
   op de hoogte van de handtekeningstreep en even ver van de rand (15). Hij beweegt niet bij de klik: alleen het geklikte element deukt in. */
.lokaal-zegel{position:absolute;right:14px;bottom:15px;width:22px;height:27px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 1 18 22'%3E%3Cpath fill='%23009d80' d='M8.2 12.6 6.5 22l5.5-3 5.5 3-1.7-9.4z' opacity='.75'/%3E%3Ccircle cx='12' cy='8.5' r='6.5' fill='%23009d80'/%3E%3Ccircle cx='12' cy='8.5' r='3.6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center/contain}
/* Downloaden blauw = de vervolgactie; rechthoekig (afronding 6 zoals de kopbalkknoppen) tegenover de ronde afspeelknop. Alleen het
   icoon, zonder nep-label; de viewBox is strak om de tekening, zodat hij optisch in het midden staat. */
.lokaal-dl{position:absolute;right:22px;top:120px;width:48px;height:32px;border-radius:6px;background:var(--wp--preset--color--merk)}
.lokaal-dl::before{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 20 19' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E") no-repeat center/18px 17.1px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 3 20 19' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3C/svg%3E") no-repeat center/18px 17.1px}
.lokaal-cursor{position:absolute;left:0;top:0;width:20px;height:27px;opacity:0;z-index:5;offset-rotate:0deg;offset-anchor:2px 2px;pointer-events:none}
.lokaal-cursor path{fill:var(--wp--preset--color--inkt);stroke:#fff;stroke-width:1.5;stroke-linejoin:round}

/* De drie woorden. */
.lokaal-stappen{list-style:none;margin:0;padding:0}
.lokaal-stappen li{display:flex;align-items:center;font-weight:700;line-height:1;color:var(--wp--preset--color--inkt);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1),color 1.2s}
.lokaal-stappen b{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--wp--preset--color--merk);color:#fff}

@media (min-width:782px){
	/* Desktop: de kolommen liggen over het beeld; de ruimte boven is de onderkant van de schermen min 64 overlap. */
	.wp-block-group.is-style-bewegende-kop{--lk-k:.6;--lk-top:91px;padding:var(--lk-top) 64px 64px}
	/* z-index 0: het beeld is een eigen laag, zodat de waas (z 4 in het beeld) onder de kolommen blijft. */
	.is-style-bewegende-kop>.lokaal-beeld{position:absolute;inset:0;z-index:0;border-radius:24px}
	.is-style-bewegende-kop>.wp-block-columns{position:relative;z-index:2;margin:0}
	/* Eindbeeld: de rij krimpt naar 80% (60% op een smalle desktop), de afstand tussen de schermen blijft. */
	/* 100cqw is de binnenbreedte van de groep (zonder de 2 x 64): het gat van de beginrij is (binnenbreedte - 3 x 320) / 2. */
	.lokaal-venster{--lk-gat:max(24px,(100cqw - 960px) / 2);transform:translate(calc(50cqw + 64px - 1.5 * 320px * var(--lk-k) - var(--lk-gat) + var(--i) * (320px * var(--lk-k) + var(--lk-gat))),40px) scale(var(--lk-k));opacity:.6;filter:saturate(.2)}
	/* Waas: van de schermen naar de achtergrond, vol (85%) op de bovenkant van de kop. */
	.lokaal-beeld::after{content:"";position:absolute;left:0;right:0;top:calc(var(--lk-top) - 72px);height:144px;background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--wp--preset--color--merk-licht) 85%,transparent) 50%,color-mix(in srgb,var(--wp--preset--color--merk-licht) 85%,transparent) 100%);z-index:4;pointer-events:none;transition:opacity .8s .7s}
	.lokaal-stappen li{position:absolute;gap:12px;font-size:26px;opacity:0}
	.lokaal-stappen b{width:34px;height:34px;font-size:16px}
	.lokaal-stappen li:not(:last-child)::after{content:"";position:absolute;left:var(--lijn-x,0);top:var(--lijn-y,0);width:var(--lijn,0);height:0;border-top:2px dashed rgba(255,255,255,.55);transition:width .7s ease-out}
}
@media (min-width:1200px){
	.wp-block-group.is-style-bewegende-kop{--lk-k:.8;--lk-top:130px}
}
@media (max-width:781px){
	/* Telefoon: eerst de tekst, dan het beeld; de schermen eindigen als stapel in het midden, niet verbleekt. */
	.wp-block-group.is-style-bewegende-kop{display:flex;flex-direction:column;margin-block-start:20px}
	.is-style-bewegende-kop>.wp-block-columns{order:1;margin:0}
	/* De stapel (schaal --lk-sk, stap --lk-sd) is zo hoog als een scherm in het verhaal (--lk-vh), dus groeit mee in stappen
	   (Henrik 03-11): 192 x schaal + 2 x stap <= --lk-vh. 100cqw = beeldbreedte; telefoon 360 = 328, 375 = 343 (342,94!), 400 = 368; de grenzen liggen er net onder. */
	.is-style-bewegende-kop>.lokaal-beeld{--lk-vh:min(192px,(100cqw - 48px) * .6);--lk-sk:.62;--lk-sd:14px;order:2;margin-top:48px;height:calc(32px + var(--lk-vh) + 80px);border-radius:12px}
	@container (min-width:320px){.is-style-bewegende-kop>.lokaal-beeld{--lk-sk:.68;--lk-sd:16px}}
	@container (min-width:340px){.is-style-bewegende-kop>.lokaal-beeld{--lk-sk:.72;--lk-sd:18px}}
	@container (min-width:366px){.is-style-bewegende-kop>.lokaal-beeld{--lk-sk:.78;--lk-sd:20px}}
	.lokaal-venster{transform:translate(calc(50cqw - (320px * var(--lk-sk) + 2 * var(--lk-sd)) / 2 + var(--i) * var(--lk-sd)),calc(32px + (var(--lk-vh) - 192px * var(--lk-sk) - 2 * var(--lk-sd)) / 2 + var(--i) * var(--lk-sd))) scale(var(--lk-sk))}
	.lokaal-stappen{position:absolute;left:0;right:0;top:var(--st-top,calc(32px + var(--lk-vh) + 24px));display:flex;justify-content:center;align-items:center;gap:8px;z-index:5}
	.lokaal-stappen li{gap:8px;font-size:15px}
	.lokaal-stappen li+li::before{content:"";width:16px;height:0;margin-right:0;border-top:2px dashed currentColor;opacity:.35}
	.lokaal-stappen b{width:24px;height:24px;font-size:13px}
	/* Smalle telefoon (320): de stapper liep van -10 tot 298 in een beeld van 288 (sinds 0.1.65). Compacter, met de streepjes:
	   14, tussenruimte 6, streepje 10 = 8 aan beide kanten (gemeten, Henrik 03-11). */
	@container (max-width:319px){.lokaal-stappen,.lokaal-stappen li{gap:6px}.lokaal-stappen li{font-size:14px}.lokaal-stappen li+li::before{width:10px}}
}

@keyframes lk-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wp--preset--color--actie) 45%,transparent)}100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--wp--preset--color--actie) 0%,transparent)}}

/* Beginstand, alleen als het script draait (html.lk-js, niet bij minder beweging). */
html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-beeld{background:var(--lk-nacht)}
html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-venster{opacity:0;filter:none;box-shadow:0 0 0 1px rgba(35,58,82,.10),0 18px 40px -16px rgba(0,0,0,.45)}
html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-venster.lk-zicht{opacity:1}
html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-venster:not(.lk-klaar) .lokaal-pil[data-doel]{background:var(--wp--preset--color--base);border-color:#c3cfdb}
html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-venster:not(.lk-klaar) .lokaal-balkje i{width:18%}
html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-stappen li{color:#fff}
@media (min-width:782px){
	html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-beeld::after{opacity:0;transition:none}
	html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-stappen li{transform:translateY(10px)}
	/* Niet bij .lk-weg: deze regel was sterker dan het weggaan, zodat de woorden pas bij het eind verdwenen en de 3 even linksboven
	   opdook (Henrik 04-11). Bij het weggaan blijven ze op hun plek en vervagen ze. */
	html.lk-js .is-style-bewegende-kop:not(.lk-eind):not(.lk-weg) .lokaal-stappen li.lk-zicht{opacity:1;transform:none}
	html.lk-js .is-style-bewegende-kop.lk-weg .lokaal-stappen li{opacity:0;transform:none;transition:opacity .4s}
	html.lk-js .is-style-bewegende-kop:not(.lk-eind)>.wp-block-columns h1,
	html.lk-js .is-style-bewegende-kop:not(.lk-eind)>.wp-block-columns>.wp-block-column:last-child>*{opacity:0;transform:translateY(14px)}
	/* Kop, uitleg, actie, elk een eigen tel (Henrik 04-11: kop na ~7 s in plaats van ~9): de kop 0,7 s na het licht aan, de zin 0,5 s
	   later, de knop als laatste 0,3 s daarna. */
	html.lk-js .is-style-bewegende-kop>.wp-block-columns h1{transition:opacity .6s .7s,transform .8s cubic-bezier(.2,.8,.2,1) .7s}
	html.lk-js .is-style-bewegende-kop>.wp-block-columns>.wp-block-column:last-child>*{transition:opacity .6s 1.2s,transform .8s cubic-bezier(.2,.8,.2,1) 1.2s}
	html.lk-js .is-style-bewegende-kop>.wp-block-columns>.wp-block-column:last-child>.wp-block-buttons{transition:opacity .6s 1.5s,transform .8s cubic-bezier(.2,.8,.2,1) 1.5s}
	/* "Werkt met …" onder de knop (Henrik 11-11): komt na de knop in, 0,3 s later; binnen na 2,6 s (de wissel wacht daarop). */
	html.lk-js .is-style-bewegende-kop>.wp-block-columns>.wp-block-column:last-child>.werkt-met{transition:opacity .6s 1.8s,transform .8s cubic-bezier(.2,.8,.2,1) 1.8s}
	/* De slotzin van het verhaal (Henrik 04-11): als de knop er staat, één puls zoals de startknop van TIUD (ring 0 → 14, actierood 45%
	   → 0). Eén keer bij binnenkomst, geen reactie op de muis: de knop zelf blijft plat. Niet op de telefoon en niet bij minder beweging. */
	html.lk-js .is-style-bewegende-kop.lk-eind>.wp-block-columns .wp-block-button__link{animation:lk-puls 1.2s cubic-bezier(.2,0,0,1) 2.4s 1}
	/* Met het wisselwoord (Henrik 11-11): de puls wacht tot de ronde op "digitaal vaardig" landt (.wissel-wacht), dan pas de slotzin
	   (.wissel-puls, 0,3 s na het eind). Het script zet ze; draait de ronde niet (kop niet in beeld, andere breedte), dan komt de puls toch. */
	html.lk-js .is-style-bewegende-kop.wissel-wacht>.wp-block-columns .wp-block-button__link{animation:none}
	html.lk-js .is-style-bewegende-kop.lk-eind.wissel-puls>.wp-block-columns .wp-block-button__link{animation:lk-puls 1.2s cubic-bezier(.2,0,0,1) .3s 1}
	/* Decor (Henrik 04-11): het donker begon leeg en las als "laadt nog". Zodra het script de schermen op hun beginplek heeft gezet
	   (.lk-decor), staan ze er als silhouet en de woorden gedimd; het verhaal licht ze een voor een aan. Op de telefoon niet: daar
	   schuiven de schermen een voor een in en staat de stapper al gedimd. */
	/* Het decor komt zonder overgang van vlak en inhoud (alleen de dekking, inline in het script), anders flitsen de schermen even
	   wit; de overgang naar wit en de inhoud horen bij het oplichten (.lk-zicht). */
	html.lk-js .is-style-bewegende-kop.lk-decor:not(.lk-eind) .lokaal-venster{opacity:1;background:var(--lk-decor);box-shadow:inset 0 0 0 1px var(--lk-decor-rand)}
	html.lk-js .is-style-bewegende-kop.lk-decor:not(.lk-eind) .lokaal-venster:not(.lk-zicht)>*{opacity:0}
	html.lk-js .is-style-bewegende-kop.lk-decor:not(.lk-eind) .lokaal-venster.lk-zicht{background:var(--wp--preset--color--base);box-shadow:0 0 0 1px rgba(35,58,82,.10),0 18px 40px -16px rgba(0,0,0,.45);transition:opacity .5s,transform 1s cubic-bezier(.65,0,.25,1),filter 1s,box-shadow .5s,background .5s}
	html.lk-js .is-style-bewegende-kop.lk-decor:not(.lk-eind) .lokaal-venster.lk-zicht>*{transition:opacity .5s}
	/* In het decor alleen de nummers (Henrik 04-11): het woord is onzichtbaar en komt met zijn rondje tegelijk met de tegel binnen
	   (0,35 s na het begin van de stap, = het scherm in het script). De overgang alleen bij het verschijnen, anders flitsen de woorden
	   even op als het decor binnenkomt. */
	html.lk-js .is-style-bewegende-kop.lk-decor:not(.lk-eind):not(.lk-weg) .lokaal-stappen li{opacity:.35;transform:none;color:transparent;transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1)}
	html.lk-js .is-style-bewegende-kop.lk-decor:not(.lk-eind):not(.lk-weg) .lokaal-stappen li.lk-zicht{opacity:1;color:#fff;transition:opacity .5s .35s,color .5s .35s}
}
@media (max-width:781px){
	html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-stappen li{opacity:.35}
	html.lk-js .is-style-bewegende-kop:not(.lk-eind) .lokaal-stappen li.lk-aan{opacity:1}
	/* Schuiven tijdens het verhaal .7s, naar de stapel 1s. */
	.lokaal-venster{transition:opacity .45s,transform .7s cubic-bezier(.65,0,.25,1),box-shadow 1.2s}
	.is-style-bewegende-kop.lk-eind .lokaal-venster{transition-duration:.45s,1s,1.2s}
}