/* VIVUM — shared page styles (privacy, voorwaarden, verzending, betaling) */
:root{
  --night:#0D0B08;--dusk:#1A150D;--dusk-warm:#2E2414;
  --porcelain:#EFE7D8;--porcelain-dim:#9B937F;
  --amber:#E0A44A;--amber-bright:#F6CC85;--amber-deep:#9C6A18;
  --line:rgba(239,231,216,.12);
  --font-display:'Fraunces',serif;--font-body:'Instrument Sans',sans-serif;--font-mono:'IBM Plex Mono',monospace;
  --pad-x:clamp(20px,6vw,88px);--ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--night);color:var(--porcelain);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
::selection{background:var(--amber);color:var(--night)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--font-display);font-weight:300;line-height:1.06;letter-spacing:-.01em}
em{font-style:italic;font-family:var(--font-display);color:var(--porcelain-dim)}
.mono{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--porcelain-dim)}
.mono-amber{color:var(--amber)}

/* ---------- film: grain + vignet ---------- */
.grain{position:fixed;inset:-120%;z-index:90;pointer-events:none;opacity:.055;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="280"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="280" height="280" filter="url(%23n)" opacity="0.65"/></svg>');
  animation:grain 7s steps(8) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}12%{transform:translate(-3%,-6%)}25%{transform:translate(4%,-2%)}
  38%{transform:translate(-5%,3%)}50%{transform:translate(3%,6%)}62%{transform:translate(-6%,-4%)}
  75%{transform:translate(5%,2%)}88%{transform:translate(-2%,5%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain{animation:none;opacity:.035}}
.vignette{position:fixed;inset:0;z-index:89;pointer-events:none;
  background:radial-gradient(115% 95% at 50% 48%,transparent 58%,rgba(0,0,0,.42) 100%)}

/* ---------- preloader ---------- */
#preloader{position:fixed;inset:0;z-index:100;background:var(--night);display:grid;place-items:center;transition:transform .9s var(--ease) .1s}
body.loaded #preloader{transform:translateY(-101%)}
.pre-inner{text-align:center;transition:opacity .4s}
body.loaded .pre-inner{opacity:0}
.pre-line{font-family:var(--font-mono);letter-spacing:.3em;text-transform:uppercase;opacity:0;animation:preUp .7s var(--ease) forwards}
.pre-l1{font-size:.86rem;animation-delay:.1s}
.pre-l2{font-family:var(--font-display);font-style:italic;font-size:1.25rem;text-transform:none;letter-spacing:.02em;color:var(--amber);margin-top:10px;animation-delay:.32s}
.pre-bar{width:120px;height:1px;background:var(--line);margin:20px auto 0;overflow:hidden}
.pre-bar i{display:block;height:100%;background:var(--amber);transform-origin:left;transform:scaleX(0);animation:preBar 1.1s var(--ease) .3s forwards}
@keyframes preUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes preBar{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){#preloader{display:none}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:96;background:transparent;pointer-events:none}
.progress i{display:block;height:100%;background:var(--amber);transform-origin:left;transform:scaleX(0);will-change:transform}

/* ---------- custom cursor ---------- */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:50%;display:none;will-change:transform}
body.has-cursor .cur-dot,body.has-cursor .cur-ring{display:block}
.cur-dot{width:6px;height:6px;background:var(--amber-bright);margin:-3px 0 0 -3px}
.cur-ring{width:38px;height:38px;border:1px solid rgba(224,164,74,.5);margin:-19px 0 0 -19px;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),border-color .35s}
.cur-ring.hov{width:70px;height:70px;margin:-35px 0 0 -35px;border-color:rgba(246,204,133,.95)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:95;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad-x);mix-blend-mode:difference}
.nav .wordmark{font-family:var(--font-mono);font-size:.86rem;letter-spacing:.34em;font-weight:500}
.nav .right{display:flex;align-items:center;gap:22px}
.nav .batch{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;color:rgba(255,255,255,.6)}
.nav .tgl{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);padding:6px 2px;border-bottom:1px solid transparent;transition:border-color .3s}
.nav .tgl:hover{border-color:rgba(255,255,255,.7)}
@media(max-width:680px){.nav .batch{display:none}}

/* ---------- split tekst (CSS-animation, no JS-driven class needed) ---------- */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .wi{display:inline-block;animation:wiUp .95s var(--ease) both;animation-delay:calc(var(--wi-i,0) * .07s + .55s)}
@keyframes wiUp{from{transform:translateY(118%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.split .wi{animation:none}}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- doc layout ---------- */
.doc{max-width:720px;margin:0 auto;padding:200px var(--pad-x) 100px;flex:1;position:relative;z-index:1}
.doc-head{margin-bottom:80px;border-bottom:1px solid var(--line);padding-bottom:60px;position:relative}
.doc-head .mono{display:inline-block;position:relative;padding-bottom:6px}
.doc-head .mono::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--amber);animation:underGrow 1s var(--ease) .6s forwards}
@keyframes underGrow{to{width:60px}}
.doc-title{font-size:clamp(2.6rem,7vw,5rem);margin:22px 0 22px;letter-spacing:-.03em}
.doc-lede{color:var(--porcelain-dim);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:32em;font-family:var(--font-display);font-style:italic;font-weight:300;line-height:1.4}

.doc-body h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:56px 0 18px;color:var(--porcelain);position:relative}
.doc-body h2:first-child{margin-top:0}
.doc-body h2::before{content:"";position:absolute;left:-24px;top:.55em;width:12px;height:1px;background:var(--amber);opacity:0;transform:scaleX(0);transform-origin:left;transition:opacity .6s var(--ease) .2s,transform .8s var(--ease) .2s}
.doc-body h2.rv.in::before{opacity:1;transform:none}
@media(max-width:640px){.doc-body h2::before{display:none}}
.doc-body p{margin:0 0 16px;color:var(--porcelain);max-width:38em}
.doc-body p strong{color:var(--amber-bright);font-weight:500}
.doc-body a{color:var(--amber);border-bottom:1px solid rgba(224,164,74,.3);transition:border-color .25s,color .25s}
.doc-body a:hover{border-color:var(--amber);color:var(--amber-bright)}

/* dl grid */
.doc-body dl.grid{display:grid;gap:22px;margin:24px 0 32px}
.doc-body dl.grid > div{padding:22px 24px;border:1px solid var(--line);background:rgba(46,36,20,.15);border-radius:2px;transition:border-color .4s,background .4s,transform .4s var(--ease)}
.doc-body dl.grid > div:hover{border-color:rgba(224,164,74,.35);background:rgba(46,36,20,.28);transform:translateY(-2px)}
.doc-body dl.grid dt{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.doc-body dl.grid dd{color:var(--porcelain-dim);font-size:.98rem;line-height:1.5}

/* callout */
.doc-body .callout{border-left:2px solid var(--amber);padding:14px 20px;margin:24px 0;background:rgba(224,164,74,.05);color:var(--porcelain);font-size:.98rem;position:relative;overflow:hidden}
.doc-body .callout::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber-bright);transform:translateY(-100%);animation:calloutSlide 1.4s var(--ease) .4s forwards}
@keyframes calloutSlide{to{transform:translateY(0)}}
.doc-body .callout .mono{display:block;margin-bottom:4px}

/* methodes list */
.doc-body ul.methods{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 12px;padding:0}
.doc-body ul.methods li{padding:8px 14px;border:1px solid var(--line);border-radius:2px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;color:var(--porcelain);transition:border-color .3s,color .3s,transform .3s var(--ease);opacity:0;transform:translateY(10px);animation:methodIn .55s var(--ease) forwards}
.doc-body ul.methods li:nth-child(1){animation-delay:.05s}
.doc-body ul.methods li:nth-child(2){animation-delay:.13s}
.doc-body ul.methods li:nth-child(3){animation-delay:.21s}
.doc-body ul.methods li:nth-child(4){animation-delay:.29s}
.doc-body ul.methods li:nth-child(5){animation-delay:.37s}
.doc-body ul.methods li:nth-child(6){animation-delay:.45s}
@keyframes methodIn{to{opacity:1;transform:none}}
.doc-body ul.methods li:hover{border-color:var(--amber);color:var(--amber)}
@media (prefers-reduced-motion:reduce){.doc-body ul.methods li{opacity:1;transform:none;animation:none}}

/* note */
.doc-note{margin-top:80px;padding-top:32px;border-top:1px solid var(--line);color:var(--porcelain-dim);font-size:.82rem;font-style:italic;font-family:var(--font-display)}

/* footer */
.foot{padding:60px var(--pad-x);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;position:relative;z-index:1}
.foot .back{color:var(--porcelain);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s,color .3s}
.foot .back:hover{border-color:var(--amber);color:var(--amber)}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
.foot-links a{color:var(--porcelain-dim);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .25s,border-color .25s}
.foot-links a:hover,.foot-links a[aria-current]{color:var(--amber);border-color:var(--amber)}
.foot .mono{font-size:.66rem}

@media(max-width:640px){
  .doc{padding:140px var(--pad-x) 70px}
  .doc-head{margin-bottom:50px;padding-bottom:40px}
  .foot{flex-direction:column;text-align:center;gap:20px}
}