/* ==========================================================================
   Tjebbe44 — de ruimte
   Het werk hangt in het donker. Alles drijft. Niets staat stil.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/space-grotesk-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-grotesk-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --void:#04040a;
  --void-2:#0a0a16;
  --deep:#0e0d20;
  --line:rgba(160,150,255,.16);
  --line-2:rgba(160,150,255,.30);
  --paper:#f0ecff;
  --chalk:#b9b4d8;
  --mute:#7d78a0;

  --nova:#ff5a3c;
  --magenta:#ff2f7a;
  --cyan:#35e0e0;
  --acid:#ffd12e;
  --violet:#8b5cf6;

  --accent:var(--nova);
  --accent-2:var(--magenta);

  --ff:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(20px,4vw,64px);
  --maxw:1500px;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  --t:.6s;
  --hdr:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--paper);
  font-family:var(--ff);font-weight:400;font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:#04040a}

/* ==========================================================================
   De ruimte zelf
   ========================================================================== */
.space{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(120% 80% at 50% -10%, #12102b 0%, #08071a 42%, var(--void) 100%)}
.space__stars{position:absolute;inset:0;width:100%;height:100%}
.space__neb{position:absolute;inset:-25%;opacity:.55;filter:blur(60px);mix-blend-mode:screen;will-change:transform}
.space__neb i{position:absolute;display:block;border-radius:50%;opacity:.55}
.space__neb i:nth-child(1){left:6%;top:8%;width:52vmax;height:52vmax;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 62%,transparent),transparent 62%)}
.space__neb i:nth-child(2){right:0%;top:26%;width:44vmax;height:44vmax;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 55%,transparent),transparent 64%)}
.space__neb i:nth-child(3){left:22%;bottom:-8%;width:58vmax;height:58vmax;background:radial-gradient(circle,color-mix(in srgb,var(--violet) 46%,transparent),transparent 66%)}
.space__grain{position:absolute;inset:-50%;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.space__vig{position:absolute;inset:0;background:radial-gradient(130% 95% at 50% 42%,transparent 34%,rgba(4,4,10,.86) 100%)}

/* alles boven de ruimte */
.hdr,main,.ftr,.lb{position:relative;z-index:2}

/* ==========================================================================
   Typografie
   ========================================================================== */
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.02;letter-spacing:-.035em}
.d1{font-size:clamp(3.2rem,12vw,11rem);font-weight:700;letter-spacing:-.055em;line-height:.86}
.d2{font-size:clamp(2.1rem,5.6vw,4.8rem);font-weight:600;letter-spacing:-.042em;line-height:.98}
.d3{font-size:clamp(1.35rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.lead{font-size:clamp(1.06rem,1.4vw,1.42rem);line-height:1.5;color:var(--chalk);font-weight:300}
.eyebrow{font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--mute);margin:0 0 1.1rem;display:flex;align-items:center;gap:.75rem}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--accent);flex:none;box-shadow:0 0 12px var(--accent)}
.muted{color:var(--mute)}
.small{font-size:.86rem;line-height:1.55}
.glow{text-shadow:0 0 34px color-mix(in srgb,var(--accent) 60%,transparent)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,9vw,150px);position:relative}
.section--tight{padding-block:clamp(46px,5vw,84px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--accent);color:#04040a;padding:12px 18px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* ==========================================================================
   Header
   ========================================================================== */
.hdr{position:fixed;inset:0 0 auto;z-index:60;height:var(--hdr);display:flex;align-items:center;
  transition:background var(--t) var(--e-out),backdrop-filter var(--t),border-color var(--t);
  border-bottom:1px solid transparent}
.hdr.is-stuck{background:rgba(6,6,14,.62);backdrop-filter:blur(20px) saturate(1.5);border-bottom-color:var(--line)}
.hdr__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;letter-spacing:-.05em;font-size:1.18rem;min-height:44px}
.brand__mark{width:32px;height:32px;flex:none;display:grid;place-items:center;
  background:var(--accent);color:#04040a;font-size:.82rem;font-weight:700;letter-spacing:-.06em;
  border-radius:50%;box-shadow:0 0 28px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform var(--t) var(--e-out),box-shadow var(--t)}
.brand:hover .brand__mark{transform:scale(1.1) rotate(12deg);box-shadow:0 0 44px var(--accent)}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(2px,1.4vw,10px)}
.nav a{position:relative;padding:.7rem .9rem;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  font-size:.93rem;font-weight:500;color:var(--chalk);transition:color .25s,text-shadow .35s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--paper);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 80%,transparent)}
.nav a::after{content:"";position:absolute;left:50%;bottom:.5rem;width:4px;height:4px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,6px) scale(0);transition:transform .45s var(--e-out);box-shadow:0 0 10px var(--accent)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:translate(-50%,0) scale(1)}
.burger{display:none}

@media (max-width:760px){
  .nav{position:fixed;inset:var(--hdr) 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(6,6,14,.97);backdrop-filter:blur(22px);border-bottom:1px solid var(--line);
    padding:.4rem var(--gut) 1.3rem;clip-path:inset(0 0 100% 0);transition:clip-path var(--t) var(--e-out)}
  .nav a{padding:1rem .2rem;font-size:1.06rem;justify-content:flex-start}
  .nav a::after{left:.2rem;transform:translate(0,6px) scale(0)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:translate(0,0) scale(1)}
  body.nav-open .nav{clip-path:inset(0 0 0 0)}
  .burger{display:grid;place-items:center;margin-left:auto;width:44px;height:44px;background:none;
    border:1px solid var(--line);border-radius:50%;cursor:pointer}
  .burger span{display:block;width:16px;height:1.5px;background:var(--paper);transition:transform .25s var(--e-io),opacity .25s}
  .burger span+span{margin-top:5px}
  body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  body.nav-open .burger span:nth-child(2){opacity:0}
  body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ==========================================================================
   Knoppen — lichtgevend
   ========================================================================== */
.btn{--bg:var(--accent);--fg:#04040a;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:50px;padding:.9rem 1.7rem;border:0;border-radius:100px;cursor:pointer;
  font-size:.95rem;font-weight:600;letter-spacing:-.005em;color:var(--fg);background:var(--bg);
  overflow:hidden;isolation:isolate;will-change:transform;text-align:center;
  box-shadow:0 0 0 0 color-mix(in srgb,var(--bg) 60%,transparent);
  transition:transform .35s var(--e-out),box-shadow .45s var(--e-out),background .3s}
.btn__t{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55rem}
.btn::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%);
  transform:translateX(-120%);transition:transform .8s var(--e-out)}
.btn:hover::before,.btn:focus-visible::before{transform:translateX(120%)}
.btn:hover{box-shadow:0 0 40px -4px color-mix(in srgb,var(--bg) 70%,transparent)}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--e-out)}
.btn:hover svg{transform:translateX(5px)}
.btn--ghost{--bg:transparent;--fg:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost:hover{--fg:#04040a;background:var(--paper);box-shadow:0 0 40px -6px rgba(240,236,255,.5)}
.btn--ghost::before{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.16) 48%,transparent 66%)}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.87rem}

.tlink{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-weight:500}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:.7rem;height:1px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--e-out)}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}
.tlink svg{width:15px;height:15px;transition:transform .35s var(--e-out)}
.tlink:hover svg{transform:translateX(5px)}

/* ==========================================================================
   Hero — de aankomst
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--hdr) + 40px) 70px;perspective:1500px}
.hero__in{position:relative;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(30px,5vw,70px);grid-template-columns:1fr;align-items:center}
@media(min-width:980px){.hero__in{grid-template-columns:1.05fr .95fr}}
.hero__copy{transform-style:preserve-3d}
.hero__title{margin:0}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.02em}
.hero__title .ln>span{display:block;transform:translateY(108%);animation:lineUp 1.25s var(--e-out) forwards}
.hero__title .ln:nth-child(2)>span{animation-delay:.1s}
@keyframes lineUp{to{transform:translateY(0)}}
.hero__sub{max-width:33ch;margin:1.5rem 0 0;opacity:0;animation:fadeUp 1s var(--e-out) .45s forwards}
.hero__meta{margin:1rem 0 0;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);opacity:0;animation:fadeUp 1s var(--e-out) .58s forwards}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.3rem;opacity:0;animation:fadeUp 1s var(--e-out) .7s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.hero__stage{position:relative;display:grid;place-items:center;transform-style:preserve-3d;min-height:min(72svh,640px)}
.hero__orb{position:absolute;width:min(78%,540px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent) 0%,transparent 66%);
  filter:blur(34px);animation:pulse 9s var(--e-io) infinite alternate}
@keyframes pulse{from{transform:scale(.92);opacity:.7}to{transform:scale(1.1);opacity:1}}
.hero__ring{position:absolute;width:min(94%,620px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid var(--line);animation:spin 68s linear infinite}
.hero__ring::after{content:"";position:absolute;top:-3px;left:50%;width:5px;height:5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 16px var(--accent);transform:translateX(-50%)}
.hero__ring--2{width:min(78%,510px);animation-duration:44s;animation-direction:reverse;border-color:rgba(160,150,255,.09)}
@keyframes spin{to{transform:rotate(360deg)}}

.hero__plate{position:relative;transform-style:preserve-3d;
  transform:translate3d(var(--px,0px),var(--py,0px),0) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform 1s var(--e-out);will-change:transform}
.hero__art{position:relative;display:block;max-height:min(66svh,580px);width:auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 70px -20px rgba(0,0,0,.9),
             0 0 90px -12px color-mix(in srgb,var(--accent) 46%,transparent);
  opacity:0;animation:artIn 1.5s var(--e-out) .3s forwards}
@keyframes artIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.hero__sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.45;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.2) 50%,transparent 64%);
  transform:translateX(var(--sx,0%));transition:transform 1.2s var(--e-out)}

.hero__cap{position:absolute;left:var(--gut);right:var(--gut);bottom:24px;z-index:5;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  opacity:0;animation:fadeUp 1s var(--e-out) .9s forwards}
.hero__scroll{display:inline-flex;align-items:center;gap:.6rem}
.hero__scroll i{display:block;width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:drop 2.4s var(--e-io) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:979px){
  .hero{display:block;min-height:auto;padding-block:calc(var(--hdr) + 44px) 48px}
  .hero__stage{min-height:auto;margin-top:34px}
  .hero__art{max-height:min(58svh,500px);margin-inline:auto}
  .hero__cap{position:static;width:100%;margin-top:28px;flex-direction:column;align-items:flex-start;gap:.6rem}
  .hero__cta .btn{flex:1 1 auto}
}

/* ==========================================================================
   Werk dat zweeft
   ========================================================================== */
.drift{position:relative;display:block;isolation:isolate}
.drift__vp{perspective:1000px}
.drift__box{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .8s var(--e-out),box-shadow .8s var(--e-out);will-change:transform;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 24px 50px -26px rgba(0,0,0,.95)}
.drift:hover .drift__box,.drift:focus-visible .drift__box{
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 44%,transparent),
             0 34px 70px -26px rgba(0,0,0,.95),
             0 0 70px -8px color-mix(in srgb,var(--accent) 42%,transparent)}
.drift__img{width:100%;display:block;transition:transform 1.1s var(--e-out);backface-visibility:hidden}
.drift:hover .drift__img{transform:scale(1.035)}
.drift__gl{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 66%);
  transition:opacity .55s var(--e-out)}
.drift:hover .drift__gl{opacity:1}
.drift__meta{display:flex;align-items:baseline;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
.drift__t{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;transition:color .25s,text-shadow .35s}
.drift:hover .drift__t{color:var(--accent);text-shadow:0 0 22px color-mix(in srgb,var(--accent) 70%,transparent)}
.drift__d{font-size:.78rem;color:var(--mute);letter-spacing:.1em}
.drift__m{font-size:.79rem;color:var(--mute);width:100%;margin-top:-.25rem}

/* de constellatie */
.constel{display:grid;align-items:start;gap:clamp(34px,4.4vw,72px) clamp(20px,2.6vw,44px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.constel .drift:nth-child(4n+2){transform:translateY(clamp(16px,3vw,54px))}
.constel .drift:nth-child(4n+4){transform:translateY(clamp(28px,5vw,88px))}
@media (max-width:640px){.constel .drift{transform:none !important}}

/* ==========================================================================
   Detail — één werk, alleen in de ruimte
   ========================================================================== */
.solo{display:grid;gap:clamp(30px,4vw,72px);grid-template-columns:1fr;align-items:center}
@media(min-width:1000px){.solo{grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr)}}
.solo__stage{position:relative;perspective:1300px;display:grid;place-items:center;padding:clamp(10px,3vw,40px)}
.solo__orb{position:absolute;width:min(96%,660px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 30%,transparent) 0%,transparent 66%);
  filter:blur(46px);animation:pulse 11s var(--e-io) infinite alternate}
.solo__ring{position:absolute;width:min(100%,700px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);
  pointer-events:none;animation:spin 90s linear infinite}
.solo__ring::after{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 18px var(--accent);transform:translateX(-50%)}
.solo__inner{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform 1s var(--e-out)}
.solo__img{width:100%;max-height:80svh;width:auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 30px 66px -24px rgba(0,0,0,.95),
             0 0 100px -14px color-mix(in srgb,var(--accent) 44%,transparent)}
.solo__gl{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .6s var(--e-out);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 64%)}
.solo__stage:hover .solo__gl{opacity:1}
.solo__zoom{position:absolute;right:12px;bottom:12px;z-index:3}

.spec{border-top:1px solid var(--line);margin-top:1.8rem}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:0}
.spec dt{padding:.75rem 1.4rem .75rem 0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line)}
.spec dd{padding:.75rem 0;margin:0;border-bottom:1px solid var(--line);text-align:right;font-size:.94rem}

.swatches{display:flex;gap:8px;margin-top:1.5rem}
.swatches i{width:24px;height:24px;display:block;border-radius:50%;box-shadow:0 0 16px -2px currentColor,inset 0 0 0 1px rgba(255,255,255,.18)}

.iconbtn{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,8,18,.6);color:var(--paper);box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(10px);transition:all .3s var(--e-out)}
.iconbtn:hover{background:var(--paper);color:#04040a;box-shadow:0 0 30px -4px rgba(240,236,255,.6)}
.iconbtn svg{width:17px;height:17px}

/* ==========================================================================
   Verhaal
   ========================================================================== */
.split{display:grid;gap:clamp(28px,4vw,76px);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--wide{grid-template-columns:.82fr 1.18fr}}
.card{background:linear-gradient(160deg,rgba(139,92,246,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px var(--line);padding:clamp(24px,2.8vw,40px);border-radius:3px;
  backdrop-filter:blur(6px)}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);box-shadow:0 0 0 1px var(--line)}
.stat>div{background:rgba(6,6,16,.72);padding:clamp(18px,2.4vw,32px);backdrop-filter:blur(6px)}
.stat b{display:block;font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:600;letter-spacing:-.045em;line-height:1}
.stat span{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:.55rem}

.quote{font-size:clamp(1.5rem,3.6vw,3rem);font-weight:300;letter-spacing:-.03em;line-height:1.14;max-width:20ch}
.quote em{font-style:normal;color:var(--accent);text-shadow:0 0 40px color-mix(in srgb,var(--accent) 55%,transparent)}

.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.2rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__t{display:flex;gap:2.8rem;width:max-content;animation:slide 46s linear infinite}
.marquee__t span{font-size:clamp(1.05rem,2.1vw,1.75rem);font-weight:600;letter-spacing:-.03em;color:var(--mute);white-space:nowrap}
.marquee__t span::after{content:"✦";margin-left:2.8rem;color:var(--accent)}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee:hover .marquee__t{animation-play-state:paused}

/* tijdlijn als baan */
.orbit{position:relative;padding-left:clamp(30px,5vw,78px)}
.orbit::before{content:"";position:absolute;left:clamp(9px,2vw,27px);top:6px;bottom:6px;width:1px;background:var(--line)}
.orbit::after{content:"";position:absolute;left:clamp(9px,2vw,27px);top:6px;width:1px;height:var(--prog,0%);
  background:linear-gradient(var(--accent),var(--accent-2));box-shadow:0 0 14px var(--accent);transition:height .2s linear}
.orbit__row{position:relative;display:grid;gap:clamp(16px,2.4vw,34px);grid-template-columns:1fr;align-items:center;padding-block:clamp(20px,3vw,42px)}
@media(min-width:760px){.orbit__row{grid-template-columns:180px 1fr}}
.orbit__row::before{content:"";position:absolute;left:calc(clamp(9px,2vw,27px) - clamp(30px,5vw,78px) - 4px);top:calc(50% - 4px);
  width:8px;height:8px;background:var(--void);box-shadow:inset 0 0 0 1.5px var(--mute);border-radius:50%;
  transition:box-shadow .55s var(--e-out),transform .55s var(--e-out)}
.orbit__row.in::before{box-shadow:inset 0 0 0 4px var(--accent),0 0 18px var(--accent);transform:scale(1.4)}
.orbit__date{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.orbit__body{display:grid;gap:clamp(14px,2vw,28px);grid-template-columns:92px 1fr;align-items:center}
.orbit__thumb{width:92px;overflow:hidden;border-radius:2px}
.orbit__thumb img{transition:transform .9s var(--e-out)}
.orbit__row:hover .orbit__thumb img{transform:scale(1.08)}
.orbit__body h3 a{display:inline-flex;align-items:center;min-height:44px}
.orbit__body h3 a:hover{color:var(--accent)}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:clamp(16px,4vw,60px);
  background:rgba(4,4,10,.95);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .5s var(--e-out)}
.lb.is-open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:100%;width:auto;transform:scale(.95);transition:transform .55s var(--e-out);
  box-shadow:0 0 100px -20px color-mix(in srgb,var(--accent) 60%,transparent)}
.lb.is-open img{transform:none}
.lb__x{position:absolute;top:16px;right:16px}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding-block:clamp(44px,5vw,80px) 30px;margin-top:clamp(40px,6vw,90px)}
.ftr__grid{display:grid;gap:clamp(24px,3vw,50px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ftr h4{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:500;margin-bottom:.9rem}
.ftr a{color:var(--chalk);display:inline-flex;min-height:44px;min-width:44px;align-items:center;transition:color .25s,text-shadow .35s}
.ftr a:hover{color:var(--accent);text-shadow:0 0 20px color-mix(in srgb,var(--accent) 70%,transparent)}
.ftr__bot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-top:clamp(30px,4vw,56px);padding-top:22px;border-top:1px solid var(--line);font-size:.78rem;color:var(--mute)}

/* ==========================================================================
   Onthullen
   ========================================================================== */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity 1.05s var(--e-out),transform 1.05s var(--e-out),filter 1.05s var(--e-out);filter:blur(6px)}
.js [data-rv].in{opacity:1;transform:none;filter:none}
.js [data-rv="art"]{transform:translateY(40px) scale(.96)}
.js [data-rv="art"].in{transform:none}
[data-rv-d="1"]{transition-delay:.08s}[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.4s}

.spot{position:fixed;z-index:1;pointer-events:none;width:620px;height:620px;left:0;top:0;
  transform:translate3d(calc(var(--cx,50vw) - 310px),calc(var(--cy,50vh) - 310px),0);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 11%,transparent),transparent 62%);
  opacity:0;transition:opacity 1s var(--e-out);mix-blend-mode:screen}
body.has-fine .spot{opacity:1}

/* ==========================================================================
   Paginaovergang — warp
   ========================================================================== */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:warpOut .3s var(--e-io) both}
  ::view-transition-new(root){animation:warpIn .5s var(--e-out) both}
}
@keyframes warpOut{to{opacity:0;transform:scale(1.03);filter:blur(8px)}}
@keyframes warpIn{from{opacity:0;transform:scale(.985);filter:blur(6px)}}

/* ==========================================================================
   Verminderde beweging
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js [data-rv]{opacity:1 !important;transform:none !important;filter:none !important}
  .hero__title .ln>span,.hero__sub,.hero__meta,.hero__cta,.hero__cap,.hero__art{opacity:1 !important;transform:none !important;animation:none !important}
  .hero__plate,.drift__box,.solo__inner{transform:none !important}
  .spot,.space__neb{display:none}
  .marquee__t{animation:none}
  .btn::before{display:none}
  @view-transition{navigation:none}
}
@media (max-width:700px){.spot{display:none}}