/*
File: motion.css — CHUYỂN ĐỘNG thống nhất của panel (task-50 — Owner: "nâng cấp animation toàn bộ panel cho chuyên nghiệp").
Chuẩn: ngắn (--kp-dur 180 ms, rê chuột / bấm 120 ms), 1 đường cong (--kp-ease), CHỈ thuộc tính nhẹ (opacity, translate, scale, màu, bóng — không đổi width / height / top / left nên không làm xê dịch bố cục,
không giật); chuyển động vào chỉ dùng `animation ... backwards` / `@starting-style` (trạng thái cuối do phần tử tự có — không đè transform của popper / template).
Tôn trọng `prefers-reduced-motion: reduce` (khối cuối): MỌI chuyển động tắt (chuyển 0 s, hoạt ảnh 0,01 ms; trạng thái cuối giữ nguyên).
Bài thử: motion_ui (Chrome thật: thời lượng 100 – 300 ms ở mọi loại phần tử; giảm chuyển động → 0 hoạt ảnh đang chạy, thời lượng ≈ 0; không lỗi JS) + mọi bài quét giao diện chạy với "giảm chuyển động" (số đo hình học không phụ thuộc hoạt ảnh).
Thêm chuyển động MỚI: dùng 2 biến thời lượng + --kp-ease, thuộc tính nhẹ; KHÔNG animation dài / lặp vô hạn (trừ vòng quay chờ); nạp file này SAU theme.css / mobile.css / apps.css.
*/
:root { --kp-dur: 180ms; --kp-dur-fast: 120ms; --kp-ease: cubic-bezier(.2, .7, .2, 1); }

@keyframes kp-fade { from { opacity: 0; } }
@keyframes kp-pop { from { opacity: 0; translate: 0 6px; } }
@keyframes kp-pop-up { from { opacity: 0; translate: 0 -6px; } }
@keyframes kp-slide-in { from { opacity: 0; translate: -14px 0; } }

/* 1. Rê chuột / bấm / focus: màu, viền, bóng đổi mượt (120 ms) */
.btn, .page-link, .dropdown-item, .nav-link, .form-control, .form-select, .app-select-btn, .app-select-option, .kp-fold-btn, .key-name, .pack-option, .kp-dialog-x,
#sidebar-menu ul li a, .header-item, .ntf-item, .badge {
    transition: color var(--kp-dur-fast) var(--kp-ease), background-color var(--kp-dur-fast) var(--kp-ease), border-color var(--kp-dur-fast) var(--kp-ease), box-shadow var(--kp-dur-fast) var(--kp-ease), opacity var(--kp-dur-fast) var(--kp-ease);
}
.btn:active:not(:disabled):not(.disabled) { translate: 0 1px; }   /* bấm xuống 1 px (translate riêng — không đè transform của nút) */
.kp-i { transition: color var(--kp-dur-fast) var(--kp-ease); }

/* 2. Hộp thoại: mờ + trượt nhẹ khi mở và khi đóng (đóng dùng @starting-style + allow-discrete — trình duyệt cũ chỉ ẩn ngay, không lỗi) */
dialog.kp-dialog {
    opacity: 0; translate: 0 10px; scale: .985;
    transition: opacity var(--kp-dur) var(--kp-ease), translate var(--kp-dur) var(--kp-ease), scale var(--kp-dur) var(--kp-ease), overlay var(--kp-dur) allow-discrete, display var(--kp-dur) allow-discrete;
}
dialog.kp-dialog[open] { opacity: 1; translate: 0 0; scale: 1; }
@starting-style { dialog.kp-dialog[open] { opacity: 0; translate: 0 10px; scale: .985; } }
dialog.kp-dialog::backdrop { opacity: 0; transition: opacity var(--kp-dur) var(--kp-ease), overlay var(--kp-dur) allow-discrete, display var(--kp-dur) allow-discrete; }
dialog.kp-dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog.kp-dialog[open]::backdrop { opacity: 0; } }

/* 3. Menu xổ xuống (thanh trên, ô chọn): 180 ms, thêm mờ dần; giữ animation DropDownSlide của template (nó đặt vị trí cuối của menu) */
.dropdown-menu.show {
    animation-name: DropDownSlide, kp-fade;
    animation-duration: var(--kp-dur), var(--kp-dur);
    animation-timing-function: var(--kp-ease), var(--kp-ease);
    animation-fill-mode: both, backwards;
}
.app-select-list:not([hidden]) { animation: kp-pop var(--kp-dur) var(--kp-ease) backwards; }
.app-select-list.is-up:not([hidden]) { animation-name: kp-pop-up; }

/* 4. Thông báo ngắn: .kp-island-item — hiệu ứng ở ui-kit.css mục 13 (giảm chuyển động tắt ở khối cuối file này) */

/* 5. Menu ☰ trên điện thoại: trượt + mờ khi mở (màn hình cảm ứng; máy tính giữ nguyên) */
@media (max-width: 991.98px) {
    body.sidebar-enable .vertical-menu { animation: kp-slide-in var(--kp-dur) var(--kp-ease) backwards; }
}

/* 6. Nội dung trang hiện ra (chỉ opacity — không dịch chuyển nên không lệch số đo bố cục) + vùng vừa làm mới tại chỗ (panel-dialog.js gắn .kp-fresh) */
.page-content > .container-fluid { animation: kp-fade var(--kp-dur) var(--kp-ease) backwards; }
.kp-fresh { animation: kp-fade var(--kp-dur) var(--kp-ease) backwards; }
.kp-fold-btn .kp-fold-caret, #key-filter-toggle .kp-i { transition: transform var(--kp-dur) var(--kp-ease); }
details > summary + * { animation: kp-fade var(--kp-dur) var(--kp-ease) backwards; }

/* 7. Giảm chuyển động: tắt hết (thời lượng ~0, trạng thái cuối giữ nguyên; không lặp) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0s !important; /* chuyển (transition) 0 s = không tạo chuyển nào, đổi tức thì; hoạt ảnh (animation) giữ 0,01 ms để trạng thái cuối do fill-mode / keyframes vẫn áp (template đặt vị trí menu xổ bằng animation) */
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}