/* ceeme-zij.css — DE EERSTE SCROLL GAAT OPZIJ.
   ================================================================================================
   De inhoud staat in lib/zijband.js, het rekenwerk in ceeme-zij.js. Hier de vorm en het houvast.

   ── Hoe het vastzetten werkt ──────────────────────────────────────────────────────────────────
   De sectie is hoger dan het scherm: één schermhoogte om te tonen, plus de wielafstand die de reis
   kost. Binnenin plakt een laag van precies één schermhoogte aan de bovenkant. Zolang die plakt,
   staat de pagina visueel stil terwijl je scrollpositie gewoon doorloopt — en die doorlopende
   positie wordt door ceeme-zij.js omgezet in een verschuiving naar links.

   Vandaar het gevoel dat Njusja bij Mistral zag: je draait aan je wiel, de pagina zakt niet, de
   inhoud gaat opzij. Zodra de reis af is, laat de plaklaag los en gaat de pagina weer naar beneden.

   De hoogte van de sectie wordt door JavaScript gezet, want ze hangt af van de breedte van het
   scherm. Staat er geen JavaScript, dan blijft de hoogte gewoon 'auto' — zie onderaan.

   ── DE REIS BEGINT BIJ DE BOL EN NIET ERNA ────────────────────────────────────────────────────
   Op 9 augustus omgebouwd. Er stond hier een band die pas begon nadat een hero van 100vh was
   weggescrold; Njusja: "de hero zelf is verdwenen?" Nu zit de bol ín deze sectie, als doek achter
   het spoor, en het woordmerk als eerste halte in het spoor. De sectie staat bovenaan de pagina, de
   plaklaag plakt vanaf scrollpositie nul, en dus gaat de allereerste wielslag opzij.

   Drie lagen in de plaklaag, en de volgorde is de hele truc:

     .zij-doek    de bol. Absoluut, vult de laag, BEWEEGT NIET. Hij dimt terwijl de copy binnenkomt
                  — dat doet ceeme-zij.js met een inline opacity, want dimmen mag nooit in de basis
                  van een stylesheet staan (scripts/test-zonderjs.mjs, en het is de fout die deze
                  site bij klanten meet)
     .zij-spoor   de rij die naar links schuift: onthaal → belofte → 01 → 02 → 03
     .zij-balk    de voortgangsbalk onderaan

   Eén accent: amber #C6892B. */

.cmp-zij { position: relative; background: #17170F; color: #F6F2E9 }

/* Met doek is de achtergrond zwart en niet ink #17170F: de shader rekent naar echt zwart toe, en een
   vlak dat er net naast zit geeft een zichtbare rand rond het canvas op het moment dat het canvas
   nog niet tekent. Dat stond eerder in ceeme-hero.css en is met de bol meeverhuisd. */
.cmp-zij.zij-met-doek { background: #000 }

/* ── Het doek: de bol die blijft staan ────────────────────────────────────────────────────────
   Zonder JavaScript is .zij-plak geen plaklaag maar een gewone rij, en dan valt dit blok terug op
   .cmp-zij als houvast — een zwart vlak achter de kaarten, wat het toch al was. Het canvas is dan
   leeg en dus zwart. Er verdwijnt geen woord: alles wat gelezen moet worden staat in het spoor. */
.zij-doek { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #000 }
.zij-doek .hero-bol { display: block; width: 100%; height: 100%; background: #000 }

.zij-plak { display: flex; align-items: center;
  /* Zonder JavaScript is dit geen plaklaag maar een rij die je opzij schuift. overflow-x:auto is de
     terugval, en het is een goede: op een telefoon is vegen sowieso natuurlijker dan een vastgezette
     reis. ceeme-zij.js zet 'position:sticky' en haalt de overflow weg zodra hij het overneemt. */
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zij-plak::-webkit-scrollbar { display: none }

/* Zodra JavaScript het overneemt. Deze klasse komt van ceeme-zij.js, nooit uit de HTML. */
.cmp-zij.zij-aan-de-slag .zij-plak {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
  scroll-snap-type: none;
}

.zij-spoor { position: relative; z-index: 1; display: flex; align-items: center; gap: 0;
  will-change: transform }

/* ── Het onthaal: de eerste halte, precies één scherm breed ───────────────────────────────────
   Hierin staat wat vroeger óver de hero lag — het woordmerk, de vier vaktermen, de scrollwenk. De
   bol eronder blijft staan; dit schuift weg. Dat verschil is de hele omkering van 9 augustus.

   Eén scherm breed, want bij minder zie je de belofte al aan de rand meekijken vóór je gescrold
   hebt, en dan is de bol niet meer alleen op het scherm — precies de rust die Njusja vroeg toen ze
   zei: "geen copy op de hero!!!! enkel zo'n beeld." */
.zij-onthaal { position: relative; flex: 0 0 auto; width: 100vw; align-self: stretch;
  display: grid; place-items: center; box-sizing: border-box; padding: 40px 24px;
  /* Zonder deze regel is de eerste snap-halte de belofte, en dan schuift de browser de rij bij het
     laden meteen 100vw op: je komt binnen op de tekst en de bol staat al buiten beeld. Precies de
     fout waar Njusja de reis om terugstuurde, maar dan door scroll-snapping veroorzaakt in plaats
     van door de opbouw. Gemeten met scripts/meet-reis.mjs: scrollLeft stond op 1440 bij het laden. */
  scroll-snap-align: center }

/* De plaklaag is één schermhoogte hoog; het spoor hoort die hoogte over te nemen, anders heeft
   `align-self: stretch` niets om zich naar te strekken en zakt de scrollwenk omhoog. */
.cmp-zij.zij-aan-de-slag .zij-spoor { height: 100% }

/* ── DE HERO VULT HET SCHERM, OOK ZONDER DE PLAKLAAG — J181, 31 augustus 2026 ─────────────────
   Njusja: *"de hero op gsm moet trouwens bij bereiken van de pagina het volledige 9/16 gaan
   innemen ook met de 3D motion etc"*.

   Gemeten in de mobiele weergave (375 × 812): de sectie was **375 × 285** — 35% van het scherm.
   De bol zat in een strookje boven de vouw.

   De oorzaak is dat `height: 100dvh` alleen onder `.zij-aan-de-slag` staat, en die klasse komt van
   `ceeme-zij.js` — die zet de plaklaag pas aan wanneer hij de reis overneemt. Gemeten:
   `zij-aan-de-slag` was **false** op de telefoon. Zonder die klasse valt de hoogte terug op de
   inhoud, en dat is de tekst: 285 px.

   De hoogte hoort niet van JavaScript af te hangen. Ze staat nu op de sectie zelf, in de CSS, en
   de plaklaag erft haar.

   ⚠ `svh` en niet `vh`: op een telefoon telt `vh` de adresbalk mee die er bij het laden nog IS,
   dus met `100vh` valt de scrollwenk onder de vouw en zie je hem pas na een veeg. `svh` is de
   KLEINE weergave — het scherm zoals het er bij aankomst uitziet, en dat is precies wat er
   gevraagd is. `dvh` staat erachter als terugval voor browsers die `svh` nog niet kennen; een
   browser die geen van beide kent, houdt `100vh`. */
@media (max-width: 899px) {
  .cmp-zij.zij-met-doek { min-height: 100vh; min-height: 100dvh; min-height: 100svh }
  .cmp-zij.zij-met-doek .zij-plak,
  .cmp-zij.zij-met-doek .zij-spoor,
  .cmp-zij.zij-met-doek .zij-onthaal { min-height: inherit }
}

/* ── De kaarten ───────────────────────────────────────────────────────────────────────────────
   Elke halte is 78vw breed op een telefoon en 46vw op een groot scherm: breed genoeg om alleen te
   staan, smal genoeg dat de volgende al aan de rand meekijkt. Dat laatste is belangrijk — je moet
   zien dat er iets naast staat, anders draai je niet verder. */
.zij-aan, .zij-halte { flex: 0 0 auto; width: 78vw; max-width: 560px; padding: 0 clamp(24px, 5vw, 64px);
  scroll-snap-align: center; box-sizing: content-box }
@media (min-width: 900px) { .zij-aan, .zij-halte { width: 46vw } }

.zij-boven { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 11px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #C6892B; margin: 0 0 14px }

.zij-aan h2 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.03; margin: 0 0 16px }

/* ── De aankondiging die de H1 draagt ─────────────────────────────────────────────────────────
   Op de homepagina staat de kop niet in de hero — daar staat de bol, met het woordmerk en vier
   vaktermen. De H1 is de eerste zin ná de zijwaartse schuif, en dat is precies deze aankondiging.
   Zie de kop van lib/zijband.js.

   ── WAAROM ZE EEN VOLLE SCHERMBREEDTE KRIJGT ──────────────────────────────────────────────────
   Njusja, 9 augustus: "die dan opzij naar de 4 stappen die helemaal niets met H1 te maken hebben."
   Ze stond op 54vw, dus even breed als een halte, in dezelfde rij, en dan is ze kaart 1 van 4 — met
   een onderwerp dat niet bij de drie andere hoort. Dat is te lezen als een fout omdat het er één is.

   Een stelling is geen halte. Ze krijgt daarom een volle schermbreedte en géén nummer, terwijl de
   haltes 46vw zijn en 01·02·03 dragen. Wat je dan afscrolt is: het beeld, de stelling, en dan een
   trein van drie. Dat is af te lezen zonder één woord uitleg — en het is dezelfde redenering als
   waarom het dimmen in het overnamemenu werkt.

   max-width op de INHOUD en niet op de kaart: de kaart moet het scherm vullen om alleen te staan,
   de regels moeten kort blijven om leesbaar te zijn. */
/* De twee knoppen van de originele hero: Gratis scan en Plan een gesprek. Ze horen bij de hero en
   dus bij deze kaart — een hero zonder actie vraagt niets. */
.zij-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0 }
.zij-knoppen .btn { display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap }
.zij-knoppen .btn-amber { background: #6B3FD4; color: #F6F2E9; border-color: #6B3FD4 }
.zij-knoppen .btn-ghost { background: transparent; color: #F6F2E9;
  border-color: rgba(246, 242, 233, .34) }

.zij-belofte { width: 100vw; max-width: none; box-sizing: border-box;
  display: grid; align-content: center; justify-content: start }
.zij-belofte > * { max-width: 680px }
@media (min-width: 900px) {
  .zij-belofte { padding-left: clamp(40px, 8vw, 140px); padding-right: clamp(40px, 8vw, 140px) }
  .zij-belofte > * { max-width: 46vw }
}

.zij-aan h1 { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(34px, 5.6vw, 68px); line-height: 1.0; margin: 0 0 18px; color: #F6F2E9 }

/* Het tweede deel in amber, op een eigen regel. Eén accent, zoals overal — en hier doet het werk:
   "AI geeft geen lijst" is de vaststelling, "AI maakt één keuze" is het punt. */
.zij-aan h1 .ac { display: block; color: #C6892B }

.zij-lead { color: rgba(246, 242, 233, .82); line-height: 1.55; margin: 0 0 20px;
  font-size: clamp(16px, 1.5vw, 19px); max-width: 46ch }

/* De aanhef van de alinea eronder: *Genoemd worden is niet gekozen worden.* Vet en in crème, zodat
   hij als zin overeind blijft zonder een tweede kop te worden. */
.zij-belofte .zij-t b { color: #F6F2E9; font-weight: 700 }

.zij-n { display: block; font-family: "Space Mono", ui-monospace, monospace; font-size: 11px;
  font-weight: 700; letter-spacing: .14em; color: rgba(246, 242, 233, .38); margin: 0 0 10px }

/* Het woord zelf: het grootste op de hele homepagina. Dat is met opzet — genoemd, geciteerd, gekozen
   zijn de drie begrippen waarmee de rest van de site werkt, en dit is de plek waar iemand ze leert.
   Kleine letters, want zo staan ze ook in het rapport en in het dashboard. */
.zij-woord { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(44px, 8vw, 104px); line-height: .92; margin: 0 0 14px; color: #C6892B }

.zij-halte h3 { font-family: "Manrope", system-ui, sans-serif; font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(19px, 2.4vw, 26px); line-height: 1.2; margin: 0 0 10px; color: #F6F2E9 }

.zij-t { color: rgba(246, 242, 233, .66); line-height: 1.65; font-size: 16px; margin: 0; max-width: 42ch }

/* ── De voortgangsbalk ────────────────────────────────────────────────────────────────────────
   Eén hairline onderaan die volloopt terwijl je zijwaarts reist. Zonder die balk weet je niet hoe
   lang het duurt, en dan voelt een vastgezette sectie als een pagina die niet reageert. Dit is het
   goedkoopste antwoord op de enige echte klacht over dit soort effecten. */
.zij-balk { position: absolute; left: clamp(24px, 5vw, 64px); right: clamp(24px, 5vw, 64px);
  bottom: 40px; height: 1px; background: rgba(246, 242, 233, .16); display: none }
.cmp-zij.zij-aan-de-slag .zij-balk { display: block }
.zij-balk i { display: block; height: 100%; background: #C6892B; transform: scaleX(0);
  transform-origin: 0 50%; will-change: transform }

/* ── Wie geen beweging wil ────────────────────────────────────────────────────────────────────
   Geen vastzetten, geen reis. De drie haltes komen dan gewoon onder elkaar te staan, als drie
   blokken met hun woord en hun uitleg. Dat is precies dezelfde inhoud, alleen stil — en dat is de
   toets die telt: als het uitzetten van de animatie iets wegneemt, zat er informatie in de beweging
   en dan deugt de beweging niet. */
@media (prefers-reduced-motion: reduce) {
  .zij-plak, .cmp-zij.zij-aan-de-slag .zij-plak {
    position: static; height: auto; overflow: visible; display: block;
  }
  .zij-spoor { display: block; transform: none !important }
  .zij-aan, .zij-halte { width: auto; max-width: 720px; margin: 0 auto; padding: 40px clamp(24px, 5vw, 64px) }
  .cmp-zij.zij-aan-de-slag .zij-balk { display: none }
}