/* ===== RIJMBOS SIGNATUUR — gedeelde designlaag voor ontwerp 2 en 3 ===== */
:root{--sig-bg:#fff;--sig-lijn:rgba(255,255,255,.9);--sig-panel:#1D1D1F}
body[data-naam="Ontwerp 3"]{--sig-bg:#0A0A0B;--sig-panel:#0A0A0B}

/* 1. Het huis als rode draad: sticky hero die inzoomt en een ingelijst beeld wordt */
.hero-reis{position:relative;height:230vh;background:var(--sig-bg)}
.hero-reis .hero{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden;background-color:transparent}
.hero-reis .hero .beeld{position:absolute;inset:0;overflow:hidden;clip-path:inset(calc(var(--p,0)*9vh) calc(var(--p,0)*7vw) calc(var(--p,0)*9vh) calc(var(--p,0)*7vw) round calc(var(--p,0)*28px));will-change:clip-path}
.hero-reis .hero .beeld video,.hero-reis .hero .beeld .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--p,0)*.16));transform-origin:50% 62%;will-change:transform}
.hero-reis .hero .beeld .still{background-size:cover;background-position:center}
.hero-reis .hero .beeld::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,calc(.18 + var(--p,0)*.22));pointer-events:none}
.hero-reis .hero::after{display:none}
.hero-reis .hero .inhoud{opacity:calc(1 - var(--p,0)*2.4);transform:translateY(calc(var(--p,0)*-60px));will-change:transform,opacity}
.embleem-lijn{position:absolute;z-index:3;left:50%;top:50%;width:min(24vw,210px);transform:translate(-50%,-50%);pointer-events:none;opacity:calc((var(--p,0) - .28)*3)}
.embleem-lijn path{fill:rgba(255,255,255,calc((var(--p,0) - .72)*2.2));stroke:var(--sig-lijn);stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - (var(--p,0) - .3)*2.2)}
.adres-tag{position:absolute;z-index:3;left:0;right:0;bottom:calc(9vh + 26px);text-align:center;color:#fff;font-size:12px;letter-spacing:.32em;text-transform:uppercase;opacity:calc((var(--p,0) - .62)*3);margin:0}
.scrollhint{position:absolute;z-index:3;left:50%;bottom:34px;transform:translateX(-50%);width:1px;height:56px;background:rgba(255,255,255,.35);overflow:hidden;opacity:calc(1 - var(--p,0)*4)}
.scrollhint::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:sig-drup 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes sig-drup{to{top:100%}}

/* subpagina-hero: rustige parallax */
.hero.sub video,.hero.sub .still{transform:scale(calc(1.04 + var(--q,0)*.1)) translateY(calc(var(--q,0)*6%));will-change:transform}

/* 2. Koppen die regel per regel uit een masker opstijgen */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i)*55ms)}
.split.in .w>span{transform:none}

/* 3. Tekst die zich woord per woord invult tijdens het scrollen */
.woordvul .wv{opacity:.18;transition:opacity .25s linear}
.woordvul .wv.aan{opacity:1}

/* 4. Portretten die openen in de cirkel van het embleem */
.cirkel{overflow:hidden;clip-path:circle(0% at 50% 42%);transition:clip-path 1.6s cubic-bezier(.19,1,.22,1)}
.cirkel img{transform:scale(1.14);transition:transform 2.2s cubic-bezier(.19,1,.22,1)}
.cirkel.in{clip-path:circle(75% at 50% 42%)}
.cirkel.in img{transform:none}
.persoon .cirkel,.profiel .cirkel{border-radius:inherit}
body[data-naam="Ontwerp 2"] .cirkel{border-radius:28px}

/* 5. Woordband: blijft staan en schuift horizontaal tot de volledige zin gelezen is */
.woordband{position:relative;background:var(--sig-bg);pointer-events:none}
.wb-plak{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.woordband span{display:inline-block;white-space:nowrap;padding:0 6vw;font-family:"Inter Tight",Geist,sans-serif;font-weight:600;font-size:clamp(64px,10vw,170px);letter-spacing:-.045em;line-height:1;transform:translateX(calc(var(--x,0)*-1px));will-change:transform;color:transparent;-webkit-text-stroke:1px rgba(29,29,31,.28)}
body[data-naam="Ontwerp 3"] .woordband span{-webkit-text-stroke:1px rgba(255,255,255,.25)}
.woordband b{font-weight:600;color:rgba(29,29,31,.9);-webkit-text-stroke:0}
body[data-naam="Ontwerp 3"] .woordband b{color:#F5F5F7}

/* 6. Expertise: vaste inhoudstafel met voortgangslijn (scrollspy) */
.exp{padding:120px 0 140px}
.exp-grid{display:grid;grid-template-columns:300px 1fr;gap:90px;align-items:start}
.exp-nav{position:sticky;top:110px}
.exp-nav ol{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.exp-nav .spoor{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(128,128,128,.28)}
.exp-nav .spoor i{position:absolute;left:0;top:0;width:1px;height:calc(var(--v,0)*100%);background:currentColor}
.exp-nav li a{display:block;padding:9px 0;font-size:15px;opacity:.42;transition:opacity .3s,transform .4s cubic-bezier(.19,1,.22,1)}
.exp-nav li a.actief{opacity:1;transform:translateX(6px);font-weight:500}
.exp-nav .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin:0 0 22px}
.exp-art{padding:0 0 110px;scroll-margin-top:120px;min-height:52vh}
.exp-art:last-child{padding-bottom:0;min-height:0}
.exp-art .nr{font-size:13px;letter-spacing:.2em;opacity:.45;margin:0 0 18px;font-variant-numeric:tabular-nums}
.exp-art h2{font-size:clamp(34px,3.6vw,54px);line-height:1.04;margin:0 0 30px}
.exp-art p{margin:0;font-size:20px;line-height:1.6;max-width:680px}

/* 7. Links die tekenen i.p.v. verkleuren */
.lijnlink{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s cubic-bezier(.19,1,.22,1);padding-bottom:3px}
.lijnlink:hover{background-size:100% 1px}


/* 9. Paginaovergang: paneel met embleem */
.sig-overgang{position:fixed;inset:0;z-index:80;background:var(--sig-panel);display:flex;align-items:center;justify-content:center;transform:translateY(0);transition:transform .9s cubic-bezier(.77,0,.18,1);pointer-events:none}
.sig-overgang img{width:54px;opacity:.9}
.sig-overgang.weg{transform:translateY(-100%)}
.sig-overgang.onder{transform:translateY(100%);transition:none}

@media (max-width:834px){
  .hero-reis{height:175vh}
  .embleem-lijn{width:120px}
  .exp-grid{grid-template-columns:1fr;gap:10px}
  .exp-nav{position:sticky;top:56px;z-index:5;background:var(--sig-bg);margin:0 -22px;padding:12px 22px;overflow-x:auto;white-space:nowrap}
  .exp-nav ol{padding:0;display:flex;gap:18px}
  .exp-nav .spoor,.exp-nav .label{display:none}
  .exp-nav li a{padding:4px 0;font-size:14px}
  .exp-nav li a.actief{transform:none}
  .exp-art{min-height:0;padding:40px 0 30px}
  .exp-art p{font-size:18px}
  .woordband span{font-size:clamp(52px,15vw,90px)}
  .rustig .wb-plak{padding:60px 0}
}
@media (prefers-reduced-motion:reduce){
  .hero-reis{height:auto}.hero-reis .hero{position:relative}
  .split .w>span,.cirkel,.cirkel img{transition:none;transform:none;clip-path:none}
  .woordvul .wv{opacity:1}
  .sig-overgang{display:none}
}

/* RUSTIGE VERSIE: zelfde ontwerp, zonder scroll-effecten */
.rustig .hero-reis{height:auto}
.rustig .hero-reis .hero{position:relative;height:100vh}
.rustig .hero-reis .hero .beeld{clip-path:none}
.rustig .hero-reis .hero .beeld video,.rustig .hero-reis .hero .beeld .still{transform:none}
.rustig .embleem-lijn,.rustig .adres-tag{display:none}
.rustig .hero-reis .hero .inhoud{opacity:1;transform:none}
.rustig .hero.sub video{transform:none}
.rustig .split .w>span{transform:none;transition:none}
.rustig .woordvul .wv{opacity:1}
.rustig .cirkel{clip-path:none;transition:none}.rustig .cirkel img{transform:none;transition:none}
.rustig .woordband{height:auto!important}.rustig .wb-plak{position:static;height:auto;padding:90px 0;justify-content:center}.rustig .woordband span{transform:none;white-space:normal;text-align:center;font-size:clamp(40px,6.4vw,104px);line-height:1.05;max-width:1200px}
.rustig .sig-overgang{display:none}
/* in de gsm-voorbeelden op het overzicht: zonder previewbalk */
.kaal .pbalk,.kaal .plabel,.kaal .balk,.kaal .o1balk{display:none!important}

/* geen zichtbare scrollbalk op smartphones en in de gsm-voorbeelden */
@media (max-width:834px){html{scrollbar-width:none}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}}
.kaal{scrollbar-width:none}.kaal::-webkit-scrollbar,.kaal body::-webkit-scrollbar{display:none;width:0;height:0}
.exp-nav{scrollbar-width:none}.exp-nav::-webkit-scrollbar{display:none}