/* Kennisbank scroll-film + licht Constell-herontwerp van de homepage-secties
   Tokens: bg #E8E8E8 · kaarten #FFFFFF/#DEDEDE r12 · knoppen #1C1C1C pill · teal alleen tekstaccent */

/* ---------- de film ---------- */
#film-scroll{ position:relative; height:100vh; } /* JS zet 'film-actief' → echte scrub-hoogte */
body.film-actief #film-scroll{ height:880vh; }
#film-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:#DCD9D4; }
#film, #film-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

#film-loader{ position:fixed; inset:0; z-index:60; background:#E8E8E8; color:#1C1C1C;
  display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center;
  font-size:.9rem; transition:opacity .7s; }
#film-loader.done{ opacity:0; pointer-events:none; }
#film-loader b{ font-weight:700; font-size:1.05rem; letter-spacing:.02em; }
#film-loader .film-balk{ width:210px; height:2px; background:#CFCFCF; }
#film-loader .film-balk i{ display:block; height:100%; width:0%; background:#1C1C1C; transition:width .25s; }

#film-vignette{ position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 20vw rgba(15,10,6,.42); }
#film-grain{ position:absolute; inset:0; pointer-events:none; z-index:3; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
/* handoff: het venster bloeit wit over → de lichte site neemt over */
#film-handoff{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:0;
  background:linear-gradient(180deg, rgba(255,253,248,.25) 0%, rgba(244,242,238,.75) 55%, #E8E8E8 100%); }

/* beats */
.film-beat{ position:absolute; z-index:5; left:clamp(20px,7vw,110px); top:36vh; max-width:46ch;
  color:#fff; opacity:0; will-change:opacity,transform; }
.film-beat::before{ content:""; position:absolute; inset:-70px -90px; z-index:-1; border-radius:32px;
  background:radial-gradient(closest-side, rgba(15,10,6,.45), rgba(15,10,6,0)); }
.film-beat h2{ font-weight:800; font-size:clamp(28px,4.4vw,56px);
  line-height:1.06; letter-spacing:-.015em; text-shadow:0 2px 26px rgba(0,0,0,.55); }
.film-beat p{ margin-top:12px; font-size:clamp(15px,1.4vw,19px); opacity:.94;
  text-shadow:0 1px 14px rgba(0,0,0,.65); }
.film-beat--finale{ left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; max-width:60ch; }

/* hoofdstuk-uitlezing */
#film-readout{ position:absolute; z-index:6; left:clamp(20px,7vw,110px); bottom:34px;
  color:rgba(255,255,255,.85); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; }
#film-readout span{ display:block; margin-bottom:8px; text-shadow:0 1px 10px rgba(0,0,0,.7); }
#film-readout b{ display:block; width:180px; height:1px; background:rgba(255,255,255,.3); }
#film-readout i{ display:block; height:100%; width:0%; background:#fff; }

/* film overslaan */
#film-skip{ position:absolute; z-index:6; right:clamp(20px,4vw,48px); bottom:30px;
  color:rgba(255,255,255,.8); font-size:.8rem; text-decoration:none!important;
  border:1px solid rgba(255,255,255,.35); padding:8px 18px; border-radius:50px; backdrop-filter:blur(6px); }
#film-skip:hover{ color:#fff; border-color:rgba(255,255,255,.7); }

/* topbar: transparant bovenaan de film, daarna vast #1C1C1C */
.topbar{ position:fixed; left:0; right:0; transition:background .4s; }
body.film-boven .topbar{ background:linear-gradient(180deg, rgba(15,10,6,.5), rgba(15,10,6,0)); }

/* statische variant (prefers-reduced-motion of geen JS) */
body.film-statisch #film-scroll, body:not(.film-actief):not(.film-statisch) #film-scroll{ height:100vh; }
body.film-statisch .film-beat, body:not(.film-actief) .film-beat{ display:none; }
body.film-statisch .film-beat--finale{ display:block; opacity:1; }
body.film-statisch #film-loader{ display:none; }

/* ---------- landing: futuristisch kasteelbeeld dat uit het licht opdoemt ---------- */
.landing{ background:#E8E8E8; }
.landing--foto{ position:relative; display:flex; align-items:flex-end; min-height:96vh;
  background-image:
    linear-gradient(180deg, #E8E8E8 0%, rgba(232,232,232,0) 30%),
    linear-gradient(180deg, rgba(20,16,12,0) 34%, rgba(20,16,12,.62) 78%, rgba(20,16,12,.8) 100%),
    var(--beeld);
  background-size:cover; background-position:center 32%; }
.landing-inner{ width:min(880px,92vw); margin:0 auto; padding:128px 0 88px; text-align:center;
  position:relative; isolation:isolate; }
.landing--foto .landing-inner::before{ content:""; position:absolute; inset:40px -120px -20px;
  z-index:-1; border-radius:40px;
  background:radial-gradient(closest-side, rgba(15,10,6,.52), rgba(15,10,6,0)); }
.landing .kicker{ color:var(--teal); }
.landing--foto .kicker{ display:inline-block; background:rgba(15,10,6,.55); padding:7px 18px;
  border-radius:50px; backdrop-filter:blur(6px); }
.landing h1{ font-weight:800; font-size:clamp(2.5rem,5.6vw,4.2rem); color:#fff;
  line-height:1.05; letter-spacing:-.02em; margin:18px auto 22px; max-width:18ch;
  text-shadow:0 2px 24px rgba(0,0,0,.4); }
.landing-sub{ max-width:56ch; margin:0 auto; font-size:clamp(1rem,1.4vw,1.18rem); color:#fff;
  opacity:.95; text-shadow:0 1px 14px rgba(0,0,0,.5); }
.landing-gerust{ margin-top:14px; color:rgba(255,255,255,.85); font-size:.98rem;
  text-shadow:0 1px 12px rgba(0,0,0,.5); }
.landing .hero-ctas{ justify-content:center; margin-top:32px; }
.landing--foto .btn-ghost{ border-color:rgba(255,255,255,.6); color:#fff; }
.landing--foto .btn-ghost:hover{ border-color:#fff; }
.landing-trust{ margin-top:28px; font-size:.85rem; color:rgba(255,255,255,.75); }

/* ---------- de route (zes hoofdstukken, ruim en rustig) ---------- */
.route{ width:min(1120px,94vw); margin:0 auto; padding:64px 0 40px; }
.route-kop{ text-align:center; margin-bottom:24px; }
.route-kop h2{ font-weight:800; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.01em; }
.route-kop p{ color:var(--ink-soft); margin-top:10px; }
.route-rij{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;
  padding:clamp(36px,5vw,64px) 0; }
.route-rij:nth-child(even){ direction:rtl; }
.route-rij:nth-child(even) > *{ direction:ltr; }
.route-beeld{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/10;
  border:1px solid var(--rand); background:#fff; }
.route-beeld img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.6,.2,1); }
.route-rij:hover .route-beeld img{ transform:scale(1.04); }
.route-nr{ position:absolute; top:14px; left:16px; font-size:.85rem; font-weight:700;
  color:#1C1C1C; background:rgba(255,255,255,.92); padding:4px 14px; border-radius:50px; }
.route-tekst .kicker{ display:block; margin-bottom:8px; color:var(--teal-donker); }
.route-tekst h3{ font-weight:800; font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.12; letter-spacing:-.01em; }
.route-tekst p{ color:#3A3A3A; margin:12px 0 16px; max-width:44ch; }
.route-tekst .hfst-pijl{ font-size:.95rem; }

/* ---------- tips-carousel ---------- */
.tips-sectie{ padding-top:24px; }
.tips{ margin-top:8px; }
.tips-track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; border-radius:12px; }
.tips-track::-webkit-scrollbar{ display:none; }
.tips-track:focus-visible{ outline:2px solid #1C1C1C; outline-offset:4px; }
.tip{ flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--kaart); border:1px solid var(--rand); border-radius:12px; overflow:hidden; }
.tip-beeld{ min-height:320px; }
.tip-beeld img{ width:100%; height:100%; object-fit:cover; }
.tip-body{ padding:clamp(26px,3.5vw,44px); display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center; gap:12px; }
.tip-body .kicker{ color:var(--teal-donker); }
.tip-body h3{ font-weight:800; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.15; letter-spacing:-.01em; }
.tip-body > p{ color:#3A3A3A; font-size:.98rem; margin:0; }
.tip-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tip-tijd{ font-size:.82rem; font-weight:700; border:1px solid #CCCCCC; border-radius:50px;
  padding:5px 14px; color:var(--ink); }
.tip-winst{ font-size:.82rem; font-weight:700; border-radius:50px; padding:6px 14px;
  background:#5ECFBF; color:#fff; }
.tip-scheelt{ color:var(--ink-soft); font-size:.94rem; margin:0; }
.tip-scheelt strong{ color:var(--ink); }
.tips-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:18px; }
.tips-pijl{ font:inherit; font-size:1rem; font-weight:700; width:42px; height:42px; border-radius:50%;
  border:0; background:#1C1C1C; color:#fff; cursor:pointer; }
.tips-pijl:hover{ background:#333; }
.tips-dots{ display:flex; gap:8px; }
.tips-dots button{ width:9px; height:9px; border-radius:50%; border:0; background:#C6C6C6;
  cursor:pointer; padding:0; }
.tips-dots button.on{ background:#1C1C1C; }

/* ---------- overige secties ---------- */
.sectie--film{ padding-top:72px; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.6,.2,1); }
.reveal.zichtbaar{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

@media (max-width:860px){
  .route-rij{ grid-template-columns:1fr; }
  .route-rij:nth-child(even){ direction:ltr; }
  .film-beat{ top:30vh; right:20px; }
  #film-readout{ display:none; }
  .landing-inner{ padding:96px 0 72px; }
  .landing--foto{ background-image:
    linear-gradient(180deg, #E8E8E8 0%, rgba(232,232,232,0) 26%),
    linear-gradient(180deg, rgba(20,16,12,0) 30%, rgba(20,16,12,.66) 74%, rgba(20,16,12,.82) 100%),
    var(--beeld-m); background-position:center 30%; }
  .tip{ grid-template-columns:1fr; }
  .tip-beeld{ min-height:0; aspect-ratio:16/10; }
}