/* ═══════════════════════════════════════════════════════════════
   VE-STORY v3 — "HELDER"
   Signatuur-ervaring rond de slogan: 't Beste, da's helder.
   · Condens-intro: beslagen ruit die schoongeveegd wordt
   · Glaslens-cursor die content verheldert
   · Prisma-glans over gouden CTA's
   · Memorial-defog: condens trekt op terwijl je leest
   + alle Director's Cut cinema (woordmaskers, hero-scrollcinema,
     kleur-aktes, magnetische knoppen, sticky CTA, velocity-lookbook)
   Zonder JS: site identiek. prefers-reduced-motion: alles uit.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --vs-gold:#C8A96D;
  --vs-gold-l:#e0c894;
  --vs-navy:#0E2236;
  --vs-navy-d:#08141f;
  --vs-ease:cubic-bezier(.22,.61,.36,1);
  --vs-ease-out:cubic-bezier(.16,1,.3,1);
}

/* ══════════ DE BESLAGEN RUIT (intro) ══════════ */
.vs-fogwrap{position:fixed;inset:0;z-index:100000;pointer-events:none}
.vs-fogblur{position:absolute;inset:0;
  -webkit-backdrop-filter:blur(14px) saturate(.85) brightness(1.06);
  backdrop-filter:blur(14px) saturate(.85) brightness(1.06);
  transition:opacity .9s ease;background:rgba(250,250,247,.06)}
.vs-fogcanvas{position:absolute;inset:0;width:100%;height:100%}
.vs-fogquote{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-size:clamp(28px,4.6vw,58px);color:var(--vs-navy);text-align:center;
  letter-spacing:.01em;white-space:nowrap;opacity:0;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  animation:vsQuoteIn 1s var(--vs-ease-out) .35s forwards}
.vs-fogquote small{display:block;font-family:'Inter',sans-serif;font-style:normal;
  font-size:clamp(10px,1.1vw,13px);letter-spacing:.35em;margin-top:14px;
  color:rgba(14,34,54,.55);text-transform:uppercase}
@keyframes vsQuoteIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.vs-fogquote.vs-out{animation:vsQuoteOut .7s ease forwards}
@keyframes vsQuoteOut{to{opacity:0;filter:blur(4px)}}
.vs-fogwrap.vs-done{opacity:0;transition:opacity .8s ease}

/* Hero-entree wacht op de veeg: pas bij .vs-ready start de scène */
.vs-on .hero-tag,.vs-on .hero-sub,.vs-on .hero-cta-row,.vs-on .hero-stats{opacity:0}
.vs-on.vs-ready .hero-tag{animation:vsUp 1.1s var(--vs-ease-out) .1s forwards}
.vs-on.vs-ready .hero-sub{animation:vsUp 1.1s var(--vs-ease-out) .95s forwards}
.vs-on.vs-ready .hero-cta-row{animation:vsUp 1.1s var(--vs-ease-out) 1.25s forwards}
.vs-on.vs-ready .hero-stats{animation:vsUp 1.1s var(--vs-ease-out) 1.5s forwards}
@keyframes vsUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* ══════════ FILMTITEL-TYPOGRAFIE ══════════ */
.vs-on .vs-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.vs-on .vs-w>span{display:inline-block;transform:translateY(115%);
  transition:transform 1s var(--vs-ease-out);transition-delay:calc(var(--vs-wi,0)*70ms)}
.vs-on .vs-in .vs-w>span{transform:none}
/* H1 wacht op de veeg */
.vs-on .hero-h1 .vs-w>span{transition:none;transform:translateY(115%)}
.vs-on.vs-ready .hero-h1 .vs-w>span{
  transition:transform 1.1s var(--vs-ease-out);
  transition-delay:calc(.25s + var(--vs-wi,0)*120ms);transform:none}

/* ══════════ HERO SCROLL-CINEMA (--vs-hp 0→1) ══════════ */
.vs-on .hero-media{overflow:hidden}
.vs-on .hero-media video{
  transform:scale(calc(1 + var(--vs-hp,0)*.18)) translateY(calc(var(--vs-hp,0)*40px));
  will-change:transform}
.vs-on .hero-media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 30% 40%,transparent 30%,rgba(8,20,31,.85) 100%);
  opacity:var(--vs-hp,0)}
.vs-on .hero-text{
  transform:translateY(calc(var(--vs-hp,0)*-90px));
  opacity:calc(1 - var(--vs-hp,0)*1.35);
  will-change:transform,opacity}
.vs-on .hero-stats{
  transform:translateY(calc(var(--vs-hp,0)*-40px))}

/* ══════════ SCROLL-VOORTGANG ══════════ */
.vs-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:99999;pointer-events:none;
  background:linear-gradient(90deg,rgba(200,169,109,.4),var(--vs-gold))}
.vs-progress::after{content:'';position:absolute;right:-1px;top:-3px;width:8px;height:8px;border-radius:50%;
  background:var(--vs-gold-l);box-shadow:0 0 12px 3px rgba(200,169,109,.8)}

/* ══════════ REVEAL-SYSTEEM ══════════ */
.vs-on .vs-r{opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--vs-ease),transform .9s var(--vs-ease)}
.vs-on .vs-r.vs-in{opacity:1;transform:none}
.vs-on .vs-stag>*{opacity:0;transform:translateY(30px) scale(.985);
  transition:opacity .85s var(--vs-ease),transform .85s var(--vs-ease);
  transition-delay:calc(var(--vs-i,0)*110ms)}
.vs-on .vs-stag.vs-in>*{opacity:1;transform:none}

/* ══════════ KLEUR-AKTES: bioscoop-dim bij memorial ══════════ */
.vs-tint{position:fixed;inset:0;pointer-events:none;z-index:9980;
  background:transparent;transition:background 1.4s ease,box-shadow 1.4s ease}
.vs-on[data-akte="hart"] .vs-tint{
  background:rgba(8,20,31,.2);
  box-shadow:inset 0 0 30vmin 10vmin rgba(8,20,31,.5)}

/* ══════════ MEMORIAL: condens keert terug en trekt op ══════════ */
.vs-on #verhaal{position:relative}
.vs-defog{position:absolute;inset:0;pointer-events:none;z-index:5;
  -webkit-backdrop-filter:blur(calc(var(--vs-df,0)*5px)) brightness(1.03);
  backdrop-filter:blur(calc(var(--vs-df,0)*5px)) brightness(1.03);
  background:rgba(250,250,247,calc(var(--vs-df,0)*.05))}
.vs-on #verhaal .vs-r{transition-duration:1.5s}
.vs-on #verhaal .vs-w>span{transition-duration:1.3s;transition-delay:calc(var(--vs-wi,0)*120ms)}
.vs-on #verhaal img{transition:transform 10s var(--vs-ease)}
.vs-on #verhaal.vs-seen img{transform:scale(1.045)}
.vs-on .vs-c{opacity:0;transition:opacity .5s ease;transition-delay:calc(var(--vs-ci,0)*45ms)}
.vs-on .vs-in .vs-c{opacity:1}

/* ══════════ GLASLENS-CURSOR (desktop) ══════════ */
@media(hover:hover) and (pointer:fine){
  .vs-lens{position:fixed;top:0;left:0;z-index:99996;pointer-events:none;
    width:110px;height:110px;border-radius:50%;
    border:1px solid rgba(200,169,109,.5);
    -webkit-backdrop-filter:brightness(1.08) contrast(1.04) saturate(1.18);
    backdrop-filter:brightness(1.08) contrast(1.04) saturate(1.18);
    box-shadow:inset 0 0 22px rgba(255,255,255,.12),0 0 1px rgba(200,169,109,.4);
    transition:width .35s var(--vs-ease),height .35s var(--vs-ease),border-color .35s,opacity .4s;
    opacity:0}
  .vs-on.vs-ready .vs-lens{opacity:1}
  .vs-on.vs-hovering .vs-lens{width:64px;height:64px;border-color:var(--vs-gold);
    -webkit-backdrop-filter:brightness(1.12) saturate(1.3);
    backdrop-filter:brightness(1.12) saturate(1.3)}
}

/* ══════════ PRISMA-GLANS over gouden CTA's ══════════ */
.vs-on .vs-prisma{position:relative;overflow:hidden}
.vs-on .vs-prisma::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-30%;width:34%;
  background:linear-gradient(105deg,transparent 0%,
    rgba(255,255,255,.18) 30%,
    rgba(255,240,220,.5) 47%,
    rgba(200,230,255,.32) 53%,
    rgba(255,255,255,.15) 70%,transparent 100%);
  transform:skewX(-18deg) translateX(-160%);pointer-events:none}
.vs-on .vs-prisma:hover::after{animation:vsPrisma .9s var(--vs-ease)}
@keyframes vsPrisma{from{transform:skewX(-18deg) translateX(-160%)}to{transform:skewX(-18deg) translateX(520%)}}

/* ══════════ MAGNETISCH + kaart-lift + focus ══════════ */
.vs-on .vs-mag{transition:box-shadow .35s var(--vs-ease)!important;will-change:transform}
.vs-on .vs-mag:hover{box-shadow:0 14px 40px rgba(200,169,109,.4),0 4px 12px rgba(14,34,54,.3)!important}
.vs-on #glasadvies .vs-stag>*:hover,
.vs-on #glastypen .vs-stag>*:hover,
.vs-on #subsidie .vs-stag>*:hover,
.vs-on #groep .vs-stag>*:hover{
  transform:translateY(-6px)!important;
  box-shadow:0 22px 50px rgba(14,34,54,.18);
  transition:transform .45s var(--vs-ease),box-shadow .45s var(--vs-ease)}
.vs-on input:focus,.vs-on select:focus,.vs-on textarea:focus{
  outline:none!important;border-color:var(--vs-gold)!important;
  box-shadow:0 0 0 3px rgba(200,169,109,.28)!important}

/* ══════════ LOOKBOOK edge-fades ══════════ */
.vs-on #projecten [class*=lb]{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* ══════════ STICKY OFFERTE-KNOP (glasmorf) ══════════ */
.vs-cta{position:fixed;right:22px;bottom:22px;z-index:9990;display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,rgba(14,34,54,.88),rgba(26,49,72,.88));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#FAFAF7;text-decoration:none;
  font:600 15px/1 'Inter',system-ui,sans-serif;padding:15px 22px;border-radius:999px;
  border:1px solid rgba(200,169,109,.55);
  box-shadow:0 8px 30px rgba(14,34,54,.45);
  opacity:0;transform:translateY(18px) scale(.94);pointer-events:none;
  transition:opacity .5s var(--vs-ease),transform .5s var(--vs-ease),box-shadow .35s var(--vs-ease)}
.vs-cta .vs-dot{width:8px;height:8px;border-radius:50%;background:var(--vs-gold);
  box-shadow:0 0 10px var(--vs-gold);animation:vsPulse 2.4s infinite}
@keyframes vsPulse{50%{opacity:.35}}
.vs-cta.vs-show{opacity:1;transform:none;pointer-events:auto}
.vs-cta:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(14,34,54,.55),0 0 28px rgba(200,169,109,.4)}
@media(max-width:640px){.vs-cta{right:14px;bottom:14px;padding:13px 18px;font-size:14px}}

/* ══════════ GORDIJN naar memorial ══════════ */
.vs-on #verhaal{clip-path:inset(4% 3% 0 3% round 24px 24px 0 0);
  transition:clip-path 1.1s var(--vs-ease-out)}
.vs-on #verhaal.vs-seen{clip-path:inset(0 0 0 0 round 0)}

/* ══════════ MOBIEL lichter ══════════ */
@media(max-width:768px){
  .vs-on .hero-media video{transform:scale(calc(1 + var(--vs-hp,0)*.08))}
  .vs-on #verhaal{clip-path:none;transition:none}
  .vs-fogquote{white-space:normal;width:86vw}
}

/* ══════════ REDUCED MOTION: alles uit ══════════ */
@media(prefers-reduced-motion:reduce){
  .vs-fogwrap{display:none!important}
  .vs-on .vs-r,.vs-on .vs-stag>*,.vs-on .vs-w>span,.vs-on .vs-c{
    opacity:1!important;transform:none!important;transition:none!important}
  .vs-on .hero-tag,.vs-on .hero-sub,.vs-on .hero-cta-row,.vs-on .hero-stats,
  .vs-on.vs-ready .hero-tag,.vs-on.vs-ready .hero-sub,
  .vs-on.vs-ready .hero-cta-row,.vs-on.vs-ready .hero-stats{
    animation:none!important;opacity:1!important;transform:none!important}
  .vs-on .hero-media video{transform:none!important}
  .vs-on .hero-text{transform:none!important;opacity:1!important}
  .vs-on #verhaal{clip-path:none!important}
  .vs-progress,.vs-lens{display:none!important}
  .vs-defog{display:none!important}
  .vs-tint{transition:none;background:transparent!important;box-shadow:none!important}
  .vs-on .vs-prisma::after{display:none}
}