/* =========================================================
   KM.dev — Slide Scroll
   .km-slides  → desktop, één scroll = één sectie
   .km-reveal  → mobiel/touch, normaal scrollen met entree-animatie
   ========================================================= */

html.km-slides{scroll-behavior:auto;}
html.km-slides body{overscroll-behavior-y:none;}

/* ---------------------------------------------------------
   Basis slide
   --------------------------------------------------------- */
.km-slides .km-slide{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.km-slides .km-slide.km-tall{
    justify-content:flex-start;
    padding-top:clamp(70px,9vh,120px);
}
.km-slides .km-slide.km-footer{
    min-height:auto;
    justify-content:flex-end;
}

/* samengevoegde slide: CTA-band gecentreerd, footer eronder geplakt */
.km-merge{display:flex;flex-direction:column;}
.km-slides .km-merge{justify-content:flex-start;padding-top:0;}
.km-merge > *:first-child{
    flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(30px,5vh,60px);
}
.km-merge > footer{flex:0 0 auto;}
.km-slides .km-merge.km-tall{justify-content:flex-start;padding-top:0;}

/* het bewegende laagje = de directe kinderen van de sectie */
.km-slides .km-slide > *,
.km-reveal .km-slide > *{
    transition:opacity .62s cubic-bezier(.16,1,.3,1),
               transform .9s cubic-bezier(.16,1,.3,1),
               filter .62s cubic-bezier(.16,1,.3,1),
               clip-path .9s cubic-bezier(.16,1,.3,1);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}
/* will-change alléén op de secties die nú bewegen — anders vreet het geheugen */
.km-slides .km-active > *,
.km-slides .km-out-up > *,
.km-slides .km-out-down > *{will-change:transform,opacity,filter;}

.km-slides .km-slide.km-active > *,
.km-reveal .km-slide.km-active > *{
    opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);
}

/* 3D-context voor de perspectief-effecten */
.km-slides .km-slide.km-fx-5,
.km-slides .km-slide.km-fx-6{perspective:1500px;perspective-origin:50% 50%;}

/* =========================================================
   DE ACHT OVERGANGEN
   ========================================================= */

/* FX 1 — RISE : rustig omhoog zwevend, licht onscherp */
.km-slides .km-fx-1.km-out-up   > *{opacity:0;transform:translate3d(0,62px,0) scale(.975);filter:blur(4px);}
.km-slides .km-fx-1.km-out-down > *{opacity:0;transform:translate3d(0,-62px,0) scale(.975);filter:blur(4px);}

/* FX 2 — WIPE : veegt open als een gordijn */
.km-slides .km-fx-2.km-out-up   > *{opacity:.18;clip-path:inset(0 0 100% 0);transform:translate3d(0,20px,0);}
.km-slides .km-fx-2.km-out-down > *{opacity:.18;clip-path:inset(100% 0 0 0);transform:translate3d(0,-20px,0);}

/* FX 3 — ZOOM : komt uit de diepte naar voren */
.km-slides .km-fx-3.km-out-up   > *{opacity:0;transform:scale(1.13);filter:blur(6px);}
.km-slides .km-fx-3.km-out-down > *{opacity:0;transform:scale(.88);filter:blur(6px);}

/* FX 4 — SLIDE : schuift zijwaarts binnen met lichte skew */
.km-slides .km-fx-4.km-out-up   > *{opacity:0;transform:translate3d(10vw,0,0) skewX(-3.5deg);}
.km-slides .km-fx-4.km-out-down > *{opacity:0;transform:translate3d(-10vw,0,0) skewX(3.5deg);}

/* FX 5 — FLIP : kantelt als een kaart om de horizontale as */
.km-slides .km-fx-5.km-out-up   > *{opacity:0;transform:rotateX(-15deg) translate3d(0,54px,-130px);transform-origin:center top;}
.km-slides .km-fx-5.km-out-down > *{opacity:0;transform:rotateX(15deg) translate3d(0,-54px,-130px);transform-origin:center bottom;}

/* FX 6 — PUSH : wordt de diepte in geduwd */
.km-slides .km-fx-6.km-out-up   > *{opacity:0;transform:translate3d(0,38px,-300px) rotateY(6deg);filter:blur(2px);}
.km-slides .km-fx-6.km-out-down > *{opacity:0;transform:translate3d(0,-38px,-300px) rotateY(-6deg);filter:blur(2px);}

/* FX 7 — DROP : valt van bovenaf binnen met kleine tilt */
.km-slides .km-fx-7.km-out-up   > *{opacity:0;transform:translate3d(0,86px,0) scale(.91) rotate(1.4deg);}
.km-slides .km-fx-7.km-out-down > *{opacity:0;transform:translate3d(0,-86px,0) scale(.91) rotate(-1.4deg);}

/* FX 8 — COVER : schuift als een blad over de vorige heen */
.km-slides .km-fx-8.km-out-up   > *{opacity:.22;transform:translate3d(0,94px,0);clip-path:inset(0 0 0 100%);}
.km-slides .km-fx-8.km-out-down > *{opacity:.22;transform:translate3d(0,-94px,0);clip-path:inset(0 100% 0 0);}

/* ---------------------------------------------------------
   Stagger — inhoud binnen de actieve slide komt getrapt op
   --------------------------------------------------------- */
.km-slides .km-slide > * > *,
.km-reveal .km-slide > * > *{
    transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .82s cubic-bezier(.16,1,.3,1);
}
.km-slides .km-slide:not(.km-active) > * > *,
.km-reveal .km-slide:not(.km-active) > * > *{opacity:0;transform:translate3d(0,24px,0);}
.km-slides .km-slide.km-active > * > *,
.km-reveal .km-slide.km-active > * > *{opacity:1;transform:none;}

.km-slides .km-active > * > *:nth-child(1),.km-reveal .km-active > * > *:nth-child(1){transition-delay:.08s;}
.km-slides .km-active > * > *:nth-child(2),.km-reveal .km-active > * > *:nth-child(2){transition-delay:.15s;}
.km-slides .km-active > * > *:nth-child(3),.km-reveal .km-active > * > *:nth-child(3){transition-delay:.22s;}
.km-slides .km-active > * > *:nth-child(4),.km-reveal .km-active > * > *:nth-child(4){transition-delay:.29s;}
.km-slides .km-active > * > *:nth-child(5),.km-reveal .km-active > * > *:nth-child(5){transition-delay:.36s;}
.km-slides .km-active > * > *:nth-child(n+6),.km-reveal .km-active > * > *:nth-child(n+6){transition-delay:.42s;}

/* =========================================================
   MOBIEL / TOUCH — .km-reveal
   Geen scroll-hijack, geen blur, geen 3D. Alleen een lichte
   fade + rise zodat het net zo levendig blijft aanvoelen.
   ========================================================= */
.km-reveal .km-slide > *{
    transition-duration:.62s, .78s, 0s, 0s;
}
.km-reveal .km-slide.km-out-up   > *{opacity:0;transform:translate3d(0,42px,0);}
.km-reveal .km-slide.km-out-down > *{opacity:0;transform:translate3d(0,-42px,0);}
/* zijwaartse secties houden hun richting, maar veel subtieler */
.km-reveal .km-fx-4.km-out-up   > *{transform:translate3d(34px,26px,0);}
.km-reveal .km-fx-8.km-out-up   > *{transform:translate3d(0,52px,0);}
.km-reveal .km-fx-3.km-out-up   > *{transform:translate3d(0,32px,0) scale(.965);}

/* =========================================================
   Dot-navigatie rechts
   ========================================================= */
.km-dots{
    position:fixed;right:24px;top:50%;transform:translateY(-50%);
    z-index:120;display:none;flex-direction:column;gap:2px;
    padding:10px 7px;border-radius:999px;
    background:rgba(13,13,13,.05);border:1px solid rgba(13,13,13,.06);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    opacity:0;transition:opacity .5s ease,background .5s ease,border-color .5s ease;pointer-events:none;
}
.km-slides .km-dots{display:flex;opacity:1;pointer-events:auto;}
.km-dot{
    width:26px;height:26px;border:0;background:transparent;cursor:pointer;
    display:grid;place-items:center;position:relative;padding:0;
}
.km-dot i{
    display:block;width:7px;height:7px;border-radius:50%;
    background:rgba(13,13,13,.24);
    transition:all .42s cubic-bezier(.16,1,.3,1);
}
.km-dot:hover i{background:rgba(13,13,13,.5);transform:scale(1.3);}
.km-dot.on i{
    background:var(--ink,#0d0d0d);width:5px;height:20px;border-radius:6px;
    box-shadow:0 0 0 3px rgba(198,255,74,.35);
}
.km-dot .km-dot-label{
    position:absolute;right:32px;top:50%;
    transform:translateY(-50%) translateX(10px);
    white-space:nowrap;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    font-family:'Space Mono',monospace;color:#f4f3ef;background:var(--ink,#0d0d0d);
    padding:6px 11px;border-radius:999px;opacity:0;pointer-events:none;
    transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.km-dot:hover .km-dot-label{opacity:1;transform:translateY(-50%) translateX(0);}

.km-dots.on-dark{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);}
.km-dots.on-dark .km-dot i{background:rgba(255,255,255,.3);}
.km-dots.on-dark .km-dot:hover i{background:rgba(255,255,255,.6);}
.km-dots.on-dark .km-dot.on i{background:var(--accent,#c6ff4a);box-shadow:0 0 0 3px rgba(198,255,74,.18);}
.km-dots.on-dark .km-dot-label{background:var(--accent,#c6ff4a);color:#0d0d0d;}

/* =========================================================
   Scroll-hint
   ========================================================= */
.km-hint{
    position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
    z-index:110;display:none;align-items:center;gap:10px;
    font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(13,13,13,.38);pointer-events:none;
    transition:opacity .45s ease,transform .45s ease;
}
.km-slides .km-hint{display:flex;}
.km-hint.hide{opacity:0;transform:translateX(-50%) translateY(16px);}
.km-hint .km-mouse{
    width:19px;height:29px;border:1.5px solid rgba(13,13,13,.28);border-radius:11px;position:relative;
}
.km-hint .km-mouse::after{
    content:'';position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:3px;
    background:var(--accent-ink,#3f5a17);transform:translateX(-50%);
    animation:kmWheel 1.9s ease-in-out infinite;
}
@keyframes kmWheel{0%{opacity:0;transform:translate(-50%,-4px);}35%{opacity:1;}70%,100%{opacity:0;transform:translate(-50%,9px);}}

/* =========================================================
   Voortgang + teller
   ========================================================= */
.km-progress{
    position:fixed;top:0;left:0;height:2px;width:0;z-index:130;
    background:var(--accent,#c6ff4a);display:none;
    box-shadow:0 0 14px rgba(198,255,74,.7);
    transition:width .55s cubic-bezier(.16,1,.3,1);
}
.km-slides .km-progress{display:block;}

.km-count{
    position:fixed;right:26px;bottom:26px;z-index:120;display:none;
    font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;
    color:rgba(13,13,13,.35);
}
.km-slides .km-count{display:block;}
.km-count b{color:var(--ink,#0d0d0d);font-weight:700;}
.km-count.on-dark{color:rgba(255,255,255,.4);}
.km-count.on-dark b{color:var(--accent,#c6ff4a);}

@media(max-width:900px){
    .km-dots,.km-hint,.km-progress,.km-count{display:none !important;}
}
@media(prefers-reduced-motion:reduce){
    .km-slide > *,.km-slide > * > *{transition:none !important;opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important;}
}