/* Proef exploded view. Kleuren en letters komen uit de intake (intake/index.html, :root). */

@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700.woff2) format('woff2'); }

:root {
  --asn-blauw:        #254287;
  --asn-blauw-donker: #182D5F;
  --geel:             #FFC20E;
  --knop-tekst:       #182D5F;
  --asn-rood:         #CD212A;
  --inkt:             #1C2733;
  --staal:            #5A6B7D;
  --lijn:             #DCE3EB;
  --papier:           #FFFFFF;
  --grond:            #F2F5F9;
  --kaart:            rgba(255,255,255,.96);
  --schaduw:          0 1px 2px rgba(7,31,63,.06), 0 8px 24px rgba(7,31,63,.10);
  --radius:           6px;
  --kop:   'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --tekst: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kophoogte: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --asn-blauw: #9DBBF5;
    --inkt:      #EEF2F8;
    --staal:     #A9B6C9;
    --lijn:      #2A3A5E;
    --papier:    #152139;
    --grond:     #0D1629;
    --kaart:     rgba(21,33,57,.96);
    --schaduw:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --asn-rood:  #FF8A8A;
  }
}
:root[data-theme="dark"] {
  --asn-blauw: #9DBBF5;
  --inkt:      #EEF2F8;
  --staal:     #A9B6C9;
  --lijn:      #2A3A5E;
  --papier:    #152139;
  --grond:     #0D1629;
  --kaart:     rgba(21,33,57,.96);
  --schaduw:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --asn-rood:  #FF8A8A;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font: 400 17px/1.5 var(--tekst);
  overflow-x: clip;
}
h1, h2 { font-family: var(--kop); font-weight: 700; line-height: 1.05; margin: 0 0 .4em; }
h1 { font-size: clamp(38px, 9vw, 64px); }
h2 { font-size: clamp(30px, 6vw, 44px); }
p  { margin: 0 0 1em; }

.knop {
  display: inline-block;
  background: var(--geel);
  color: var(--knop-tekst);
  font: 700 18px/1 var(--kop);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 18px;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.knop:hover { filter: brightness(1.05); }
.knop:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
.kop .knop:focus-visible, .slot .knop:focus-visible { outline-color: #fff; }
.knop-groot { font-size: 22px; padding: 16px 26px; }
/* Tweede knop naast de gele: alleen een rand, zodat "Schade melden" voorop blijft. */
.knop-rand {
  background: transparent;
  color: var(--asn-blauw);
  box-shadow: inset 0 0 0 2px currentColor;
}
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.kaart .knoppen .knop { margin-bottom: 0; }
/* Korte keurmerkregel onder de knoppen in het eerste tekstvak. */
.vertrouwen {
  list-style: none; margin: 14px 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font: 600 14px/1.35 var(--tekst); color: var(--staal);
}
.vertrouwen li::before { content: '✓'; color: var(--asn-blauw); font-weight: 700; margin-right: 6px; }
/* Op een telefoon iets compacter, zodat de twee knoppen naast elkaar passen. */
@media (max-width: 420px) {
  .knoppen { gap: 8px; }
  .knoppen .knop { padding: 13px 12px; font-size: 17px; }
}

/* Kopbalk: blauw over de volle breedte, net als de intake. */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: var(--kophoogte);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: #254287;
  color: #fff;
}
.kop-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.kop-logo img { display: block; height: 30px; width: auto; }
.kop-logo span { font: 600 20px/1 var(--kop); letter-spacing: .02em; }
.kop .knop { padding: 11px 14px; font-size: 16px; }

.proefband {
  position: fixed; z-index: 9; top: var(--kophoogte); left: 0; right: 0;
  margin: 0; padding: 4px 16px;
  background: var(--geel); color: #182D5F;
  font: 600 13px/1.3 var(--tekst); text-align: center;
}
.proefband a { color: inherit; font-weight: 700; }

/* Het verhaal: de 3D-scène blijft staan, de stappen scrollen eroverheen. */
.verhaal { position: relative; }
.podium {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
#scene { position: relative; display: block; width: 100%; height: 100%; }
/* Stilstaand beeld van het eerste scherm (gemaakt met ?s=0&poster=1): staat er meteen,
   ook zonder JavaScript of 3D. De 3D vloeit erover zodra hij klaar is. */
.poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
}
@media (min-width: 768px) and (min-aspect-ratio: 1/1) { .poster img { object-position: center; } }
.podium.poster-weg .poster { display: none; }   /* auto.js, na het infaden van de 3D */
/* Het beeld is gemaakt in de lichte weergave; in de donkere weergave zou het fel afsteken. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .poster { display: none; } }
:root[data-theme="dark"] .poster { display: none; }
.laden {
  position: absolute; left: 50%; top: calc(var(--kophoogte) + 64px);
  transform: translateX(-50%);
  display: none; margin: 0; padding: 6px 14px;
  background: var(--kaart); border-radius: 99px; box-shadow: var(--schaduw);
  color: var(--staal); font-size: 14px; white-space: nowrap;
  transition: opacity .4s;
}
.js .laden { display: block; }
.podium.klaar .laden, .zonder-3d .laden, .wacht-3d .laden { opacity: 0; visibility: hidden; }
/* Bij databesparing of een trage verbinding: de 3D pas laden na een klik (start-3d.js). */
.start-3d {
  display: none;
  position: absolute; left: 50%; top: calc(var(--kophoogte) + 64px);
  transform: translateX(-50%);
  white-space: nowrap;
}
.wacht-3d .start-3d { display: inline-block; }
#scene { opacity: 0; transition: opacity .6s; }
.podium.klaar #scene { opacity: 1; }
.zonder-3d #scene { display: none; }

.voortgang {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  font: 600 13px/1 var(--kop); letter-spacing: .04em; text-transform: uppercase;
  color: var(--staal);
}
.voortgang li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; transition: color .3s; }
.voortgang li::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; transition: transform .3s;
}
.voortgang li.nu { opacity: 1; color: var(--asn-blauw); }
.voortgang li.nu::after { transform: scale(1.6); background: var(--geel); box-shadow: 0 0 0 2px var(--asn-blauw); }

/* Klikken gaan door naar het podium (knop "Animatie laden"); alleen de kaarten vangen ze. */
.stappen { position: relative; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.stap {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 16px 24px;
  pointer-events: none;
}
/* De laatste stap is twee schermen hoog. In het eerste scherm komt de kaart binnen
   zoals bij de andere stappen. In het tweede rijdt de auto weg en schuift de kaart
   gewoon mee omhoog, zodat duidelijk is dat er nog meer komt (Ben, 5 okt). */
.stap.laatste { display: block; min-height: 200vh; min-height: 200svh; padding: 0; }
.kaartvak {
  height: 100vh; height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 16px 24px;
}
/* De eerste kaart nooit onder de kopbalk en de proefband. */
.stap:first-child { padding-top: calc(var(--kophoogte) + 48px); }
html { scroll-padding-top: calc(var(--kophoogte) + 48px); }
.kaart {
  pointer-events: auto;
  width: 100%; max-width: 440px;
  background: var(--kaart);
  border-radius: 10px;
  box-shadow: var(--schaduw);
  padding: 18px 20px 6px;
}
.kaart .knop { margin-bottom: 1em; }
.stapnr {
  font: 600 14px/1 var(--kop); letter-spacing: .08em; text-transform: uppercase;
  color: var(--asn-rood); margin-bottom: .6em;
}
.label-nodig {
  display: inline-block;
  margin: -.2em 0 .8em;
  padding: 3px 9px;
  border: 1px solid var(--lijn);
  border-radius: 99px;
  font: 600 13px/1.3 var(--tekst);
  color: var(--staal);
}

/* Telefoon en staand scherm (tablet, smal venster): de kaart onderin, de
   voortgang klein bovenin. Alleen op een breed, liggend scherm staat de kaart
   links naast de auto. auto.js gebruikt dezelfde voorwaarde (ZIJKAART). */
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .voortgang { top: calc(var(--kophoogte) + 34px); right: 16px; transform: none; flex-direction: row; gap: 6px; }
  .voortgang li { font-size: 0; gap: 0; }
  .kaart p { font-size: 16px; }
  .kaart h1 { font-size: 36px; }
}
@media (min-width: 768px) and (min-aspect-ratio: 1/1) {
  .stap { align-items: center; padding: 0 48px; }
  .kaartvak { align-items: center; padding: 0 48px; }
  .voortgang { right: 32px; background: var(--kaart); padding: 10px 12px; border-radius: var(--radius); }
}
@media (forced-colors: active) {
  .voortgang li::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .voortgang li.nu::after { background: Highlight; box-shadow: 0 0 0 2px CanvasText; }
  .knop { border: 2px solid; }
}
@media (min-width: 1280px) and (min-aspect-ratio: 1/1) {
  .stap, .kaartvak { padding-left: max(64px, calc((100vw - 1280px) / 2 + 64px)); }
}

.slot {
  position: relative; z-index: 1;
  background: var(--asn-blauw-donker); color: #fff;
  text-align: center;
  padding: 72px 16px 80px;
}
.slot p { color: #DCE3EB; }
.voet { padding: 24px 16px; text-align: center; font-size: 14px; color: var(--staal); }
.voet p { margin: 0 0 .5em; }
.voet .bron { font-size: 12px; }
.voet a { color: inherit; }

/* Opname van de stilstaande beelden (?poster=1, zie auto.js): alles behalve de 3D
   onzichtbaar, maar op zijn plek, zodat de camera hetzelfde kader kiest. */
.poster-opname .kop, .poster-opname .proefband, .poster-opname .kaart,
.poster-opname .voortgang, .poster-opname .laden { visibility: hidden; }