/* components.css: header, menu, schakelaar, knoppen, links, chips, voortgangsbalk, cursor, gordijn, preloader, HUD en voettekst.
   Regels:
   - Alleen tokens (tokens.css). Elke transitie noemt haar eigenschappen, geen ease-in, de systeemcursor blijft altijd staan.
   - Verplaatsing en schaal krijgen hun duur vermenigvuldigd met --m (0 bij reduce en "Beweging uit"); kleur en dekking blijven.
   - Hover alleen achter (hover: hover) and (pointer: fine) en altijd met een :focus-visible-tegenhanger. */

/* ---------- Links ---------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.55rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}
.link:focus-visible::after,
.link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- Knoppen (pil) ---------- */
.btn {
  --wipe: var(--accent);
  --wipe-fg: var(--inkt);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  max-width: 100%;
  padding: 0.875rem 1.5rem;                                  /* verticale ruimte voor een label dat afbreekt (grote tekst, smal scherm) */
  border: 1.5px solid var(--fg);
  border-radius: var(--r-bediening);
  background: transparent;
  color: var(--fg);
  font-family: var(--f-tekst);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  overflow: clip;
  transition:
    scale calc(var(--t-snel) * var(--m)) var(--ease-out),
    color var(--t-snel) ease,
    background-color var(--t-snel) ease,
    border-color var(--t-snel) ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--wipe);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform calc(var(--t-middel) * var(--m) * 0.7) var(--ease-out);
}
.btn:active { scale: calc(1 - 0.03 * var(--m)); }
.btn .pijl { transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out); }
.btn--primair {
  background: var(--fg);
  color: var(--bg);
}
.btn--secundair {
  --wipe: var(--fg);
  --wipe-fg: var(--bg);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--wipe-fg); }
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover .pijl { transform: translateX(3px); }
}
.btn:focus-visible { color: var(--wipe-fg); }
.btn:focus-visible::before { transform: scaleY(1); }
.btn:focus-visible .pijl { transform: translateX(3px); }

.pijl {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ---------- Chips (filters, pressed-staat) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1.5px solid var(--fg-dim);
  border-radius: var(--r-bediening);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  transition:
    scale calc(var(--t-snel) * var(--m)) var(--ease-out),
    color var(--t-snel) ease,
    background-color var(--t-snel) ease,
    border-color var(--t-snel) ease;
}
.chip:active { scale: calc(1 - 0.03 * var(--m)); }
.chip[aria-pressed="true"] {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}
@media (hover: hover) and (pointer: fine) {
  .chip[aria-pressed="false"]:hover { border-color: var(--fg); }
}
.chip[aria-pressed="false"]:focus-visible { border-color: var(--fg); }

/* ---------- Schakelaar "Beweging uit" (aria-pressed = beweging staat uit) ---------- */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  max-width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}
.switch__label { min-width: 0; overflow-wrap: anywhere; }
.switch__track {
  position: relative;
  width: 2.75rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 1.5px solid var(--fg);
  border-radius: var(--r-bediening);
  transition: background-color var(--t-snel) ease;
}
.switch__knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border-radius: 50%;
  background: var(--fg);
  transition: transform calc(var(--t-snel) * var(--m)) var(--ease-out);
}
.switch[aria-pressed="true"] .switch__track { background: var(--accent); }
.switch[aria-pressed="true"] .switch__knob { transform: translateX(1.25rem); background: var(--inkt); }
.switch[aria-pressed="true"] .switch__track { border-color: var(--fg); }
.switch[aria-disabled="true"] { cursor: default; color: var(--fg-dim); }          /* bij reduce bepaalt het systeem: de knop doet niets */
.switch[aria-disabled="true"] .switch__track { border-color: var(--fg-dim); }
.switch__hint {
  display: block;
  margin-top: 0.15rem;
  color: var(--fg-dim);
  font-size: 0.8125rem;
  font-weight: 400;
}
/* Windows-hoog-contrast: kleuren van de achtergrond verdwijnen daar, dus staan de baan en de knop in systeemkleuren */
@media (forced-colors: active) {
  .switch__knob { forced-color-adjust: none; background: CanvasText; }
  .switch[aria-pressed="true"] .switch__track { forced-color-adjust: none; background: Highlight; }
  .switch[aria-pressed="true"] .switch__knob { background: HighlightText; }
  .menu__link[aria-current="page"] .menu__text::after { forced-color-adjust: none; background: LinkText; }   /* de punt achter de huidige pagina */
}
/* Bediening die alleen met JS werkt (data-js-only) staat in de HTML op hidden: zonder JS en na een fout blijft ze weg, met JS staat ze
   vanaf de eerste paint goed (geen verspringing) en haalt core.js het attribuut weg zodra alles draait. */
.js:not(.motion-failed) .switch[data-js-only][hidden] { display: inline-flex !important; }
/* De menuknop (data-js-own) toont chrome.js zelf, zodra zijn handlers hangen: geen dode knop bij vertraagde of geblokkeerde scripts. */

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  min-height: var(--header-min);
  background-color: transparent;
  border-bottom: var(--haar) solid transparent;
  color: var(--fg);
  transition:
    background-color var(--t-middel) var(--ease-out),
    border-color var(--t-middel) var(--ease-out),
    transform calc(var(--t-middel) * var(--m)) var(--ease-out);
}
.site-header.is-scrolled {
  background-color: var(--papier);
  border-bottom-color: var(--lijn);
}
.site-header.is-hidden:not(:focus-within) { transform: translateY(calc(-100% - 2px)); }
html.menu-open .site-header,
html.menu-open .site-header.is-hidden { transform: none; }   /* de sluitknop blijft in beeld, ook als de header was weggeschoven */
html.menu-open .site-header {
  background-color: transparent;
  border-bottom-color: transparent;
}
/* 400 procent zoom (320 bij 256): de vaste header en de plakkende rij op Techniek bedekten samen de helft van het scherm (D25). In zo'n klein venster
   scrolt de header mee met de pagina; het menu blijft bereikbaar (de knop zit in de header en staat bovenaan) en de rij plakt dan ook niet (techniek.css). */
@media (max-width: 40rem) and (max-height: 32rem) {
  .site-header { position: absolute; }
  .site-header.is-hidden:not(:focus-within) { transform: none; }
}
/* Header boven een donkere sectie: een sectie die de pagina donker maakt, zet de header met Motion.headerThema(true) op .is-boven-inkt
   (chrome.js; nu alleen de sectie donker). Tekst en vlak wisselen in hetzelfde beeld, zonder overgang van kleur: zou het vlak vervagen
   terwijl de tekst direct omklapt, dan staat er ruim 300 ms inkt op papier of papier op papier. .is-wissel-donker houdt alleen de
   verschuiving van de header (verbergen) als overgang. */
.site-header.is-boven-inkt {
  --bg: var(--inkt);
  --bg-2: var(--inkt-2);
  --fg: var(--papier);
  --fg-dim: var(--gedempt-inkt);
  --lijn-fg: var(--lijn-inkt);
  --accent-lees: var(--accent);
}
.site-header.is-boven-inkt.is-scrolled {
  background-color: var(--inkt);
  border-bottom-color: var(--lijn-inkt);
}
.site-header.is-wissel-donker {
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-out);
}
/* De header groeit mee in plaats van af te knippen: bij een grotere tekst of een smal scherm breekt de menuknop naar een tweede regel
   en de Demo-pil onder het wordmerk. chrome.js meet de echte hoogte in --header-h (scroll-padding, menu en eerste sectie lopen daarop). */
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-16);
  min-height: var(--header-min);
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-4) var(--rand);
}
.site-header__left,
.site-header__right {
  display: flex;
  align-items: center;
  min-width: 0;
}
.site-header__left { flex-wrap: wrap; gap: var(--s-4) var(--s-12); }
.site-header__right { gap: var(--s-32); margin-left: auto; }
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                                          /* tikdoel in px: bij een grotere tekst groeit de header niet mee met de doelgrootte */
  color: inherit;
  font-family: var(--f-display);
  font-size: clamp(1rem, 0.6rem + 1.7vw, 1.375rem);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1;
  text-decoration: none;
  overflow-wrap: anywhere;                                   /* laatste redmiddel op een heel smal scherm met een grote tekst */
}
.demo-label {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.55rem 0.25rem;
  background-color: var(--bg);                               /* effen: de punten van de heroshader liepen anders door het label heen (zag er op 1366 en 1536 breed uit als "DEMO·", D35) */
  border: 1px solid var(--fg-dim);
  border-radius: var(--r-bediening);
  color: var(--fg-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-nav { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-32);
}
.site-nav .link {
  font-size: 0.9375rem;
  font-weight: 500;
}
@media (min-width: 900px) {
  .site-nav { display: block; }
}
/* Zonder JS of na een fout bestaat het paneel niet: de links staan dan in de balk, ook op mobiel */
.no-js .site-nav,
.motion-failed .site-nav { display: block; }
.no-js .site-header,
.motion-failed .site-header { position: absolute; }

/* Menuknop: pil met een rollend label en een kruis dat uit twee lijnen ontstaat */
.menu-toggle {
  white-space: nowrap;                                       /* het rollende label (Menu en Sluiten) heeft precies een regel */
  min-height: 44px;
  padding: 0 1.125rem 0 1.375rem;
  gap: 0.75rem;
  font-size: 0.9375rem;
}
@media (max-width: 480px) {
  .site-header__inner { gap: var(--s-8); }
  .site-header__left { gap: var(--s-8); }
  .demo-label { padding: 0.25rem 0.4rem 0.2rem; letter-spacing: 0.04em; }   /* het label is op een telefoon 12 px (D36): zo past de rij zonder JS nog op 375 px */
  .menu-toggle { padding: 0 0.95rem 0 1.1rem; gap: 0.5rem; font-size: 0.875rem; }
}
@media (max-width: 359px) {
  .menu-toggle__icon { display: none; }
  .menu-toggle { padding: 0 1rem; }
  .demo-label { padding: 0.25rem 0.4rem 0.2rem; letter-spacing: 0.04em; }
}
html.menu-open .menu-toggle {
  background: var(--papier);
  color: var(--inkt);
  border-color: var(--papier);
}
.menu-toggle__roll {
  display: block;
  height: 1.5em;                                             /* 1,5: ook met de tekstafstand van de gebruiker (regelhoogte 1,5, WCAG 1.4.12) knipt het label niet af */
  overflow: clip;
  line-height: 1.5;
}
.menu-toggle__roll > span {
  display: block;
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-drawer);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__roll > span { transform: translateY(-100%); }
.menu-toggle__icon .l1,
.menu-toggle__icon .l2 {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform calc(var(--t-middel) * var(--m)) var(--ease-drawer);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon .l1 { transform: translateY(2.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon .l2 { transform: translateY(-2.5px) rotate(-45deg); }

/* ---------- Menupaneel (schermvullend, opent als een cirkel uit de knop) ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--fg);
  visibility: hidden;
  clip-path: circle(calc(var(--p, 0) * var(--R, 150vmax)) at var(--cx, calc(100% - 4rem)) var(--cy, 2.25rem));
}
.menu.is-open { visibility: visible; }
html.motion-off .menu {
  clip-path: none;
  opacity: 0;
  transition: opacity var(--t-snel) ease, visibility 0s linear var(--t-snel);
}
html.motion-off .menu.is-open {
  opacity: 1;
  transition-delay: 0s;
}
.menu__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s-48);
  min-height: 100%;
  padding-top: calc(var(--header-h) + var(--s-32));
  padding-bottom: var(--s-32);
}
.menu__list { border-bottom: 1px solid var(--lijn-fg); }
.menu__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-24);
  padding-block: var(--s-8);
  border-top: 1px solid var(--lijn-fg);
  color: var(--fg);
  text-decoration: none;
}
.menu__mask {
  display: block;
  min-width: 0;
  overflow: clip;
  overflow-clip-margin: var(--masker-marge);
  transition:
    transform calc(var(--t-middel) * var(--m)) var(--ease-out),
    color var(--t-snel) ease;
}
.menu__text {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-menu);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1;
  overflow-wrap: break-word;
}
.menu__hint {
  flex-shrink: 0;
  padding-inline-end: var(--s-12);                           /* de focusring (binnen de rij) knipt de laatste letter niet af */
  color: var(--fg-dim);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover .menu__mask {
    color: var(--accent);
    transform: translateX(calc(var(--s-16) * var(--m)));
  }
}
.menu__link:focus-visible .menu__mask {
  color: var(--accent);
  transform: translateX(calc(var(--s-16) * var(--m)));
}
.menu__link[aria-current="page"] .menu__mask { color: var(--accent); }
.menu__link[aria-current="page"] .menu__text::after {       /* de huidige pagina krijgt een punt: accent alleen is ook de kleur van hover en focus */
  content: "";
  display: inline-block;
  width: 0.14em;
  height: 0.14em;
  margin-left: 0.1em;
  border-radius: 50%;
  background: currentColor;
}
.menu__link:focus-visible { outline-offset: -3px; }
@media (max-width: 599px) {
  .menu__hint { display: none; }
}
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16) var(--s-32);
  margin-top: auto;
}
.menu__foot .label { color: var(--fg-dim); max-width: 36ch; }
/* Liggende telefoon (812 bij 375): de menutekst op 16vw was 130 px hoog en alleen "Home" en een stuk van "Effecten" stonden in beeld; "Techniek" en de
   schakelaar lagen onder de vouw (D18). Hier telt de hoogte: de maat volgt svh en de voet staat naast de links in plaats van eronder. */
@media (max-height: 32rem) and (min-width: 36rem) and (orientation: landscape) {   /* niet bij 400 procent zoom (320 bij 256): daar is twee kolommen te smal */
  .menu { --fs-menu: min(clamp(2.25rem, 16vw, 10rem), 17svh); }
  .menu__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-content: start;
    column-gap: var(--s-48);
    padding-top: calc(var(--header-h) + var(--s-16));
    padding-bottom: var(--s-16);
  }
  .menu__foot { flex-direction: column; align-items: flex-start; justify-content: flex-end; align-self: end; margin-top: 0; }
  .menu__hint { display: none; }                              /* geen ruimte naast de grote tekst: anders breekt "Effecten" op een smalle liggende telefoon in twee regels */
}

/* ---------- Scrollvoortgang (CSS scroll-timeline waar mogelijk, anders vult chrome.js het in) ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-voortgang);
  height: 3px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@supports (animation-timeline: scroll()) {
  .progress__bar {
    animation: voortgang linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes voortgang { to { transform: scaleX(1); } }
}

/* Bij reduce en "Beweging uit" verdwijnt de balk: scrollgekoppelde schaal is beweging (CLAUDE.md: reduced motion altijd respecteren) */
html.motion-off .progress { display: none; }
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
}

/* Sentinel voor de scrollstand van de header als beweging uit staat (chrome.js zet hem alleen dan neer) */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

/* ---------- Cursor (alleen fijne aanwijzer en beweging aan; het element bestaat anders niet) ---------- */
.cursor {
  position: fixed;
  inset: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-snel) ease;
}
.cursor.is-on { opacity: 1; }
.cursor.is-out { opacity: 0; }
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.cursor__dot {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  transition: opacity var(--t-snel) ease;
}
.cursor__ring {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
}
.cursor__shape {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transition:
    transform var(--t-middel) var(--ease-out),
    background-color var(--t-snel) ease;
}
.cursor__label {
  position: relative;
  color: var(--papier);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-s);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-snel) ease;
}
.cursor.is-link .cursor__shape { transform: scale(1.5); background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.cursor.has-label .cursor__shape { transform: scale(2.4); background-color: var(--inkt); }   /* inkt met accentrand: zichtbaar op papier, op accent en op inkt */
.cursor.has-label .cursor__label { opacity: 1; }
.cursor.has-label .cursor__dot { opacity: 0; }
.cursor.is-down .cursor__shape { transform: scale(0.85); }
.cursor.is-link.is-down .cursor__shape { transform: scale(1.3); }
.cursor.has-label.is-down .cursor__shape { transform: scale(2.1); }

/* ---------- Gordijn (5 kolommen) ---------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-gordijn);
  visibility: hidden;
  pointer-events: none;
}
.curtain__col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * 20%);
  width: calc(20% + 1px);
  background: var(--inkt);
  transform: scaleY(0);
  transform-origin: 50% 0;
}
.curtain__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--rand);
  color: var(--papier);
  text-align: center;
}
.curtain__label-mask {
  display: block;
  max-width: 100%;
  overflow: clip;
  overflow-clip-margin: var(--masker-marge);
}
.curtain__label-text {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-gordijn);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1;
  overflow-wrap: break-word;
}

/* ---------- Preloader (alleen bij JS, eerste bezoek en beweging aan; html.preloading komt uit de head) ---------- */
.preloader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-gordijn);
  color: var(--papier);
  pointer-events: none;
}
.preloader__inner {
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: 100%;
  height: 100%;
  padding: var(--rand);
}
.preloader__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-16);
  color: var(--gedempt-inkt);
}
.preloader__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-16) var(--goot);
  grid-row: 3;
}
.preloader__word {
  font-family: var(--f-display);
  font-size: var(--fs-preloader);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: var(--lh-display);
  font-variant-ligatures: none;
  opacity: 0;
}
.preloader__count {
  display: flex;
  align-items: baseline;
  gap: 0.25em;
  padding-bottom: 0.4rem;
  font-family: var(--f-mono);
  font-size: var(--fs-teller);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.preloader__pct {
  color: var(--gedempt-inkt);
  font-size: 0.4em;
}
.preloader__line {
  position: relative;
  grid-row: 2;
  align-self: end;
  height: 1px;
  margin-bottom: var(--s-24);
  background: var(--lijn-inkt);
}
.preloader__line-fill {
  position: absolute;
  inset: -1px 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .js.preloading:not(.motion-failed):not(.motion-off) .curtain {
    visibility: visible;
    pointer-events: auto;
  }
  .js.preloading:not(.motion-failed):not(.motion-off) .curtain__col { transform: scaleY(1); }
  .js.preloading:not(.motion-failed):not(.motion-off) .preloader { display: block; }
}

/* ---------- HUD (vast, decoratief, aria-hidden; sectiebouwers zetten er tekst in via Motion.hud) ---------- */
.hud {
  position: fixed;
  left: var(--rand);
  bottom: var(--s-16);
  z-index: var(--z-hud);
  display: none;
  align-items: center;
  gap: var(--s-8);
  padding: 0.45rem 0.9rem 0.4rem;
  border-radius: var(--r-bediening);
  background: var(--inkt);
  color: var(--papier);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.04em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-snel) ease;
}
.hud.is-on { opacity: 1; }
@media (min-width: 900px) {
  .hud { display: inline-flex; }
}

/* ---------- Muisnoot: cursor en hover bestaan niet op aanraking; de kaart of rij van zo'n effect zegt dat daar in een regel (D20) ---------- */
/* Met een muis is de regel .sr-only (visueel verborgen, wel in de boom); op aanraking staat hij gewoon in beeld. */
@media (hover: none), (pointer: coarse) {
  .muisnoot.sr-only {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: var(--s-8) 0 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    color: var(--fg-dim);
    font-family: var(--f-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.04em;
    line-height: 1.4;
  }
  .muisnoot--regel.sr-only { display: inline; margin: 0; font-family: inherit; font-size: inherit; letter-spacing: inherit; line-height: inherit; }
}

/* ---------- Voettekst: staat in css/sections/footer.css (de voettekst staat buiten main en blijft staan) ---------- */