:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shimmer{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes cardin{from{opacity:0;transform:perspective(800px) rotateY(-18deg) translateY(16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ring{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.04);opacity:.55}}
@keyframes ping{0%{box-shadow:0 0 0 0 currentColor}100%{box-shadow:0 0 0 6px transparent}}
.content>*{animation:up .55s var(--ease) both}
.content>*:nth-child(2){animation-delay:.06s}.content>*:nth-child(3){animation-delay:.12s}.content>*:nth-child(4){animation-delay:.18s}
.kpis>.kpi{animation:up .55s var(--ease) both}
.kpis>.kpi:nth-child(1){animation-delay:.08s}.kpis>.kpi:nth-child(2){animation-delay:.14s}.kpis>.kpi:nth-child(3){animation-delay:.2s}.kpis>.kpi:nth-child(4){animation-delay:.26s}
.dash>*,.detail>*,.badgegrid>*{animation:up .6s var(--ease) both}
.dash>*:nth-child(2),.detail>*:nth-child(2),.badgegrid>*:nth-child(2){animation-delay:.1s}
.stack>.card:nth-child(2){animation:up .6s var(--ease) .2s both}
tbody tr{animation:up .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms + .15s)}
.ev{animation:up .45s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms + .1s)}
.prop{animation:fadein .4s ease both;animation-delay:calc(var(--i,0) * 30ms + .15s)}
.bars div{transform-origin:bottom;animation:grow .8s var(--ease) both;animation-delay:calc(var(--i,0) * 30ms + .25s)}
.track div{transform-origin:left;animation:fill 1s var(--ease) both;animation-delay:calc(var(--i,0) * 80ms + .3s)}
.card{transition:box-shadow .25s var(--ease),transform .25s var(--ease),border-color .25s}
.kpi:hover,.dash .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.kpi .ico{transition:transform .35s var(--spring)}
.kpi:hover .ico{transform:rotate(-8deg) scale(1.12)}
.btn{transition:background .2s,border-color .2s,box-shadow .2s,transform .15s var(--spring)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-primary:hover{box-shadow:0 6px 16px -6px rgba(15,42,31,.5)}
.btn-gold:hover{box-shadow:0 6px 16px -6px rgba(169,138,47,.6)}
tr.click td{transition:background .15s}
tr.click:hover td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.nav{position:relative;transition:background .2s,color .2s,padding .25s var(--ease)}
.nav:hover{padding-left:14px}
.nav svg{transition:transform .3s var(--spring),color .2s}
.nav:hover svg{transform:scale(1.12)}
.nav.on::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold);animation:fill .35s var(--ease) both;transform-origin:center}
.nav .count{animation:pop .4s var(--spring) both}
.pill{transition:transform .2s var(--spring)}
tr:hover .pill{transform:scale(1.05)}
.s-nieuw::before,.s-actief::before{animation:ping 1.6s ease-out infinite}
.seg button{transition:background .2s,color .2s,box-shadow .2s}
.input,.select,.textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.dropzone img,.dropzone .ph0{transition:transform .3s var(--spring)}
.dropzone:hover img,.dropzone:hover .ph0{transform:scale(1.06) rotate(-2deg)}
.avatar,.photo-sm{transition:transform .3s var(--spring)}
.who:hover .photo-sm{transform:scale(1.12)}
.preview{perspective:900px}
.preview .zoom>.idcard{animation:cardin .8s var(--ease) .15s both;transition:transform .2s ease-out;transform-style:preserve-3d;will-change:transform}
.idcard .hd::after{animation:ring 6s ease-in-out infinite}
.idcard .shine{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.35),transparent 45%);opacity:0;transition:opacity .3s;z-index:5}
.preview:hover .idcard .shine{opacity:1}
.skel{display:flex;flex-direction:column;gap:16px}
.skel .row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.skel i{display:block;height:110px;border-radius:var(--r);background:linear-gradient(90deg,var(--line-2) 0,var(--surface-2) 40%,var(--line-2) 80%);background-size:800px 100%;animation:shimmer 1.3s linear infinite}
.skel i.wide{height:320px}
.skel i.head{height:44px;width:40%;border-radius:10px}
.overlay{animation:fadein .25s ease both}
.drawer{animation:slidein .45s var(--ease) both}
@keyframes slidein{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer .body>*{animation:up .45s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms + .1s)}
.toast{animation:toastin .5s var(--spring) both}
@keyframes toastin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.toast.out{animation:toastout .3s ease forwards}
@keyframes toastout{to{opacity:0;transform:translateX(30px)}}
.login .art::before{animation:spin 90s linear infinite}
.login .art::after{animation:ring 7s ease-in-out infinite}
.login .art>*{animation:up .8s var(--ease) both}
.login .art>*:nth-child(2){animation-delay:.12s}.login .art>*:nth-child(3){animation-delay:.24s}
.login .art h2 em{background:linear-gradient(90deg,var(--gold),#ecd58f,var(--gold));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.login form>*{animation:up .6s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms + .2s)}
.side .logo .mark{transition:transform .5s var(--spring)}
.side .logo:hover .mark{transform:rotate(-6deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{*{animation:none!important;transition:none!important}}