/* ============================================================
   TWIZT — animaties en micro-interacties
   Alles wat met CSS kan, gebeurt hier; GSAP doet alleen de
   binnenkomst en het scrollwerk. Scheelt werk voor de browser.
   ============================================================ */

/* ---------- Header: compacter zodra je scrollt ---------- */
.tz-header{transition:padding .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;}
.tz-header.is-scrolled{box-shadow:0 6px 22px rgba(0,0,0,.16);}
.tz-header.is-scrolled .tz-bar{padding-top:6px;padding-bottom:6px;}
.tz-header .tz-bar{transition:padding .25s ease;}
.tz-header.is-scrolled .tz-logo-img img,
.tz-header.is-scrolled .tz-logo img{transform:scale(.88);}
.tz-header .tz-logo-img img,
.tz-header .tz-logo img{transition:transform .25s ease;transform-origin:left center;}

/* ---------- Logo: kleine zwaai bij hover ---------- */
@keyframes tz-zwaai{
    0%,100%{transform:rotate(0);}
    25%{transform:rotate(-3.5deg) scale(1.04);}
    60%{transform:rotate(2.5deg) scale(1.04);}
}
.tz-logo-img:hover img,
.footer-logo:hover img{animation:tz-zwaai .7s ease;}

/* ---------- Menu: onderstreping die uitschuift ---------- */
.tz-nav a{position:relative;}
.tz-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;
    background:currentColor;transform:scaleX(0);transform-origin:left center;
    transition:transform .28s cubic-bezier(.2,.8,.3,1);
}
.tz-nav a:hover::after{transform:scaleX(1);}

/* ---------- Knoppen: optillen en indrukken ---------- */
.pill{transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease, background .18s ease, color .18s ease;}
.pill:hover{transform:translateY(-2px) scale(1.03);}
.pill:active{transform:translateY(1px) scale(.97);}

.ot-jaar,.vc-filter,.rail-btn,.ct-social-icons a,.tz-socials a{
    transition:transform .18s cubic-bezier(.2,.8,.3,1), background .18s ease, color .18s ease, border-color .18s ease;
}
.ot-jaar:active,.vc-filter:active,.rail-btn:active{transform:scale(.94);}
.ct-social-icons a:hover,.tz-socials a:hover{transform:translateY(-3px) rotate(-6deg);}

/* ---------- Kaarten: foto zoomt zachtjes in ---------- */
.single-card .cov img,
.vc-thumb img,
.clip-card img,
.ot-lid-foto img,
.lid-card img{transition:transform .5s cubic-bezier(.2,.8,.3,1);}
.single-card:hover .cov img,
.vc-card:hover .vc-thumb img,
.clip-card:hover img,
.ot-lid:hover .ot-lid-foto img,
.lid-card:hover img{transform:scale(1.07);}

.ot-lid{transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;}
.ot-lid:active{transform:translateY(-2px) scale(.98);}

/* ---------- Formulier: veld dat oplicht ---------- */
.ct-field input,.ct-field textarea{transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.ct-field input:focus,.ct-field textarea:focus{box-shadow:0 0 0 4px rgba(190,42,126,.12);}

/* ---------- Pijltje dat meeloopt in een knop ---------- */
.pill .tz-ico{transition:transform .22s cubic-bezier(.2,.8,.3,1);}
.pill:hover .tz-ico{transform:translateX(4px);}

/* ---------- Confetti na het versturen van een bericht ---------- */
.tz-confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden;}
.tz-confetti i{position:absolute;top:0;left:0;width:9px;height:14px;border-radius:2px;display:block;}

/* ---------- Toetsenbordgebruikers zien altijd waar ze zijn ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
    outline:3px solid var(--yellow,#FBC42A);outline-offset:3px;border-radius:6px;
}

/* ---------- Bezoekers die liever geen beweging zien ----------
   Zet iemand "verminderde beweging" aan in zijn systeem, dan blijft
   alles staan. GSAP slaat zichzelf dan ook helemaal over. */
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}