/* VLAME opbouw-primitieven.
 *
 * Laadt na base.css en voor sections.css. Secties worden hierop gebouwd in
 * plaats van op nette kolommen: overlap, harde kaders, scheve blokken,
 * gescheurde randen, tape, stickers, rails, tickers, folie en korrel.
 *
 * Twee regels die overal gelden:
 *   1. Overlap en scheefstand zijn een desktop-luxe. Op <=760px staat alles
 *      terug op nul - zie het blok onderaan dit bestand. Taak 24 meet dat.
 *   2. Wat overlapt is beeld over vlak of vlak over beeld, nooit tekst over
 *      tekst. Dat is een regel voor de sjablonen, niet iets wat CSS afdwingt.
 *
 * Bekende primitief-combinaties die dezelfde CSS-eigenschap zetten
 * (doorgelicht in fix-ronde 2, 2026-08-28 - een sectietaak combineert
 * primitieven op één element, en twee regels die hetzelfde vak beschrijven
 * winnen niet allebei):
 *
 *   OPGELOST - .vl-frame--press + .vl-offset (transform). Een getild,
 *   indrukbaar kaartje is een voor de hand liggende combinatie. De
 *   press-hover componeert nu de tilt/drop van .vl-offset door via
 *   var(--vl-tilt,0deg)/var(--vl-drop,0px) in plaats van transform te
 *   overschrijven. Zie sectie 2.
 *
 *   GEACCEPTEERD, hier gedocumenteerd in plaats van later herontdekt:
 *   - .vl-cut + .vl-frame (clip-path knipt de offset-schaduw van het kader
 *     af als beide op hetzelfde element staan). Zet .vl-cut op een
 *     omhullend element in plaats van op het element dat ook .vl-frame
 *     draagt als de volledige schaduw zichtbaar moet blijven. Zie sectie 4.
 *   - .vl-offset + .vl-sticker, .vl-offset + .vl-tape (beide zetten net als
 *     .vl-frame--press transform:rotate(...); zonder fallback wint de
 *     laatst gedefinieerde regel in brontekst-volgorde, dus sticker/tape
 *     houdt zijn eigen vaste tilt en de offset-stagger wordt genegeerd).
 *     Dat is hier het gewenste gedrag: sticker en tape zijn losse
 *     overlay-elementen met een eigen vaste scheve stand - offset het
 *     omhullende blok, niet de sticker of de tape zelf.
 *   - .vl-frame + .vl-tape, .vl-frame + .vl-sticker (box-shadow) - zelfde
 *     redenering: sticker en tape horen als kind-element over een kader
 *     heen te hangen, niet het kader zelf te zijn.
 *   - .vl-cut + .vl-tape (clip-path) - een onwaarschijnlijke combinatie
 *     (tape is een klein label, cut een hele sectierand), maar zou dezelfde
 *     last-wins-regel volgen als hierboven.
 */

/* Zonder @property is een custom property voor de browser een string en
   valt er niets aan te animeren. Hiermee wordt --vl-holo-angle een echte
   hoek, en interpoleert de folie-rotatie vloeiend. Browsers zonder
   @property laten de hoek gewoon op zijn beginwaarde staan: dan is de
   folie statisch in plaats van kapot. */
@property --vl-holo-angle{syntax:'<angle>';inherits:true;initial-value:212deg}

/* Zelfde reden voor de breedte-as van de display-face: als percentage geregistreerd
   interpoleert font-stretch vloeiend in plaats van te springen, en kan Taak 19 hem
   met GSAP tegen de scrollpositie scrubben. */
@property --vl-stretch{syntax:'<percentage>';inherits:false;initial-value:112%}

/* ==========================================================================
   1. Overlap - .vl-over
   Laat een blok bewust over zijn buur heen vallen.
   ========================================================================== */

.vl-over{
  --vl-over:clamp(-80px,-6vw,-24px);
  position:relative;z-index:2;
  margin-block-start:var(--vl-over);
}
.vl-over--sm{--vl-over:clamp(-46px,-3.4vw,-16px)}
.vl-over--lg{--vl-over:clamp(-132px,-9vw,-40px)}
/* Naar beneden overlappen in plaats van naar boven. */
.vl-over--down{margin-block-start:0;margin-block-end:var(--vl-over)}
/* Zijwaarts uitsteken blijft altijd binnen de goot van .wrap - een halve
   --pad kan per definitie geen horizontale overflow veroorzaken. */
.vl-over--l{margin-inline-start:calc(var(--pad) * -.5)}
.vl-over--r{margin-inline-end:calc(var(--pad) * -.5)}
.vl-over--under{z-index:0}

/* ==========================================================================
   2. Laminaathoes - .vl-frame
   HERZIEN 2026-09-14 (Crotona-ronde). Hier stond een 3px inktkader met een
   harde offset-schaduw: "geprint op karton". Dat moest weg. Die combinatie -
   dik inktkader plus stempelschaduw plus gekanteld blok - is letterlijk de
   signatuur van wearecrotona.nl, het festival waar Vera zelf voor werkt. Haar
   eigen site mag niet op die van haar opdrachtgever lijken.

   Wat ervoor in de plaats komt is het enige object dat alleen van deze site
   is: de laminaatpas aan het koord. Elk beeld en elke kaart zit nu in zo'n
   hoes: een doorschijnende rand om het vlak heen, een ronde hoek (de enige
   ronding die deze site heeft, en precies daarom is hij hier toegestaan: een
   echt laminaat IS rond), een geponst oogje aan de bovenrand, een ECHTE
   slagschaduw met blur in plaats van een gekleurde offset, en een schuine
   glans die bij hover een stukje opschuift.

   De hoes is één element zonder extra markup: de eerste achtergrondlaag ligt
   in de content-box (het vlak zelf) en de tweede in de border-box (de rand).
   Zo blijft elke bestaande kaart werken zonder een wikkel erbij.
   ========================================================================== */

.vl-frame{
  --vl-lam-edge:rgba(255,255,255,.55);
  --vl-lam-radius:.6em;
  --vl-lam-pad:.35em;
  --vl-lam-face:var(--paper);
  --vl-lam-shine:34%;
  position:relative;
  padding:var(--vl-lam-pad);
  border-radius:var(--vl-lam-radius);
  background:
    linear-gradient(var(--vl-lam-face),var(--vl-lam-face)) content-box,
    var(--vl-lam-edge) border-box;
  box-shadow:0 1.2em 2.4em -.8em rgba(0,0,0,.35);
}
/* Het geponste oogje aan de bovenrand - hetzelfde gat als in de pas. */
.vl-frame::before{
  content:"";position:absolute;z-index:3;top:.1em;left:50%;
  width:1.1em;height:.34em;border-radius:.34em;
  transform:translateX(-50%);
  border:.09em solid rgba(23,17,26,.28);
  background:var(--paper);
}
/* De glans over de hoes. Schuift bij hover een stukje op, meer niet. */
.vl-frame::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  background-size:300% 100%;background-position:var(--vl-lam-shine) 0;
  transition:background-position var(--dur-slow) var(--ease-out);
}
.vl-frame:hover,.vl-frame:focus-within{--vl-lam-shine:64%}
/* Papier op inkt: dan is de hoesrand een lichte waas in plaats van melk. */
.vl-frame--night{--vl-lam-face:var(--ink);--vl-lam-edge:rgba(255,255,255,.18);color:#fff}
.vl-frame--night::before{background:var(--ink);border-color:rgba(255,255,255,.3)}
.vl-frame--bare{--vl-lam-face:transparent}
.vl-frame--tight{--vl-lam-pad:.24em}
.vl-frame--deep{--vl-lam-pad:.5em}
/* Zonder oogje, voor een hoes die niet aan iets hangt. */
.vl-frame--noeye::before{content:none}
/* Hangend: een laminaat aan een koord hangt nooit precies recht. Eén graad,
   niet meer - dat is het verschil tussen "het hangt" en "het is scheefgezet". */
.vl-frame--hang{transform:rotate(var(--vl-hang,-.8deg));transform-origin:50% 0}
.vl-frame--hang--r{--vl-hang:.8deg}
/* Indrukbaar: de hoes zakt een tikje en zijn schaduw wordt korter. */
.vl-frame--press{transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.vl-frame--press:hover,.vl-frame--press:focus-visible,.vl-frame--press:focus-within{
  transform:rotate(var(--vl-hang,0deg)) translateY(.18em);
  box-shadow:0 .7em 1.4em -.6em rgba(0,0,0,.34);
}

/* ==========================================================================
   3. Blok-offset - .vl-offset
   HERZIEN 2026-09-14: kantelt niet meer. De scheefstand van blokken was de
   tweede Crotona-signatuur (rotate(-2deg)/(-3deg)/(2deg), vijftien keer in hun
   thema). Wat overblijft is het hoogteverschil: een blok dat uit de lijn zakt.
   Het "in elkaar gezet"-gevoel komt nu uit overlap, schaal en diepte - uit de
   slagschaduw van de hoezen - en niet uit een hoek.
   ========================================================================== */

.vl-offset{
  --vl-tilt:0deg;
  --vl-drop:0px;
  transform:translateY(var(--vl-drop));
  transform-origin:50% 50%;
}
.vl-offset:nth-child(3n+2){--vl-drop:clamp(10px,1.6vw,26px)}
.vl-offset--deep{--vl-drop:clamp(18px,2.6vw,44px)}
.vl-offset--straight{--vl-drop:0px}

/* ==========================================================================
   4. Gescheurde rand - .vl-cut
   Secties sluiten niet recht op elkaar aan.
   Let op: clip-path knipt ook alles af wat buiten het blok hangt - inclusief
   de offset-schaduw van .vl-frame, als beide op hetzelfde element staan.
   Geaccepteerd, niet gefixt (zie "Bekende primitief-combinaties" bovenaan
   dit bestand): zet .vl-cut op een omhullend element in plaats van op het
   element dat ook .vl-frame draagt als de volledige schaduw zichtbaar moet
   blijven.
   ========================================================================== */

.vl-cut{
  --vl-cut:clamp(18px,3.2vw,54px);
  clip-path:polygon(0 var(--vl-cut),100% 0,100% 100%,0 100%);
}
.vl-cut--rev{clip-path:polygon(0 0,100% var(--vl-cut),100% 100%,0 100%)}
.vl-cut--both{clip-path:polygon(0 var(--vl-cut),100% 0,100% calc(100% - var(--vl-cut)),0 100%)}
.vl-cut--v{clip-path:polygon(0 0,50% var(--vl-cut),100% 0,100% 100%,0 100%)}
/* Echt gescheurd papier: onregelmatige tanden in vaste pixels, zodat de
   scheur er op elk formaat even grof uitziet. */
.vl-cut--torn{
  clip-path:polygon(
    0 14px,4% 3px,9% 12px,13% 2px,19% 15px,24% 5px,30% 13px,36% 1px,
    42% 11px,48% 3px,54% 14px,60% 4px,66% 12px,72% 2px,78% 13px,84% 5px,
    90% 11px,95% 2px,100% 10px,100% 100%,0 100%
  );
}

/* Gebrande rand - .vl-cut--burn
   Sinds 2026-09-15 een rechte rand. De onregelmatige clip-path met het
   gloeiende amber-koraal randje is eruit op verzoek van de klant ("geen
   oranje meer, zo clean mogelijk"). De klassen blijven in de opmaak staan
   als rolnaam - een sectie die "brandt" is een sectie die direct tegen zijn
   buur aan ligt - maar ze tekenen niets meer. */
.vl-cut--burn,.vl-cut--burn--top,.vl-cut--burn--bottom{position:relative}
.vl-cut--burn::before,.vl-cut--burn::after{content:none}


/* ==========================================================================
   5. Tape - .vl-tape
   Gaffertape die twee blokken aan elkaar plakt. Ligt over de naad, gedraaid.
   ========================================================================== */

.vl-tape{
  --vl-tape-tilt:-3.5deg;
  position:relative;z-index:6;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:clamp(110px,16vw,220px);padding:9px 22px;
  background:var(--tape);color:rgba(23,17,26,.6);
  font-family:var(--font-tech);font-weight:700;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;line-height:1;
  transform:rotate(var(--vl-tape-tilt));
  box-shadow:0 8px 20px rgba(23,17,26,.16);
  clip-path:polygon(
    0 4%,4px 0,calc(100% - 5px) 2%,100% 0,
    calc(100% - 3px) 30%,100% 55%,calc(100% - 4px) 80%,100% 100%,
    5px 97%,0 100%,3px 70%,0 45%,4px 20%
  );
}
/* Weefsel en glans, zodat het geen grijze rechthoek blijft. */
.vl-tape::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(23,17,26,.06) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(23,17,26,.07));
  mix-blend-mode:multiply;
}
.vl-tape--amber{background:var(--tape);color:rgba(23,17,26,.78)}
.vl-tape--ink{background:var(--ink);color:rgba(255,255,255,.62)}
.vl-tape--r{--vl-tape-tilt:2.8deg}
/* Over de naad tussen twee blokken heen. Het bovenliggende blok moet
   position:relative hebben. */
.vl-tape--seam{
  position:absolute;left:var(--vl-tape-x,50%);top:var(--vl-tape-y,0%);
  transform:translate(-50%,-50%) rotate(var(--vl-tape-tilt));
}
/* Volle band met de tape-doodle erin (de oude sectie-scheiding). */
.vl-tape--band{
  display:block;width:100%;min-width:0;height:26px;padding:0;overflow:hidden;
  background:none;box-shadow:none;clip-path:none;transform:none;
}
.vl-tape--band>svg{position:absolute;left:50%;top:0;width:120%;transform:translateX(-50%);color:var(--tape)}
.vl-tape--band::after{content:none}

/* ==========================================================================
   6. Sticker - .vl-sticker
   Rond of ovaal label dat half over een kader heen hangt.
   ========================================================================== */

.vl-sticker{
  --vl-sticker-tilt:-11deg;
  --vl-sticker-off:-22px;
  position:absolute;z-index:7;
  display:grid;place-items:center;text-align:center;
  width:clamp(86px,9vw,124px);aspect-ratio:1;border-radius:50%;padding:12px;
  background:var(--flame);color:#fff;
  font-family:var(--font-tech);font-weight:700;
  font-size:clamp(9px,.72vw,11px);line-height:1.15;letter-spacing:.13em;text-transform:uppercase;
  transform:rotate(var(--vl-sticker-tilt));
  box-shadow:0 12px 26px rgba(23,17,26,.3);
}
.vl-sticker::before{
  content:"";position:absolute;inset:5px;border-radius:inherit;
  border:1.5px dashed rgba(255,255,255,.45);
}
.vl-sticker--oval{width:clamp(122px,14vw,178px);aspect-ratio:1.75;letter-spacing:.18em}
.vl-sticker--ink{background:var(--ink)}
.vl-sticker--amber{background:var(--paper);color:var(--ink)}
.vl-sticker--amber::before{border-color:rgba(23,17,26,.35)}
.vl-sticker--paper{background:var(--paper);color:var(--ink);box-shadow:0 10px 22px rgba(23,17,26,.22)}
.vl-sticker--paper::before{border-color:rgba(23,17,26,.3)}
.vl-sticker--r{--vl-sticker-tilt:9deg}
.vl-sticker--tl{top:var(--vl-sticker-off);left:var(--vl-sticker-off)}
.vl-sticker--tr{top:var(--vl-sticker-off);right:var(--vl-sticker-off)}
.vl-sticker--bl{bottom:var(--vl-sticker-off);left:var(--vl-sticker-off)}
.vl-sticker--br{bottom:var(--vl-sticker-off);right:var(--vl-sticker-off)}

/* ==========================================================================
   7. Rail - .vl-rail
   Horizontale carrousel. Zonder JS blijft het een gewone scrollbare strip
   die met het toetsenbord bereikbaar is (markup levert tabindex="0").
   rail.js voegt slepen, momentum en pijltjestoetsen toe.

   Vereist op het element zelf: tabindex="0" en role="group". Dit primitief
   zet ze niet via CSS - de markup moet ze leveren (zie templates/primitives.php
   voor het voorbeeld). rail.js zet een tabindex-vangnet, maar alleen als JS
   draait; zonder tabindex in de markup is de rail zonder JS niet met het
   toetsenbord te bereiken (criterium B10).
   ========================================================================== */

.vl-rail{
  display:flex;align-items:stretch;min-width:0;
  gap:clamp(14px,2vw,26px);
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:2px;
  /* Bewust GEEN scroll-behavior:smooth hier: dat laat elke scrollLeft-toewijzing
     animeren, en dan vechten het slepen, het uitrollen en de pijltjestoetsen om
     dezelfde scrollpositie. rail.js vraagt zelf om smooth waar dat hoort. */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block-end:12px;padding-inline-end:12px;
  cursor:grab;
}
.vl-rail::-webkit-scrollbar{width:0;height:0;display:none}
.vl-rail>*{flex:0 0 auto;scroll-snap-align:start}
.vl-rail:focus-visible{outline:2.5px solid currentColor;outline-offset:6px}
/* Tijdens slepen en uitrollen mag de browser niet meesturen: geen snap,
   geen smooth, geen tekstselectie, en geen klik op de kaart eronder. */
.vl-rail.is-grabbing,.vl-rail.is-glide{scroll-snap-type:none}
.vl-rail.is-grabbing{cursor:grabbing;-webkit-user-select:none;user-select:none}
.vl-rail.is-grabbing a,.vl-rail.is-grabbing img{pointer-events:none}
.vl-rail__item{width:clamp(240px,26vw,340px)}
.vl-rail__item--wide{width:clamp(280px,38vw,520px)}
/* Uitlopende rechterrand als hint dat er meer staat. */
.vl-rail--fade{
  -webkit-mask-image:linear-gradient(90deg,#000 0 86%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(90deg,#000 0 86%,rgba(0,0,0,.15) 100%);
}

/* ==========================================================================
   8. Ticker - .vl-ticker
   Verticaal doorlopende regel kleine tekst, tegengesteld aan de marquee.
   De track bevat de tekst twee keer, zodat de lus naadloos is.
   ========================================================================== */

.vl-ticker{
  --vl-ticker-h:clamp(180px,30vh,340px);
  --vl-ticker-dur:26s;
  position:relative;display:block;overflow:hidden;
  height:var(--vl-ticker-h);width:1.5em;
  writing-mode:vertical-rl;
  font-family:var(--font-tech);font-weight:700;font-size:11px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--muted);
  pointer-events:none;-webkit-user-select:none;user-select:none;
}
.vl-ticker__track{
  display:block;white-space:nowrap;
  animation:vl-ticker-run var(--vl-ticker-dur) linear infinite;
}
.vl-ticker--up .vl-ticker__track{animation-direction:reverse}
.vl-ticker--flame{color:var(--ink)}
.vl-ticker--light{color:rgba(255,255,255,.5)}
@keyframes vl-ticker-run{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* ==========================================================================
   9. Holo - .vl-holo
   Chroom/holografische folie: een conic-gradient in metaalkleuren die
   langzaam draait, met een lichtstreep die er periodiek doorheen trekt.
   De hoek staat in --vl-holo-angle. Taak 9 (laminate-fysica) zet die
   variabele per frame vanuit de simulatie en zet de eigen rotatie uit met
   .vl-holo--driven; tot dan draait de folie op eigen kracht.
   ========================================================================== */

.vl-holo{
  position:relative;isolation:isolate;
  animation:vl-holo-turn 18s linear infinite;
}
.vl-holo--driven{animation:none}
.vl-holo::before,.vl-holo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;mix-blend-mode:screen;
}
.vl-holo::before{
  z-index:2;opacity:.5;
  background:conic-gradient(from var(--vl-holo-angle) at 50% 45%,
    rgba(255,255,255,0) 0deg,
    rgba(0,224,240,.55) 34deg,
    rgba(255,255,255,.72) 66deg,
    rgba(255,46,136,.5) 104deg,
    rgba(255,177,60,.46) 146deg,
    rgba(255,255,255,.16) 188deg,
    rgba(139,43,176,.5) 232deg,
    rgba(0,224,240,.38) 288deg,
    rgba(255,255,255,.64) 322deg,
    rgba(255,255,255,0) 360deg);
}
.vl-holo::after{
  z-index:3;
  background:linear-gradient(100deg,transparent 41%,rgba(255,255,255,.85) 50%,transparent 59%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:vl-holo-sweep 7s var(--ease-out) infinite;
}
.vl-holo--soft::before{opacity:.3}
.vl-holo--strong::before{opacity:.72}
/* Op een lichte ondergrond wast screen alles wit; hard-light houdt de
   metaalkleuren wel zichtbaar. */
.vl-holo--on-light::before{mix-blend-mode:hard-light;opacity:.4}
.vl-holo--on-light::after{mix-blend-mode:overlay}
@keyframes vl-holo-turn{to{--vl-holo-angle:572deg}}
@keyframes vl-holo-sweep{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}

/* ==========================================================================
   10. Korrel - .vl-noise
   Fijne ruis over de hele pagina, zodat het digitaal-vlakke eraf gaat.
   Eén vaste laag in de footer, nooit interactief.
   ========================================================================== */

.vl-noise{
  position:fixed;inset:0;z-index:900;pointer-events:none;
  mix-blend-mode:overlay;opacity:.042;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ==========================================================================
   11. Breedte-as - .vl-stretch  [UIT DIENST sinds 2026-09-14]
   Geen enkele kop draagt dit primitief nog: de klant wilde het uitrek-effect
   bij hover eraf, omdat het concurreerde met het enige effect dat de site
   draagt (het vuur). De regels blijven staan omdat het primitief in de
   ontwerptaal beschreven is en de demonstratieroute hem toont.
   De display-face heeft naast gewicht ook een breedte-as. Een kop die bij
   hover uitrekt van 112% naar 150% is beweging die alleen deze letter kan
   maken - geen transform, geen schaal, maar echte letterbreedte.
   De breedte zit in --vl-stretch zodat Taak 19 hem tegen de scroll kan scrubben.
   ========================================================================== */

.vl-stretch{
  --vl-stretch-rest:112%;
  --vl-stretch:var(--vl-stretch-rest);
  font-family:var(--font-display);font-weight:900;
  font-stretch:var(--vl-stretch);
  text-transform:uppercase;line-height:.86;letter-spacing:-.02em;
  overflow-wrap:normal;hyphens:none;
  transition:--vl-stretch var(--dur-slow) var(--ease-out),letter-spacing var(--dur-slow) var(--ease-out);
}
.vl-stretch--narrow{--vl-stretch-rest:82%}
.vl-stretch--wide{--vl-stretch-rest:140%}
/* Breder zetten duwt de letters uit elkaar; de tracking loopt mee terug zodat
   het woord niet uit elkaar valt maar juist strakker wordt. */
.vl-stretch:hover,.vl-stretch:focus-visible{--vl-stretch:150%;letter-spacing:-.035em}

/* ==========================================================================
   Terugzetten op smal scherm - harde eis uit paragraaf 3 van de spec.
   Elk overlap- en offset-primitief staat op <=760px op nul, zodat er geen
   horizontale overflow kan ontstaan.
   ========================================================================== */

@media (max-width:760px){
  .vl-over,.vl-over--sm,.vl-over--lg,.vl-over--down{
    margin-block-start:0;margin-block-end:0;
  }
  .vl-over--l,.vl-over--r{margin-inline-start:0;margin-inline-end:0}
  .vl-offset,.vl-offset--hard,.vl-offset--r{transform:none}
  .vl-sticker{--vl-sticker-off:0px;--vl-sticker-tilt:-7deg;width:clamp(74px,20vw,96px);font-size:9px}
  .vl-sticker--oval{width:clamp(104px,30vw,140px)}
  /* .vl-frame--press heeft hier geen eigen regel nodig: de hover-translate
     is een percentage van --vl-frame-o, die hieronder al kleiner wordt. */
  .vl-frame{--vl-lam-pad:.28em;--vl-lam-radius:.5em}
  .vl-frame--hang{--vl-hang:-.5deg}
  .vl-frame--hang--r{--vl-hang:.5deg}
  .vl-cut{--vl-cut:14px}
  .vl-cut--burn{--vl-burn:.45rem}
  /* .vl-tape--seam en .vl-tape--band>svg centreren zichzelf met
     translate(-50%,-50%) / translateX(-50%) - dat is begrensd door hun
     eigen (hier al kleinere) doos en geen aparte bron van overflow, dus
     geen losse reset nodig. */
  .vl-tape{--vl-tape-tilt:-2deg;min-width:104px;padding:8px 16px;letter-spacing:.2em}
  .vl-tape--r{--vl-tape-tilt:1.6deg}
  .vl-ticker{--vl-ticker-h:clamp(140px,24vh,200px)}
  .vl-stretch{--vl-stretch-rest:92%}
  .vl-stretch:hover,.vl-stretch:focus-visible{--vl-stretch:125%}
  .vl-rail__item{width:min(78vw,300px)}
  .vl-rail__item--wide{width:min(86vw,340px)}
  /* Op smal scherm mag de rail wel tot de schermrand lopen: de negatieve
     marge is exact --pad en wordt door de eigen padding gecompenseerd, dus
     hij kan de pagina niet breder maken. */
  .vl-rail--edge{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
}

/* ==========================================================================
   Beweging uit
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  .vl-holo,.vl-holo::after,.vl-ticker__track{animation:none}
  /* Zonder lus blijft de folie op zijn rustpositie staan in plaats van te
     verdwijnen, en verdwijnt alleen de trekkende lichtstreep. */
  .vl-holo::after{opacity:0}
  /* Alleen het drukeffect (de laatste translate() in de compositie) valt
     weg; een eventuele .vl-offset-tilt op hetzelfde element blijft staan -
     dat is geen animatie maar een statische stand. */
  .vl-frame--press:hover,.vl-frame--press:focus-visible,.vl-frame--press:focus-within{transform:rotate(var(--vl-hang,0deg))}
  .vl-frame::after{transition:none}
  /* De breedte blijft op zijn rustwaarde staan - geen uitrekken, geen sprong. */
  .vl-stretch{transition:none}
  .vl-stretch:hover,.vl-stretch:focus-visible{--vl-stretch:var(--vl-stretch-rest);letter-spacing:-.02em}
}