/* tegels.css: de twaalf effecttegels (markup in src/partials/_tegel.mjs).
   Elke tegel is een diagram van het effect, geen plaatje. Sierlijk (aria-hidden), zonder tekst, alleen CSS.

   Maat: de tegel is een container (inline-size) en heeft een breedte nodig van zijn omgeving (raster, kolom, vaste breedte). Eén eenheid
   --u is 1 procent van de tegelbreedte (cqw); het diagram heeft een veld van 100 bij 75 eenheden (4:3). Bij 16:9 is --u 0,75 procent,
   zodat het veld in de lagere tegel past; bij 1:1 blijft het veld 100 bij 75 in het midden. Wat tot de rand loopt (banden, rijen,
   kolommen) staat in .tegel__bg of steekt buiten het veld en wordt door de tegel afgeknipt. Zonder container-eenheden valt --u terug
   op een vaste maat (tegel van 340 px). Vormen krijgen hun plek met --tg-gx, --tg-gy, --tg-gw en --tg-gh in eenheden (inline in de
   markup of in een regel hieronder); alle eigen variabelen beginnen met --tg- of staan op .tegel zelf.

   Standen: de rustpose is de eindstaat. De tweede pose volgt uit --on (0 of 1), dat de actieve regel zet bij hover of :focus-within van
   een [data-tegel-host], of op .is-actief. Vormen berekenen hun plek met calc() uit --on, dus een enkele verandering van --on laat de
   CSS-transities op translate, scale, rotate en opacity lopen (de rest is clip-path bij 08). Duur: --dur is 2 x --t-middel erin en
   1 x erop uit (langzaam waar de bezoeker beslist, snel waar het systeem antwoordt). Curves: --ease-out, --ease-in-out en
   --ease-reveal uit tokens.css. Transities noemen hun eigenschappen, er is geen filter en geen oneindige animatie behalve de lopende
   strook, die alleen loopt zolang de host hover heeft (animation-play-state) en bij Beweging uit niet bestaat.

   Bij Beweging uit (html.motion-off), bij reduce en zonder hover (touch) zet niets --on: de tegel blijft in zijn rustpose. */

/* ---------- Basis ---------- */
.tegel {
  --on: 0;
  --run: paused;
  --j: jump-end;
  --stg: 45ms;
  --dur: calc(var(--t-middel) * var(--m) * (1 + var(--on)));
  --tg-bg: var(--papier-2);
  --tg-fg: var(--inkt);
  --tg-vul: var(--papier);
  --tg-dim: color-mix(in srgb, var(--inkt) 38%, transparent);
  --tg-zacht: color-mix(in srgb, var(--inkt) 13%, transparent);
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: clip;
  isolation: isolate;
  background: var(--tg-bg);
  border-radius: var(--r-vlak);
  color: var(--tg-fg);
}
.tegel--breed { aspect-ratio: 16 / 9; }
.tegel--vierkant { aspect-ratio: 1 / 1; }

/* De eenheid --u staat op het veld, de achtergrondlaag en (bij 08) het vlak. */
.tegel__veld,
.tegel__bg,
.tegel--opengaand-vlak .vl {
  --u: 1cqw;
  --ln: max(1px, calc(var(--u) * 0.5));
}
.tegel--breed .tegel__veld,
.tegel--breed .tegel__bg,
.tegel--breed.tegel--opengaand-vlak .vl { --u: 0.75cqw; }
@supports not (width: 1cqw) {
  .tegel__veld,
  .tegel__bg,
  .tegel--opengaand-vlak .vl { --u: 3.4px; }
  .tegel--breed .tegel__veld,
  .tegel--breed .tegel__bg,
  .tegel--breed.tegel--opengaand-vlak .vl { --u: 2.55px; }
}

.tegel__veld {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 75);
  margin: calc(var(--u) * -37.5) 0 0 calc(var(--u) * -50);
  pointer-events: none;
}
.tegel__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tegel__bg > i { position: absolute; display: block; }
.tegel__veld :is(i, b) {
  position: absolute;
  display: block;
  left: calc(var(--u) * var(--tg-gx));
  top: calc(var(--u) * var(--tg-gy));
  width: calc(var(--u) * var(--tg-gw));
  height: calc(var(--u) * var(--tg-gh));
  font-style: normal;
  font-weight: inherit;
  --tg-gx: 0;
  --tg-gy: 0;
  --tg-gw: 0;
  --tg-gh: 0;
}

/* Een vorm die van pose wisselt: verplaatsing (--tg-dx, --tg-dy in eenheden), schaal (--tg-s0 naar --tg-s1), dekking (--tg-o0 naar --tg-o1).
   --tg-gi is de plek in de volgorde voor de vertraging, --stg de stap ervan. */
.tegel .mv {
  --tg-gi: 0;
  --tg-dx: 0;
  --tg-dy: 0;
  --tg-o0: 1;
  --tg-o1: 1;
  --tg-s0: 1;
  --tg-s1: 1;
  --dr: var(--dur);
  --ez: var(--ease-out);
  --dl: calc(var(--tg-gi) * var(--stg, 45ms));
  translate: calc(var(--u) * var(--tg-dx) * var(--on)) calc(var(--u) * var(--tg-dy) * var(--on));
  scale: calc(var(--tg-s0) + (var(--tg-s1) - var(--tg-s0)) * var(--on));
  opacity: calc(var(--tg-o0) + (var(--tg-o1) - var(--tg-o0)) * var(--on));
  transition:
    translate var(--dr) var(--ez) var(--dl),
    scale var(--dr) var(--ez) var(--dl),
    opacity var(--dr) var(--ez) var(--dl);
}

/* Actief: alleen met een fijne aanwijzer, met beweging aan en niet bij Beweging uit of een mislukte laadstap */
/* Tijdens snel scrollen (chrome.js zet html.is-snel-scrollen zolang de scroll sneller gaat dan circa 800 px/s, plus 120 ms) telt de hover niet:
   schuiven kaarten onder een stilstaande aanwijzer door, dan wisselde de hoverstand per kaart en dwong dat stijlberekeningen over circa 330 elementen
   af (gemeten op 4x CPU: lange taken tot 111 ms in de galerij, boven het budget van 100 ms). Gewoon scrollen en de uitloop erna blijven hover houden en
   klikken werkt altijd; focus telt altijd (D07). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root:not(.motion-off):not(.motion-failed):not(.is-snel-scrollen) [data-tegel-host]:hover .tegel,
  :root:not(.motion-off):not(.motion-failed) [data-tegel-host]:focus-within .tegel,
  :root:not(.motion-off):not(.motion-failed) .tegel.is-actief {
    --on: 1;
    --run: running;
    --j: jump-start;
    --fz: var(--fz-in);
  }
}

@media (hover: hover) and (pointer: fine) {
  html.is-snel-scrollen [data-tegel-host] { pointer-events: none; }       /* geen hoverwissel per kaart terwijl ze voorbij vliegen (D07) */
}

/* Windows-hoog-contrast: de tegels zijn sierlijke plaatjes, ze houden hun eigen kleuren */
@media (forced-colors: active) {
  .tegel { forced-color-adjust: none; }
}

/* ---------- 01 Soepel scrollen: invoer is een trap, uitvoer een gedempte lijn ---------- */
.tegel--soepel-scrollen {
  --fz: var(--fz-uit);
  --fz-in: linear(0, 0.084 2.5%, 0.136 5%, 0.167 7.5%, 0.185 10%, 0.195 12.5%, 0.199 15%, 0.2 17.5%, 0.2 20%, 0.284 22.5%, 0.336 25%, 0.367 27.5%, 0.385 30%, 0.395 32.5%, 0.399 35%, 0.4 37.5%, 0.4 40%, 0.484 42.5%, 0.536 45%, 0.567 47.5%, 0.585 50%, 0.595 52.5%, 0.599 55%, 0.6 57.5%, 0.6 60%, 0.684 62.5%, 0.736 65%, 0.767 67.5%, 0.785 70%, 0.795 72.5%, 0.799 75%, 0.8 77.5%, 0.8 80%, 0.884 82.5%, 0.936 85%, 0.967 87.5%, 0.985 90%, 0.995 92.5%, 0.999 95%, 1 97.5%, 1);
  --fz-uit: linear(0, 0 2.5%, 0.001 5%, 0.005 7.5%, 0.015 10%, 0.033 12.5%, 0.064 15%, 0.116 17.5%, 0.2 20%, 0.2 22.5%, 0.201 25%, 0.205 27.5%, 0.215 30%, 0.233 32.5%, 0.264 35%, 0.316 37.5%, 0.4 40%, 0.4 42.5%, 0.401 45%, 0.405 47.5%, 0.415 50%, 0.433 52.5%, 0.464 55%, 0.516 57.5%, 0.6 60%, 0.6 62.5%, 0.601 65%, 0.605 67.5%, 0.615 70%, 0.633 72.5%, 0.664 75%, 0.716 77.5%, 0.8 80%, 0.8 82.5%, 0.801 85%, 0.805 87.5%, 0.815 90%, 0.833 92.5%, 0.864 95%, 0.916 97.5%, 1);
}
.tegel--soepel-scrollen .gr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.tegel--soepel-scrollen .ax { stroke: var(--tg-dim); stroke-width: 0.5; }
.tegel--soepel-scrollen .st { stroke: var(--tg-fg); stroke-width: 0.8; stroke-linejoin: miter; }
.tegel--soepel-scrollen .sm { stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tegel--soepel-scrollen .kd { --tg-gw: 2.8; --tg-gh: 2.8; border-radius: 50%; }
.tegel--soepel-scrollen .kb { --tg-gx: 5; --tg-gy: 0.5; --tg-gh: 1.8; }
.tegel--soepel-scrollen .k1 { background: var(--tg-fg); }
.tegel--soepel-scrollen .k2 { background: var(--accent); }
.tegel--soepel-scrollen .kb.k1 { --tg-gw: 15; }
.tegel--soepel-scrollen .kb.k2 { --tg-gw: 22; }
.tegel--soepel-scrollen .px {
  translate: calc(var(--u) * 75 * var(--on)) 0;
  transition: translate var(--dur) linear;
}
.tegel--soepel-scrollen .p1 {
  translate: 0 calc(var(--u) * -48 * var(--on));
  transition: translate var(--dur) steps(5, var(--j));
}
.tegel--soepel-scrollen .p2 {
  translate: 0 calc(var(--u) * -48 * var(--on));
  transition: translate var(--dur) var(--fz);
}
.tegel--soepel-scrollen .dt { --tg-gx: -2.1; --tg-gy: -2.1; --tg-gw: 4.2; --tg-gh: 4.2; border-radius: 50%; background: var(--tg-fg); box-shadow: 0 0 0 var(--ln) var(--tg-bg); }
.tegel--soepel-scrollen .p2 .dt { --tg-gx: -1.5; --tg-gy: -1.5; --tg-gw: 3; --tg-gh: 3; background: var(--accent); box-shadow: none; }

/* ---------- 02 Regelreveal: drie regels in een masker, een tweede ronde regels komt van onderen ---------- */
.tegel--regelreveal { --stg: 80ms; }
.tegel--regelreveal .ven {
  --tg-gx: 14;
  --tg-gw: 72;
  --tg-gh: 15;
  overflow: clip;
  background: var(--tg-zacht);
  border-block: var(--ln) solid var(--tg-dim);
}
.tegel--regelreveal .pr { --tg-gw: 72; --tg-gh: 30; --tg-dy: -15; --ez: var(--ease-reveal); }
.tegel--regelreveal .ln { --tg-gw: 72; --tg-gh: 15; }
.tegel--regelreveal .wd { background: var(--tg-fg); }
.tegel--regelreveal .wd.ac { background: var(--accent); }

/* ---------- 03 Woordscrub: woorden lichten op met de leespositie ---------- */
.tegel--woordscrub {
  --tg-bg: var(--inkt);
  --tg-fg: var(--papier);
  --tg-dim: color-mix(in srgb, var(--papier) 38%, transparent);
}
.tegel--woordscrub .wd {
  --dr: calc(var(--t-middel) * var(--m));
  --dl: calc(var(--on) * var(--tg-gi) * 34ms + (1 - var(--on)) * (12 - var(--tg-gi)) * 18ms);
  background: var(--tg-fg);
  border-radius: calc(var(--u) * 0.4);
}
.tegel--woordscrub .cr {
  --tg-gw: 1.1;
  --tg-gh: 7.6;
  --dr: var(--dur);
  --ez: var(--ease-in-out);
  --dl: 0ms;
  background: var(--accent);
}

/* ---------- 04 Lopende strook: twee rijen in tegengestelde richting, kantelen en lopen zolang de host hover heeft ---------- */
.tegel--lopende-strook {
  --tg-bg: var(--accent);
  --tg-fg: var(--inkt);
}
.tegel--lopende-strook .rj {
  --tg-gx: -50;
  --tg-gw: 200;
  --tg-gh: 17;
  transition: transform var(--dur) var(--ease-out);
  transform: skewX(calc(var(--on) * -7deg));
}
/* De rustpose is een bevroren stand van de lus (negatieve vertraging, gepauzeerd). Bij Beweging uit bestaat de animatie niet: dan
   staat dezelfde verschuiving als gewone waarde, zodat de pose gelijk blijft. */
.tegel--lopende-strook .sp {
  --tg-gx: 30;
  --tg-gy: 0;
  --tg-gh: 17;
  width: calc(var(--u) * var(--tg-W) * 2);
  translate: calc(var(--u) * var(--tg-W) * -0.2444) 0;
  animation: tegel-strook 9s linear infinite;
  animation-play-state: var(--run);
  animation-delay: -2.2s;
}
.tegel--lopende-strook .b .sp {
  translate: calc(var(--u) * var(--tg-W) * -0.5818) 0;
  animation-duration: 11s;
  animation-direction: reverse;
  animation-delay: -4.6s;
}
.tegel--lopende-strook .bl { --tg-gy: 0; --tg-gh: 17; }
.tegel--lopende-strook .bl.s { background: var(--inkt); }
.tegel--lopende-strook .bl.p { background: var(--papier); }
.tegel--lopende-strook .bl.o { border: calc(var(--u) * 0.9) solid var(--inkt); }
@keyframes tegel-strook {
  from { translate: 0 0; }
  to { translate: calc(var(--u) * var(--tg-W) * -1) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tegel--lopende-strook .sp { animation: none; }
}
:root.motion-off .tegel--lopende-strook .sp,
:root.motion-failed .tegel--lopende-strook .sp { animation: none; }

/* ---------- 05 Horizontaal pannen: de rij schuift achter het kader, de balk loopt mee ---------- */
.tegel--horizontaal-pannen .trk { --tg-gw: 204; --tg-gh: 36; --tg-dx: -34; --dr: calc(var(--dur) * 0.8); --ez: var(--ease-in-out); }
.tegel--horizontaal-pannen .spook { --tg-o0: 0.5; --tg-o1: 0.5; }
.tegel--horizontaal-pannen .kt {
  --tg-gy: 0;
  --tg-gw: 28;
  --tg-gh: 36;
  background: var(--tg-vul);
  border-radius: calc(var(--u) * 1.2);
  box-shadow: inset 0 0 0 var(--ln) var(--tg-dim);
}
.tegel--horizontaal-pannen .kt::before,
.tegel--horizontaal-pannen .kt::after {
  content: "";
  position: absolute;
  left: calc(var(--u) * 3);
}
.tegel--horizontaal-pannen .kt::before { top: calc(var(--u) * 3.4); width: calc(var(--u) * 13); height: calc(var(--u) * 2.2); background: var(--tg-fg); }
.tegel--horizontaal-pannen .kt::after { top: calc(var(--u) * 9); right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); background: var(--tg-zacht); }
.tegel--horizontaal-pannen .spook .kt { background: transparent; }
.tegel--horizontaal-pannen .spook .kt::before,
.tegel--horizontaal-pannen .spook .kt::after { display: none; }
.tegel--horizontaal-pannen .kd { --tg-gx: 10; --tg-gy: 12; --tg-gw: 80; --tg-gh: 44; overflow: clip; border-radius: calc(var(--u) * 1.2); }
.tegel--horizontaal-pannen .kf {
  --tg-gx: 10;
  --tg-gy: 12;
  --tg-gw: 80;
  --tg-gh: 44;
  border: calc(var(--ln) * 1.4) solid var(--tg-fg);
  border-radius: calc(var(--u) * 1.2);
}
.tegel--horizontaal-pannen .bn { --tg-gx: 10; --tg-gy: 63; --tg-gw: 80; --tg-gh: 0; border-top: var(--ln) solid var(--tg-dim); }
.tegel--horizontaal-pannen .th { --tg-gx: 10; --tg-gy: 62.2; --tg-gw: 14; --tg-gh: 1.6; --tg-dx: 66; --dr: calc(var(--dur) * 0.8); --ez: var(--ease-in-out); background: var(--accent); }

/* ---------- 06 Kaartenstapel: de vorige kaart krimpt (0,94) en dimt, de volgende schuift eroverheen ---------- */
.tegel--kaartenstapel .kk {
  --tg-gx: 18;
  --tg-gw: 64;
  --tg-gh: 46;
  transform-origin: 50% 0;
  background: var(--tg-vul);
  border-radius: calc(var(--u) * 1.4);
  box-shadow: inset 0 0 0 var(--ln) var(--tg-dim);
  overflow: clip;
}
.tegel--kaartenstapel .ka { --tg-gy: 4; --tg-s0: 0.94; --tg-s1: 0.88; }
.tegel--kaartenstapel .kb { --tg-gy: 12; --tg-s0: 1; --tg-s1: 0.94; }
.tegel--kaartenstapel .kc { --tg-gy: 62; --tg-dy: -41.7; --dr: calc(var(--dur) * 0.8); --ez: var(--ease-in-out); background: var(--tg-fg); box-shadow: none; }
.tegel--kaartenstapel .lb { --tg-gx: 4; --tg-gy: 4; --tg-gw: 8; --tg-gh: 1.4; background: var(--accent); }
.tegel--kaartenstapel .tt { --tg-gx: 4; --tg-gy: 9.5; --tg-gw: 34; --tg-gh: 4.2; background: var(--tg-fg); }
.tegel--kaartenstapel .l1 { --tg-gx: 4; --tg-gy: 19; --tg-gw: 50; --tg-gh: 1.8; background: var(--tg-dim); }
.tegel--kaartenstapel .l2 { --tg-gx: 4; --tg-gy: 23.5; --tg-gw: 42; --tg-gh: 1.8; background: var(--tg-dim); }
.tegel--kaartenstapel .bk { --tg-gx: 4; --tg-gy: 30; --tg-gw: 56; --tg-gh: 12; background: var(--tg-zacht); }
.tegel--kaartenstapel .kc .tt { background: var(--papier); }
.tegel--kaartenstapel .kc .l1,
.tegel--kaartenstapel .kc .l2 { background: color-mix(in srgb, var(--papier) 50%, transparent); }
.tegel--kaartenstapel .kc .bk { background: color-mix(in srgb, var(--papier) 14%, transparent); }
.tegel--kaartenstapel .dm { --tg-gx: 0; --tg-gy: 0; --tg-gw: 64; --tg-gh: 46; background: var(--inkt); border-radius: inherit; }
.tegel--kaartenstapel .ka .dm { --tg-o0: 0.1; --tg-o1: 0.26; }
.tegel--kaartenstapel .kb .dm { --tg-o0: 0; --tg-o1: 0.14; }
.tegel--kaartenstapel .kc .dm { --tg-o0: 0; --tg-o1: 0; }

/* ---------- 07 Licht naar donker: een getrapte schaal, de tekst keert om op elke trede ---------- */
.tegel--licht-naar-donker .bd {
  left: calc(100% * var(--tg-n) / 6);
  top: 0;
  width: calc(100% / 6 + 1px);
  height: 100%;
  background: var(--papier-2);
}
.tegel--licht-naar-donker .bv { position: absolute; inset: 0; --stg: 70ms; --dr: calc(var(--dur) * 0.8); --ez: var(--ease-in-out); background: var(--inkt); }
.tegel--licht-naar-donker .tx { background: var(--papier); mix-blend-mode: difference; }
.tegel--licht-naar-donker .fr {
  --tg-gx: 49.55;
  --tg-gy: -14;
  --tg-gw: 0.9;
  --tg-gh: 103;
  background: var(--accent);
  translate: calc(var(--on) * -33.3333cqw) 0;
  transition: translate calc(var(--dur) * 0.8) var(--ease-in-out);
}

/* ---------- 08 Opengaand vlak: het vlak groeit van een afgerond blokje tot het kader, de schakelaar erin gaat om ---------- */
.tegel--opengaand-vlak .pg { background: var(--tg-dim); }
.tegel--opengaand-vlak .vl {
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: inset(
    calc((50% - var(--u) * 20) * (1 - var(--on)))
    calc((50% - var(--u) * 26) * (1 - var(--on)))
    round calc(var(--u) * 3 * (1 - var(--on))));
  transition: clip-path calc(var(--dur) * 0.8) var(--ease-in-out);
}
.tegel--opengaand-vlak .hd { background: var(--inkt); }
.tegel--opengaand-vlak .hd.z { background: color-mix(in srgb, var(--inkt) 72%, transparent); }
.tegel--opengaand-vlak .sw {
  --tg-gw: 17;
  --tg-gh: 8;
  border: calc(var(--u) * 0.9) solid var(--inkt);
  border-radius: 999px;
}
.tegel--opengaand-vlak .sf {
  --tg-gx: 0;
  --tg-gy: 0;
  --tg-gw: 15.2;
  --tg-gh: 6.2;
  --tg-o0: 0;
  --tg-o1: 1;
  --dl: calc(var(--on) * 380ms);
  --ez: var(--ease-out);
  background: var(--inkt);
  border-radius: 999px;
}
.tegel--opengaand-vlak .sk {
  --tg-gx: 0.8;
  --tg-gy: 0.8;
  --tg-gw: 4.6;
  --tg-gh: 4.6;
  --tg-dx: 9;
  --dl: calc(var(--on) * 380ms);
  --ez: var(--ease-out);
  border-radius: 50%;
  background: var(--papier);
  border: calc(var(--u) * 0.5) solid var(--inkt);
}

/* ---------- 09 Halftone-shader: de puntgrootte golft rond de aanwijzer, de aanwijzer verschuift ---------- */
.tegel--halftone-shader {
  --tg-bg: var(--inkt);
  --tg-fg: var(--papier);
  --stg: 14ms;
}
.tegel--halftone-shader .dt {
  --tg-gw: 7.4;
  --tg-gh: 7.4;
  --dr: calc(var(--t-middel) * var(--m));
  --dl: calc((var(--on) * var(--tg-gi) + (1 - var(--on)) * var(--tg-gj)) * var(--stg));
  border-radius: 50%;
  background: var(--papier);
}
.tegel--halftone-shader .ri {
  --tg-gw: 18;
  --tg-gh: 18;
  --dr: calc(var(--dur) * 0.9);
  --dl: 0ms;
  border: calc(var(--u) * 0.9) solid var(--accent);
  border-radius: 50%;
}

/* ---------- 10 Cursor en magneet: stip, ring en knop trekken naar elkaar, de knop vult zich ---------- */
.tegel--cursor-en-magneet .fd {
  --tg-gx: 35;
  --tg-gy: 5;
  --tg-gw: 50;
  --tg-gh: 50;
  border: var(--ln) dashed var(--tg-dim);
  border-radius: 50%;
}
.tegel--cursor-en-magneet .kn {
  --tg-gx: 40;
  --tg-gy: 23;
  --tg-gw: 40;
  --tg-gh: 14;
  --tg-dx: -3.4;
  --tg-dy: 3.6;
  --dr: calc(var(--t-middel) * var(--m));
  --dl: 0ms;
  overflow: clip;
  border: calc(var(--u) * 0.8) solid var(--tg-fg);
  border-radius: 999px;
}
.tegel--cursor-en-magneet .wp {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tg-fg);
  translate: 0 calc((1 - var(--on)) * 101%);
  transition: translate calc(var(--t-middel) * var(--m) * 0.8) var(--ease-out) calc(var(--on) * 150ms);
}
.tegel--cursor-en-magneet .lb,
.tegel--cursor-en-magneet .lq {
  --tg-gx: 11.2;
  --tg-gy: 5.2;
  --tg-gw: 16;
  --tg-gh: 2;
  --dr: calc(var(--t-snel) * var(--m) * 2);
  --dl: calc(var(--on) * 260ms);
  background: var(--tg-fg);
}
.tegel--cursor-en-magneet .lb { --tg-o0: 1; --tg-o1: 0; }
.tegel--cursor-en-magneet .lq { --tg-o0: 0; --tg-o1: 1; background: var(--papier); }
.tegel--cursor-en-magneet .rg {
  --tg-gx: 15.5;
  --tg-gy: 47.5;
  --tg-gw: 17;
  --tg-gh: 17;
  --tg-dx: 28;
  --tg-dy: -17;
  --dr: calc(var(--t-middel) * var(--m) * 0.9);
  --dl: 0ms;
}
.tegel--cursor-en-magneet .rs {
  --tg-gw: 17;
  --tg-gh: 17;
  --tg-s1: 1.45;
  --dr: calc(var(--t-middel) * var(--m));
  --dl: calc(var(--on) * 120ms);
  border: calc(var(--u) * 0.8) solid var(--accent);
  border-radius: 50%;
}
.tegel--cursor-en-magneet .pt {
  --tg-gx: 22.5;
  --tg-gy: 54.5;
  --tg-gw: 3;
  --tg-gh: 3;
  --tg-dx: 28;
  --tg-dy: -17;
  --dr: calc(var(--t-snel) * var(--m) * 1.5);
  --dl: 0ms;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- 11 Hover-preview: het kaartje volgt de aanwijzer naar een andere rij en kantelt mee ---------- */
.tegel--hover-preview .rw { --tg-gx: 10; --tg-gw: 52; --tg-gh: 11; }
.tegel--hover-preview .hl { --tg-gw: 52; --tg-gh: 0; border-top: var(--ln) solid var(--tg-dim); }
.tegel--hover-preview .hl.onder { --tg-gx: 10; }
.tegel--hover-preview .tl { --dr: calc(var(--t-middel) * var(--m)); --dl: 0ms; background: var(--tg-fg); }
.tegel--hover-preview .nm { background: var(--tg-dim); }
.tegel--hover-preview .kd {
  --tg-gx: 58;
  --tg-gy: 14.5;
  --tg-gw: 30;
  --tg-gh: 23;
  --tg-dx: 3;
  --tg-dy: 22;
  --dr: calc(var(--t-middel) * var(--m));
  --dl: 0ms;
  background: var(--tg-vul);
  border-radius: calc(var(--u) * 1.4);
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) rgb(21 19 15 / 0.2), inset 0 0 0 var(--ln) var(--tg-dim);
  rotate: calc((-5 + 8 * var(--on)) * 1deg);
  transition:
    translate var(--dr) var(--ease-out),
    rotate calc(var(--dr) * 1.5) var(--ease-reveal);
}
.tegel--hover-preview .im { --tg-gx: 2.5; --tg-gy: 2.5; --tg-gw: 25; --tg-gh: 12.5; background: var(--tg-fg); }
.tegel--hover-preview .pl { --tg-gx: 3; --tg-gy: 3; --tg-gw: 5; --tg-gh: 5; border-radius: 50%; background: var(--accent); }
.tegel--hover-preview .l1 { --tg-gx: 2.5; --tg-gy: 17.5; --tg-gw: 19; --tg-gh: 1.8; background: var(--tg-fg); }
.tegel--hover-preview .l2 { --tg-gx: 2.5; --tg-gy: 20.4; --tg-gw: 11; --tg-gh: 1.4; background: var(--tg-dim); }
.tegel--hover-preview .cu { --tg-gx: -2; --tg-gy: -2; --tg-gw: 4; --tg-gh: 4; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(var(--u) * 0.7) var(--tg-bg); }

/* ---------- 12 Paginaovergang: vijf kolommen schuiven als sluiters door het beeld, het label gaat omhoog weg ---------- */
.tegel--paginaovergang .pg { background: var(--tg-dim); }
.tegel--paginaovergang .cl {
  --dr: calc(var(--dur) * 0.8);
  --ez: var(--ease-in-out);
  --dl: calc((var(--on) * var(--tg-ko) + (1 - var(--on)) * (2 - var(--tg-ko))) * 55ms);
  left: calc(20% * var(--tg-n));
  top: 0;
  width: calc(20% + 1px);
  height: 100%;
  background: var(--inkt);
  box-shadow: inset calc(var(--u) * 0.3) 0 0 var(--papier-2), inset calc(var(--u) * -0.3) 0 0 var(--papier-2);
  translate: 0 calc((var(--tg-ya) + (var(--tg-yb) - var(--tg-ya)) * var(--on)) * 1%);
}
.tegel--paginaovergang .cl:first-child { box-shadow: inset calc(var(--u) * -0.3) 0 0 var(--papier-2); }
.tegel--paginaovergang .cl:last-child { box-shadow: inset calc(var(--u) * 0.3) 0 0 var(--papier-2); }
.tegel--paginaovergang .lw { --tg-gx: 28; --tg-gy: 33; --tg-gw: 44; --tg-gh: 10; overflow: clip; }
.tegel--paginaovergang .lt {
  --tg-gw: 44;
  --tg-gh: 10;
  translate: 0 calc(var(--on) * -125%);
  transition: translate calc(var(--dur) * 0.7) var(--ease-out) calc(var(--dur) * (0.45 * var(--on) + 0.4 * (1 - var(--on))));
}
.tegel--paginaovergang .lm { --tg-gx: 5; --tg-gy: 1.2; --tg-gw: 30; --tg-gh: 7.6; background: var(--papier); }
.tegel--paginaovergang .lp { --tg-gx: 37.5; --tg-gy: 5.2; --tg-gw: 3; --tg-gh: 3; border-radius: 50%; background: var(--accent); }