/* ==========================================================================
   DSD · BEWEGING — één bewegingssysteem voor alle DSD-pagina's
   "Inkt & rijstpapier": niets druk, alles vloeiend en bewust.

   Laden:   <link rel="stylesheet" href="…/beweging/beweging.css?v=…">
            <script>(kopregel uit README/index.html: zet b-js + b-beweeg|b-rustig vóór de eerste verf)</script>
            <script type="module" src="…/beweging/beweging.js?v=…"></script>
   Vereist: dsd-tokens.css (kleuren, fonts) vóór dit bestand.
   Regels:  alleen transform / opacity / filter per frame; keyframes met LETTERLIJKE waarden
            (een var() in transform-keyframes haalt de animatie van de compositor: gemeten);
            alles pauzeert buiten beeld (.b-pauze) en bij een verborgen tab (html.b-verborgen);
            in rust geen 3D-transform of will-change op iets dat niet speelt (anders: compositielagen,
            en alles wat erna komt en overlapt krijgt óók een laag — gemeten in de LayerTree);
            html.b-rustig = alles statisch in een gecomponeerde eindstand.
   Specificatie en meetwaarden: index.html (demo) en METING.md.
   ========================================================================== */

/* ------------------------------------------------------------- 0. geregistreerde eigenschappen */
@property --b-vt{syntax:'<length>';inherits:true;initial-value:0px}                /* inktmasker van een bladwissel */

/* ------------------------------------------------------------- 1. TOKENS
   Duur (--b-d-*): elke stap ≈ ×1,6. Hoe groter het oppervlak, hoe langer de duur en hoe kleiner de uitslag.
   Perioden (--b-p-*): priemgetallen, zodat lagen nooit tegelijk omkeren (kgv ≈ 10^15 s).
   Easings (--b-e-*), vertragingen (--b-v-*), amplitudes (--b-a-*). beweging.js leest dezelfde tokens. */
:root{
  --b-d-tik:120ms;      /* indrukken, loslaten */
  --b-d-kort:200ms;     /* hover in, overvloeiers */
  --b-d-staat:280ms;    /* focus, schakelaar, label wisselt */
  --b-d-zegel:460ms;    /* kaart tilt, linkstreek, vinkje */
  --b-d-stempel:560ms;  /* zegel valt, slaat in, zindert na */
  --b-d-rol:720ms;      /* menu ontrolt, inktvlek in een knop */
  --b-d-onthul:900ms;   /* tekstblok rijst op (lezen gaat voor: ≤ 900 ms) */
  --b-d-letter:1000ms;  /* één titelletter verschijnt in inkt */
  --b-d-tel:1500ms;     /* cijfers tellen op */
  --b-d-teken:1600ms;   /* gouden lijn / ornament tekent zich */
  --b-d-inkt:1800ms;    /* beeld vloeit uit als inkt */
  --b-d-penseel:2200ms; /* plafond voor één kalligrafisch woord */
  --b-d-glans:2200ms;   /* skeletglans (lus) */
  --b-d-camera:2400ms;  /* 3D-intree */

  --b-p-tak:11s;  --b-p-maan:13s;  --b-p-papier:23s; --b-p-licht:47s;  --b-p-berg:71s;
  --b-p-berg-ver:97s; --b-p-mist-b:101s; --b-p-mist-c:149s; --b-p-mist-a:199s; --b-p-nevel:293s;

  --b-e-uit:cubic-bezier(.2,.7,.2,1);          /* binnenkomen (= --ease van de kit) */
  --b-e-in:cubic-bezier(.55,0,.75,.2);         /* weggaan: altijd korter dan komen */
  --b-e-inkt:cubic-bezier(.16,.84,.24,1);      /* INKT-UITVLOEI: snel nat, lange staart */
  --b-e-vloei:cubic-bezier(.5,.25,.2,1);       /* inktmasker: rustig aanzetten, lang intrekken */
  --b-e-penseel:cubic-bezier(.62,.04,.3,1);    /* penseel: aarzelt, trekt, legt neer */
  --b-e-teken:cubic-bezier(.45,.05,.15,1);     /* gouden lijn: rustig vertrek, zacht aankomen */
  --b-e-adem:cubic-bezier(.37,0,.63,1);        /* PAPIER-ADEM: sinus in/uit, alles wat heen en weer gaat */
  --b-e-wind:cubic-bezier(.45,.05,.4,1);       /* tak: trage aanloop, zacht uitzwaaien */
  --b-e-stempel-in:cubic-bezier(.55,0,.8,.25); /* zegel valt (versnelt) */
  --b-e-stempel-uit:cubic-bezier(.2,.9,.3,1);  /* zegel zet zich */
  --b-e-veer:cubic-bezier(.34,1.32,.6,1);      /* hooguit ±5 % doorschieten (ruitjes, ringen) */

  --b-v-letter:45ms;  /* tussen titelletters */
  --b-v-item:90ms;    /* tussen kaarten / regels in een reeks */
  --b-v-pad:120ms;    /* tussen lijnen in een tekening */
  --b-v-max:600ms;    /* wat later komt, komt tegelijk: een lange reeks laat nooit wachten */
  --b-v-tik:90ms;     /* aanraken vasthouden vóór een kaart optilt (scrollen triggert niets) */

  --b-a-op:10px;      /* blok rijst op */
  --b-a-til:2px;      /* kaart tilt ≈ ½ mm */
  --b-a-druk:.982;    /* knop indrukken */
  --b-a-blur:6px;     /* inkt: van wazig naar scherp */
  --b-a-stempel:1.16; /* zegel begint zo groot */
  --b-a-kantel:5deg;  /* zegel begint zo scheef */
  --b-a-hoek:1px;     /* hoekornament wijkt uit */
  --b-focus:#7A5C1E;  /* focusring: 5,4:1 op rijst, 5,0:1 op rijst2 (WCAG 1.4.11 vraagt 3:1) */
  --b-korrel:url(assets/orn/korrel.png?v=1d0d2242);   /* fijne korrel tegen banding in brede verlopen. Een url() in een custom property wordt opgelost t.o.v. het stylesheet waar hij wordt gebruikt: buiten dit bestand een eigen url() */
  /* ambient (staan letterlijk in de keyframes; wijzig token en keyframe samen):
     papier .30→.55 · licht −4 %/3 % · maan ×1,012 · tak ±.45° · bergen ±6 / ±3 px · mist 6–12 px/s
     parallax per diepte 1–5: ±5 / 10 / 18 / 28 / 40 px over de hele doorgang van de scène */

  --b-m:1;            /* bewegingsfactor: 1 = beweging, 0 = rustig (zet html.b-rustig) */
}
html.b-rustig{--b-m:0}

/* ------------------------------------------------------------- 2. TOESTANDEN
   Zichtbaar is de standaard. Alleen html.b-beweeg (kopregel, vóór de eerste verf) verbergt beginstanden;
   beweging.js zet .b-af zodra een element speelt. Start de module niet binnen 3,5 s (traag netwerk), dan haalt de
   kopregel b-beweeg weg en zet b-vangnet: alles is zichtbaar. Start de module later alsnog, dan blijft wat in beeld
   stond staan, onthult de rest gewoon en lopen alle lussen (ronde 4: vroeger werd het hele bezoek b-rustig). */
html.b-beweeg [data-b]:not(.b-af){opacity:0}
html.b-beweeg [data-b=stempel]:not(.b-af) .b-zegel__deuk{opacity:0}
.b-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ------------------------------------------------------------- 3. SFEER — papier ademt, licht valt (in de held)
   Zet .b-sfeer als EERSTE kind in de bovenste .b-scene (de held). Bewust niet position:fixed en niet los onder <body>:
   een gecomponeerde laag onder de inhoud dwingt alles wat erna getekend wordt in één extra laag zo hoog als de pagina
   (LayerTree: 57 × de viewport). In de held blijft alles binnen de laaggroep van de scène; daaronder ligt het papier
   stil (de papiertextuur van de pagina zelf); buiten beeld pauzeert het, ver weg wordt het niet eens getekend. */
.b-sfeer{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
/* ronde 4: vezels en licht in ÉÉN laag (was twee lagen van 1,08 × de viewport). Het vezelvel (vezel-held.webp,
   512 × 1280, naadloos in x) staat onderaan uitgelijnd en loopt onderaan uit naar niets: geen rechte snede waar de
   held eindigt, en geen masker (een masker = nog een laag zo groot als de held). Het licht staat bovenaan en is
   ruim vóór de onderrand op nul. Adem: opacity ,60 → 1 (23 s) en een drift van 10 × 8 px (47 s), twee lussen op
   dezelfde laag. Oude opmaak (__licht + __vezel) werkt nog: __licht wordt het vel, __vezel valt weg. */
.b-sfeer__vezel{display:none}
.b-sfeer__vel,.b-sfeer__licht{position:absolute;inset:-12px;backface-visibility:hidden;opacity:.6;
  background:radial-gradient(52% 40% at 82% 4%,rgba(var(--goud-rgb),.17),rgba(var(--goud-rgb),.075) 34%,rgba(var(--goud-rgb),.022) 56%,rgba(var(--goud-rgb),0) 70%),
             radial-gradient(46% 30% at 8% 58%,rgba(var(--inkt-rgb),.04),rgba(var(--inkt-rgb),0) 70%),
             url(assets/mist/vezel-held.webp?v=f1884698) 0 100%/512px auto repeat-x;
  animation:b-papier var(--b-p-papier) var(--b-e-adem) infinite alternate,b-licht var(--b-p-licht) var(--b-e-adem) infinite alternate}
html:not(.b-rustig) .b-sfeer:not(.b-pauze) :is(.b-sfeer__vel,.b-sfeer__licht){will-change:opacity,transform}
@keyframes b-papier{to{opacity:1}}
@keyframes b-licht{from{transform:translate3d(0,0,0)}to{transform:translate3d(-10px,8px,0)}}

/* ------------------------------------------------------------- 4. SCÈNE — maan, nevel, bergen, mist, tak, bloesem */
.b-scene{position:relative;overflow:hidden;isolation:isolate;contain:paint}
/* elke scène (en elk lus-podium) is één laaggroep: wat erin beweegt en wat eroverheen staat, blijft binnen de scène.
   Zonder dit belandde alle inhoud ná de held in één laag van 14 000 px ("Overlap" in de LayerTree).
   Ronde 4: alleen zolang de scène speelt. Gepauzeerd (buiten beeld) geeft hij zijn laag terug (WebKit: elke laag
   heeft een eigen opslag; Chromium: de tegels van een laag zonder will-change mogen weg). */
html:not(.b-rustig) :is(.b-scene,[data-b-lus]):not(.b-pauze){will-change:transform}   /* ronde 5: rustig = stilstaand beeld, geen lagen */
.b-scene__lagen{position:absolute;inset:0;pointer-events:none;z-index:0}
.b-laag{position:absolute;inset:0;backface-visibility:hidden}
/* uitloop: een held eindigt nooit met een rechte snede. Zet .b-scene--uitloop op de held en houd de onderste
   --b-uitloop (140 px) vrij van harde vormen: sfeer, maan, mist en bergen zijn daar op nul (zie de demo). Bewust geen
   mask-image: dat maakt van de hele lagengroep een extra laag (+0,9 × de viewport op de telefoon). */
.b-scene--uitloop{--b-uitloop:140px}
.b-maan{position:absolute;aspect-ratio:1}
/* ronde 4: schijf en gloed in ÉÉN laag (was 622² + 511² px op de telefoon, nu 1 × ±490²). De gloed loopt nu op 86 %
   van de straal naar nul (was een lege rand van een derde), de schijf zit erin. Adem: ×1,012 en opacity ,82 → 1.
   Oude opmaak met __gloed werkt nog: __gloed valt weg, __schijf draagt beide. */
.b-maan__gloed{display:none}
.b-maan__schijf{position:absolute;inset:-28%;border-radius:50%;backface-visibility:hidden;opacity:.82;
  background:radial-gradient(35.7% 35.7% at 45.5% 44.5%,rgba(247,234,203,.95) 0,rgba(237,215,162,.74) 68%,rgba(221,187,106,.30) 96%,rgba(221,187,106,0) 100%),
             radial-gradient(50% 50% at 50% 50%,rgba(var(--goud-rgb),.16) 0,rgba(var(--goud-rgb),.10) 28%,rgba(var(--goud-rgb),.055) 51%,rgba(var(--goud-rgb),.018) 75%,rgba(var(--goud-rgb),0) 95%);
  animation:b-maan var(--b-p-maan) var(--b-e-adem) infinite alternate}
@keyframes b-maan{to{opacity:1;transform:scale(1.012)}}

.b-berg{position:absolute;left:-15%;width:130%;height:auto;max-width:none;display:block;user-select:none;-webkit-user-drag:none}
.b-berg--ver{opacity:var(--op-bergen,.5);animation:b-drift-ver var(--b-p-berg-ver) var(--b-e-adem) infinite alternate}
.b-berg--dicht{animation:b-drift var(--b-p-berg) var(--b-e-adem) infinite alternate}
@keyframes b-drift-ver{from{transform:translate3d(-6px,0,0)}to{transform:translate3d(6px,0,0)}}
@keyframes b-drift{from{transform:translate3d(3px,0,0)}to{transform:translate3d(-3px,0,0)}}

/* mist: naadloze tegel (periodieke ruis), schuift precies één tegel per periode; dichtbij sneller dan veraf */
.b-mist{position:absolute;left:0;height:var(--h,180px);backface-visibility:hidden;background-repeat:repeat-x;background-position:0 0}
.b-mist--a{width:calc(100% + 1600px);background-image:url(assets/mist/mist-a.webp?v=a79ab797);background-size:1600px 100%;animation:b-mist-1600 var(--b-p-mist-a) linear infinite}
.b-mist--b{width:calc(100% + 1200px);background-image:url(assets/mist/mist-b-dicht.webp?v=452460e6);background-size:1200px 100%;animation:b-mist-1200 var(--b-p-mist-b) linear infinite}
.b-mist--c{width:calc(100% + 1400px);background-image:url(assets/mist/mist-c.webp?v=43747339);background-size:1400px 100%;animation:b-mist-1400 var(--b-p-mist-c) linear infinite}
.b-mist--nevel{width:calc(100% + 1800px);background-image:url(assets/mist/inktnevel.webp?v=4847378b);background-size:1800px 100%;animation:b-mist-1800 var(--b-p-nevel) linear infinite}
@keyframes b-mist-1200{from{transform:translate3d(-1200px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes b-mist-1400{from{transform:translate3d(-1400px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes b-mist-1600{from{transform:translate3d(-1600px,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes b-mist-1800{from{transform:translate3d(-1800px,0,0)}to{transform:translate3d(0,0,0)}}
/* Telefoon (ronde 4): eigen tegels met een periode van 512 px (mist-*-512.webp, dezelfde ruis en korrel). Een periode
   groter dan het scherm toont nooit een herhaling, en elke strook is nu 430 + 512 = 942 px breed (was 1 150–1 510):
   ±40 % minder laagoppervlak. Snelheid in px/s blijft gelijk: a 4,8 · b (voorste, dicht) 17,7 · c 5,8 · nevel 3,7 px/s
   → perioden 107 · 29 · 89 · 139 s (priemgetallen, zoals de rest). */
@media (max-width:640px){
  .b-mist{width:calc(100% + 512px);background-size:512px 100%;animation-name:b-mist-512}
  .b-mist--a{background-image:url(assets/mist/mist-a-512.webp?v=ccb2a45d);animation-duration:107s}
  .b-mist--b{background-image:url(assets/mist/mist-b-512.webp?v=8c79ac1d);animation-duration:29s}
  .b-mist--c{background-image:url(assets/mist/mist-c-512.webp?v=d8f9e27e);animation-duration:89s}
  .b-mist--nevel{background-image:url(assets/mist/inktnevel-512.webp?v=08abf3cf);animation-duration:139s}
}
@keyframes b-mist-512{from{transform:translate3d(-512px,0,0)}to{transform:translate3d(0,0,0)}}
/* will-change alleen zolang een scène speelt: een gepauzeerde scène buiten beeld houdt zo geen lagen in het geheugen */
html:not(.b-rustig) :is(.b-scene,[data-b-lus]):not(.b-pauze) :is(.b-mist,.b-berg,.b-tak,.b-maan__schijf){will-change:transform}

/* pruimentak: draait om het punt waar hij binnenkomt (rechtsboven); asymmetrisch zoals wind */
.b-tak{position:absolute;opacity:var(--op-tak,.8);transform-origin:96% 6%;user-select:none;-webkit-user-drag:none;
  animation:b-wind var(--b-p-tak) var(--b-e-wind) infinite alternate}
@keyframes b-wind{0%{transform:rotate(-.45deg)}62%{transform:rotate(.36deg)}100%{transform:rotate(.45deg)}}
.b-draak{position:absolute;opacity:var(--op-watermerk,.05);user-select:none;-webkit-user-drag:none} /* stil: bewust */

/* bloesemblaadjes: beweging.js plaatst ze (Web Animations, alleen transform/opacity) */
.b-bloesem{position:absolute;inset:0;overflow:hidden}
/* ronde 5: het bladveld is zelf een (lege, niet-tekenende) laag. Anders werd het veld, zo groot als de held, het begin van
   een 'Overlap'-laag waarin alles erboven samenkwam: 430 × 676 tijdens de intro (gemeten), nu alleen nog het tekstblok */
html:not(.b-rustig) .b-scene:not(.b-pauze) .b-bloesem{will-change:transform}
.b-blad{position:absolute;left:0;top:0;display:block;width:var(--s,12px);opacity:0}
.b-blad>svg{display:block;width:100%;height:auto;overflow:visible}
.b-blad--rust{opacity:.85}

/* ------------------------------------------------------------- 5. PARALLAX — op de compositor (scroll-driven animations)
   data-b-diepte="1…5" op een .b-laag binnen een .b-scene. 0 px als de scène midden in beeld staat
   (een hero bovenaan een pagina staat dus in rust bij scrollY 0). Zonder ondersteuning: stil, geen JS-terugval. */
@supports (animation-timeline:view()){
  .b-scene{view-timeline:--b-scene block}
  .b-laag[data-b-diepte]{animation:linear both;animation-timeline:--b-scene;animation-range:cover 0% cover 100%}
  html:not(.b-rustig) .b-scene:not(.b-pauze) .b-laag[data-b-diepte]{will-change:translate}
  .b-laag[data-b-diepte="1"]{animation-name:b-plx-1}
  .b-laag[data-b-diepte="2"]{animation-name:b-plx-2}
  .b-laag[data-b-diepte="3"]{animation-name:b-plx-3}
  .b-laag[data-b-diepte="4"]{animation-name:b-plx-4}
  .b-laag[data-b-diepte="5"]{animation-name:b-plx-5}
}
@keyframes b-plx-1{from{translate:0 -5px}to{translate:0 5px}}
@keyframes b-plx-2{from{translate:0 -10px}to{translate:0 10px}}
@keyframes b-plx-3{from{translate:0 -18px}to{translate:0 18px}}
@keyframes b-plx-4{from{translate:0 -28px}to{translate:0 28px}}
@keyframes b-plx-5{from{translate:0 -40px}to{translate:0 40px}}

/* ------------------------------------------------------------- 6. ONTHULLEN — hulpvormen (de animaties zelf: beweging.js) */
.b-l{display:inline-block;white-space:pre}                 /* één titelletter */
.b-lijn{display:block;height:1px;border:0;margin:0;transform-origin:50% 50%;
  background:linear-gradient(90deg,rgba(var(--dgoud-rgb),0),var(--lijn-goud) 18%,var(--dgoud) 50%,var(--lijn-goud) 82%,rgba(var(--dgoud-rgb),0))}
.b-lijn[data-b-van=links]{transform-origin:0 50%;background:linear-gradient(90deg,var(--dgoud),var(--lijn-goud) 70%,rgba(var(--dgoud-rgb),0))}
/* inktbeeld: een zachte inktvlek (dichte kern, brede vezelige rand, geen losse spatten) groeit vanuit het hart van het
   beeld; maat en plek zet beweging.js in px. Alleen tijdens de onthulling. */
.b-vloeit{-webkit-mask:url(assets/orn/inkt-zacht.webp?v=16b3cbb4) no-repeat 50% 50%/0 0;mask:url(assets/orn/inkt-zacht.webp?v=16b3cbb4) no-repeat 50% 50%/0 0}
/* zegel: beeld + inktvlek (bij de klap) + deuk (papier drukt in, blijft) — vlek en deuk zet beweging.js erbij */
.b-zegel{position:relative;display:inline-block;line-height:0;vertical-align:middle}
.b-zegel>img{position:relative;z-index:1;display:block;width:100%;height:auto;transform:rotate(var(--b-rot,0deg))}
/* vermiljoen, vloeit onder de randen uit: zichtbaar tot ±8 % (bij 62 px ≈ 5–8 px) buiten het zegel, en blijft zacht staan (,2) */
.b-zegel__vlek{position:absolute;inset:-15%;z-index:0;opacity:.2;pointer-events:none;   /* geen mix-blend-mode: in WebKit dwingt dat een tekening buiten beeld af; op licht papier is het verschil < 1 % */
  
  background:url(assets/orn/vlek-rood.webp?v=80a16d99) center/100% 100% no-repeat;transform:rotate(var(--b-rot,0deg))}
html.b-beweeg [data-b=stempel]:not(.b-af) .b-zegel__vlek{opacity:0}
.b-zegel__deuk{position:absolute;inset:0;z-index:0;border-radius:2px;opacity:.5;pointer-events:none;transform:rotate(var(--b-rot,0deg));
  box-shadow:0 0 0 .5px rgba(var(--rood-rgb),.14),0 .5px 1.5px rgba(var(--inkt-rgb),.16)}
/* kalligrafie (SVG met één pad uit dsd-kit/svg/kalli/) — beweging.js bouwt een penseelmasker per streek */
.b-kalli{display:block;color:var(--inkt);opacity:.88;overflow:visible}
.b-kalli__halo{opacity:0;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.b-tel{font-variant-numeric:tabular-nums;display:inline-block}

/* ------------------------------------------------------------- 7. KNOP — glans die meeloopt, inktvlek waar u tikt, ½ mm indrukken */
.b-knop{position:relative;isolation:isolate;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--b-d-staat) var(--b-e-uit),box-shadow var(--b-d-zegel) var(--b-e-uit),background-color var(--b-d-staat) var(--b-e-uit),color var(--b-d-staat) var(--b-e-uit)}
.b-knop:active{transform:scale(calc(1 - (1 - var(--b-a-druk)) * var(--b-m)));transition-duration:var(--b-d-tik)}
/* z-index −1 binnen het eigen stapelvlak: boven de knopgrond, onder de tekst */
.b-glans{position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:90px;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 18%,rgba(255,250,232,.6) 48%,rgba(255,250,232,0) 82%);
  transform:translate(var(--b-gx,-120px),0) skewX(-14deg);
  transition:transform 560ms var(--b-e-uit),opacity var(--b-d-zegel) var(--b-e-uit)}
.b-knop--rand .b-glans,.b-knop--inkt .b-glans{background:linear-gradient(100deg,transparent 18%,rgba(var(--goud-rgb),.24) 50%,transparent 82%)}
.b-knop.b-glans-aan .b-glans{opacity:1}
/* ronde 5: met een muis voelt u het goud meelopen: smallere hotspot, hogere piek (duur en easing gelijk) */
@media (hover:hover) and (pointer:fine){
  .b-glans{width:72px;background:linear-gradient(100deg,rgba(255,250,232,0) 22%,rgba(255,250,232,.3) 40%,rgba(255,253,244,.86) 50%,rgba(255,250,232,.3) 60%,rgba(255,250,232,0) 78%)}
  .b-knop--rand .b-glans,.b-knop--inkt .b-glans{background:linear-gradient(100deg,transparent 22%,rgba(var(--goud-rgb),.2) 40%,rgba(var(--goud-rgb),.5) 50%,rgba(var(--goud-rgb),.2) 60%,transparent 78%)}
}
.b-vlek{position:absolute;z-index:-1;left:0;top:0;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side at 47% 53%,var(--b-inkt,rgba(var(--dgoud-rgb),.12)) 0 46%,var(--b-inktrand,rgba(var(--dgoud-rgb),.22)) 60%,transparent 70%),
             radial-gradient(closest-side at 55% 46%,var(--b-inkt,rgba(var(--dgoud-rgb),.12)) 0 40%,transparent 66%);
  opacity:0;transform:translate(var(--x),var(--y)) scale(.08);animation:b-vlek var(--b-d-rol) var(--b-e-inkt) forwards}
@keyframes b-vlek{0%{opacity:.85;transform:translate3d(var(--x),var(--y),0) scale(.08)}45%{opacity:.75}100%{opacity:0;transform:translate3d(var(--x),var(--y),0) scale(1)}}
.b-knop--goud{--b-inkt:rgba(var(--dgoud-rgb),.26);--b-inktrand:rgba(var(--dgoud-rgb),.42)}
.b-knop--inkt{--b-inkt:rgba(var(--goud-rgb),.16);--b-inktrand:rgba(var(--goud-rgb),.28)}
/* bezig: drie inktdruppels ademen, breedte blijft staan. Zet ze pas in de DOM (of op display) als er gewacht wordt:
   een verborgen (opacity 0) lus vraagt in Chromium toch elk frame een stijlronde (gemeten op desktop). */
.b-druppels{display:inline-flex;gap:6px;align-items:center}
.b-druppels i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.25;animation:b-druppel 1200ms var(--b-e-adem) infinite}
.b-druppels i:nth-child(2){animation-delay:160ms}.b-druppels i:nth-child(3){animation-delay:320ms}
@keyframes b-druppel{0%,100%{opacity:.22;transform:scale(.65)}45%{opacity:.85;transform:scale(1)}}

/* label wisselt zonder dat de breedte verspringt (beide staan in één rastercel) */
.b-wissel{display:inline-grid;align-items:center}
.b-wissel>*{grid-area:1/1;transition:opacity var(--b-d-staat) var(--b-e-uit),transform var(--b-d-staat) var(--b-e-uit)}
.b-wissel>:last-child{opacity:0;transform:translate(0,calc(6px * var(--b-m)))}
.b-gedaan .b-wissel>:first-child{opacity:0;transform:translate(0,calc(-6px * var(--b-m)))}
.b-gedaan .b-wissel>:last-child{opacity:1;transform:none}
.b-vink path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset var(--b-d-zegel) var(--b-e-penseel) var(--b-d-tik)}
.b-gedaan .b-vink path{stroke-dashoffset:0}

/* ------------------------------------------------------------- 8. LINK — penseelstreek: zet aan links, trekt weg naar rechts */
.b-link{position:relative;text-decoration:none;
  background:linear-gradient(rgba(var(--dgoud-rgb),.45),rgba(var(--dgoud-rgb),.45)) 0 calc(100% - 1px)/100% 1px no-repeat;padding-bottom:2px}
.b-link::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-1px;height:3px;border-radius:2px;pointer-events:none;
  background:var(--dgoud);transform:scaleX(0);transform-origin:100% 50%;transition:transform var(--b-d-zegel) var(--b-e-penseel);
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.35),#000 18%,#000 70%,rgba(0,0,0,.5));mask:linear-gradient(90deg,rgba(0,0,0,.35),#000 18%,#000 70%,rgba(0,0,0,.5))}
.b-link:is(:focus-visible,:active)::after{transform:scaleX(1);transform-origin:0 50%}
@media (hover:hover) and (pointer:fine){.b-link:hover::after{transform:scaleX(1);transform-origin:0 50%}}

/* ------------------------------------------------------------- 9. FOCUS — ring van donker goud, staat er meteen; alleen de gloed legt zich neer
   2 px #7A5C1E: 5,4:1 op rijst #F4EFE4, 5,0:1 op rijst2 #EFE7D6 (WCAG 1.4.11 / 2.4.13 vragen ≥ 3:1). */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--b-focus);outline-offset:3px;
  box-shadow:0 0 0 7px rgba(var(--goud-rgb),.26);animation:b-focus var(--b-d-staat) var(--b-e-uit) both}
@keyframes b-focus{from{box-shadow:0 0 0 13px rgba(var(--goud-rgb),0)}}
/* wie met Tab sneller is dan de onthulling: wat de focus bevat is altijd zichtbaar (beweging.js speelt het dan meteen af) */
html.b-beweeg [data-b]:not(.b-af):focus-within{opacity:1}

/* ------------------------------------------------------------- 10. KAART — tilt een halve millimeter, hoeken lichten op */
/* twee schaduwen die in elkaar overvloeien (alleen opacity): in rust kort en vrij scherp, opgetild breed en zacht */
.b-kaart{position:relative;isolation:isolate;transition:transform var(--b-d-zegel) var(--b-e-uit)}
.b-kaart::before,.b-kaart::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity var(--b-d-zegel) var(--b-e-uit)}
.b-kaart::before{box-shadow:0 1px 1.5px rgba(var(--inkt-rgb),.12),0 2px 5px rgba(var(--inkt-rgb),.06)}
.b-kaart::after{opacity:0;box-shadow:0 16px 34px -8px rgba(var(--inkt-rgb),.20),0 5px 14px rgba(var(--inkt-rgb),.06)}
.b-kaart:is(.b-actief,:focus-within)::before{opacity:0}
/* 回纹-hoeken: <span class="b-hoeken" aria-hidden="true"><i></i></span> → vier hoeken, gespiegeld, spiraal naar binnen.
   Op een beeld: .b-hoeken--papier legt een papieren hoeklaag onder het ornament. In een kaart met gecomponeerde inhoud
   (video, 3D, een lopende scène): gebruik .b-hoekrand (de hoeken als achtergrond van de kaart zelf: geen extra lagen). */
.b-hoeken,.b-hoeken>i{position:absolute;inset:6px;pointer-events:none;z-index:2}
.b-hoeken>i{inset:0}
.b-hoeken::before,.b-hoeken::after,.b-hoeken>i::before,.b-hoeken>i::after{content:"";position:absolute;width:22px;height:22px;opacity:.32;
  background:url(assets/orn/hui-hoek.svg?v=d4ae9565) 0 0/100% 100% no-repeat;
  transition:opacity var(--b-d-zegel) var(--b-e-uit),translate var(--b-d-zegel) var(--b-e-uit)}
.b-hoeken--papier::before,.b-hoeken--papier::after,.b-hoeken--papier>i::before,.b-hoeken--papier>i::after{opacity:.7;
  background:url(assets/orn/hui-hoek.svg?v=d4ae9565) 3px 3px/calc(100% - 6px) calc(100% - 6px) no-repeat,
             radial-gradient(circle at 0 0,rgba(var(--rijst-rgb),.94) 0 52%,rgba(var(--rijst-rgb),.6) 64%,rgba(var(--rijst-rgb),0) 80%)}
.b-hoeken::before{left:0;top:0}
.b-hoeken::after{right:0;bottom:0;transform:rotate(180deg)}
.b-hoeken>i::before{right:0;top:0;transform:scaleX(-1)}
.b-hoeken>i::after{left:0;bottom:0;transform:scaleY(-1)}
.b-kaart:is(.b-actief,:focus-within){transform:translate(0,calc(var(--b-a-til) * -1 * var(--b-m)))}
.b-kaart:is(.b-actief,:focus-within)::after{opacity:1}
.b-hoekrand{background-image:url(assets/orn/hoekrand-lb.svg?v=dade4857),url(assets/orn/hoekrand-rb.svg?v=cdedc56b),url(assets/orn/hoekrand-ro.svg?v=9f722b48),url(assets/orn/hoekrand-lo.svg?v=c5aafc38);
  background-position:6px 6px,calc(100% - 6px) 6px,calc(100% - 6px) calc(100% - 6px),6px calc(100% - 6px);background-size:16px 16px;background-repeat:no-repeat}
.b-kaart:is(.b-actief,:focus-within) :is(.b-hoeken,.b-hoeken>i)::before,
.b-kaart:is(.b-actief,:focus-within) :is(.b-hoeken,.b-hoeken>i)::after{opacity:.95}
.b-kaart:is(.b-actief,:focus-within) .b-hoeken::before{translate:calc(var(--b-a-hoek) * -1 * var(--b-m)) calc(var(--b-a-hoek) * -1 * var(--b-m))}
.b-kaart:is(.b-actief,:focus-within) .b-hoeken::after{translate:calc(var(--b-a-hoek) * var(--b-m)) calc(var(--b-a-hoek) * var(--b-m))}
.b-kaart:is(.b-actief,:focus-within) .b-hoeken>i::before{translate:calc(var(--b-a-hoek) * var(--b-m)) calc(var(--b-a-hoek) * -1 * var(--b-m))}
.b-kaart:is(.b-actief,:focus-within) .b-hoeken>i::after{translate:calc(var(--b-a-hoek) * -1 * var(--b-m)) calc(var(--b-a-hoek) * var(--b-m))}
@media (hover:hover) and (pointer:fine){
  .b-kaart:hover{transform:translate(0,calc(var(--b-a-til) * -1 * var(--b-m)))}
  .b-kaart:hover::after{opacity:1}
  .b-kaart:hover::before{opacity:0}
  .b-kaart:hover :is(.b-hoeken,.b-hoeken>i)::before,.b-kaart:hover :is(.b-hoeken,.b-hoeken>i)::after{opacity:.95}
  .b-kaart:hover .b-hoeken::before{translate:calc(var(--b-a-hoek) * -1 * var(--b-m)) calc(var(--b-a-hoek) * -1 * var(--b-m))}
  .b-kaart:hover .b-hoeken::after{translate:calc(var(--b-a-hoek) * var(--b-m)) calc(var(--b-a-hoek) * var(--b-m))}
  .b-kaart:hover .b-hoeken>i::before{translate:calc(var(--b-a-hoek) * var(--b-m)) calc(var(--b-a-hoek) * -1 * var(--b-m))}
  .b-kaart:hover .b-hoeken>i::after{translate:calc(var(--b-a-hoek) * -1 * var(--b-m)) calc(var(--b-a-hoek) * var(--b-m))}}
/* lichtstreep over het beeld (optioneel: <i class="b-glint"> in een beeldvak met overflow:hidden) */
.b-glint{position:absolute;top:-10%;bottom:-10%;left:0;width:40%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,250,232,0) 10%,rgba(255,250,232,.42) 42%,rgba(255,252,240,.66) 50%,rgba(255,244,214,.36) 60%,rgba(255,250,232,0) 90%);
  transform:translate(-140%,0) skewX(-18deg);transition:transform 1200ms var(--b-e-penseel)}
.b-kaart.b-actief .b-glint{transform:translate(300%,0) skewX(-18deg)}
@media (hover:hover) and (pointer:fine){.b-kaart:hover .b-glint{transform:translate(300%,0) skewX(-18deg)}}

/* ------------------------------------------------------------- 11. MENU — opent als een hangrol
   Buitenste laag zakt (translateY −100 % → 0), binnenste laag tegengesteld: het papier ontrolt, de tekst ligt stil. */
.b-rol{position:fixed;z-index:60;left:0;right:0;top:var(--b-rol-top,0);bottom:0;pointer-events:none;visibility:hidden;
  transition:visibility 0s linear var(--b-d-rol)}
.b-rol.b-open{pointer-events:auto;visibility:visible;transition:none}
.b-rol__sluier{position:absolute;inset:0;touch-action:none;background:rgba(var(--rijst-rgb),.74);opacity:0;transition:opacity var(--b-d-rol) var(--b-e-uit)}
.b-rol.b-open .b-rol__sluier{opacity:1}
.b-rol__papier{position:relative;overflow:hidden;margin-left:auto;max-width:440px;transform:translate(0,-100%);
  transition:transform var(--b-d-rol) var(--b-e-in)}
.b-rol__papier>.b-rol__blad{transform:translate(0,100%);transition:transform var(--b-d-rol) var(--b-e-in)}
.b-rol.b-open .b-rol__papier,.b-rol.b-open .b-rol__papier>.b-rol__blad{transform:none;transition-timing-function:var(--b-e-inkt)}
.b-rol__blad{position:relative;background:var(--rijst) url(assets/orn/rijstpapier-tegel.jpg?v=766948a5) 0 0/768px 768px;border-left:1px solid var(--lijn-goud-zacht)}
/* ronde 5: de onderrand van het afrollende papier is een inktverloop van 12 px boven de staaf, geen harde snede
   door een regel of een teken (het papier draagt dezelfde rijstkleur; in rust valt het in de onderste witruimte) */
.b-rol__papier::after{content:"";position:absolute;left:0;right:0;bottom:14px;height:12px;pointer-events:none;
  background:linear-gradient(rgba(var(--rijst-rgb),0),rgba(var(--rijst-rgb),.94))}
/* open menu: de pagina eronder scrolt niet mee (iOS), zonder sprong (de schuifbalkgoot blijft) */
html.b-menu-open{overflow:hidden;scrollbar-gutter:stable}
html.b-menu-open body{overscroll-behavior:none}
.b-rol{overscroll-behavior:contain}
.b-rol__staaf{position:relative;height:14px;margin:0 -2px;background:var(--rijst) url(assets/orn/rijstpapier-tegel.jpg?v=766948a5) 0 100%/768px 768px;background-clip:content-box;padding:0 2px}   /* zoom: de inhoud schuift onder een papieren zoom, niet onder een doorzichtige staaf */
.b-rol__staaf::before{content:"";position:absolute;left:10px;right:10px;top:5px;height:4px;border-radius:2px;
  background:linear-gradient(180deg,var(--goudlicht),var(--goud) 45%,var(--dgoud));box-shadow:0 2px 6px rgba(var(--inkt-rgb),.18)}
.b-rol__staaf::after{content:"";position:absolute;inset:2px 0;
  background:radial-gradient(circle at 5px 5px,var(--goud) 0 4px,transparent 4.5px) 0 0/10px 10px no-repeat,
             radial-gradient(circle at 5px 5px,var(--goud) 0 4px,transparent 4.5px) 100% 0/10px 10px no-repeat}
.b-rol [data-b-rol-item]{opacity:0;transform:translate(0,calc(-6px * var(--b-m)));
  transition:opacity var(--b-d-staat) var(--b-e-uit),transform var(--b-d-staat) var(--b-e-uit)}
.b-rol.b-open [data-b-rol-item]{opacity:1;transform:none;transition-duration:var(--b-d-zegel);
  transition-delay:calc(200ms + var(--i,0) * 45ms)}
/* hamburger → kruis in twee bewuste stappen, zonder chevron-tussenstand (ronde 5):
   open:  middelste lijn vervaagt (120 ms) · buitenste schuiven naar het midden (40 %) · dan pas draaien ze (55 %)
   dicht: eerst terugdraaien tot één lijn · dan uit elkaar · middelste komt als laatste terug.
   Losse translate/rotate-eigenschappen: elk een eigen vertraging. */
.b-burger{position:relative;display:inline-block;width:22px;height:14px}
.b-burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:1px;background:currentColor;
  transition:rotate calc(var(--b-d-rol) * .42) var(--b-e-uit),translate calc(var(--b-d-rol) * .4) var(--b-e-inkt) calc(var(--b-d-rol) * .44),
             opacity var(--b-d-staat) var(--b-e-uit) calc(var(--b-d-rol) * .7)}
.b-burger i:nth-child(1){top:0}.b-burger i:nth-child(2){top:6.25px}.b-burger i:nth-child(3){bottom:0}
[aria-expanded=true] .b-burger i{transition:translate calc(var(--b-d-rol) * .4) var(--b-e-uit),rotate calc(var(--b-d-rol) * .55) var(--b-e-inkt) calc(var(--b-d-rol) * .42),
             opacity var(--b-d-tik) var(--b-e-uit)}
[aria-expanded=true] .b-burger i:nth-child(1){translate:0 6.25px;rotate:45deg}
[aria-expanded=true] .b-burger i:nth-child(2){opacity:0}
[aria-expanded=true] .b-burger i:nth-child(3){translate:0 -6.25px;rotate:-45deg}

/* ------------------------------------------------------------- 12. LADEN en LEEG */
.b-skelet{position:relative;overflow:hidden;background:rgba(var(--inkt-rgb),.055);border-radius:1px}
.b-skelet::after{content:"";position:absolute;inset:0;transform:translate(-100%,0);
  background:linear-gradient(90deg,transparent,rgba(var(--rijst-rgb),.75) 50%,transparent);
  animation:b-skelet var(--b-d-glans) var(--b-e-adem) var(--b-skelet-na,0ms) infinite}
@keyframes b-skelet{0%{transform:translate3d(-100%,0,0)}70%,100%{transform:translate3d(100%,0,0)}}
.b-draad{position:relative;height:2px;overflow:hidden;background:rgba(var(--dgoud-rgb),.15)}
.b-draad::after{content:"";position:absolute;inset:0;width:38%;transform:translate(-100%,0);
  background:linear-gradient(90deg,transparent,var(--dgoud) 40%,var(--goud) 60%,transparent);
  animation:b-draad 1600ms var(--b-e-adem) infinite}
@keyframes b-draad{to{transform:translate3d(265%,0,0)}}
/* lege toestand: de maan ademt heel zacht achter een lijntekening (die tekent zich met data-b="teken") */
.b-adem{animation:b-adem 9s var(--b-e-adem) infinite alternate}
@keyframes b-adem{from{opacity:.55;transform:scale(1)}to{opacity:.9;transform:scale(1.015)}}

/* ------------------------------------------------------------- 13. OVERGANGEN — View Transitions
   Tussen pagina's (Chrome 126+, Safari 18.2+): oud vervaagt, nieuw rijst op uit inkt. Kop en vaste balken staan stil
   (geef ze view-transition-name: b-kop / b-balk). Binnen de pagina: dsdBeweging.wissel() → inkt vloeit vanaf de tik. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:b-vt-uit 380ms var(--b-e-in) both}
::view-transition-new(root){animation:b-vt-in 900ms var(--b-e-inkt) 80ms both}
::view-transition-group(b-kop),::view-transition-group(b-balk){animation-duration:0s}
/* alleen opacity + translate op de root: een filter op een momentopname zo groot als het scherm is in Safari duur */
@keyframes b-vt-uit{to{opacity:0;transform:translate3d(0,-4px,0)}}
@keyframes b-vt-in{from{opacity:0;transform:translate3d(0,8px,0)}}
/* Binnen de pagina (ronde 4): alleen het beeld en de tekst krijgen een naam (niet meer het hele paneel), en tikpunt en
   maat gaan niet meer als custom property op <html> (dat was een stijlronde voor de hele pagina bij de tik). De root
   blijft wel vastgelegd en staat stil (animation none): zonder root-naam tekent Chromium de groepen niet (gemeten: het
   beeld bleef 1,5 s leeg). Vaste balken met een eigen naam (b-kop, b-balk) zet u tijdens html.b-vt-blad op none.
   Het inktmasker groeit via de geregistreerde --b-vt (een direct geanimeerde mask-size op een view-transition-pseudo
   wordt in Chromium niet opnieuw getekend: gemeten, het beeld bleef 1,5 s leeg). Tikpunt en eindmaat zet beweging.js
   in één regel voor alleen dit pseudo-element (een eigen stylesheet), niet op <html>: geen stijlronde voor de pagina. */
html.b-vt-blad::view-transition-old(root),html.b-vt-blad::view-transition-new(root){animation:none}
::view-transition-group(b-blad-beeld),::view-transition-group(b-blad-tekst),::view-transition-group(b-blad){animation-duration:0s}
::view-transition-old(b-blad-beeld){animation:b-blad-uit 520ms var(--b-e-uit) both}
::view-transition-new(b-blad-beeld){animation:b-blad-in 1400ms var(--b-e-vloei) 110ms both;
  -webkit-mask:url(assets/orn/inkt-zacht.webp?v=16b3cbb4) no-repeat calc(var(--b-vt-x,50%) - var(--b-vt) / 2) calc(var(--b-vt-y,50%) - var(--b-vt) / 2)/var(--b-vt) var(--b-vt);
  mask:url(assets/orn/inkt-zacht.webp?v=16b3cbb4) no-repeat calc(var(--b-vt-x,50%) - var(--b-vt) / 2) calc(var(--b-vt-y,50%) - var(--b-vt) / 2)/var(--b-vt) var(--b-vt)}
/* zonder beeld-deel: het hele paneel vervaagt en rijst op (alleen opacity/transform) */
::view-transition-old(b-blad){animation:b-blad-uit 300ms var(--b-e-in) both}
::view-transition-new(b-blad){animation:b-tekst-in-t 700ms var(--b-e-inkt) 120ms both}
@keyframes b-blad-uit{to{opacity:0}}
@keyframes b-blad-in{from{--b-vt:0px;opacity:.7}to{--b-vt:var(--b-vt-eind,2400px);opacity:1}}
::view-transition-old(b-blad-tekst){animation:b-tekst-uit 200ms var(--b-e-in) both}
::view-transition-new(b-blad-tekst){animation:b-tekst-in 620ms var(--b-e-inkt) 170ms both}
/* telefoon: het masker groeit even goed; alleen de waas (blur 4 px) op de tekst vervalt — geen filter op een
   pseudo-element tijdens de tik */
@media (max-width:640px){::view-transition-new(b-blad-tekst){animation-name:b-tekst-in-t}}
@keyframes b-tekst-in-t{from{opacity:0;transform:translate3d(0,6px,0)}}
@keyframes b-tekst-uit{to{opacity:0;transform:translate3d(0,-3px,0)}}
@keyframes b-tekst-in{from{opacity:0;filter:blur(4px);transform:translate3d(0,6px,0)}}

/* ------------------------------------------------------------- 14. 3D — zachte camera (CSS-3D of three.js via ZachteCamera) */
[data-b-3d]{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
[data-b-3d].b-sleept{cursor:grabbing}

/* ------------------------------------------------------------- 15. PAUZEREN — buiten beeld en bij een verborgen tab */
.b-pauze *,.b-pauze::before,.b-pauze::after,.b-pauze *::before,.b-pauze *::after,
html.b-verborgen *,html.b-verborgen *::before,html.b-verborgen *::after{animation-play-state:paused!important}

/* buiten beeld (25 % marge) ook niet tekenen: een gepauzeerde CSS-animatie houdt zijn laag, maar een verborgen laag
   tekent niets en kost geen rastergeheugen. Alleen decoratieve lagen (aria-hidden), nooit iets met focus.
   Gemeten halverwege de pagina (iPhone): 38 → 21 tekenende lagen, 13,3 → 2,9 × viewport aan laagoppervlak. */
.b-pauze :is(.b-scene__lagen,.b-sfeer),[data-b-lus].b-pauze>[aria-hidden=true],[data-b-lus][aria-hidden=true].b-pauze>*,.b-sfeer.b-pauze{visibility:hidden}
/* ronde 4: buiten beeld lossen de ambient-lussen van een scène helemaal op (animation-name: none), in plaats van
   alleen te pauzeren. Een gepauzeerde CSS-animatie houdt zijn compositielaag ("ActiveTransformAnimation"); zonder
   animatie is er geen laag meer, en dan mag ook de scène zelf zijn will-change loslaten (WebKit: elke laag heeft een
   eigen opslag) zónder dat de inhoud erna een "Overlap"-laag van duizenden px wordt (gemeten). Komt de scène terug
   binnen de marge van 25 %, dan begint elke lus opnieuw: dat gebeurt buiten beeld en is dus onzichtbaar.
   Een verborgen tab (html.b-verborgen) pauzeert wél gewoon: daar moet alles naadloos verder. */
:is(.b-scene,[data-b-lus],.b-sfeer).b-pauze :is(*,*::before,*::after){animation-name:none!important}

/* ------------------------------------------------------------- 16. RUSTIG — prefers-reduced-motion of eigen keuze
   Geen verplaatsing, geen lus, geen parallax. Alles staat in een gecomponeerde rusthouding: mist op een mooie plek,
   maan op middengloed, twee bloesemblaadjes hangen in de lucht (zoals op de offerte-cover), tekeningen compleet.
   Korte overvloeiers (≤ 200 ms) blijven: dat is geen beweging, wel een zachte toestandswissel. */
html.b-rustig :is(.b-sfeer,.b-scene) *,html.b-rustig .b-adem,html.b-rustig .b-skelet::after,html.b-rustig .b-draad::after,
html.b-rustig .b-druppels i,html.b-rustig :focus-visible{animation:none!important}
html.b-rustig .b-laag{translate:none!important;transform:none!important}
html.b-rustig :is(.b-sfeer__vel,.b-sfeer__licht){opacity:.8}
html.b-rustig .b-maan__schijf{opacity:.92}
html.b-rustig .b-mist--a{transform:translate(-520px,0)}
html.b-rustig .b-mist--b{transform:translate(-300px,0)}
html.b-rustig .b-mist--c{transform:translate(-860px,0)}
html.b-rustig .b-mist--nevel{transform:translate(-400px,0)}
@media (max-width:640px){html.b-rustig .b-mist--a{transform:translate(-310px,0)}html.b-rustig .b-mist--b{transform:translate(-180px,0)}
  html.b-rustig .b-mist--c{transform:translate(-420px,0)}html.b-rustig .b-mist--nevel{transform:translate(-240px,0)}}
html.b-rustig .b-adem{opacity:.72}
html.b-rustig .b-skelet::after{opacity:0}
html.b-rustig .b-draad::after{transform:translate(80%,0)}
html.b-rustig .b-druppels i{opacity:.55;transform:none}
html.b-rustig .b-vlek{animation:b-vlek-rustig var(--b-d-zegel) linear forwards;transform:translate3d(var(--x),var(--y),0) scale(.6)}
@keyframes b-vlek-rustig{0%{opacity:.6}100%{opacity:0}}
html.b-rustig .b-glans{display:none}
html.b-rustig .b-burger i{transition:opacity var(--b-d-kort) linear}   /* kruis verschijnt door overvloei, zonder draaien */
html.b-rustig *{will-change:auto!important}          /* ronde 5: stilstaand beeld = geen lagen vooraf */
html.b-rustig :is(.b-sfeer__vel,.b-sfeer__licht,.b-laag,.b-maan__schijf,.b-mist){backface-visibility:visible}   /* backface-visibility:hidden is in Chromium óók een laagreden */
html.b-rustig .b-glint{display:none}
html.b-rustig .b-kaart{transition-property:opacity}                 /* niets tilt; schaduw en hoeken wisselen wel (kleur, geen beweging) */
html.b-rustig .b-kaart::before,html.b-rustig .b-kaart::after{transition-duration:var(--b-d-kort)}
html.b-rustig .b-link::after{transform:scaleX(1);opacity:0;transition:opacity var(--b-d-kort)}
html.b-rustig .b-link:is(:hover,:focus-visible,:active)::after{opacity:1}
html.b-rustig .b-rol__papier,html.b-rustig .b-rol__papier>.b-rol__blad{transform:none}
html.b-rustig .b-rol__papier{opacity:0;transition:opacity var(--b-d-staat) linear}
html.b-rustig .b-rol.b-open .b-rol__papier{opacity:1}
html.b-rustig ::view-transition-group(*),html.b-rustig ::view-transition-old(*),html.b-rustig ::view-transition-new(*){animation:none!important}
@media (prefers-reduced-motion:reduce){
  /* zonder JS (of vóór de kopregel): alles stil */
  html:not(.b-js) *,html:not(.b-js) *::before,html:not(.b-js) *::after{animation:none!important;transition-duration:.01ms!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}