@charset "utf-8";

/* ==========================================================================
   Domburg Home — voorstel v6 (dbhome/v6)
   Vier hero's, vier richtingen. Zie design.json voor het richtingslot.

   Namespacing: elke versiespecifieke regel draagt `.vN-` of `#version-vN`.
   Dat is niet alleen hygiëne — de poort leidt uit die namen af welke
   regel bij welke versie hoort, en telt radii, schaduwen en letterfamilies
   PER VERSIE. Een gedeelde regel telt bij alle vier tegelijk mee, dus in het
   gedeelde deel staat bewust geen font-family, radius of schaduw behalve de
   focusring.
   ========================================================================== */

/* ------------------------------------------------------------- letters -- */

@font-face{font-family:'Darker Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/darker-grotesque-500.woff2') format('woff2')}
@font-face{font-family:'Darker Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/darker-grotesque-700.woff2') format('woff2')}
@font-face{font-family:'Darker Grotesque';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/darker-grotesque-900.woff2') format('woff2')}
@font-face{font-family:'Faustina';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/faustina-400.woff2') format('woff2')}
@font-face{font-family:'Faustina';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/faustina-600.woff2') format('woff2')}
@font-face{font-family:'Faustina';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/faustina-700.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/schibsted-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/schibsted-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/schibsted-grotesk-800.woff2') format('woff2')}
@font-face{font-family:'Chivo';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/chivo-400.woff2') format('woff2')}
@font-face{font-family:'Chivo';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/chivo-700.woff2') format('woff2')}
@font-face{font-family:'Chivo';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/chivo-900.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/instrument-sans-400.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/instrument-sans-500.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/instrument-sans-600.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/karla-400.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/karla-500.woff2') format('woff2')}
@font-face{font-family:'Karla';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/karla-700.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/geist-mono-400.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/geist-mono-500.woff2') format('woff2')}

/* -------------------------------------------------------------- tokens -- */

:root{
  /* Ritme uit één eenheid, niet uit ronde getallen die er ongeveer goed
     uitzien (fase 8b). Elke verticale afstand is een veelvoud van --u. */
  --u: 8px;
  --u2: 16px;
  --u3: 24px;
  --u4: 32px;
  --u6: 48px;
  --u8: 64px;
  --u12: 96px;

  /* Drie radii, drie schaduwen. Meer blokkeert, en de focusring telt mee als
     schaduw — daarom staat hij hier als token en verwijst elke regel met
     var(), zodat de poort één string ziet in plaats van tien. */
  --r-a: 3px;
  --r-b: 14px;
  --r-c: 999px;
  --sh-a: 0 3px 10px rgb(12 10 8 / .28);
  --sh-b: 0 34px 64px -30px rgb(12 10 8 / .62);
  --sh-ring: 0 0 0 6px var(--ring2);

  /* Typeschaal. Acht stappen plus één displaymaat per versie. */
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 19px;
  --fs-xl: 23px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;

  /* Eén bewegingstaal: twee curven, drie duren. Entree en exit op de eerste,
     verplaatsing op de tweede. Nooit ease-in op UI — die begint traag en
     eindigt snel, dus het traagste stuk valt precies waar je kijkt. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --d-1: 140ms;
  --d-2: 240ms;
  --d-3: 640ms;
  --d-4: 1100ms;

  --maat: 1240px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after{ box-sizing: border-box }

html{ -webkit-text-size-adjust: 100% }

/* Geen overflow-x: hidden op html of body — dat schakelt de overflowpoort
   stil uit in plaats van de oorzaak op te lossen. */
body{
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: var(--fs-m);
  line-height: 1.55;
  background: var(--body-veld, #16211B);
}

/* `figure` krijgt van de UA-stylesheet margin: 1em 40px. Met 16px
   sectiepadding op 320 begint een beeld dan op 56px en schuift de pagina 24px
   opzij; die 56 is letterlijk 16 + 40. `dl`/`dd` en `blockquote` hebben
   dezelfde val. */
h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol{ margin: 0; padding: 0 }
ul, ol{ list-style: none }

/* Een CSS aspect-ratio op een <img> doet niets zolang height niet auto is, en
   de width/height-attributen die de responsive ladder voorschrijft tellen als
   presentational hint precies op die height. Zonder deze regel rendert een
   staand bronbeeld op zijn volle intrinsieke hoogte. */
img, video{ display: block; max-width: 100%; height: auto }

button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
a{ color: inherit }
summary{ cursor: pointer; list-style: none }
summary::-webkit-details-marker{ display: none }

/* Eén focusring zonder specificiteit, als dubbele ring. Een enkele
   currentColor-ring verdwijnt juist op gevulde knoppen: de ringkleur is dan de
   tekstkleur van de knop en die contrasteert met de vulling, niet met de
   pagina erachter. */
:where(a, button, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--ring1);
  outline-offset: 3px;
  box-shadow: var(--sh-ring);
  border-radius: var(--r-a);
}

.skip{
  position: absolute;
  left: var(--u2);
  top: var(--u2);
  z-index: 60;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-a);
  /* Verplaatsen met transform, niet met `top`: die laatste herberekent de
     lay-out per frame in plaats van op de compositor te draaien. */
  transform: translateY(-320%);
  transition: transform var(--d-2) var(--ease);
}
.skip:focus{ transform: translateY(0) }

.sr{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------- versieromp ----- */

/* --kop-h staat op de VERSIEROMP en niet op .kop zelf. Stond hij op .kop, dan
   kon .hero hem niet zien, viel de hele calc() weg als ongeldig en had de hero
   in het geheel geen min-height meer — waarna de voettekst het eerste scherm in
   kroop. Geen fout, geen overflow, alleen op de afdruk te zien. */
.ver{ --kop-h: 76px; min-height: 100svh; display: flex; flex-direction: column }
.ver > main{ flex: 1; display: flex; flex-direction: column }
.ver[hidden]{ display: none }

.hero{
  position: relative;
  flex: 1;
  /* De kop staat BOVEN de hero, dus 100svh zou de onderste 60 tot 80px uit
     beeld duwen — precies de rij met de primaire actie op 390. */
  min-height: calc(100svh - var(--kop-h));
  overflow: clip;
}

.kop{
  position: relative;
  z-index: 20;
  height: var(--kop-h);
  display: flex;
  align-items: center;
  gap: var(--u3);
  padding: 0 var(--u3);
  /* nowrap: merk, nummer en menuknop passen op 390 niet samen op één regel en
     de knop zakt dan naar een tweede rij, waarna de kop stil twee lagen hoog
     wordt. */
  flex-wrap: nowrap;
}
.merk{ display: flex; align-items: center; flex: 0 0 auto; text-decoration: none }
.merk img{ width: 168px; height: 71px; object-fit: contain; object-position: left center }

.menu{ margin-left: auto; position: relative }
.menu > summary{
  display: none;
  align-items: center;
  gap: var(--u);
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--u2);
  font-size: var(--fs-s);
  font-weight: 600;
  border-radius: var(--r-a);
}
.menu-lijst{ display: flex; align-items: center; gap: var(--u3) }
.menu-lijst a{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-s);
  text-decoration: none;
  letter-spacing: .01em;
}

.knop{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u);
  min-height: 52px;
  padding: 0 var(--u3);
  font-size: var(--fs-m);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-a);
  transition: transform var(--d-1) var(--ease), background-color var(--d-1) var(--ease);
}
.knop:active{ transform: scale(.97) }
.knop-klein{ min-height: 44px; padding: 0 var(--u2); font-size: var(--fs-s) }

.stil{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-m);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* De plaat staat op de KNOP en het label in een span erbinnen. De contrastmeter
   verbergt het element dat hij meet voordat hij het vak fotografeert; draagt de
   tekst zijn eigen plaat, dan verdwijnt die plaat mee en meet hij de kale video
   eronder. Eén extra span verplaatst de plaat naar een voorouder en dan meet
   hij wat je werkelijk ziet. */
.pauze{
  position: absolute;
  right: var(--u2);
  bottom: var(--u2);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--u2);
  border-radius: var(--r-a);
  filter: drop-shadow(0 4px 14px rgb(10 8 6 / .5));
}
.pauze span{
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.voet{
  position: relative;
  z-index: 20;
  padding: var(--u4) var(--u3) var(--u12);
  font-size: var(--fs-s);
}
.voet a{ text-decoration: underline; text-underline-offset: 3px }

/* --------------------------------------------------- versiewisselaar ---- */

.vswitch-balk{
  position: fixed;
  left: 50%;
  bottom: var(--u2);
  z-index: 90;
  display: flex;
  gap: 2px;
  padding: 4px;
  transform: translateX(-50%);
  background: #12100E;
  border-radius: var(--r-c);
  box-shadow: var(--sh-b);
}
.vswitch{
  min-height: 40px;
  min-width: 52px;
  padding: 0 var(--u2);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-s);
  color: #C9C2B8;
  border-radius: var(--r-c);
  transition: background-color var(--d-1) var(--ease), color var(--d-1) var(--ease);
}
.vswitch[aria-pressed="true"]{ background: #F0EAE0; color: #12100E }

/* ==========================================================================
   v1 — GETIJ · school motion
   Veld donker brons-zand, accent diep teal, Darker Grotesque.
   Het getij is de enige klok die in Domburg echt telt: de kop draagt de
   waterlijn, en de clip loopt door in een kader dat de kop overlapt.
   ========================================================================== */

#version-v1{
  --v1-veld: #2A2116;
  /* Het accent is de LICHTE stap van de teal, niet de diepe. Op dit veld haalt
     #0F4A4C 1,58:1 en is dus geen accent maar een vlek; een vlak dat helder
     genoeg is voor dit veld vraagt om donkere knoptekst in plaats van lichte. */
  --v1-accent: #7FD8D0;
  --v1-tekst: #F2E8D5;
  --v1-opp: #3B3022;
  --v1-rand: #7A7469;
  --v1-stil: #B9B0A2;
  --v1-opAccent: #16302F;
  --ring1: #F2E8D5;
  --ring2: rgb(127 216 208 / .42);
  --body-veld: #2A2116;
  --v1-fs-display: clamp(52px, 11.4vw, 150px);

  color: var(--v1-tekst);
  /* Het veld is nooit één platte hex: een verloop over de sectie zelf, niet
     op een absoluut kind, want hero-craft loopt vanaf de herosectie omhóóg.
     De background-COLOR staat er apart bij: een verloop laat background-color
     op transparant staan, en dan loopt de vingerafdruk door naar <body> en
     meet hij het veld van een andere versie. */
  background-color: var(--v1-veld);
  background-image:
    radial-gradient(120% 80% at 76% 18%, #3B3022 0%, #2A2116 58%, #211A11 100%);
  font-family: 'Instrument Sans', system-ui, sans-serif;
}

.v1-skip{ background: var(--v1-accent); color: var(--v1-opAccent) }
.v1-kop{ color: var(--v1-tekst) }
.v1-kop .menu-lijst a{ color: var(--v1-stil) }
.v1-kop .menu > summary{ color: var(--v1-tekst); border: 1px solid var(--v1-rand) }
.v1-knop{ background: var(--v1-accent); color: var(--v1-opAccent) }

.v1-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--u4);
  padding: var(--u6) var(--u3) var(--u8);
}

.v1-binnen{
  position: relative;
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
}

.v1-oog{
  display: inline-flex;
  align-items: center;
  gap: var(--u);
  margin-bottom: var(--u3);
  font-size: var(--fs-s);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v1-stil);
}
.v1-oog::before{
  content: "";
  width: 40px;
  height: 1px;
  background: var(--v1-rand);
}

#version-v1 h1{
  position: relative;
  z-index: 3;
  max-width: 880px;
  font-family: 'Darker Grotesque', system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--v1-fs-display);
  line-height: .88;
  letter-spacing: -.024em;
  text-wrap: balance;
  color: var(--v1-tekst);
}
.v1-plaats{
  display: block;
  /* De clip snijdt de staart van dit woord af, dus het staat vooraan links
     en de rest van de regel eindigt vroeg. */
  color: var(--v1-tekst);
}
.v1-plaats b{
  font-weight: 900;
  color: var(--v1-accent);
}

#version-v1 .v1-lead{
  position: relative;
  z-index: 3;
  max-width: 460px;
  margin-top: var(--u3);
  font-size: var(--fs-l);
  line-height: 1.55;
  color: var(--v1-tekst);
}

.v1-acties{
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u3);
  margin-top: var(--u4);
}
.v1-acties .stil{ color: var(--v1-tekst) }

/* De waterlijn onder de kop: één pad dat heen en weer schuift. Het is de
   signatuur van deze richting en hij keert straks in de secties terug als de
   scheiding tussen twee vlakken. */
.v1-lijn{
  position: relative;
  z-index: 3;
  width: min(100%, 540px);
  height: 26px;
  margin-top: var(--u3);
  overflow: hidden;
}
.v1-lijn svg{ display: block; width: 200%; height: 100% }

/* Het paneel met de clip. Gekanteld, met een echte slagschaduw, en het
   overlapt de kop — dat is de laag die elkaar snijdt (eis a). */
.v1-paneel{
  position: absolute;
  right: -2%;
  top: 50%;
  z-index: 2;
  width: min(46%, 460px);
  margin: 0;
  /* GEEN overflow hier: de gepinde satelliet steekt met opzet links buiten het
     paneel uit, en een clip op dit niveau zou hem stil wegsnijden. Het klippen
     hoort bij het beeld, dus een verdieping lager. */
  border-radius: var(--r-b);
  transform: translateY(-50%) rotate(2.4deg);
}
.v1-paneel-in{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: clip;
  /* Buitenradius = binnenradius + padding, en de padding is hier nul, dus de
     twee zijn gelijk. Een grotere binnenhoek snijdt de buitenhoek af. */
  border-radius: var(--r-b);
  border: 1px solid var(--v1-rand);
  box-shadow: var(--sh-b);
}
.v1-paneel-in video,
.v1-paneel-in img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Een licht dat over het oppervlak trekt. Alleen transform, dus op de
   compositor, en het is een broertje van de video in plaats van een laag met
   een eigen dekkingsanimatie — een keyframe op opacity zou de dekking wissen
   die de vormgeving draagt. */
.v1-glans{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(104deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / 0) 62%);
}
.v1-paneel .pauze{
  background: var(--v1-opp);
  color: var(--v1-tekst);
  border: 1px solid var(--v1-rand);
}

/* De satelliet: één gepind kaartje met een echt, controleerbaar feit. */
.v1-chip{
  position: absolute;
  left: -16%;
  bottom: 8%;
  z-index: 6;
  width: max-content;
  max-width: 260px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  line-height: 1.4;
  color: var(--v1-opAccent);
  background: var(--v1-accent);
  border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 8px 18px rgb(10 8 6 / .34));
}
.v1-chip b{ display: block; font-weight: 600 }

@media (max-width: 1000px){
  .v1-paneel{
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 460px;
    margin-top: var(--u4);
    transform: rotate(1.6deg);
  }
  .v1-paneel-in{ aspect-ratio: 16 / 11 }
  /* De satelliet NAAR BINNEN op smal scherm. Buiten het paneel gehangen viel
     hij precies achter de versiebalk, en dan is het feit dat deze hero moest
     dragen op een telefoon onzichtbaar. */
  .v1-chip{ left: var(--u3); right: auto; top: auto; bottom: var(--u3); max-width: 62% }
  .v1-paneel .pauze{ top: var(--u2); bottom: auto }
  #version-v1 h1{ max-width: none }
}

@media (hover: hover) and (pointer: fine){
  .v1-knop:hover{ background: #14605F }
}

/* ==========================================================================
   v2 — HELMGRAS · school humanistisch
   Veld zeemist-blauw, accent baksteen, Faustina.
   Inhoud die stapelt in plaats van in een raster ligt: de band met helmgras
   heeft een duinprofiel als bovenrand, en de kop rust erop.
   ========================================================================== */

#version-v2{
  --v2-veld: #CDDFE7;
  --v2-accent: #A64B2A;
  --v2-tekst: #1B2B33;
  --v2-opp: #F4F8FA;
  --v2-rand: #5C7A88;
  --v2-opAccent: #F4F8FA;
  /* Dezelfde kleur, een stap donkerder, voor lopende tekst: #A64B2A haalt op
     dit veld 4,18:1 en dat is onder de 4,5 die tekst vraagt. Als vulling onder
     een halfvet knoplabel mag hij blijven staan. */
  --v2-accent-d: #8A3C21;
  --ring1: #1B2B33;
  --ring2: rgb(166 75 42 / .5);
  --body-veld: #CDDFE7;
  --v2-fs-display: clamp(38px, 6.6vw, 78px);

  color: var(--v2-tekst);
  background-color: var(--v2-veld);
  background-image: linear-gradient(178deg, #E4EFF4 0%, #CDDFE7 46%, #BCD3DE 100%);
  font-family: 'Karla', system-ui, sans-serif;
}

.v2-skip{ background: var(--v2-accent); color: var(--v2-opAccent) }
.v2-kop{ color: var(--v2-tekst) }
.v2-kop .menu-lijst a{ color: var(--v2-tekst) }
.v2-kop .menu > summary{ color: var(--v2-tekst); border: 1px solid var(--v2-rand) }
.v2-knop{ background: var(--v2-accent); color: var(--v2-opAccent) }

.v2-hero{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--u6) 0 0;
}

.v2-top{
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
  padding: 0 var(--u3);
}

#version-v2 h1{
  max-width: 15ch;
  font-family: 'Faustina', Georgia, serif;
  font-weight: 700;
  font-size: var(--v2-fs-display);
  line-height: 1.04;
  letter-spacing: -.014em;
  text-wrap: balance;
  color: var(--v2-tekst);
}
#version-v2 h1 em{
  font-style: normal;
  color: var(--v2-accent);
}

#version-v2 .v2-lead{
  max-width: 34em;
  margin-top: var(--u3);
  font-size: var(--fs-l);
  line-height: 1.6;
  color: var(--v2-tekst);
}

.v2-acties{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--u3);
  margin-top: var(--u4);
}
.v2-acties .stil{ color: var(--v2-accent-d) }

/* De band. Breekt uit de container met PADDING in plaats van met 100vw of een
   negatieve marge: padding kan per definitie geen horizontale overflow maken,
   dus deze uitbraak hoeft nooit door een overflow: hidden gered te worden. */
.v2-band{
  position: relative;
  margin-top: calc(var(--u6) * -1);
  padding: var(--u12) max(var(--u3), calc((100vw - var(--maat)) / 2)) 0;
}
.v2-band-beeld{
  position: relative;
  height: clamp(260px, 42vh, 420px);
  overflow: hidden;
  /* Het duinprofiel. Een echte vorm, geen decoratieve blob: de bovenrand van
     de band loopt als een duinrug en de kop erboven zakt erin. */
  /* Een duin, geen bergketen. De eerste versie liep van 4% tot 26% en dat las
     als een Alpenprofiel; Zeeland is vlak, dus de amplitude moest terug naar
     een paar procent en de toppen moesten ver uit elkaar. */
  clip-path: polygon(0% 15%, 14% 11%, 28% 13%, 42% 8%, 56% 12%, 70% 7%, 84% 11%, 100% 9%, 100% 100%, 0% 100%);
  /* Een drop-shadow volgt de clip-vorm en niet de doos, dus de duinrug werpt
     een echte schaduw op het veld erboven. Een box-shadow zou hier niets doen:
     die tekent om de rechthoek die net is weggeknipt. */
  filter: drop-shadow(0 -6px 20px rgb(27 43 51 / .28));
}
.v2-band-beeld video,
.v2-band-beeld img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-band .pauze{
  background: var(--v2-tekst);
  color: var(--v2-opp);
}

/* De gekantelde kaart met de eigen foto van de klant, over de rand van de
   band heen: het beeld steekt de sectiegrens over, de tekst blijft binnen
   zijn eigen vlak. */
.v2-kaart{
  position: absolute;
  right: max(var(--u3), calc((100vw - var(--maat)) / 2 + var(--u3)));
  bottom: var(--u6);
  z-index: 5;
  width: min(30%, 232px);
  margin: 0;
  padding: var(--u);
  background: var(--v2-opp);
  border-radius: var(--r-a);
  box-shadow: var(--sh-b);
  transform: rotate(-3deg);
}
.v2-kaart img{ width: 100%; border-radius: var(--r-a) }

/* Satelliet: één gepind cijfer, met een bron in design.json. */
.v2-chip{
  position: absolute;
  left: max(var(--u3), calc((100vw - var(--maat)) / 2));
  top: calc(var(--u12) - var(--u3));
  z-index: 6;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-size: var(--fs-s);
  font-variant-numeric: tabular-nums;
  color: var(--v2-tekst);
  background: var(--v2-opp);
  border-radius: var(--r-c);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 8px 18px rgb(10 8 6 / .34));
}
.v2-chip b{ font-weight: 700; font-size: var(--fs-l) }

@media (max-width: 860px){
  #version-v2 h1{ max-width: none }
  .v2-kaart{ width: 148px; bottom: var(--u3); right: var(--u3) }
  .v2-chip{ left: var(--u3); top: calc(var(--u8) - var(--u2)) }
  .v2-band{ padding-top: var(--u8) }
}

@media (hover: hover) and (pointer: fine){
  .v2-knop:hover{ background: #8E3D21 }
}

/* ==========================================================================
   v3 — PAALHOOFD · school informatie
   Veld bemost donkergroen, accent bleek goudgraan, Schibsted Grotesk.
   De pagina is een register: de afstand tot zee krijgt de displaymaat en de
   straatnaam wordt de onderregel. Ontleend aan kustbewegwijzering — genummerde
   strandpalen om de 250 m — niet aan webdesign.
   ========================================================================== */

#version-v3{
  --v3-veld: #16211B;
  --v3-accent: #F2CB74;
  --v3-tekst: #E4EAE2;
  --v3-opp: #22322A;
  --v3-rand: #6D7F72;
  --v3-stil: #BCC7BE;
  --v3-opAccent: #16211B;
  --ring1: #F2CB74;
  --ring2: rgb(228 234 226 / .38);
  --body-veld: #16211B;
  --v3-fs-display: clamp(34px, 4.4vw, 56px);
  --v3-fs-cijfer: clamp(76px, 15vw, 190px);

  color: var(--v3-tekst);
  background-color: var(--v3-veld);
  background-image: linear-gradient(196deg, #1B2921 0%, #16211B 52%, #101913 100%);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
}

.v3-skip{ background: var(--v3-accent); color: var(--v3-opAccent) }
.v3-kop{ color: var(--v3-tekst) }
.v3-kop .menu-lijst a{ color: var(--v3-stil) }
.v3-kop .menu > summary{ color: var(--v3-tekst); border: 1px solid var(--v3-rand) }
.v3-knop{ background: var(--v3-accent); color: var(--v3-opAccent) }

.v3-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  /* align-content: start, want een auto-rij in een grid dat meer ruimte krijgt
     dan zijn inhoud rekt uit en sleept elke absolute laag erin mee. */
  align-content: center;
  align-items: center;
  gap: var(--u6);
  padding: var(--u6) 0 var(--u8) max(var(--u3), calc((100vw - var(--maat)) / 2));
}

.v3-tekst{ position: relative; z-index: 4; min-width: 0 }

#version-v3 h1{
  max-width: 620px;
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-weight: 800;
  font-size: var(--v3-fs-display);
  line-height: 1.06;
  letter-spacing: -.018em;
  text-wrap: balance;
  color: var(--v3-tekst);
}

/* Het cijfer is het onderwerp, niet het bijschrift. Zo staat een diepte op een
   zeekaart ook: kaal in het vlak, zonder legenda ernaast. */
.v3-maat{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--u2);
  /* Displaycijfers hebben descenders (de komma, de staart van een 9), dus de
     ruimte eronder komt uit een token en niet uit de regelval. */
  margin-top: var(--u4);
  margin-bottom: var(--u3);
  font-variant-numeric: tabular-nums;
}
.v3-maat b{
  font-size: var(--v3-fs-cijfer);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--v3-accent);
  /* Eén lichtrichting voor de hele versie: het licht komt linksboven, dus de
     schaduw valt rechtsonder — dezelfde richting als die van het beeldkader. */
  filter: drop-shadow(14px 18px 22px rgb(8 14 10 / .55));
}
.v3-maat i{
  font-style: normal;
  font-size: var(--fs-2xl);
  font-weight: 400;
  color: var(--v3-rand);
}
/* De eenheid krijgt een eigen regel onder de cijfers in plaats van ernaast.
   Naast de cijfers werd de kolom zo smal dat "meter tot het strand" in vier
   gestapelde regels afbrak en tegen de fotorand aanliep — geen overflow, geen
   contrastfout, alleen op de afdruk te zien. */
.v3-maat span{
  flex-basis: 100%;
  margin-top: calc(var(--u) * -1);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-s);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v3-stil);
}

#version-v3 .v3-lead{
  max-width: 40em;
  font-size: var(--fs-m);
  line-height: 1.6;
  color: var(--v3-stil);
}

.v3-acties{ display: flex; flex-wrap: wrap; gap: var(--u3); margin-top: var(--u4) }

/* De meetlat: de as waarop alles wordt uitgezet, ontleend aan de genummerde
   strandpalen langs de kust. Hij ligt óver de foto, dus de twee lagen snijden
   elkaar echt. In de normale stroom binnen zijn eigen laag, zodat de tikken
   niet elk apart als satelliet gaan tellen. */
.v3-lat{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  gap: var(--u);
  padding: var(--u6) var(--u3) var(--u3);
  pointer-events: none;
  /* De plaat hoort op een VOOROUDER van de tekst, niet op de tikken zelf:
     alleen dan telt de tekst als "op beeld" en wordt hij met pixelmeting
     gecontroleerd in plaats van tegen een kleur die er niet is. */
  background-image: linear-gradient(180deg, rgb(13 21 16 / 0) 0%, rgb(13 21 16 / .58) 34%, rgb(13 21 16 / .88) 100%);
}
/* De labels delen één basislijn en de streepjes groeien er vanaf omhoog, zoals
   op een echte meetlat. Zonder de vaste hoogte duwt een langer streepje zijn
   eigen label omlaag en staat de rij getrapt: dat leest als slordigheid en niet
   als hoofd- en tussenmaat. */
.v3-tik{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 58px;
  gap: var(--u);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--v3-tekst);
  text-shadow: 0 1px 3px rgb(10 18 13 / .9);
}
.v3-tik span{
  width: 1px;
  height: 22px;
  background: var(--v3-accent);
  opacity: .85;
}
.v3-tik:nth-child(odd) span{ height: 34px }

.v3-beeld{
  position: relative;
  z-index: 2;
  margin: 0;
}
.v3-beeld-in{
  position: relative;
  height: clamp(300px, 62vh, 620px);
  overflow: clip;
  border-radius: var(--r-b) 0 0 var(--r-b);
  box-shadow: var(--sh-b);
}
.v3-beeld-in img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
/* De onthulling clipt een BINNENwrapper, niet het element dat geobserveerd
   wordt: een clip-path op het buitenelement zet intersectionRatio op nul,
   waarna de observer die hem moest onthullen per definitie nooit afgaat. */
/* Standaard bestaat het blind NIET. Zonder script of met beweging uit draait
   de animatie die hem wegtrekt nooit, en dan zou een blind dat er wel staat de
   foto permanent bedekken. Hij komt dus pas met .bm-anim, precies zoals de
   verborgen staat van elke onthulling hier. */
.v3-blind{ display: none }
.bm-anim .v3-blind{
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--v3-veld);
  transform-origin: 50% 100%;
}

.v3-chip{
  position: absolute;
  left: calc(var(--u4) * -1);
  top: var(--u6);
  z-index: 6;
  max-width: 260px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xs);
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--v3-tekst);
  background: var(--v3-opp);
  border: 1px solid var(--v3-rand);
  border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 8px 18px rgb(10 8 6 / .34));
}

@media (max-width: 980px){
  .v3-hero{
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u4);
    padding: var(--u6) var(--u3) var(--u12);
  }
  .v3-beeld-in{ height: clamp(180px, 24vh, 240px); border-radius: var(--r-b) }
  .v3-lat{ padding: var(--u4) var(--u2) var(--u2) }
  /* De chip gaat op smal scherm UIT de foto en in de stroom eronder. Gepind
     dekte hij op 390 vrijwel de hele zichtbare foto af, en dan blijft er van
     het onderwerp niets over. */
  .v3-chip{
    position: static;
    max-width: none;
    margin-top: var(--u2);
    box-shadow: none;
    filter: none;
  }
}

@media (max-width: 560px){
  /* Zeven tikken op 320 geven kolommen van 34px voor een label van vier
     tekens in monospace met spatiëring; dat past niet en duwt de rij opzij.
     Vier tikken houden de meetlat leesbaar en de betekenis heel. */
  .v3-tik:nth-child(2),
  .v3-tik:nth-child(4),
  .v3-tik:nth-child(6){ display: none }
}

@media (hover: hover) and (pointer: fine){
  .v3-knop:hover{ background: #FADB94 }
}

/* ==========================================================================
   v4 — SLEUTEL · school gereedschap
   Veld geteerd hout, accent staalblauw, Chivo met Geist Mono.
   Warm donker met haarlijnen is hier geen stijlkeuze: het is de kleur van de
   zwart geteerde potdekselgevel op de eigen foto van de klant.
   ========================================================================== */

#version-v4{
  --v4-veld: #23100F;
  --v4-accent: #8AB4DE;
  --v4-tekst: #EDE4E0;
  --v4-opp: #341A18;
  --v4-rand: #856663;
  /* De randkleur haalt 3,55:1: genoeg voor een lijn, te weinig voor tekst. */
  --v4-stil: #B39A96;
  --v4-opAccent: #23100F;
  --ring1: #8AB4DE;
  --ring2: rgb(237 228 224 / .35);
  --body-veld: #23100F;
  --v4-fs-display: clamp(32px, 4.2vw, 54px);

  color: var(--v4-tekst);
  background-color: var(--v4-veld);
  background-image: linear-gradient(158deg, #2C1614 0%, #23100F 55%, #1A0B0A 100%);
  font-family: 'Chivo', system-ui, sans-serif;
}

.v4-skip{ background: var(--v4-accent); color: var(--v4-opAccent) }
.v4-kop{ color: var(--v4-tekst) }
.v4-kop .menu-lijst a{ color: var(--v4-stil) }
.v4-kop .menu > summary{ color: var(--v4-tekst); border: 1px solid var(--v4-rand) }
.v4-knop{ background: var(--v4-accent); color: var(--v4-opAccent) }

.v4-hero{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: var(--u6) var(--u3) var(--u8);
}

.v4-binnen{
  position: relative;
  width: 100%;
  max-width: var(--maat);
  margin: 0 auto;
}

.v4-paneel{
  position: relative;
  z-index: 4;
  width: min(100%, 660px);
  padding: var(--u6) var(--u6) var(--u6) 0;
}

#version-v4 h1{
  font-family: 'Chivo', system-ui, sans-serif;
  font-weight: 900;
  font-size: var(--v4-fs-display);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--v4-tekst);
}
#version-v4 h1 span{
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
  color: var(--v4-accent);
  /* De twee tijden zijn de uitlezing van dit instrument, dus ze staan letterlijk
     aan: een zachte gloed in de accentkleur zelf, niet een schaduw in het zwart. */
  filter: drop-shadow(0 0 18px rgb(138 180 222 / .34));
}

/* De uitlezing. Haarlijnen en monospace cijfers, want dit is de enige
   informatie op het scherm waar een bezoeker een handeling op plant. */
.v4-uit{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--u6);
  border-top: 1px solid var(--v4-rand);
}
.v4-uit > div{
  padding: var(--u3) var(--u3) var(--u3) 0;
  border-bottom: 1px solid var(--v4-rand);
}
.v4-uit dt{
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--v4-stil);
}
.v4-uit dd{
  margin-top: var(--u);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  color: var(--v4-tekst);
}

.v4-acties{ display: flex; flex-wrap: wrap; gap: var(--u3); margin-top: var(--u6) }
.v4-acties .stil{ color: var(--v4-tekst) }

/* Het onderwerp: de eigen gevel van de klant, hard gekaderd en gekanteld,
   over de rechterrand van het paneel heen. */
.v4-lijst{
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  width: min(44%, 452px);
  margin: 0;
  padding: var(--u);
  background: var(--v4-opp);
  border: 1px solid var(--v4-rand);
  border-radius: var(--r-a);
  box-shadow: var(--sh-b);
  /* Echt perspectief in plaats van alleen een kanteling in het vlak. Dit is de
     richting die op een instrument leunt, en een gekaderd beeld dat je onder
     een hoek ziet staan leest als een voorwerp op tafel in plaats van als een
     plaatje in een kolom. */
  transform: perspective(1500px) translateY(-50%) rotateY(-5deg) rotate(-1.8deg);
}
/* Eén beeldbehandeling voor elke foto in deze versie. Ongegradeerd botste de
   felblauwe hemel van de eigen foto met het warme donkere veld en las de foto
   als een kiekje dat erop geplakt was; verschillende composities zijn de
   bedoeling, verschillende behandelingen lezen als een sjabloon met stock. */
.v4-lijst img{
  width: 100%;
  border-radius: var(--r-a);
  filter: saturate(.78) contrast(1.06) brightness(.94) sepia(.12);
}

/* De scanlijn: één haarlijn die over de uitlezing trekt. Dit is de beweging
   die bij dit instrument hoort — hij demonstreert dat er iets gelezen wordt. */
.v4-scan{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 100%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(143 184 212 / 0) 0%, rgb(143 184 212 / .85) 34%, rgb(143 184 212 / 0) 72%);
}

.v4-chip{
  position: absolute;
  left: calc(var(--u4) * -1);
  bottom: calc(var(--u6) * -1);
  z-index: 6;
  max-width: 244px;
  margin: 0;
  padding: var(--u2) var(--u3);
  font-family: 'Geist Mono', monospace;
  font-size: var(--fs-xs);
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--v4-opAccent);
  background: var(--v4-accent);
  border-radius: var(--r-a);
  box-shadow: var(--sh-a);
  filter: drop-shadow(0 8px 18px rgb(10 8 6 / .34));
}

@media (max-width: 940px){
  .v4-paneel{ width: 100%; padding: var(--u4) 0 0 }
  .v4-lijst{
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 420px;
    margin-top: var(--u6);
    transform: rotate(-1.4deg);
  }
  .v4-uit{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .v4-chip{ left: auto; right: 0; bottom: calc(var(--u4) * -1) }
}

@media (max-width: 560px){
  /* Drie kolommen blijven staan tot 380px. Gestapeld werd de uitlezing 210px
     hoog, en dan zakt het ONDERWERP van deze hero volledig onder de vouw: op
     een telefoon bleef er een leeg instrumentpaneel zonder foto over. */
  .v4-uit{ grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--u4) }
  .v4-uit dd{ font-size: var(--fs-l) }
  .v4-uit > div{ padding: var(--u2) var(--u) var(--u2) 0 }
  .v4-acties{ margin-top: var(--u4) }
  .v4-paneel{ padding-top: var(--u2) }
  .v4-lijst{ margin-top: var(--u4) }
}

@media (max-width: 380px){
  .v4-uit{ grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (hover: hover) and (pointer: fine){
  .v4-knop:hover{ background: #A9C9DE }
}

/* ==========================================================================
   Breekpunten die alle vier de versies delen
   ========================================================================== */

@media (max-width: 860px){
  .ver{ --kop-h: 68px }
  .kop{ padding: 0 var(--u2); gap: var(--u2) }
  .merk img{ width: 128px; height: 54px }
  .menu > summary{ display: inline-flex }
  /* Zonder script staat de <details> open, dan geldt deze regel niet en valt
     het menu terug op een gewone gestapelde lijst onder de kopregel. De
     zwevende lade hangt daarom aan .has-js en niet aan de klasse die over
     beweging gaat. */
  .has-js .menu:not([open]) .menu-lijst{ display: none }
  .has-js .menu[open] .menu-lijst{
    position: absolute;
    right: 0;
    top: calc(100% + var(--u));
    z-index: 40;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 200px;
    padding: var(--u) var(--u3);
    background: var(--body-veld);
    border: 1px solid currentColor;
    border-radius: var(--r-a);
    box-shadow: var(--sh-b);
  }
  .menu-lijst{ flex-wrap: wrap; gap: var(--u2) }
  .kop .knop{ display: none }
}

@media (max-width: 420px){
  .hero{ min-height: calc(100svh - var(--kop-h)) }
  .v1-hero, .v4-hero{ padding-left: var(--u2); padding-right: var(--u2) }
  .v3-hero{ padding-left: var(--u2); padding-right: var(--u2) }
  .v2-top{ padding: 0 var(--u2) }
}

/* ==========================================================================
   Beweging
   Alleen transform en opacity, dus op de compositor. De verborgen beginstaat
   staat ÍN de keyframes met `both`, niet in een losse regel die een klasse
   moet opheffen: gaat een onthulling om welke reden dan ook niet af, dan staat
   het element er gewoon in plaats van permanent weg te zijn.
   ========================================================================== */

@keyframes v1-rijs{
  from{ opacity: 0; transform: translateY(22px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v1-golf{
  from{ transform: translateX(0) }
  to{ transform: translateX(-50%) }
}
@keyframes v1-glans{
  from{ transform: translateX(-116%) }
  to{ transform: translateX(116%) }
}
@keyframes v1-paneel-in{
  from{ opacity: 0; transform: translateY(-50%) rotate(2.4deg) scale(.965) }
  to{ opacity: 1; transform: translateY(-50%) rotate(2.4deg) scale(1) }
}
@keyframes v1-paneel-mob{
  from{ opacity: 0; transform: rotate(1.6deg) scale(.97) }
  to{ opacity: 1; transform: rotate(1.6deg) scale(1) }
}
@keyframes v4-lijst-mob{
  from{ opacity: 0; transform: rotate(-1.4deg) translateY(20px) }
  to{ opacity: 1; transform: rotate(-1.4deg) translateY(0) }
}

@keyframes v2-rijs{
  from{ opacity: 0; transform: translateY(16px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v2-kaart-in{
  from{ opacity: 0; transform: rotate(-3deg) translateY(26px) }
  to{ opacity: 1; transform: rotate(-3deg) translateY(0) }
}
@keyframes v2-drift{
  from{ transform: scale(1.04) translateY(0) }
  to{ transform: scale(1.04) translateY(-1.4%) }
}

@keyframes v3-blind{
  from{ transform: scaleY(1) }
  to{ transform: scaleY(0) }
}
@keyframes v3-tik{
  from{ opacity: 0; transform: translateY(9px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v3-rijs{
  from{ opacity: 0; transform: translateY(18px) }
  to{ opacity: 1; transform: translateY(0) }
}

@keyframes v4-scan{
  from{ transform: translateY(0) }
  to{ transform: translateY(var(--v4-scan-h, 320px)) }
}
@keyframes v4-rijs{
  from{ opacity: 0; transform: translateY(14px) }
  to{ opacity: 1; transform: translateY(0) }
}
@keyframes v4-lijst-in{
  from{ opacity: 0; transform: perspective(1500px) translateY(-50%) rotateY(-11deg) rotate(-1.8deg) translateX(24px) }
  to{ opacity: 1; transform: perspective(1500px) translateY(-50%) rotateY(-5deg) rotate(-1.8deg) translateX(0) }
}

/* De animaties hangen aan .bm-anim, en die klasse zet het script ALLEEN bij
   prefers-reduced-motion: no-preference. Zonder script en met beweging uit
   bestaat de klasse niet, gelden de regels niet, en staat er dus niets op nul
   dekking. */
.bm-anim .v1-oog,
.bm-anim #version-v1 h1,
.bm-anim #version-v1 .v1-lead,
.bm-anim .v1-acties,
.bm-anim .v1-lijn{
  animation: v1-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v1-lijn svg{ animation: v1-golf 13s linear infinite }
.bm-anim .v1-paneel{ animation: v1-paneel-in var(--d-4) var(--ease) 160ms both }
.bm-anim .v1-glans{ animation: v1-glans 6.4s var(--ease-move) 1.4s infinite }

.bm-anim .v2-top > *{
  animation: v2-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v2-kaart{ animation: v2-kaart-in var(--d-4) var(--ease) 260ms both }
.bm-anim .v2-band-beeld video,
.bm-anim .v2-band-beeld img{ animation: v2-drift 22s var(--ease-move) infinite alternate }

.bm-anim .v3-blind{ animation: v3-blind var(--d-4) var(--ease-move) 220ms both }
.bm-anim .v3-tik{
  animation: v3-tik var(--d-2) var(--ease) both;
  animation-delay: calc(320ms + var(--i, 0) * 70ms);
}
.bm-anim #version-v3 h1,
.bm-anim .v3-maat,
.bm-anim #version-v3 .v3-lead,
.bm-anim .v3-acties{
  animation: v3-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.bm-anim .v4-scan{ animation: v4-scan 5.2s var(--ease-move) infinite alternate }
.bm-anim #version-v4 h1,
.bm-anim .v4-uit,
.bm-anim .v4-acties{
  animation: v4-rijs var(--d-3) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.bm-anim .v4-lijst{ animation: v4-lijst-in var(--d-4) var(--ease) 200ms both }

/* Breekpuntvarianten van de animaties, en ze staan hier ONDERAAN met opzet.
   Een keyframe schrijft in de animation-origin cascade en wint van elke gewone
   declaratie, dus een breekpunt overschrijft de ANIMATIE en niet de transform.
   Maar dan geldt ook gewoon bronvolgorde: stonden deze regels bij hun eigen
   sectie, dan zou de basisregel verderop in het bestand ze alsnog verslaan en
   trok de eindstand `translateY(-50%)` het beeld op smal scherm over de tekst
   heen. Precies dat gebeurde, en alleen de afdruk op 390 liet het zien. */
@media (max-width: 1000px){
  .bm-anim .v1-paneel{ animation: v1-paneel-mob var(--d-4) var(--ease) 160ms both }
}
@media (max-width: 940px){
  .bm-anim .v4-lijst{ animation: v4-lijst-mob var(--d-4) var(--ease) 200ms both }
}

/* Onder deze voorkeur wordt er geen enkele animatie aangemaakt (het script
   zet .bm-anim niet), en de video wijkt voor zijn poster. Deze regels staan er
   voor het geval de voorkeur pas ná het laden omslaat. */
@media (prefers-reduced-motion: reduce){
  .bm-anim .v1-oog,
  .bm-anim #version-v1 h1,
  .bm-anim #version-v1 .v1-lead,
  .bm-anim .v1-acties,
  .bm-anim .v1-lijn,
  .bm-anim .v1-lijn svg,
  .bm-anim .v1-paneel,
  .bm-anim .v1-glans,
  .bm-anim .v2-top > *,
  .bm-anim .v2-kaart,
  .bm-anim .v2-band-beeld video,
  .bm-anim .v2-band-beeld img,
  .bm-anim .v3-blind,
  .bm-anim .v3-lat g,
  .bm-anim #version-v3 h1,
  .bm-anim .v3-maat,
  .bm-anim #version-v3 .v3-lead,
  .bm-anim .v3-acties,
  .bm-anim .v4-scan,
  .bm-anim #version-v4 h1,
  .bm-anim .v4-uit,
  .bm-anim .v4-acties,
  .bm-anim .v4-lijst{
    animation: none;
  }
  .v3-blind{ display: none }
  .knop, .skip, .vswitch{ transition: none }
}

@media print{
  .vswitch-balk, .pauze{ display: none }
}