/* ===== motion.css — extra animaties (laadt na theme.css; uit bij "minder beweging") ===== */
@media (prefers-reduced-motion:no-preference){
:root{--ease-out:cubic-bezier(.16,1,.3,1)}

/* pagina in/uit */
.js body{animation:pgIn .9s var(--ease-out) both}
@keyframes pgIn{from{opacity:0}to{opacity:1}}
.js body.leaving{opacity:0;transition:opacity .32s ease}

/* foto's: onthullen met een zachte wipe + langzame zoom */
.js .slot.has img{opacity:1;clip-path:inset(100% 0 0 0);transform:scale(1.22);transition:clip-path 1.5s var(--ease-out),transform 2.4s var(--ease-out),opacity .6s}
.js .slot.has.pop img{clip-path:inset(0 0 0 0);transform:scale(1)}
.js .card:hover .slot.has.pop img,.js .tcard:hover .slot.has.pop img,.js .gal .slot.has.pop:hover img,.js .bq:hover .slot.has.pop img{transform:scale(1.06);transition:transform 1.4s var(--ease-out)}

/* parallax via losse translate-eigenschap (botst niet met reveal-transform) */
.gal .slot,.hero-video{translate:0 var(--py,0px);will-change:translate}

/* kaarten */
.card{transition:transform .7s var(--ease-out)}
.card:hover{transform:translateY(-8px)}
.card h3{position:relative;display:inline-block;transition:letter-spacing .6s var(--ease-out),color .4s}
.card h3::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:1px;background:var(--accent);transition:width .6s var(--ease-out),left .6s var(--ease-out)}
.card:hover h3::after{width:100%;left:0}
.tgrid .card{padding-bottom:6px}

/* koppen en labels */
.js .label.rv{letter-spacing:.1em;transition:letter-spacing 1.6s var(--ease-out),opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .label.rv.in{letter-spacing:.42em}
.sec-head h2,.cta h2,.what p{background:linear-gradient(100deg,currentColor 40%,var(--accent-d) 50%,currentColor 60%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 1.8s .3s var(--ease-out) both;animation-play-state:paused}
.sec-head h2.in,.cta h2.in,.what p.in{animation-play-state:running}
@keyframes sheen{to{background-position:0 0}}

/* hero: knop verschijnt, pulseert zacht; scroll-cue beweegt */
.js body.home .hero-cta .btn{opacity:0;animation:btnUp 1.2s 1.1s var(--ease-out) forwards}
body.home .hero-cta .btn{animation:btnUp 1.2s 1.1s var(--ease-out) forwards,ring 3.2s 3.2s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}70%,100%{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
@keyframes btnUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
body.home .hero-video{transform-origin:50% 50%;animation:vzoom 22s ease-in-out infinite alternate}
@keyframes vzoom{from{scale:1}to{scale:1.07}}

/* menu: onderstreping die doorloopt */
nav.main a.l:not(.book){position:relative}
nav.main a.l:not(.book)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease-out)}
nav.main a.l:not(.book):hover::after{transform:scaleX(1);transform-origin:left}

/* knoppen: glans */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .9s var(--ease-out);pointer-events:none}
.btn:hover::after{left:130%}

/* footer-links schuiven */
footer.site a{transition:transform .4s var(--ease-out),color .3s}
footer.site .fgrid a:hover{transform:translateX(5px)}

/* pop-up knop: zachte puls */
.aw-btn{animation:awPulse 4.5s 6s ease-in-out infinite}
@keyframes awPulse{0%,100%{box-shadow:0 10px 30px -10px rgba(60,40,15,.45)}50%{box-shadow:0 10px 30px -10px rgba(60,40,15,.45),0 0 0 10px rgba(201,174,136,.22)}}

/* voortgangsbalk glijdt zacht */
#progress{transition:width .15s linear}
}