/* =========================================================================
   WatIsMijnZaakWaard.nl — stijl voor beweging, 3D en interactie
   Aanvulling op site.css. Alles hier is optioneel: zonder JavaScript of bij
   "beperk beweging" blijft de gewone site staan.
   ========================================================================= */

/* ---------- zacht scrollen (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- paginaovergang tussen pagina's (waar de browser het kan) ---------- */
@view-transition{navigation:auto}
header.site{view-transition-name:kop}
::view-transition-old(root){animation:vt-uit .22s ease both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-uit{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* ---------- niets laten flitsen vóór de intro ---------- */
.fxp .hero .badge,.fxp .hero h1,.fxp .hero .lead,.fxp .hero .geen,.fxp .hero .cta-row,.fxp .hero .gratisregel,
.fxp .hero .trust,.fxp .hero .card-result,.fxp .hero .stats,.fxp .pagekop .wrap{visibility:hidden}

/* gesplitste tekst: ruimte voor staartjes (g, j, p) binnen het masker */
.sw-mask,.sl-mask{padding-bottom:.1em;margin-bottom:-.1em}
.sw{will-change:transform}

/* kantelende elementen tijdens het inschuiven mogen nooit een horizontale scrollbalk geven */
.fx main{overflow-x:clip}

/* ---------- voortgangslijn bovenin ---------- */
.scrollbar{display:none}
.fx .scrollbar{display:block;position:fixed;left:0;right:0;top:0;height:2px;z-index:300;pointer-events:none}
.scrollbar span{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal),var(--lime));box-shadow:0 0 10px rgba(31,199,169,.6)}

/* ---------- korrel op donkere vlakken (tegen kleurbanden, geeft diepte) ---------- */
.band::after,.pagekop::after,footer.site::after,.hero-3d .korrel{content:"";position:absolute;inset:0;pointer-events:none;
  background:url(../img/grain.png);opacity:.075;mix-blend-mode:overlay;z-index:0}
footer.site{position:relative;overflow:hidden}
footer.site > .wrap{position:relative;z-index:1}

/* =========================================================================
   HERO MET 3D
   ========================================================================= */
.hero-3d{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.8s ease}
.hero-3d canvas.klaar{opacity:1}
.hero-3d::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(5,39,34,.96) 0%,rgba(5,39,34,.86) 26%,rgba(5,39,34,.35) 50%,rgba(5,39,34,0) 68%)}
.hero-3d .korrel{z-index:2}
.hero::before{opacity:.28}
@media(max-width:960px){
  .hero-3d::after{background:linear-gradient(180deg,rgba(5,39,34,.97) 0%,rgba(5,39,34,.9) 42%,rgba(5,39,34,.35) 64%,rgba(5,39,34,.2) 80%,rgba(5,39,34,.7) 100%)}
}
.hero-3d.geen-3d canvas{display:none}

/* onderstreping onder "waard" */
.hero h1 .hl{position:relative;display:inline-block}
.hero h1 .hl::after{content:"";position:absolute;left:.02em;right:.04em;bottom:.02em;height:.085em;border-radius:1em;
  background:linear-gradient(90deg,var(--teal),var(--lime));transform:scaleX(var(--u,1));transform-origin:0 50%;
  box-shadow:0 0 18px rgba(110,224,30,.35)}
.fx .hero h1 .hl{--u:0}

/* voorbeeldkaart: diepte en lichtreflectie */
.fx .card-result{will-change:transform;transform-style:preserve-3d}
.card-result .glans{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  mix-blend-mode:soft-light}
.hero:hover .card-result .glans{opacity:1}
.card-result{backdrop-filter:none}

/* =========================================================================
   MICRO-INTERACTIES
   ========================================================================= */
/* lichtvlek die de muis volgt */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(31,199,169,.14),transparent 55%)}
.spot:hover::after{opacity:1}
.band .spot::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(31,199,169,.22),transparent 55%)}
/* GSAP beweegt deze elementen; een CSS-overgang op transform zou daarmee botsen */
.fx .btn,.fx .card,.fx .fitcard,.fx .acard,.fx .dlitem,.fx .fstep,.fx .step,.fx .vrow{transition-property:background,border-color,box-shadow,color}
.fx .btn:hover,.fx .btn:active,.fx .card:hover,.fx .acard:hover,.fx .dlitem:hover{transform:none}
.fx .card,.fx .fitcard,.fx .acard,.fx .dlitem{transition:border-color .3s ease,box-shadow .35s ease,background .3s ease}
.fx .card:hover,.fx .fitcard:hover{border-color:var(--teal-line);box-shadow:var(--sh-2)}
.fx .band .card:hover{border-color:rgba(31,199,169,.45)}
.fx .card .ico{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s ease}
.fx .card:hover .ico{transform:translateY(-3px) rotate(-6deg)}

/* knoppen: glans die langs schuift bij hover */
.fx .btn-cta{overflow:hidden;will-change:transform}
.fx .btn-cta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));transform:skewX(-18deg);
  transition:left .7s cubic-bezier(.2,.8,.2,1)}
.fx .btn-cta:hover::after{left:125%}

/* tabbladen lichten één voor één op */
.tab{transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s ease,box-shadow .35s ease}
.fx .tab.on{transform:translateY(-2px);box-shadow:0 6px 22px rgba(31,199,169,.22)}

/* rekenvoorbeeld: markering veegt erin */
.fx .mark-hi{background-size:0% 100%;background-repeat:no-repeat}
.fx #voorbeeld .farrow .ar{transform-origin:0 0}

/* stappen: lijn die zich trekt */
.steps-line{position:absolute;top:21px;left:12.5%;right:12.5%;height:2px;z-index:0;pointer-events:none}
.steps-line span{display:block;height:100%;width:100%;border-radius:2px;transform:scale(0,1);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal-l),var(--lime));box-shadow:0 0 14px rgba(31,199,169,.55)}
@media(max-width:900px){
  .steps-line{top:34px;bottom:34px;left:21px;right:auto;width:2px;height:auto}
  .steps-line span{transform:scale(1,0);transform-origin:50% 0;background:linear-gradient(180deg,var(--teal-l),var(--lime))}
}
.step .n{transition:background .45s ease,color .45s ease,box-shadow .45s ease,border-color .45s ease}
.fx .step .n.lit{background:var(--teal);color:#05302A;border-color:var(--teal);
  box-shadow:0 0 0 6px #fff,0 0 24px rgba(31,199,169,.6)}

/* vergelijking: de kolom van dit model licht op */
.vgl .vrow .us{transition:box-shadow .6s ease}
.fx .vgl.aan .vrow .us{animation:kolomgloed 2.2s ease-out 1 both}
@keyframes kolomgloed{0%{box-shadow:inset 0 0 0 0 rgba(31,199,169,0)}35%{box-shadow:inset 0 0 0 2px rgba(31,199,169,.55),inset 0 0 40px rgba(31,199,169,.18)}100%{box-shadow:inset 0 0 0 0 rgba(31,199,169,0)}}

/* veelgestelde vragen */
.fx .faqlist .ans{overflow:hidden}
.fx .faqlist summary .pm{transition:background .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}

/* subpagina-kop: zacht bewegend licht */
.fx .pagekop{background-size:130% 150%,130% 150%,100% 100%;animation:drijf 22s ease-in-out infinite alternate}
@keyframes drijf{0%{background-position:0% 0%,0% 100%,0 0}100%{background-position:100% 30%,60% 60%,0 0}}

/* =========================================================================
   VOETTEKST: GROTE SLOTZIN
   ========================================================================= */
footer.site p.fstatement,.fstatement{font-size:clamp(2.3rem,7.2vw,5.8rem);font-weight:900;letter-spacing:-.045em;line-height:1.02;color:#fff;
  margin:0 0 clamp(40px,5vw,64px);max-width:16ch}
.fstatement span{color:var(--teal)}
footer.site p.fstatement{color:#fff}

/* =========================================================================
   BEPERK BEWEGING: alles stil en zichtbaar
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero-3d canvas{transition:none}
  .fx .pagekop{animation:none}
  .fx .btn-cta::after{display:none}
}