/* vlak.css: Home, sectie "vlak" (effect 08, opengaand vlak).
   Eindstaat eerst: de basis is een volledig vlak (accent, inktkleurige tekst) dat het scherm vult. Zonder JS, bij reduce, bij
   "Beweging uit" en na een fout blijft het zo. Alleen met beweging aan wordt het spoor hoog, de stage sticky en het paneel een klein
   afgerond venster dat via clip-path naar het volle scherm groeit (vlak.js scrubt het). Het startvenster staat hier (--vlak-x en
   --vlak-y), vlak.js leest het uit: een bron. */

.vlak {
  --vlak-x: 35%;            /* startvenster: 30 procent van de breedte, gecentreerd (links en rechts 35 procent weg) */
  --vlak-y: 22%;            /* en 56 procent van de hoogte */
  position: relative;
  background-color: var(--papier);                     /* het venster begint op papier, ook als een sectie erboven de pagina donker liet */
}
@media (max-width: 899px) {
  .vlak {
    --vlak-x: 17%;          /* op een telefoon 66 procent van de breedte: 30 procent is daar te klein voor tekst */
    --vlak-y: 30%;
  }
}

/* Het vlak is een eigen kleurwereld: accent met inkt. Ink op accent haalt 4,52 (AA voor gewone tekst), papier op accent 3,42 (grote tekst).
   De semantische laag wordt hier omgezet zodat de schakelaar en de randen kloppen zonder eigen regels. */
.vlak__paneel {
  --bg: var(--accent);
  --fg: var(--inkt);
  --fg-dim: var(--inkt);
  --lijn-fg: rgb(21 19 15 / 0.35);
  --accent-lees: var(--inkt);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);               /* het spoor mag niet breder worden dan het venster, ook niet bij een groot lettertype */
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-32);
  background-color: var(--bg);
  color: var(--fg);
}

.vlak__inhoud {
  padding-inline: max(var(--rand), 6vw);               /* de inhoud begint 1,12 groot: zo blijft ook de vergrote rechthoek binnen het venster (elke breedte) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--s-16), 3.5svh, var(--s-32));
  text-align: center;                                  /* het startvenster toont het midden van deze compositie: gecentreerd leest het knippen symmetrisch */
}
.vlak__kop {
  max-width: min(12ch, 100%);
  color: var(--fg);
  overflow-wrap: anywhere;                             /* "beweging" op 320 px bij 200 procent tekst: afbreken, nooit buiten het vlak */
  font-size: calc(var(--fs-h1) * 1.2);                 /* een tikje boven de koppenschaal: dit is het hoofdmoment van de sectie */
}
.vlak__nadruk { color: var(--papier); }               /* papier op accent: 3,42, genoeg voor grote tekst */
.vlak__tekst {
  max-width: min(32ch, 100%);
  color: var(--fg);
  font-weight: 500;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Schakelaar en statusregel: alleen met JS (de schakelaar zelf is data-js-only). */
.vlak__bediening {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-8) var(--s-24);
}
.js:not(.motion-failed) .vlak__bediening { display: flex; }
.vlak__status {
  min-width: 14ch;                                    /* "Beweging: aan" en "Beweging: uit" wisselen zonder verspringing */
  color: var(--fg);
  font-size: var(--fs-klein);
  font-weight: 500;
  text-align: left;
}
.vlak__paneel .switch { font-size: 1.125rem; }
/* Twee zinnen horen bij de stand: met scripts gaat het over de schakelaar, zonder scripts (of na een fout) is de beweging al uit. */
.vlak__js { display: none; }
.vlak__nojs { display: inline; }
.js:not(.motion-failed) .vlak__js { display: inline; }
.js:not(.motion-failed) .vlak__nojs { display: none; }

/* De schakelaar op accent: de standaardstand (accent in de baan) valt weg tegen de achtergrond, dus de aan-stand is hier inkt met een
   accentknop; de focusring is inkt (accent op accent is onzichtbaar) en de selectie is omgedraaid. */
.vlak__paneel .switch[aria-pressed="true"] .switch__track { background: var(--inkt); }
.vlak__paneel .switch[aria-pressed="true"] .switch__knob { background: var(--accent); }
.vlak__paneel :focus-visible { outline-color: var(--inkt); }
.vlak__paneel ::selection { background: var(--inkt); color: var(--accent); }
@media (forced-colors: active) {
  .vlak__paneel .switch[aria-pressed="true"] .switch__track { background: Highlight; }
  .vlak__paneel .switch[aria-pressed="true"] .switch__knob { background: HighlightText; }
}

/* De cursor-ring is accent en zou op dit vlak verdwijnen: boven het vlak is hij inkt (het verwijst alleen naar de variabele op .cursor). */
html:has(.vlak__paneel:hover) .cursor { --accent: var(--inkt); }

/* Met beweging aan: hoog spoor, sticky stage, paneel als klein venster. De beginstaat staat ook hier, zodat de eerste paint al klopt;
   vlak.js neemt de clip-path over. Onder 40rem hoogte (lage telefoon in landschap, groot lettertype of veel zoom) past een gepinde
   fase niet: dan blijft het volle vlak staan, ook als vlak.js al iets inline zette (!important wint van inline). */
@media (prefers-reduced-motion: no-preference) and (min-height: 40rem) {
  /* stage (100svh) plus 100svh scroll: samen 200 procent. Een blok in de inhoud van het spoor (geen padding: sticky blijft binnen de inhoud) */
  .js:not(.motion-failed):not(.motion-off) .vlak__spoor::after { content: ""; display: block; height: 100svh; }
  .js:not(.motion-failed):not(.motion-off) .vlak__stage { position: sticky; top: 0; }
  .js:not(.motion-failed):not(.motion-off) .vlak__paneel {
    clip-path: inset(var(--vlak-y) var(--vlak-x) var(--vlak-y) var(--vlak-x) round var(--r-open));
  }
  .js:not(.motion-failed):not(.motion-off) .vlak__inhoud { will-change: transform; }
  /* Het zichtbare gebied is op een telefoon lvh zodra de adresbalk wegklapt: het paneel (en dus de stage) loopt door tot 100lvh, anders scheen er onder het
     volledig geopende vlak een band papier door (D08). De scrollafstand (spoor min stage = 100svh) blijft gelijk. */
  @supports (height: 100lvh) {
    .js:not(.motion-failed):not(.motion-off) .vlak__paneel { min-height: 100lvh; }
  }
}
@media (max-height: 39.99rem) {
  .vlak__paneel { clip-path: none !important; }
  .vlak__inhoud { transform: none !important; scale: none !important; }
}