/* Beweging (BRIEF §7, kwaliteitsherstel 2026-09-29): de scroll-craft-engine en de onthullingen. Alleen op pagina's
   met beweging (base.njk). De engine-CSS staat in een eigen cascadelaag: gelaagde regels verliezen altijd van
   ongelaagde, dus elke regel uit tokens.css, site.css en calculator.css wint, ongeacht specificiteit. De engine
   zelf (/assets/scrollcraft/) wordt nooit aangepast; wat de reset anders zou veranderen, staat hieronder terug.
   Zonder JS, vóór de mount of bij reduced motion is alles zichtbaar. */
@import url("/assets/scrollcraft/scrollcraft.css") layer(scrollcraft);

/* Terugzetten wat de engine-reset anders verandert (de site rekent op de standaardwaarden). */
img, svg, video, canvas { display: revert; }
body { letter-spacing: normal; font-synthesis-weight: auto; }
html { scroll-behavior: auto; scrollbar-color: auto; scrollbar-width: auto; }

/* Engine-tokens op de sitekleuren (tokens.css). */
:root {
  --sc-canvas: var(--zwart);
  --sc-surface: var(--vlak);
  --sc-ink: var(--tekst);
  --sc-ink-soft: var(--tekst-zacht);
  --sc-accent: var(--goud);
  --sc-accent-ink: var(--zwart);
  --sc-font-display: var(--font-kop);
  --sc-font-text: var(--font-tekst);
}

/* Zonder JS, of vóór de engine gemount is (html.sc-ready), blijft niets onzichtbaar. */
html:not(.sc-ready) :is([data-sc-cue], [data-sc-in], [data-sc-stagger] > *, [data-sc-reveal]) {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}

/* Onthullingen ([data-onthul], beweging.js): opacity en 16 px omhoog, gespreid binnen een sectie. De verborgen
   beginstand geldt uitsluitend onder .js-beweging. Hover-overgangen van kaarten blijven in de lijst staan. */
.js-beweging [data-onthul] { opacity: 0; transform: translateY(16px); }
[data-onthul] {
  transition: opacity var(--duur-onthul) var(--curve-onthul), transform var(--duur-onthul) var(--curve-onthul),
    background-color 0.2s, border-color 0.2s;
}
.js-beweging [data-onthul].is-onthuld { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js-beweging [data-onthul] { opacity: 1; transform: none; } }

/* Piek: de nachtrit naar de vertrekhal (partials/stilte-piek.njk). De engine pint .sc-stage (sticky, 100svh) over
   3,2 schermhoogtes en scrubt de clip; de poster houdt het beeld tot er een echt frame staat. Tekst links onder,
   scrim alleen onder de tekst. De kolomrand volgt de inhoudskolom van de site (--centreer). */
.piek { --sc-gutter: var(--centreer); position: relative; background: var(--zwart); }
.piek .sc-stage { background: var(--zwart); }
.piek__scrim {
  background: linear-gradient(to top right,
    rgb(11 13 16 / 0.94) 0%, rgb(11 13 16 / 0.8) 30%, rgb(11 13 16 / 0.42) 55%, rgb(11 13 16 / 0) 75%);
}
.piek__tekst { max-width: min(30rem, 44vw); bottom: clamp(2.5rem, 9vh, 6rem); }
.piek__tekst h2 { margin: 0 0 var(--ruimte-6); max-width: 16ch; }
.piek__stappen { display: grid; gap: var(--ruimte-4); margin: 0; padding: 0; list-style: none; }
.piek__stap { position: relative; margin: 0; padding-left: var(--ruimte-6); max-width: none; }
.piek__stap::before { content: ""; position: absolute; left: 0; top: 0.35em; bottom: 0.35em; width: 2px; background: var(--goud); }
.piek__stap h3 { margin: 0 0 var(--ruimte-1); font-size: 1.125rem; color: var(--tekst); }
.piek__stap p { margin: 0; color: var(--tekst); }
.piek__garantie { margin: var(--ruimte-6) 0 0; font-family: var(--font-kop); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.25; color: var(--goud); }
@media (max-width: 860px) {
  /* Telefoon: tekst onderin over de volle breedte, op een band-scrim; compacter zodat hij altijd in beeld past. */
  .piek__scrim {
    background: linear-gradient(to top,
      rgb(11 13 16 / 0.95) 0%, rgb(11 13 16 / 0.88) 45%, rgb(11 13 16 / 0.55) 68%, rgb(11 13 16 / 0) 88%);
  }
  .piek__tekst { max-width: none; bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); }
  .piek__tekst h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.875rem); margin-bottom: var(--ruimte-4); }
  .piek__stappen { gap: var(--ruimte-3); }
  .piek__stap { padding-left: var(--ruimte-4); }
  .piek__stap h3 { font-size: 1rem; }
  .piek__stap p { font-size: 0.9375rem; line-height: 1.45; }
  .piek__garantie { margin-top: var(--ruimte-4); }
}