/* Saint Dutch scroll-engine 2.0 (MOTION), bij sd-scroll.js en sd-motion.js. Alles achter html.sd-js; reduce/print = eindtoestand. */

:root {
  --sds-thread: var(--sd-thread, #cda077);
  --sds-thread-deep: var(--sd-thread-deep, #907053);
  --sds-ink: var(--sd-ink, #0e0d0b);
  --sds-paper: var(--sd-paper, #f5f3f1);
  --sds-muted: var(--sd-muted, #8f8a85);
  --sds-ease: var(--sd-ease, cubic-bezier(0.2, 0.65, 0.2, 1));
  --sds-inout: var(--sd-ease-inout, cubic-bezier(0.5, 0, 0.2, 1));
  --sds-ui: var(--sd-ease-ui, cubic-bezier(0.3, 0, 0.2, 1));
  --sds-stitch: var(--sd-stitch, 6px);
  --sds-stitch-p: calc(var(--sd-stitch, 6px) + var(--sd-stitch-gap, 4px));
  --sds-steek: repeating-linear-gradient(90deg, currentColor 0 var(--sds-stitch), transparent 0 var(--sds-stitch-p));
  --sds-reveal-from: 0.6;
  --sds-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.6l2.3 2.3M5.1 7.1l2.1-2.1M8.3 3.8l2.4-2.4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
}

html.sd-js { scroll-padding-top: var(--sd-header-h, 0px); }

@media (prefers-reduced-motion: no-preference) {
  html.sd-js { scroll-behavior: smooth; }
}

/* onthullingen: de wachtstand */
.sd-js [data-reveal].sd-pre { opacity: var(--sds-reveal-from); }
.sd-js [data-reveal='up'].sd-pre { translate: 0 var(--sd-rise, 12px); }
.sd-js [data-reveal='pull'].sd-pre { opacity: 1; }

/* pull en sheen: op de beeldlijst, <img> als direct kind */
.sd-js :where([data-reveal='pull'], [data-sheen]) { position: relative; overflow: hidden; }

.sd-pull { position: absolute; inset: 0; z-index: 1; background: var(--sd-pull-bg, var(--sd-bg, var(--sds-ink))); transform: translateY(-101%); pointer-events: none; }

.sd-pre > .sd-pull { transform: none; }
.is-near > :is(.sd-pull, img, picture > img), .is-near > .sd-sheen::before { will-change: transform; }
.is-pull > .sd-pull { animation: sds-pull 1000ms var(--sds-ease) var(--sds-delay, 0ms) both; }
.is-pull > :is(img, video), .is-pull > picture > img { animation: sds-tauten 1000ms var(--sds-ease) var(--sds-delay, 0ms) both; }

@keyframes sds-pull { from { transform: none; } to { transform: translateY(-101%); } }
@keyframes sds-tauten { from { scale: 1.05; } to { scale: 1; } }

.sd-sheen { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }

.sd-sheen::before { content: ''; position: absolute; inset: 0 auto 0 -30%; width: 160%; background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 222, 0.16) 50%, transparent 65%); transform: translateX(-60%); opacity: 0; }

.is-sheen > .sd-sheen::before { animation: sds-sheen 1600ms var(--sds-inout) both; }

@keyframes sds-sheen {
  from { transform: translateX(-60%); opacity: 1; }
  to { transform: translateX(60%); opacity: 1; }
}

/* [data-settle]: het heldenbeeld zakt 1,03 -> 1 na html.sd-loaded */
@media (prefers-reduced-motion: no-preference) {
  .sd-js [data-settle] { animation: sds-settle 1800ms var(--sds-ease) both paused; }
  .sd-js.sd-loaded [data-settle] { animation-play-state: running; }
}

@keyframes sds-settle { from { scale: 1.03; } to { scale: 1; } }

/* draad: [data-thread-stitch] staat in rust vol gestikt */
.sd-js .sd-thread[data-thread] { scale: var(--thread-progress, 1) 1; transform-origin: 0 50%; }
.sd-js .sd-thread[data-thread][data-thread-axis='y'], .sd-js .sd-thread--v[data-thread] { scale: 1 var(--thread-progress, 1); transform-origin: 50% 0; }
[data-thread-stitch] { stroke-dasharray: var(--sds-stitch) var(--sd-stitch-gap, 4px); }

/* wachtende steek: zichtbaar als de engine hem overneemt (noodslot 4 s) */
@media (prefers-reduced-motion: no-preference) {
  html.sd-js:not(.sd-ready) [data-thread-wait] { opacity: 0; animation: sds-show 1ms linear 4s forwards; }
}

@keyframes sds-show { to { opacity: 1; } }

/* scene: --step-progress volgt uit --scene-progress */
.sd-scene [data-step] { --step-progress: clamp(0, calc(var(--scene-progress, 0) * var(--scene-steps, 1) - var(--step-i, 0)), 1); }

/* sticky podium alleen met beweging; lengte in vh of svh */
@media (prefers-reduced-motion: no-preference) {
  .sd-js .sd-scene.is-ready { --sds-vh: 1vh; min-height: var(--scene-length, calc((100 + var(--scene-steps, 3) * 65) * var(--sds-vh))); }

  @supports (height: 1svh) {
    .sd-js .sd-scene.is-ready { --sds-vh: 1svh; }
  }

  .sd-js .sd-scene.is-ready .sd-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: var(--stage-place, center); overflow: hidden; }

  .sd-js .sd-scene.is-ready .sd-stage > [data-step] { grid-area: 1 / 1; }

  .sd-js .sd-scene.is-ready [data-step] { opacity: 0; translate: 0 var(--sd-rise, 12px); pointer-events: none; transition: opacity 800ms var(--sds-ease), translate 800ms var(--sds-ease); }

  .sd-js .sd-scene.is-ready [data-step].is-past { translate: 0 calc(-1 * var(--sd-rise, 12px)); }
  .sd-js .sd-scene.is-ready [data-step].is-active { opacity: 1; translate: 0 0; pointer-events: auto; }

  /* inspecteer: de engine vloeit [data-step-media] > img over; de tekst wisselt in 600 ms */
  .sd-js .sd-scene.is-ready[data-scene='inspect'] { min-height: var(--scene-length, calc((100 + (var(--scene-steps, 4) - 1) * 45) * var(--sds-vh))); }
  .sd-js .sd-scene.is-ready[data-scene='inspect'] [data-step] { opacity: 1; translate: none; transition: none; }

  .sd-js .sd-scene.is-ready[data-scene='inspect'] [data-step] > :not([data-step-media]) { opacity: 0; translate: 0 var(--sd-rise, 12px); transition: opacity 600ms var(--sds-ease), translate 600ms var(--sds-ease); }

  .sd-js .sd-scene.is-ready[data-scene='inspect'] [data-step].is-active > :not([data-step-media]) { opacity: 1; translate: 0 0; }
  .sd-js .sd-scene.is-ready[data-scene='inspect'] [data-step-media] { overflow: hidden; }
}

.sd-parallax-frame { position: relative; overflow: hidden; }
.sd-parallax-frame > [data-parallax] { position: absolute; top: -40px; left: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; }

/* koopbalk: alleen zichtbaar/onzichtbaar; noodslot na 6 s */
.sd-js [data-sd-buybar-after] { visibility: hidden; opacity: 0; translate: 0 100%; pointer-events: none; transition: opacity 500ms var(--sds-ease), translate 500ms var(--sds-ease), visibility 0s linear 500ms; }

.sd-js [data-sd-buybar-after].is-visible { visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: 0s; }
.sd-js [data-sd-buybar-after]:not(.sd-bb) { animation: sd-bb-failsafe 1ms linear 6s forwards; }

@keyframes sd-bb-failsafe { to { visibility: visible; opacity: 1; translate: 0 0; pointer-events: auto; } }

/* de rail: gestikte draad, naald 16x6; < 1280 px bovenrand, daarboven links met cijfers; kleur via --_a/--_f/--_m/--_s */
.sd-rail { --_a: var(--sd-accent, var(--sds-thread)); --_f: var(--sd-fg, var(--sds-paper)); --_m: var(--sd-fg-muted, var(--sds-muted)); --_s: var(--sd-fg-soft, #bdb8b2); --_w: var(--sd-rail-w, 2px); position: fixed; top: calc(var(--sd-header-visible, var(--sd-header-h, 3.75rem)) + env(safe-area-inset-top, 0px)); left: 0; right: 0; height: var(--_w); z-index: var(--sd-z-rail, 50); pointer-events: none; opacity: 0; transition: opacity 600ms var(--sds-ease), top 500ms var(--sds-ease); }

.sd-rail.is-on { opacity: 1; }
.sd-rail__track, .sd-rail__fill { position: absolute; inset: 0; display: block; color: var(--_a); background-image: var(--sds-steek); }
.sd-rail__track { opacity: 0.3; }
.sd-rail__fill { clip-path: inset(0 100% 0 0); }
.sd-rail__needle { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.sd-rail__eye { position: absolute; left: 0; top: calc(var(--_w) / 2 - 3px); max-width: none; overflow: visible; fill: var(--_s); transition: opacity 160ms ease-in; }
.sd-rail__knot { position: absolute; left: -6px; top: calc(var(--_w) / 2 - 6px); max-width: none; overflow: visible; }
.sd-rail__knot path { fill: none; stroke: var(--_a); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.sd-rail:is(.is-knot, .is-knotted) .sd-rail__eye { opacity: 0; }
.sd-rail.is-knot .sd-rail__knot path { animation: sds-draw 420ms var(--sds-inout) forwards; }
.sd-rail.is-knotted .sd-rail__knot path { stroke-dashoffset: 0; }
.sd-rail__marks { display: none; }

@keyframes sds-draw { to { stroke-dashoffset: 0; } }

@media (min-width: 1280px) {
  .sd-rail { --sds-steek: repeating-linear-gradient(180deg, currentColor 0 var(--sds-stitch), transparent 0 var(--sds-stitch-p)); top: var(--sds-rail-top, 104px); bottom: var(--sds-rail-bottom, 40px); left: var(--sds-rail-left, clamp(10px, 0.8vw, 16px)); right: auto; width: var(--_w); height: auto; transition: opacity 600ms var(--sds-ease), bottom 500ms var(--sds-ease); }

  .sd-rail__fill { clip-path: inset(0 0 100% 0); }
  .sd-rail__eye { left: calc(var(--_w) / 2 - 3px); top: 0; transform-origin: 3px 3px; rotate: 90deg; }
  .sd-rail__knot { left: calc(var(--_w) / 2 - 6px); top: -6px; }
  .sd-rail__marks { display: block; margin: 0; padding: 0; list-style: none; }
  .sd-rail__mark { position: absolute; left: 0; top: calc(var(--y, 0) * 100%); width: 0; height: 0; }

  .sd-rail__link { position: absolute; left: 0; top: 0; translate: 0 -50%; display: flex; align-items: center; gap: 9px; padding: 8px 10px 8px 0; color: var(--_m); text-decoration: none; pointer-events: auto; outline-offset: 2px; transition: color 240ms var(--sds-ui); }

  .sd-rail__link::before { content: ''; flex: none; width: var(--sd-rail-tick, 10px); height: 1px; background: currentColor; opacity: 0.6; }

  .sd-rail__num { position: relative; font: var(--sd-rail-num-weight, 640) var(--sd-rail-num-size, 0.8125rem) / 1 var(--sd-rail-num-font, var(--sd-font-merk, Georgia, serif)); font-variant-numeric: lining-nums; letter-spacing: var(--sd-rail-num-ls, 0.06em); }

  /* de steek door het actieve cijfer (240 ms) */
  .sd-rail__num::before { content: ''; position: absolute; left: -5px; top: -4px; bottom: -4px; width: 1.25px; background: var(--_a); transform: scaleY(0); transform-origin: 50% 0; transition: transform 240ms var(--sds-ui), opacity 240ms var(--sds-ui); }

  .sd-rail__link.is-passed .sd-rail__num::before { transform: none; opacity: 0.45; }
  .sd-rail__link:is(.is-active, :hover) { color: var(--_f); }
  .sd-rail__link.is-active::before { background: var(--_a); opacity: 1; }
  .sd-rail__link.is-active .sd-rail__num::before { transform: none; opacity: 1; }
  .sd-rail__link:focus-visible { outline: 2px solid var(--_a); }

  .sd-rail__tip { position: absolute; left: calc(100% + 2px); top: 50%; translate: -4px -50%; padding: 7px 10px; background: var(--sds-ink); color: var(--sds-paper); font: 500 0.8125rem/1 var(--sd-font-sans, system-ui, sans-serif); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms var(--sds-ui), translate 240ms var(--sds-ui), visibility 0s linear 240ms; }

  .sd-rail__link:is(:hover, :focus-visible) .sd-rail__tip { opacity: 1; visibility: visible; translate: 0 -50%; transition-delay: 0s; }
}

/* de rail wijkt voor menu, tas, dialoog en cookiebalk; bij de footer pas na de knoop */
html:is(.sd-menu-open, .sd-lock) .sd-rail, body.sd-lock .sd-rail { opacity: 0; visibility: hidden; }
html.sd-cookie-open .sd-rail { opacity: 0; visibility: hidden; transition: opacity 400ms var(--sds-ease), visibility 0s linear 400ms; }
html.sd-footer-in-view .sd-rail { opacity: 0; visibility: hidden; transition: opacity 500ms var(--sds-ease) 700ms, visibility 0s linear 1200ms; }

/* de naad tussen twee hoofdstukken, scroll-driven; zonder ondersteuning vol */
.sd-chapter + .sd-chapter:not(.sd-chapter--no-thread)::before { content: ''; position: absolute; top: 0; left: var(--sd-gutter, 20px); right: var(--sd-gutter, 20px); height: 1px; color: var(--sd-accent, var(--sds-thread-deep)); background: var(--sds-steek); pointer-events: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sd-chapter + .sd-chapter:not(.sd-chapter--no-thread) { view-timeline: --sds-seam block; }

    .sd-chapter + .sd-chapter:not(.sd-chapter--no-thread)::before { animation: sds-seam linear both; animation-duration: auto; animation-timeline: --sds-seam; animation-range: entry 0% entry 70%; }
  }
}

@keyframes sds-seam { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* rijgsteek-wachtstand: .sd-btn[aria-busy] */
.sd-js .sd-btn[aria-busy='true'] { cursor: progress; }

.sd-js .sd-btn[aria-busy='true']::before { inset: auto 1.25rem 0.55rem; height: 1.5px; border: 0; opacity: 0.8; background: var(--sds-steek) 0 0 / var(--sds-stitch-p) 100% repeat-x; }

@media (prefers-reduced-motion: no-preference) {
  .sd-js .sd-btn[aria-busy='true']::before { animation: sds-busy 600ms linear infinite; }
}

@keyframes sds-busy { to { background-position: var(--sds-stitch-p) 0; } }

/* gestikt vinkje: <span class="sd-stitchcheck" aria-hidden="true">; span.sd-check = oude naam (.sd-check is het keuzevakje) */
.sd-stitchcheck, span.sd-check { display: inline-block; flex: none; width: 0.8em; height: 0.6em; margin-right: 0.4em; font-size: inherit; color: inherit; cursor: inherit; background: currentColor; -webkit-mask: var(--sds-check) 0 0 / 100% 100% no-repeat; mask: var(--sds-check) 0 0 / 100% 100% no-repeat; }

@media (prefers-reduced-motion: no-preference) {
  .sd-stitchcheck, span.sd-check { animation: sds-check 300ms steps(3, jump-start) both; }
}

@keyframes sds-check { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* sd-motion.js: maatsteek, boog naar de tas, geborduurd nummer */
.sd-fx-host { position: relative; }
.sd-fx-stitch { position: absolute; left: 50%; bottom: 0.35em; width: 24px; height: 1.5px; margin-left: -12px; background: var(--sd-accent, var(--sds-thread)); transform-origin: 0 50%; pointer-events: none; }
.sd-fx-arc { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: calc(var(--sd-z-modal, 300) + 5); }
.sd-fx-arc > path { fill: none; stroke: var(--sds-thread); stroke-width: 1.5; stroke-linecap: round; }
.sd-emb-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.sd-emb-svg g { fill: none; stroke: var(--sd-accent, var(--sds-thread)); stroke-width: 1.2; stroke-dasharray: 4 3; }
.sd-emb-st { vector-effect: non-scaling-stroke; }
.sd-emb, .sd-emb > * { transition: color 440ms var(--sds-ease); }
.sd-emb-wait, .sd-emb-wait > * { color: transparent !important; }

/* paginaovergangen: 380 ms + één gedeeld beeld per editie (data-sd-vt); kassa: navigation none */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: cubic-bezier(0.2, 0.65, 0.2, 1); }
::view-transition-group(root) { animation-duration: 380ms; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }
.sd-header { view-transition-name: sd-header; }
[data-sd-vt='aion' i] { view-transition-name: sd-ed-aion; }
[data-sd-vt='erebos' i] { view-transition-name: sd-ed-erebos; }
[data-sd-vt='origin' i] { view-transition-name: sd-ed-origin; }
[data-sd-vt='pharos' i] { view-transition-name: sd-ed-pharos; }

@media (prefers-reduced-motion: reduce) {
  .sd-rail, html.sd-cookie-open .sd-rail, html.sd-footer-in-view .sd-rail, .sd-rail__tip, .sd-rail__link, .sd-rail__eye, .sd-rail__num::before, .sd-emb, .sd-emb > * { transition: none; }
  .sd-js [data-sd-buybar-after] { translate: 0 0; transition: opacity 200ms linear, visibility 0s linear 200ms; }
}

/* print: alles zichtbaar, geen versiering */
@media print {
  .sd-rail, [data-sd-buybar-after], .sd-pull, .sd-sheen, .sd-emb-svg, .sd-fx-arc, .sd-fx-stitch { display: none !important; }
  .sd-pre, [data-reveal] { opacity: 1 !important; translate: none !important; clip-path: none !important; transition: none !important; }
  .sd-emb-wait, .sd-emb-wait > * { color: inherit !important; }
  [data-parallax], [data-settle] { transform: none !important; scale: none !important; animation: none !important; }
  .sd-thread[data-thread] { scale: none !important; }
  [data-thread]:not([data-thread-stitch]) *, path[data-thread]:not([data-thread-stitch]) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .sd-scene, .sd-scene.is-ready { min-height: 0 !important; height: auto !important; }
  .sd-scene .sd-stage { position: static !important; display: block !important; height: auto !important; overflow: visible !important; }
  .sd-scene [data-step], .sd-scene [data-step] > *, .sd-scene [data-step-media] :is(img, video) { opacity: 1 !important; translate: none !important; transform: none !important; pointer-events: auto !important; transition: none !important; }
  .sd-stitchcheck, span.sd-check, .sd-chapter + .sd-chapter::before { animation: none !important; }
}