/* ═══════════════════════════════════════════════════════════════════════════
   VH CUSTOMS — glasplaten op cinematische foto's
   Kleuren uit het logo: blauw #0070CB op diep antraciet.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  /* merk */
  --blauw:        #0070CB;          /* logoblauw — vullingen en gloed */
  --blauw-licht:  #3E9BFF;          /* opgehelderd — grote tekst, iconen, gloed */
  --blauw-tekst:  #6FB6FF;          /* lichter — kleine tekst, haalt 4.5:1 op glas */
  --blauw-diep:   #004E8F;
  --blauw-rgb:    0,112,203;

  /* grond */
  --nacht:        #080B10;
  --grafiet:      #10161E;
  --staal:        #1A222C;

  /* inkt */
  --ink:          #EAF2FA;
  --ink-2:        rgba(234,242,250,.72);
  --ink-3:        rgba(234,242,250,.58);
  --ink-4:        rgba(234,242,250,.28);

  /* glas */
  --glas:         rgba(12,18,27,.46);
  --glas-op:      rgba(24,34,48,.58);          /* opgelicht: hover / actief */
  --glas-rand:    rgba(255,255,255,.24);
  --glas-sheen:   rgba(255,255,255,.55);
  --glas-blur:    blur(26px) saturate(1.75);
  --schaduw:      0 2px 10px rgba(2,5,10,.34), 0 26px 64px -26px rgba(2,5,10,.85);
  --schaduw-op:   0 3px 14px rgba(2,5,10,.4),  0 34px 76px -28px rgba(2,5,10,.9);
  --gloed:        0 0 0 1px rgba(var(--blauw-rgb),.36), 0 12px 40px -12px rgba(var(--blauw-rgb),.5);

  /* vorm */
  --rond:         24px;
  --rond-s:       15px;
  --rond-pil:     999px;

  /* balk staat boven, merk onder — beide vallen half over de grote foto */
  --balk-h:       clamp(66px, 8vh, 80px);
  --balk-boven:   clamp(14px, 2.2vh, 22px);
  --balk-kant:    clamp(10px, 2.4vw, 16px);
  --merk-b:       clamp(210px, 19vw, 320px);      /* breedte contourplaat  */
  --merk-h:       calc(var(--merk-b) / 3.1259);   /* verhouding van de vorm */
  --veilig:       env(safe-area-inset-bottom, 0px);
  --merk-onder:   calc(clamp(12px, 2vh, 22px) + var(--veilig));

  /* De grote foto laat boven en onder precies zoveel ruimte dat de balk en
     het merk er half overheen vallen. */
  --foto-rand:    60px;
  --kop-ruimte:   calc(var(--balk-boven) + var(--balk-h) + clamp(18px, 3vh, 40px));
  --voet-ruimte:  calc(var(--merk-onder) + var(--merk-h) + clamp(14px, 2.4vh, 30px));

  --pad:          clamp(22px, 4vw, 68px);

  /* ruimte — density 4 / standaard */
  --s-1: 9px;  --s-2: 18px; --s-3: 28px;
  --s-4: 38px; --s-5: 56px; --s-6: 76px;

  /* letters */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --luxe:    "Saira", "Arial Narrow", Impact, sans-serif;   /* breed, zwaar, vierkant */
  --ui:      "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:    "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* beweging */
  --soepel:  cubic-bezier(.32,.72,0,1);
  --uit:     cubic-bezier(.4,0,1,1);
  --snel:    .18s;
  --groei:   .34s;
  --traag:   .9s;
}

/* ── 2 · GRONDSLAG ──────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Elk blad is een vast punt. Bladen die hoger zijn dan het scherm mag je
     vrij doorlopen — dat staat zo in de spec: is het vlak groter dan de
     kijkbox, dan mag de kijkbox er overal in blijven staan. */
  scroll-snap-type:y mandatory;
}
body{
  margin:0;
  min-block-size:100svh;
  background:var(--nacht);
  color:var(--ink);
  font:400 clamp(1.02rem,.96rem + .32vw,1.18rem)/1.66 var(--ui);
  font-synthesis-weight:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-inline-size:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; }
h1,h2,h3{ margin:0; }
:where(a,button,[role=tab]):focus-visible{
  outline:2px solid var(--blauw-licht);
  outline-offset:3px;
  border-radius:6px;
}
.klikbaar{ cursor:pointer; }
.alleen-lezer{
  position:absolute; inline-size:1px; block-size:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.overslaan{
  position:fixed; inset-block-start:-100px; inset-inline-start:16px; z-index:200;
  padding:12px 18px; border-radius:var(--rond-s);
  background:var(--blauw); color:#fff; font-weight:600;
  transition:inset-block-start var(--snel) var(--soepel);
}
.overslaan:focus{ inset-block-start:calc(var(--balk-boven) + var(--balk-h) + 12px); }

/* ── 3 · PODIUM · de foto's ─────────────────────────────────────────────── */
#podium{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--nacht); }
.podium__foto{
  position:absolute; inset:0;
  inline-size:100%; block-size:100%;
  object-fit:cover; object-position:center 55%;
  opacity:0;
  transform:scale(1.08);
  transition:opacity var(--traag) var(--soepel);
  will-change:opacity;
}
.podium__foto.aan{ opacity:1; animation:adem 26s ease-in-out infinite alternate; }
@keyframes adem{ from{ transform:scale(1.06) translate3d(0,0,0); } to{ transform:scale(1.14) translate3d(-1.4%,-1%,0); } }

/* scrim — houdt alle tekst ruim boven 4.5:1 */
.podium__dim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,12,.86) 0%, rgba(4,7,12,.5) 26%, rgba(4,7,12,.55) 62%, rgba(4,7,12,.92) 100%),
    linear-gradient(96deg, rgba(4,7,12,.78) 0%, rgba(4,7,12,.24) 58%, rgba(4,7,12,.4) 100%);
}
/* vignet + koele blauwzweem zodat het merkblauw in de hele plaat doorklinkt */
.podium__vig{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(3,6,11,.72) 100%),
    radial-gradient(70% 55% at 12% 8%, rgba(var(--blauw-rgb),.20), transparent 62%);
  mix-blend-mode:normal;
}
#korrel{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  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");
}

/* ── 4 · GLASPLAAT ──────────────────────────────────────────────────────── */
/*  Een echte plaat: rand die het licht vangt, dikte onderin, sheen bovenin
    en een specular die met de muis meeloopt.                               */
.glas{
  position:relative;
  isolation:isolate;
  background:var(--glas);
  -webkit-backdrop-filter:var(--glas-blur);
  backdrop-filter:var(--glas-blur);
  border-radius:var(--rond);
  box-shadow:var(--schaduw);
}
/* Randlicht. De muis is de lichtbron: --licht is de hoek van het midden van
   de plaat naar de aanwijzer, dus de felle kant van het verloop wijst altijd
   naar de muis. --nabij (0..1) zwakt het af naarmate de muis verder weg is. */
.glas::before,
.doek::before,
.doekregel::before{
  content:""; position:absolute; inset:0; z-index:2;
  border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(var(--licht,152deg),
    rgba(255,255,255,calc(.05 + .03 * var(--nabij,0))) 0%,
    rgba(255,255,255,calc(.10 + .06 * var(--nabij,0))) 40%,
    rgba(255,255,255,calc(.22 + .24 * var(--nabij,0))) 72%,
    rgba(255,255,255,calc(.40 + .34 * var(--nabij,0))) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  transition:background .12s linear;
}
/* dikte van de plaat + de specular die de aanwijzer volgt */
.glas::after,
.doek::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,-20%),
             rgba(150,205,255,calc(.05 + .16 * var(--nabij,0))), transparent 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -22px 34px -26px rgba(0,0,0,.95);
}
.glas > *{ position:relative; z-index:3; }
/* het doek is geen glasplaat maar krijgt wel dezelfde randbelichting */
.doek::before,.doek::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.doek::before{ z-index:4; }
.doek::after{ z-index:3; background:none; box-shadow:none; }
.doekregel::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glas{ background:rgba(10,15,23,.92); }
}

/* ── 4c · VELG · de aanwijzer ───────────────────────────────────────────
   Een zes-spaaks velg ter grootte van een gewone cursor. Hij rolt mee met
   het scrollen: --rol is de hoek, opgebouwd uit de afgelegde scrollafstand. */
@media (hover:hover) and (pointer:fine){
  html.velg-aan, html.velg-aan *{ cursor:none; }
  html.velg-aan a, html.velg-aan button, html.velg-aan [role=tab]{ cursor:none; }
}
#velg{
  position:fixed; z-index:200; inset-block-start:0; inset-inline-start:0;
  inline-size:22px; block-size:22px;
  pointer-events:none; opacity:0;
  translate:var(--vx, -50px) var(--vy, -50px);
  transition:opacity .25s var(--soepel);
}
html.velg-aan #velg{ opacity:1; }
#velg svg{ inline-size:100%; block-size:100%; display:block; rotate:var(--rol, 0deg); }
.velg__band{ fill:rgba(10,14,20,.55); stroke:#fff; stroke-width:3.4; }
.velg__rand{ fill:none; stroke:rgba(255,255,255,.92); stroke-width:2.2; }
.velg__spaken path{ stroke:rgba(255,255,255,.92); stroke-width:2.6; stroke-linecap:round; }
.velg__naaf{ fill:#fff; }

/* ── 5 · MERK · plaat in de vorm van het logo, onderin ──────────────────── */
#merk{
  position:fixed; z-index:60;
  inset-block-end:var(--merk-onder);
  inset-inline-start:clamp(16px, 3.4vw, 62px);
  inline-size:var(--merk-b);
  aspect-ratio:844 / 270;
  display:block;
  /* --rit wordt door JS gezet: hoe ver de plaat het beeld in is gereden.
     Bewust géén rotatie: die draaide bij het uitrollen terug en dat las als
     een plaat die eerst te ver schoot en dan terugveerde. */
  translate:var(--rit, 0px) 0;
  will-change:translate;
}
/* In plaats van rook: de plaat komt vervaagd en doorzichtig van rechts
   binnen en wordt scherp zodra hij op zijn plek staat. --scherpte loopt van
   0 (net in beeld) naar 1 (geparkeerd) en wordt door JS gezet. */
#merk{
  opacity:calc(.15 + .85 * var(--scherpte, 1));
  filter:blur(calc((1 - var(--scherpte, 1)) * 9px));
}

#merk img{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  translate:-50% -50%;
  inline-size:88.6%; block-size:auto;
}
#merk:hover{ filter:brightness(1.08); }
#merk:active{ filter:brightness(.94); }
#merk:focus-visible{ outline-offset:6px; }

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .merk__plaat{ background:rgba(8,12,19,.93); }
}

/* ── 6 · BLADEN ─────────────────────────────────────────────────────────── */
#bladen{ position:relative; z-index:20; }
.blad{
  min-block-size:100svh;
  display:grid; align-content:safe center;
  padding:var(--kop-ruimte) var(--pad) var(--voet-ruimte);
  scroll-margin-block-start:0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}
.blad--lang{
  align-content:safe start;
  padding-block-start:calc(var(--kop-ruimte) + clamp(10px,2vh,26px));
  /* ruimte vrij voor de merkplaat linksonder; de voet eindigt er netjes boven */
  padding-block-end:calc(var(--merk-onder) + var(--merk-h) + clamp(10px,1.6vh,20px));
}
.blad__in{ inline-size:min(1440px,100%); margin-inline:auto; }

/* ── 7 · TYPOGRAFIE ─────────────────────────────────────────────────────── */
.etiket{
  margin:0 0 var(--s-2);
  font:500 .76rem/1 var(--mono);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--blauw-tekst);
}
/* De grote titel staat in een klassieke serif: rustig, wit, zonder gloed. */
/* Breed, zwaar en vierkant — het menu-gevoel van een racespel. */
.toon-titel{
  margin:0;
  font-family:var(--luxe);
  font-weight:800; font-stretch:125%;
  font-size:clamp(2.9rem,10.5vw,8.4rem);
  line-height:.98; letter-spacing:.03em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 2px 30px rgba(2,5,10,.55);
  text-wrap:balance;
}
.toon-titel .rgl{ display:block; }
.kop2{
  font-family:var(--display);
  font-weight:700; font-stretch:112%;
  font-size:clamp(2.1rem,4.8vw,4rem);
  line-height:1.02; letter-spacing:-.025em;
  text-transform:uppercase;
}
.lood{
  max-inline-size:58ch; margin:var(--s-3) 0 0;
  color:var(--ink-2); font-size:clamp(1.06rem,1rem + .38vw,1.3rem);
}
.lood--klein{ font-size:1.06rem; margin-block-start:var(--s-2); }

/* Op de startpagina staat het merk zelf groot in beeld; de vaste plaat
   linksonder blijft daar weg en komt pas op de volgende bladen aanrijden. */
.toon-merk{ margin:0; line-height:0; }
.toon-merk img{
  inline-size:min(720px, 64vw); block-size:auto;
  filter:drop-shadow(0 10px 44px rgba(2,5,10,.7));
}

/* ── 8 · KNOPPEN ────────────────────────────────────────────────────────── */
.knop{
  display:inline-flex; align-items:center; gap:11px;
  min-block-size:54px; padding:0 clamp(18px,2vw,26px);
  border-radius:var(--rond-pil);
  font-weight:600; font-size:1.06rem; letter-spacing:-.01em;
  color:var(--ink);
  transition:transform var(--snel) var(--soepel),
             box-shadow var(--groei) var(--soepel),
             background-color var(--groei) var(--soepel);
}
.knop:hover{ transform:translateY(-2px); background:var(--glas-op); box-shadow:var(--schaduw-op); }
.knop:active{ transform:translateY(0) scale(.975); }
.knop--vol{
  background:linear-gradient(168deg, var(--blauw) 0%, var(--blauw-diep) 100%);
  box-shadow:var(--schaduw), var(--gloed);
  color:#fff;
}
.knop--vol:hover{ background:linear-gradient(168deg,#0a80e2 0%, var(--blauw) 100%); }
.knop--klein{ min-block-size:44px; font-size:.9rem; margin-block-start:var(--s-2); }
.knoppen{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block-start:var(--s-4); }

.ico{
  inline-size:21px; block-size:21px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--groot{ inline-size:29px; block-size:29px; color:var(--blauw-licht); }
.ico--pijl{ inline-size:17px; block-size:17px; margin-inline-start:auto; color:var(--ink-4);
            transition:transform var(--groei) var(--soepel), color var(--groei); }

/* pillen */
.pillen{ display:flex; flex-wrap:wrap; gap:10px; margin:var(--s-5) 0 0; padding:0; list-style:none; }
.pil{
  padding:9px 16px; border-radius:var(--rond-pil);
  font:500 .78rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2);
}

/* scroll-hint */
.rol{
  justify-self:end; margin-block-start:var(--s-6);
  display:inline-flex; align-items:center; gap:10px;
  font:500 .66rem/1 var(--mono); letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-3);
}
.rol i{ inline-size:1px; block-size:34px; background:linear-gradient(var(--blauw-licht),transparent);
        display:block; animation:zak 2.2s var(--soepel) infinite; transform-origin:top; }
@keyframes zak{ 0%,100%{ transform:scaleY(.35); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ── 9 · WERK · wazige startstand, daarna groot en scherp ───────────────── */
/* Het doek wordt op het páneel gecentreerd, niet binnen de padding. Alleen zo
   valt de balk boven en het merk onder er precies half overheen. */
.blad--foto{ position:relative; align-content:center; }
.blad--foto .blad__in{ display:contents; }

body[data-blad="blad-werk"] .podium__dim{ opacity:.82; }
body[data-blad="blad-werk"] .podium__foto{
  filter:blur(30px) saturate(1.25); transform:scale(1.22); animation:none;
}
.podium__dim,.podium__vig{ transition:opacity var(--traag) var(--soepel); }

/* Centreren met inset:0 + margin:auto in plaats van een transform: een
   transform zou een nieuw referentievlak maken, waardoor position:fixed
   binnen het doek (de kaartlade op mobiel) niet meer op het scherm slaat. */
.doek{
  position:absolute; inset:0; margin:auto;
  /* dicht: al flink groot. open: net niet schermvullend, met precies genoeg
     lucht boven en onder zodat balk en merk er half overheen vallen. */
  inline-size:min(1240px, 80vw, calc((100svh - 260px) * 16 / 9));
  aspect-ratio:16/9;
  border-radius:var(--rond);
  transition:inline-size .78s var(--soepel);
}
.doek.open{
  inline-size:min(96vw, calc((100svh - var(--foto-rand) * 2) * 16 / 9));
}
.doek__foto{
  inline-size:100%; block-size:100%; object-fit:cover;
  border-radius:inherit;
  box-shadow:var(--schaduw), inset 0 0 0 1px rgba(255,255,255,.08);
  filter:blur(10px) saturate(.95) brightness(.76);
  transform:scale(1.03);
  transition:filter .78s var(--soepel), transform .78s var(--soepel);
}
.doek.open .doek__foto{ filter:none; transform:none; }

/* ── de regel in de foto ─────────────────────────────────────────────── */
.doekregel{
  position:absolute; z-index:2; margin:0;
  padding:clamp(14px,1.5cqw,26px) clamp(18px,1.9cqw,32px);
  background:rgba(9,14,22,.52);
  -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  font-family:var(--luxe); font-weight:800; font-stretch:118%;
  font-size:clamp(1.2rem, 2.5cqw, 2.9rem);
  line-height:1.14; letter-spacing:.045em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 18px rgba(2,5,10,.85), 0 1px 4px rgba(2,5,10,.7);
  pointer-events:none;
  opacity:0; transition:opacity .5s var(--soepel);
}
.doek.open .doekregel{ opacity:1; transition-delay:.3s; }
/* Vast aan de rechteronderhoek van de foto: de buitenhoek volgt de ronding van
   het doek, de binnenhoek krijgt dezelfde ronding als de overige panelen. */
.doekregel--onder{
  inset-block-end:0; inset-inline-end:0; text-align:end;
  inline-size:fit-content; max-inline-size:52cqw;
  border-end-end-radius:var(--rond);
  border-start-start-radius:var(--rond);
}

/* ── knop linksonder: alles tegelijk open of dicht ───────────────────── */
.alles{
  position:absolute; z-index:4;
  inset-block-end:8%; inset-inline-start:3%;
  display:inline-flex; align-items:center; gap:10px;
  min-block-size:44px; padding:0 clamp(14px,1.3cqw,20px);
  border-radius:var(--rond-pil);
  background:rgba(9,14,22,.62);
  -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24), var(--schaduw);
  color:var(--ink);
  font:600 clamp(.74rem,.88cqw,.98rem)/1 var(--mono);
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--soepel), visibility .4s,
             background-color var(--groei), box-shadow var(--groei);
}
.doek.open .alles{ opacity:1; visibility:visible; transition-delay:.45s; }
.alles:hover{ background:rgba(20,30,44,.74); box-shadow:inset 0 0 0 1px var(--blauw-licht), var(--schaduw-op); }
.alles__vink{
  inline-size:20px; block-size:20px; flex:none;
  display:grid; place-items:center;
  border-radius:5px;
  background:rgba(var(--blauw-rgb),.28);
  box-shadow:inset 0 0 0 1px rgba(var(--blauw-rgb),.6);
  transition:background-color var(--groei), transform var(--groei) var(--soepel);
}
.alles__vink svg{ inline-size:12px; block-size:12px; fill:none; stroke:var(--blauw-licht); stroke-width:2.4; stroke-linecap:round; }
.alles[aria-pressed="true"] .alles__vink{ background:var(--blauw); transform:rotate(90deg); }
.alles[aria-pressed="true"] .alles__vink svg{ stroke:#fff; }

/* ── de poort: knop midden op de wazige foto ─────────────────────────── */
.poort{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  translate:-50% -50%;
  display:inline-flex; align-items:center; gap:12px;
  min-block-size:60px; padding:0 clamp(24px,2.6vw,36px);
  border-radius:var(--rond-pil);
  background:rgba(9,14,22,.58);
  -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30), var(--schaduw);
  color:var(--ink); font-weight:600; font-size:clamp(1rem,1.1vw,1.14rem);
  white-space:nowrap;
  transition:background-color var(--groei) var(--soepel), box-shadow var(--groei) var(--soepel),
             opacity .4s var(--soepel), visibility .4s;
}
.poort::before{                       /* zachte puls om de knop */
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  border:1px solid rgba(255,255,255,.3);
  animation:poortpols 3s var(--soepel) infinite;
  pointer-events:none;
}
@keyframes poortpols{
  0%,100%{ transform:scale(1); opacity:.5 }
  55%    { transform:scale(1.06); opacity:0 }
}
/* De knop blijft exact staan — alleen de vulling en de rand reageren. */
.poort:hover{
  background:rgba(22,32,46,.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.46), var(--schaduw-op);
}
.poort:active{ background:rgba(12,19,29,.82); }
.doek.open .poort{ opacity:0; visibility:hidden; pointer-events:none; }
.poort .ico{ inline-size:20px; block-size:20px; }

/* ── de aantikpunten ────────────────────────────────────────────────── */
.punt{
  position:absolute;
  inset-block-start:var(--py); inset-inline-start:var(--px);
  transform:translate(-50%,-50%);
  inline-size:clamp(46px, 3.2cqw, 62px); block-size:clamp(46px, 3.2cqw, 62px);
  display:grid; place-items:center;
  border-radius:50%; z-index:2;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--soepel), visibility .5s;
}
.doek.open .punt{ opacity:1; visibility:visible; transition-delay:.36s; }
.punt__stip{
  position:relative;
  inline-size:clamp(17px, 1.25cqw, 24px); block-size:clamp(17px, 1.25cqw, 24px);
  border-radius:50%;
  border:2px solid #fff;
  background:rgba(255,255,255,.14);
  box-shadow:0 2px 10px rgba(0,0,0,.55);
  transition:transform var(--groei) var(--soepel), background-color var(--groei);
}
.punt__stip::before{
  content:""; position:absolute; inset:-2px;
  border-radius:50%; border:2px solid rgba(255,255,255,.75);
  animation:pols 2.8s var(--soepel) infinite;
}
@keyframes pols{
  0%   { transform:scale(1);    opacity:.75 }
  70%  { transform:scale(2.25); opacity:0 }
  100% { transform:scale(2.25); opacity:0 }
}
.punt__stip::after{
  content:""; position:absolute; inset:-12px;
  border-radius:50%; border:2px solid #fff;
  opacity:0; transform:scale(.72);
  transition:opacity var(--groei) var(--soepel), transform var(--groei) var(--soepel);
}
.punt:hover .punt__stip::after,
.punt:focus-visible .punt__stip::after{ opacity:1; transform:scale(1); }
.punt:hover .punt__stip,
.punt:focus-visible .punt__stip{ transform:scale(1.12); background:#fff; }
.punt:active .punt__stip{ transform:scale(.94); }

.punt__naam{
  position:absolute; inset-block-start:50%; inset-inline-start:calc(100% + 8px);
  translate:0 -50%;
  padding:9px 15px; border-radius:var(--rond-pil);
  background:rgba(9,14,22,.74);
  -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur);
  box-shadow:inset 0 0 0 1px var(--glas-rand), var(--schaduw);
  font:500 .76rem/1 var(--mono);
  letter-spacing:.13em; text-transform:uppercase; white-space:nowrap;
  color:var(--ink);
  opacity:0; transform:translateX(-6px); pointer-events:none;
  transition:opacity var(--groei) var(--soepel), transform var(--groei) var(--soepel);
}
.punt:hover .punt__naam,
.punt:focus-visible .punt__naam{ opacity:1; transform:none; }
.punt--links .punt__naam{
  inset-inline-start:auto; inset-inline-end:calc(100% + 8px);
  transform:translateX(6px);
}
.punt--links:hover .punt__naam,
.punt--links:focus-visible .punt__naam{ transform:none; }

/* ── de kaarten · hangen met een geknikte lijn aan hun punt ──────────────
   Alles binnen het doek rekent in cqw (procenten van de doekbreedte), zodat
   de hele voorstelling op een 13" en een 27" scherm dezelfde verhoudingen
   houdt: de kaarten schalen mee met de foto in plaats van met het venster. */
.doek{ container-type:inline-size; container-name:doek; }

.draden{
  position:absolute; inset:0; z-index:1;
  inline-size:100%; block-size:100%;
  pointer-events:none; overflow:visible;
}
/* De lijn wordt "getekend": JS zet dasharray/dashoffset op de echte lengte
   en laat die snel naar nul lopen. Zo schiet de lijn vanaf de kaart naar het
   punt toe, als een aanwijslijn in een racespel-menu. */
.draden polyline{
  fill:none;
  stroke:rgba(255,255,255,.78); stroke-width:1.5;
  stroke-linejoin:round; stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
}
.draden polyline.aan{
  opacity:1;
  transition:stroke-dashoffset .34s cubic-bezier(.16,1,.3,1), opacity .1s linear;
}
.draden polyline.weg{
  transition:stroke-dashoffset .22s cubic-bezier(.6,0,.9,.2), opacity .22s linear .16s;
  opacity:0;
}

.kaart{
  position:absolute; z-index:3;
  inline-size:clamp(248px, 26cqw, 680px);
  padding:clamp(12px,1.05cqw,17px) clamp(14px,1.3cqw,21px) clamp(11px,.95cqw,16px);
  border-radius:var(--rond-s);
  color:var(--ink);
  opacity:0;
  translate:var(--vanaf-x,0) 0;
  scale:.96;
  transition:opacity .3s var(--soepel), translate .42s cubic-bezier(.16,1,.3,1),
             scale .42s cubic-bezier(.16,1,.3,1);
}
.kaart.aan{ opacity:1; translate:0 0; scale:1; }
/* dichtklappen gaat sneller dan opengaan — dat leest als een bevestiging */
.kaart.weg{
  opacity:0; translate:var(--vanaf-x,0) 0; scale:.97;
  transition:opacity .16s linear, translate .2s cubic-bezier(.6,0,.9,.2),
             scale .2s cubic-bezier(.6,0,.9,.2);
}

/* Op een laag scherm (13"-laptop) wordt het doek zoveel lager dat de langste
   kaart over een aanklikbaar punt zou vallen. Daar krijgt hij een plafond en
   scrollt de lijst desnoods binnen de kaart. */
/* Op een laag scherm zou de langste kaart over een punt vallen. Niet de kaart
   zelf krijgt dan een plafond maar alleen de prijslijst — anders scrollt het
   kruisje (dat absoluut gepositioneerd is) mee de kaart uit. */
@media (max-height:920px){
  .kaart .prijzen{ max-block-size:21svh; overflow-y:auto; scrollbar-width:none; }
  .kaart .prijzen::-webkit-scrollbar{ display:none; }
  /* het doek is hier lager, dus neemt het tekstvlak relatief meer hoogte;
     iets kleiner houdt de kaarten eronder vrij */
  .doekregel{
    font-size:clamp(1.05rem, 2.1cqw, 2.3rem);
    padding:clamp(11px,1.2cqw,20px) clamp(14px,1.55cqw,25px);
  }
}

/* Speels verdeeld in plaats van vier keer strak in de hoek. De plekken zijn
   zo gekozen dat (1) de lijnen elkaar niet kruisen, (2) geen kaart over een
   aanklikbaar punt valt en (3) niets onder de merkplaat linksonder komt.
   De meetwaarden staan in LEESMIJ.md. */
/* zakt net onder de balk door, zodat het kruisje vrij blijft */
.kaart[data-hoek="links-boven"]  { inset-block-start:15.5%; inset-inline-start:3%; }
.kaart[data-hoek="links-onder"]  { inset-block-end:15%;   inset-inline-start:3%; }
.kaart[data-hoek="rechts-boven"] { inset-block-start:13%; inset-inline-end:2%; }
/* Vanaf de bovenkant vastgezet in plaats van de onderkant: zo blijft deze
   kaart op elk schermformaat onder het velg-punt beginnen, ook als hij op een
   laag scherm relatief hoger wordt. */
.kaart[data-hoek="rechts-onder"] { inset-block-start:60%;  inset-inline-end:2%; }

/* Ruiten heeft vijf regels en werd daardoor de langste kaart; iets breder
   betekent minder afbreking en dus genoeg ruimte voor de kaart eronder. */
#k-ruiten{ inline-size:clamp(272px, 32cqw, 800px); }

.kaart__kop{ display:flex; align-items:center; gap:8px; margin:0 0 7px; padding-inline-start:38px; }
.kaart__kop .ico{ inline-size:clamp(18px,1.5cqw,24px); block-size:clamp(18px,1.5cqw,24px); color:var(--blauw-licht); flex:none; }
.kaart__kop h3{
  font-family:var(--display); font-weight:700; font-stretch:108%;
  font-size:clamp(.86rem,.98cqw,1.12rem); letter-spacing:-.01em; text-transform:uppercase;
}
.kaart .prijzen{ gap:0; }
.kaart .regel{ padding:clamp(4px,.36cqw,7px) 0; gap:10px; }
.kaart .regel dt{ font-size:clamp(.8rem,.88cqw,1rem); font-weight:500; }
.kaart .regel dt span{ font-size:clamp(.68rem,.74cqw,.85rem); }
.kaart .regel dd{ font:600 clamp(.86rem,.93cqw,1.06rem)/1 var(--mono); }
.kaart .dd--op{ font-size:clamp(.64rem,.7cqw,.8rem) !important; }
.kaart__voet{ margin:7px 0 0; font-size:clamp(.7rem,.74cqw,.86rem); line-height:1.4; color:var(--ink-3); }

/* Het kruisje: het aantikvlak is 44 px, maar alleen de cirkel zelf kleurt
   rood — dus pas als je er met de muis ín staat, niet ernaast. */
.kaart__dicht{
  /* z-index hoger dan de kop: .glas > * zet alle kinderen op 3, waardoor de
     titelregel anders over de knop heen ligt en de klik opvangt. */
  position:absolute; z-index:6;
  inset-block-start:4px; inset-inline-start:4px;
  inline-size:44px; block-size:44px;
  display:grid; place-items:center;
  background:none; color:var(--ink);
}
.kaart__ring{
  inline-size:30px; block-size:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  transition:background-color .18s var(--soepel), box-shadow .18s var(--soepel), color .18s;
}
.kaart__ring svg{
  inline-size:13px; block-size:13px;
  fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round;
}
.kaart__ring:hover,
.kaart__dicht:focus-visible .kaart__ring{
  background:#D62828; color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 4px 16px -4px rgba(214,40,40,.9);
}
.kaart__ring:active{ background:#B01F1F; }

/* het punt zelf licht op zolang zijn kaart openstaat */
.punt.aan .punt__stip{ background:#fff; transform:scale(1.1); }
.punt.aan .punt__stip::after{ opacity:1; transform:scale(1); }
.punt.aan .punt__stip::before{ animation:none; opacity:0; }

/* ── 10 · PLATEN · tarieven & contact ───────────────────────────────────── */
.rooster{
  display:grid; gap:var(--s-2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
@media (min-width:900px){ .rooster{ grid-template-columns:repeat(2,1fr); } }
.rooster--2{ grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); align-items:start; }
.kolom{ display:grid; gap:var(--s-2); align-content:start; }

/* Titelplaat van de lange bladen: zelfde vorm, padding en tussenruimte als de
   vakken eronder, zodat hij als eerste kaart van het raster meeleest. */
.werk__kop{
  padding:clamp(24px,2.6vw,38px);
  margin-block-end:var(--s-2);
  border-radius:var(--rond);
}
.werk__kop .etiket{ margin-block-end:8px; }
.werk__kop .lood{ margin-block-start:10px; max-inline-size:62ch; }

.plaat{ padding:clamp(24px,2.6vw,38px); }
.plaat__kop{ display:flex; align-items:center; gap:12px; margin-block-end:12px; }
.plaat__kop h3{
  font-family:var(--display); font-weight:700; font-stretch:110%;
  font-size:1.3rem; letter-spacing:-.012em; text-transform:uppercase;
}
.plaat__uitleg{ margin:0 0 var(--s-3); color:var(--ink-2); font-size:1.02rem; }
.plaat__voet{ margin:var(--s-2) 0 0; color:var(--ink-3); font-size:.84rem; }

.prijzen{ margin:0; display:grid; gap:2px; }
.regel{
  display:flex; align-items:baseline; gap:var(--s-2);
  padding:12px 0;
  border-block-start:1px solid rgba(255,255,255,.08);
}
.regel:first-child{ border-block-start:0; }
.regel dt{ flex:1; font-weight:500; font-size:1.04rem; }
.regel dt span{ display:block; color:var(--ink-3); font-size:.88rem; font-weight:400; }
.regel dd{
  margin:0; flex:none;
  font:600 1.14rem/1 var(--mono); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.dd--op{ font-size:.74rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--blauw-tekst) !important; }

/* ── Galerij · uitgevoerd werk ──────────────────────────────────────────
   Negen plekken in een raster van drie. Een leeg vak toont alleen zijn
   nummer; zodra er een <img> in staat, valt dat vanzelf weg.            */
.vakken{
  display:grid; gap:clamp(8px,1vw,14px);
  grid-template-columns:repeat(3,1fr);
}
.vak{
  position:relative; margin:0;
  aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--rond-s);
  background:rgba(12,18,27,.4);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  display:grid; place-items:center;
}
/* streepjesrand als teken dat de plek nog vrij is */
.vak:not(.vak--vol)::after{
  content:""; position:absolute; inset:8px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:calc(var(--rond-s) - 4px);
  pointer-events:none;
}
.vak__nr{
  font:500 clamp(.8rem,1.1vw,1rem)/1 var(--mono);
  letter-spacing:.18em; color:var(--ink-4);
}
.vak--vol{ background:none; }
.vak--vol .vak__nr{ display:none; }
.vak img{
  /* absoluut, niet als grid-item: de rij van .vak is auto-hoog, waardoor
     block-size:100% terugvalt op auto en object-fit dus niets zou snijden */
  position:absolute; inset:0;
  inline-size:100%; block-size:100%; object-fit:cover;
  /* de foto's staan rechtop; --kader kiest welke hoogte het liggende
     vak eruit knipt (0% = bovenkant, 100% = onderkant)               */
  object-position:50% var(--kader, 50%);
  transition:transform .7s var(--soepel);
}
.vak--vol:hover img{ transform:scale(1.05); }
.vak figcaption{
  position:absolute; inset-inline:0; inset-block-end:0;
  padding:34px 13px 11px;
  /* zelfde kleur op alpha 0 — niet 'transparent', dat verloopt via zwart */
  background:linear-gradient(rgba(4,7,12,0), rgba(4,7,12,.62) 45%, rgba(4,7,12,.92));
  font:500 clamp(.62rem,.72vw,.72rem)/1.45 var(--mono);
  letter-spacing:.09em; text-transform:uppercase; color:var(--blauw-tekst);
}
.vak figcaption b{
  display:block; margin-block-end:3px;
  font:600 clamp(.86rem,1vw,1rem)/1.2 var(--ui);
  letter-spacing:.005em; text-transform:none; color:var(--ink);
}

@media (max-width:820px){ .vakken{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .vakken{ grid-template-columns:1fr; } }

.strip{
  display:flex; align-items:flex-start; gap:14px;
  margin-block-start:var(--s-2); padding:18px 22px;
  border-radius:var(--rond-s);
}
.strip .ico{ color:var(--blauw-licht); margin-block-start:2px; }
.strip p{ margin:0; font-size:.92rem; color:var(--ink-2); }
.strip strong{ color:var(--ink); }

/* contactrijen */
.lijst{ margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.rij{
  display:flex; align-items:center; gap:14px;
  padding:14px 12px; min-block-size:60px;
  border-radius:var(--rond-s);
  border-block-start:1px solid rgba(255,255,255,.08);
  transition:background-color var(--groei) var(--soepel), transform var(--snel) var(--soepel);
}
.lijst li:first-child .rij{ border-block-start:0; }
.rij .ico{ color:var(--blauw-licht); }
.rij span{ display:grid; gap:2px; min-inline-size:0; }
.rij strong{ font-weight:600; font-size:1.06rem; }
.rij em{ font-style:normal; color:var(--ink-3); font-size:.9rem;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rij:hover{ background:rgba(255,255,255,.05); transform:translateX(3px); }
.rij:hover .ico--pijl{ transform:translateX(4px); color:var(--blauw-licht); }

address{ font-style:normal; color:var(--ink-2); line-height:1.7; }

.stappen{ margin:0; padding:0; list-style:none; display:grid; gap:14px; counter-reset:s; }
.stappen li{ display:flex; gap:14px; align-items:flex-start; }
.stappen b{
  flex:none; inline-size:28px; block-size:28px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(var(--blauw-rgb),.18);
  box-shadow:inset 0 0 0 1px rgba(var(--blauw-rgb),.45);
  color:var(--blauw-tekst);
  font:600 .78rem/1 var(--mono);
}
.stappen span{ font-size:.92rem; color:var(--ink-3); }
.stappen strong{ display:block; color:var(--ink); font-weight:600; font-size:.96rem; }

/* Geen scheidingslijn boven het logo, en de ruimte eronder teruggebracht tot
   ongeveer een kwart van wat het was. */
.voet{
  margin-block-start:var(--s-4); padding-block-start:0;
  display:grid; gap:9px; justify-items:center; text-align:center;
}
/* De voettekst staat gecentreerd en het merk linksonder — op een breed scherm
   staan ze naast elkaar, dus daar mag de onderruimte weer krap. Op smal scherm
   zouden ze elkaar raken, dus daar blijft de vrije hoogte staan. */
@media (min-width:900px){
  #blad-contact{ padding-block-end:clamp(38px,6vh,72px); }
}

.voet img{ inline-size:150px; block-size:auto; aspect-ratio:758/210; object-fit:contain; align-self:center; opacity:.8; }
.voet p{ margin:0; color:var(--ink-2); font-size:.95rem; }
.voet small{ color:var(--ink-3); font:400 .78rem/1.6 var(--mono); letter-spacing:.06em; }

/* ── 11 · BALK · de glazen toolbar ──────────────────────────────────────── */
#balk{
  position:fixed; z-index:70;
  inset-block-start:var(--balk-boven);
  inset-inline:0; margin-inline:auto;
  inline-size:min(620px, calc(100vw - var(--balk-kant)*2));
  block-size:var(--balk-h);
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  align-items:stretch;
  padding:7px; border-radius:var(--rond-pil);
  /* duidelijker blauw dan het overige glas, zodat de balk eruit springt */
  background:linear-gradient(168deg, rgba(0,72,132,.62), rgba(4,26,48,.72));
  box-shadow:var(--schaduw), 0 0 0 1px rgba(var(--blauw-rgb),.34);
}
.balk__pil{
  position:absolute; z-index:1; inset-block:7px;
  inline-size:0; inset-inline-start:7px;
  border-radius:var(--rond-pil);
  /* Het actieve blad krijgt het merkblauw, met het lichtblauw als rand en
     gloed eromheen. Wit op het lichtblauw zelf haalt 4.5:1 niet, vandaar dat
     de vulling een tint dieper is dan de rand. */
  background:linear-gradient(168deg, #0B72CC, #00559C);
  box-shadow:inset 0 0 0 1px var(--blauw-licht),
             inset 0 1px 0 rgba(255,255,255,.42),
             0 6px 24px -8px rgba(var(--blauw-rgb),.95),
             0 0 22px -6px rgba(110,182,255,.55);
  transition:transform .42s var(--soepel), inline-size .42s var(--soepel);
  pointer-events:none;
}
.tab{
  position:relative; z-index:3;
  display:grid; place-items:center; gap:3px; align-content:center;
  min-inline-size:44px;
  border-radius:var(--rond-pil);
  color:var(--ink-2);
  transition:color var(--groei) var(--soepel), transform var(--snel) var(--soepel);
}
.tab span{ font:500 .7rem/1 var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.tab .ico{ inline-size:22px; block-size:22px; transition:transform var(--groei) var(--soepel); }
.tab:hover{ color:#fff; }
.tab:active{ transform:scale(.94); }
.tab.aan{ color:#fff; }
.tab.aan .ico{ color:#fff; transform:translateY(-1px); }

/* ── 12 · ONTHULLEN ─────────────────────────────────────────────────────── */
.op{ opacity:0; transform:translateY(18px); }
.zichtbaar .op{
  opacity:1; transform:none;
  transition:opacity .7s var(--soepel), transform .7s var(--soepel);
  transition-delay:calc(var(--d,0) * 90ms);
}
.op[data-op="1"]{ --d:0 } .op[data-op="2"]{ --d:1 } .op[data-op="3"]{ --d:2 }
.op[data-op="4"]{ --d:3 } .op[data-op="5"]{ --d:4 } .op[data-op="6"]{ --d:5 }

/* ── 13 · RESPONSIEF ────────────────────────────────────────────────────── */
/* heel grote schermen: laat het echt groot worden in plaats van klein in het midden */
@media (min-width:1700px){
  :root{ --pad:clamp(56px,5vw,110px); }
  .blad__in{ inline-size:min(1660px,100%); }
}

@media (max-width:900px){
  .rooster--2{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .doek{ inline-size:min(112vw, calc((100svh - 300px) * 16 / 9)); }
  /* te weinig ruimte voor vier zwevende kaarten: hier worden ze een schuifblad */
  .draden{ display:none; }
  .kaarthouder{
    position:fixed; inset:auto 10px calc(var(--merk-onder) + var(--merk-h) + 10px) 10px;
    max-block-size:52svh; overflow-y:auto; z-index:65;
    display:grid; gap:8px; align-content:end;
    scrollbar-width:none;
  }
  .kaarthouder::-webkit-scrollbar{ display:none; }
  .kaart{ position:relative; inset:auto; inline-size:auto; scale:1; }
  .kaart:not(.aan){ display:none; }
  .doek.open{ inline-size:132vw; }
  .punt__naam{ font-size:.66rem; padding:8px 12px; }
  .poort{ min-block-size:54px; font-size:.96rem; padding:0 20px; }
}
@media (max-width:640px){
  :root{ --rond:19px; --merk-b:clamp(170px,44vw,215px); }
  .blad{ padding-inline:20px; }
  .rol{ display:none; }
}
@media (max-width:400px){
  .tab span{ font-size:.6rem; letter-spacing:.07em; }
}

/* ── 14 · VOORKEUREN ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .podium__foto.aan{ animation:none; transform:scale(1.02); }
  .doek,.doek__foto,.punt,.poort{ transition:none !important; }
  #velg svg{ rotate:0deg !important; }
  .op{ opacity:1; transform:none; }
}
@media (prefers-contrast:more){
  :root{ --glas:rgba(6,10,16,.88); --glas-rand:rgba(255,255,255,.5); --ink-3:rgba(234,242,250,.72); }
  .podium__dim{ background:linear-gradient(180deg, rgba(3,6,11,.92), rgba(3,6,11,.88)); }
}