/* donker.css: Home, sectie "Waarom beweging?" (effect 07, licht naar donker).

   Eindstaat eerst: de CSS-basis is een donker blok (klasse .is-inkt op .donker__donker) met de titel en vier stappen onder
   elkaar. Dat is ook wat je ziet zonder JavaScript, na een fout, bij prefers-reduced-motion en bij "Beweging uit".
   De vastzittende stage komt er pas bij als js/sections/donker.js de klasse .is-gepind op de sectie zet (alleen met beweging aan en
   als alles in het scherm past). Alle regels voor die staat staan onder .js:not(.motion-failed):not(.motion-off) en binnen
   @media (prefers-reduced-motion: no-preference).

   Lagen in de gepinde stage (DOM-volgorde = stapelvolgorde, geen z-index):
     .donker__licht   decoratieve kopie van de titel in inkt op papier (aria-hidden)
     .donker__donker  de echte inhoud op inkt; schuift van onder naar boven over het papier (laag binnenin schuift tegengesteld mee)
     .donker__af      papieren vlak dat in de laatste stap alles dichtzet, zodat de volgende (lichte) sectie naadloos overneemt */

.donker {
  --donker-kop: var(--fs-h1);
  --donker-stapkop: clamp(2.25rem, 0.75rem + 5.4vw, 5.5rem);
  --donker-tekst: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem);
  --donker-lengte: 280svh;              /* scrolllengte van de gepinde fase (wrapper = stage + dit) */
  --donker-onder: min(34svh, 18vw);     /* hoogte van de onderrand met het rollende cijfer en de voortgang */
  --donker-rol: var(--donker-onder);    /* hoogte van het rollende cijfer (op mobiel staat de voortgang eronder) */
  position: relative;
}
@media (max-width: 22.5rem) {
  .donker { --donker-stapkop: 1.875rem; }   /* statische stappen op 320 px: naast de cijferkolom blijft 220 px over, "Samenhang" breekt anders midden in het woord (gezien op 320x568) */
}

/* ---------- Eindstaat (basis) ---------- */
.donker__licht,
.donker__af,
.donker__onder { display: none; }

.donker__donker { padding-block: var(--sectie); }
.donker__inner { row-gap: var(--s-48); }

.donker__kop {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--donker-kop);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}

.donker__stappen { margin: 0; padding: 0; }
.donker__stap {
  display: grid;
  grid-template-columns: minmax(3.5rem, 6.5rem) minmax(0, 1fr);
  column-gap: var(--goot);
  align-items: start;
  padding-block: var(--s-32);
  border-top: 1px solid var(--lijn-fg);
}
.donker__nr {
  grid-row: 1 / span 2;
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.03em;
  color: var(--bg);                       /* omlijnd: vulling in de kleur van de achtergrond, streek eronder (paint-order), dan blijven overlappende contouren van het variabele lettertype onzichtbaar */
  -webkit-text-stroke: 3px var(--fg);
  paint-order: stroke fill;
}
.donker__stap-kop {
  grid-column: 2;
  width: fit-content;
  max-width: 100%;
  font-size: var(--donker-stapkop);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
}
.donker__stap-tekst {
  grid-column: 2;
  max-width: 34ch;
  margin-top: var(--s-16);
  font-size: var(--donker-tekst);
  line-height: 1.5;
}

/* Eindstaat: de stapkop volgt de ruimte naast de cijferkolom. Het langste woord ("Samenhang") is hooguit circa 5,7 em breed; zonder deze rem
   brak het bij 900 tot 1100 px (de stappen krijgen daar zes van twaalf kolommen) en op 320 px met een scrollbalk van 15 px midden in het woord (D04).
   Alleen in de eindstaat: de gepinde stage (.is-gepind) heeft eigen maten en geen containment op de stap. */
.donker:not(.is-gepind) .donker__stap { container-type: inline-size; }
.donker:not(.is-gepind) .donker__stap-kop { font-size: min(var(--donker-stapkop), calc((100cqw - 6.5rem - var(--goot)) / 5.8)); }

@media (min-width: 900px) {
  .donker__stappen { grid-column: 7 / span 6; }      /* eindstaat: zes kolommen, de woorden en het cijfer passen naast elkaar */
  .donker__kop-blok {
    position: sticky;                   /* de titel blijft staan terwijl de stappen langskomen; gewone sticky, geen beweging */
    top: calc(var(--header-h) + var(--s-32));
    align-self: start;
  }
  .donker__inner { row-gap: 0; }
}

/* ---------- Gepinde stage (alleen met beweging aan, door js/sections/donker.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind {
    --donker-kop: min(15vw, 13svh);
    --donker-stapkop: clamp(2.75rem, 0.5rem + 8.5vw, 5rem);
    --donker-onder: min(24svh, 42vw);
    --donker-rol: calc(var(--donker-onder) - 3.5rem);
    --donker-lengte: 230svh;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__wrap { height: calc(100svh + var(--donker-lengte)); }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stage {
    position: sticky;                   /* sticky in plaats van een pin: geen voorouder met overflow hidden of transform */
    top: 0;
    height: 100svh;
    overflow: clip;                     /* alleen clip: dit is de sticky stage zelf, geen voorouder ervan */
    isolation: isolate;
    background-color: var(--papier);    /* de lichte begintoestand is papier, wat er ook achter de pagina ligt */
  }
  /* Op een telefoon is het zichtbare gebied zodra de adresbalk wegklapt groter dan svh (lvh): onder een stage van 100svh scheen het papier door als een
     lichte band van circa 56 px (Chrome Android) tot 110 px (iOS). De stage en zijn kleurlagen lopen daarom door tot 100lvh; de wrapper houdt zijn
     hoogte (negatieve marge) en de inhoud (titel, cijfer, voortgangsregel) blijft op svh verankerd, zodat niets meeveert met de adresbalk (K31, D08). */
  @supports (height: 100lvh) {
    .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stage { height: 100lvh; margin-bottom: calc(100svh - 100lvh); }
    .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__inner { min-height: 100svh; }
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__licht {
    display: block;
    position: absolute;
    inset: 0;
    color: var(--inkt);
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind [data-donker-kop] { opacity: 0; }   /* JS zet hem na de regelsplitsing op 1 */
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__donker {
    position: absolute;
    inset: 0;
    padding-block: 0;
    overflow: clip;
    will-change: transform;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__laag {
    position: absolute;
    inset: 0;
    will-change: transform;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__af {
    display: block;
    position: absolute;
    inset: 0;
    background-color: var(--papier);
    opacity: 0;
    pointer-events: none;
  }

  /* Dezelfde raster in beide lagen, met vaste rijhoogtes: de titel in .donker__licht en in .donker__donker ligt exact op elkaar. */
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__inner {
    min-height: 100%;                   /* groeit mee als de inhoud niet past: dan meet donker.js dat en laat hij de stage los */
    padding-top: calc(var(--header-h) + var(--s-24));
    padding-bottom: var(--s-24);
    row-gap: var(--s-16);
    grid-template-rows: auto 1fr var(--donker-onder);
    align-items: center;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__kop-blok {
    position: static;
    grid-row: 1;
    align-self: end;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stappen {
    display: grid;
    grid-row: 2;
    align-self: start;
    padding-top: var(--s-16);
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__onder {
    display: flex;
    flex-direction: column;             /* mobiel: het cijfer boven de voortgangslijn */
    grid-row: 3;
    grid-column: 1 / -1;
    justify-content: flex-end;
    align-items: stretch;
    align-self: stretch;
    gap: var(--s-12);
    min-width: 0;
  }

  /* De vier stappen liggen in één cel op elkaar; de timeline laat ze afwisselen. */
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stap {
    display: block;
    grid-area: 1 / 1;
    padding: 0;
    border: 0;
    opacity: 0;                         /* beginstaat; de timeline zet de eerste stap op 1 */
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stap:first-child { opacity: 1; }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__nr { display: none; }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stap-tekst { max-width: 32ch; }

  /* Onderrand: rollend omlijnd cijfer en de voortgangslijn met de woorden van de stappen */
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__rol {
    flex: none;
    height: var(--donker-rol);
    font-family: var(--f-display);
    font-size: calc(var(--donker-rol) / 0.8);
    font-weight: 800;
    line-height: var(--donker-rol);
    letter-spacing: -0.03em;
    color: var(--bg);
    -webkit-text-stroke: 4px var(--fg);
    paint-order: stroke fill;
    overflow: clip;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__rol-kolom { display: block; }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__rol-kolom > span {
    display: block;
    height: var(--donker-rol);
    min-width: 0.62em;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__voortgang {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--s-4);
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__lijn {
    position: relative;
    height: 1px;
    background-color: var(--lijn-fg);
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__vulling {
    position: absolute;
    inset: -1px 0;
    height: 3px;
    background-color: var(--accent);    /* accent op inkt: 4,52 op 1 (niet-tekst, minstens 3) */
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__labels {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: var(--s-12) 0 0;
    padding: 0;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__labels li {
    min-width: 0;
    padding-left: var(--s-8);
    border-left: 1px solid var(--lijn-fg);
    opacity: 0.55;                      /* papier op inkt met 0,55 dekking: gemeten minstens 5:1 */
    overflow-wrap: anywhere;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__labels li:first-child { opacity: 1; }

  /* Het woord waar de laatste stap in inzoomt */
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stap-kop[data-zoom] { transform-origin: 0 0; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 399px) {
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__labels li {
    padding-left: var(--s-4);
    font-size: var(--fs-mono-s);
    letter-spacing: 0.02em;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind {
    --donker-kop: min(var(--fs-h1), 13svh);
    --donker-stapkop: clamp(2.25rem, 0.75rem + 5.4vw, 5.5rem);
    --donker-onder: min(34svh, 18vw);
    --donker-rol: var(--donker-onder);
    --donker-lengte: 280svh;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__onder {
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--goot);
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__inner { grid-template-rows: 1fr var(--donker-onder); }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__kop-blok {
    grid-row: 1;
    align-self: center;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__stappen {
    grid-column: 8 / span 5;            /* gepind: de stappen staan zonder cijfer, vijf kolommen is genoeg */
    grid-row: 1;
    align-self: center;
    padding-top: 0;
  }
  .js:not(.motion-failed):not(.motion-off) .donker.is-gepind .donker__onder { grid-row: 2; }
}

/* De header kleurt mee zolang de donkere stage eronder zit: js/sections/donker.js roept Motion.headerThema aan (css/components.css, .is-boven-inkt). */