/* Beweging: zachte overgangen, onthullen bij scrollen, vloeiende interacties.
   Alles staat uit bij "minder beweging" in het besturingssysteem. Geen verlopen, alleen vlakke kleuren. */
@keyframes kw-vt-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kw-vt-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes kw-fade-up { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes kw-pop-in { from { opacity: 0; transform: translate3d(0, -4px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kw-spark-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kw-bar-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes kw-soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: no-preference) {
    /* Van pagina naar pagina: korte, zachte overgang. Menu en balken blijven staan. */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: kw-vt-out .16s ease both; }
    ::view-transition-new(root) { animation: kw-vt-in .34s cubic-bezier(.22, 1, .36, 1) both; }
    .kw-sidebar { view-transition-name: kw-sidebar; }
    .kw-topbar { view-transition-name: kw-topbar; }
    .kw-tabbar { view-transition-name: kw-tabbar; }
    ::view-transition-group(kw-sidebar), ::view-transition-group(kw-topbar), ::view-transition-group(kw-tabbar) { animation-duration: 0s; }

    /* Onthullen bij scrollen: alleen blokken die onder de rand beginnen (zie kw-motion.js). */
    html.kw-js .kw-pre { opacity: 0; transform: translate3d(0, 22px, 0); animation: none !important; }
    html.kw-js .kw-pre.kw-in {
        opacity: 1; transform: none;
        transition: opacity .6s cubic-bezier(.22, 1, .36, 1) var(--kw-d, 0s), transform .7s cubic-bezier(.22, 1, .36, 1) var(--kw-d, 0s);
    }

    /* Eerste keer laden: balkjes groeien, mini-lijnen tekenen zich en het midden van de donut verschijnt. */
    body:not(.kw-ready) .kw-spark { animation: kw-spark-in 1s cubic-bezier(.22, 1, .36, 1) .35s both; }
    body:not(.kw-ready) :is(.kw-meter, .kw-cov-bar, .kw-today-row .bar) > :is(span, i) { transform-origin: left; animation: kw-bar-in .9s cubic-bezier(.22, 1, .36, 1) .3s both; }
    body:not(.kw-ready) .kw-cov-row:nth-child(2) .kw-cov-bar > span { animation-delay: .38s; }
    body:not(.kw-ready) .kw-cov-row:nth-child(3) .kw-cov-bar > span { animation-delay: .46s; }
    body:not(.kw-ready) .kw-cov-row:nth-child(4) .kw-cov-bar > span { animation-delay: .54s; }
    body:not(.kw-ready) .kw-cov-row:nth-child(5) .kw-cov-bar > span { animation-delay: .62s; }
    body:not(.kw-ready) .kw-cov-row:nth-child(6) .kw-cov-bar > span { animation-delay: .7s; }
    body:not(.kw-ready) .kw-donut-center { animation: kw-fade-up .6s cubic-bezier(.22, 1, .36, 1) .5s both; }
    body:not(.kw-ready) .kw-hl { animation: kw-fade-up .5s cubic-bezier(.22, 1, .36, 1) both; }
    body:not(.kw-ready) .kw-hl:nth-child(2) { animation-delay: .06s; } body:not(.kw-ready) .kw-hl:nth-child(3) { animation-delay: .12s; }
    body:not(.kw-ready) .kw-hl:nth-child(4) { animation-delay: .18s; } body:not(.kw-ready) .kw-hl:nth-child(n+5) { animation-delay: .24s; }
    body:not(.kw-ready) .kw-ikpi:nth-child(2) { animation-delay: .06s; } body:not(.kw-ready) .kw-ikpi:nth-child(3) { animation-delay: .12s; }
    body:not(.kw-ready) .kw-ikpi:nth-child(4) { animation-delay: .18s; } body:not(.kw-ready) .kw-ikpi:nth-child(5) { animation-delay: .24s; }
    body:not(.kw-ready) .kw-ikpi:nth-child(6) { animation-delay: .3s; }
    .kw-ikpi-val, .kw-today-stat b, .kw-donut-center b, .kw-backlog-count { font-variant-numeric: tabular-nums; }

    /* Panelen, meldingen en menu's schuiven zacht open */
    .kw-view-panel:not([hidden]), [data-school-panel]:not([hidden]), .alert, .kw-empty { animation: kw-fade-up .32s cubic-bezier(.22, 1, .36, 1) both; }
    @media (min-width: 992px) {
        .dropdown-menu.show:not(.kw-filter-menu):not(.kw-pill-menu):not(.kw-filter-panel):not(.kw-report-filter-menu) { animation: kw-pop-in .18s cubic-bezier(.22, 1, .36, 1) both; }
    }

    /* Knoppen, schakelaars en chips: vloeiende kleur en een kleine indrukbeweging */
    .btn, .kw-tool-btn, .kw-more, .kw-cta, .kw-chip, .kw-icon-btn, .kw-seg button, .kw-tab, .kw-nav-link {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
    }
    .btn:active, .kw-tool-btn:active, .kw-more:active, .kw-cta:active, .kw-chip:active, .kw-icon-btn:active { transform: scale(.965); }
    .kw-seg button:active { transform: scale(.94); }
    .kw-tab:active { transform: scale(.93); }
    .kw-attn-row, .kw-today-row, .kw-feed-item, .kw-hl, .kw-ikpi { transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
    .kw-rank-bar > span, .kw-meter > span, .kw-cov-bar > span { transition: width .6s cubic-bezier(.22, 1, .36, 1); }

    @media (hover: hover) {
        .kw-ikpi:hover { transform: translateY(-3px); border-color: var(--kw-blue-400); box-shadow: 0 14px 26px -18px rgba(6, 31, 58, .5); }
        .kw-hl:hover { border-color: var(--kw-blue-400); transform: translateY(-2px); }
        .kw-feed-item:hover { transform: translateX(3px); }
        .kw-attn-row:hover, .kw-today-row:hover { transform: translateX(3px); }
        .kw-tool-btn:hover, .kw-more:hover { box-shadow: 0 6px 14px -10px rgba(6, 31, 58, .5); }
    }
}

@keyframes kw-row-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes kw-bar-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } }
@keyframes kw-select-pop { 0% { transform: scale(.96); } 55% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes kw-nav-run { from { transform: scaleX(.04); } 60% { transform: scaleX(.7); } to { transform: scaleX(.92); } }

/* Glijdend selectiepilletje in alle schakelaars (kw-motion.js) */
.kw-seg.has-pill { position: relative; }
.kw-seg.has-pill > .kw-seg-pill { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 7px; background: #fff; box-shadow: var(--kw-shadow-xs); pointer-events: none; z-index: 0; }
.kw-seg.has-pill > button, .kw-seg.has-pill > label { position: relative; z-index: 1; }
.kw-seg.has-pill > button.active, .kw-seg.has-pill > label input:checked + span { background: transparent; box-shadow: none; }
.kw-seg.has-pill > label input:checked + span { color: var(--kw-navy-800); }

/* Voortgangsbalk bovenaan tijdens het laden van een volgende pagina */
#kwNavBar { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 3000; background: var(--kw-blue-500, #1aa7e8); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
#kwNavBar.run { opacity: 1; animation: kw-nav-run 6s cubic-bezier(.1, .7, .2, 1) both; }

.kw-topbar.is-scrolled { box-shadow: 0 12px 26px -22px rgba(6, 31, 58, .6); }

@media (prefers-reduced-motion: no-preference) {
    .kw-topbar { transition: box-shadow .3s ease, background-color .3s ease; }
    .kw-seg.has-pill > .kw-seg-pill { transition: transform .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1), height .38s cubic-bezier(.22, 1, .36, 1); }
    .kw-seg.has-pill > .kw-seg-pill.no-anim { transition: none; }

    /* Lijsten: rijen komen na elkaar binnen. Eerste keer laden bij kaarten in beeld, anders zodra de kaart verschijnt. */
    body:not(.kw-ready) .kw-card:not(.kw-pre) :is(.kw-rank-row, .kw-feed-item, .kw-attn-row, .kw-today-row, .kw-cov-row, .kw-today-stat) { animation: kw-row-in .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--r, 0) * 55ms + .2s); }
    .kw-pre.kw-in :is(.kw-rank-row, .kw-feed-item, .kw-attn-row, .kw-today-row, .kw-cov-row, .kw-today-stat) { animation: kw-row-in .55s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--r, 0) * 55ms + .15s); }

    /* Modals en formulieren */
    .modal.fade .modal-dialog { transform: translate3d(0, 22px, 0) scale(.96); opacity: 0; transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; }
    .modal.show .modal-dialog { transform: none; opacity: 1; }
    .modal-backdrop.fade { transition: opacity .3s ease; }
    .form-control, .form-select, .kw-search input, .kw-sel select { transition: border-color .2s ease, box-shadow .28s ease, background-color .2s ease; }
    .kw-savebar { animation: kw-bar-rise .55s cubic-bezier(.22, 1, .36, 1) .25s both; }
    .kw-grade input:checked + .kw-grade-in { animation: kw-select-pop .34s cubic-bezier(.22, 1, .36, 1); }
    .kw-grade input:checked + .kw-grade-in i { animation: kw-select-pop .5s cubic-bezier(.22, 1, .36, 1) .05s both; }
    .kw-chip { transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
    .kw-chip:hover { transform: translateY(-1px); }
    .kw-view-grid label { border: 1px solid var(--kw-line); border-radius: 10px; padding: .45rem .7rem; background: #fff; transition: background-color .2s ease, border-color .2s ease; }
    .kw-view-grid label:has(input:checked) { background: var(--kw-blue-50); border-color: var(--kw-blue-400); color: var(--kw-navy-900); }
}
@media (prefers-reduced-motion: reduce) { #kwNavBar { display: none; } }

@media print { .kw-pre { opacity: 1 !important; transform: none !important; } }