/* ==================== MOTION POLISH (aditif) ==================== */
/* Override keyframes animate.css dengan easing halus, hanya transform+opacity */
@keyframes motion-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-fadeInUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes motion-fadeInDown { from { opacity: 0; transform: translateY(-32px); } to { opacity: 1; transform: translateY(0); } }
@keyframes motion-fadeInLeft { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes motion-fadeInRight { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes motion-zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes motion-cardUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes motion-fadeInUpSm { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* [DINONAKTIFKAN 2026-10-03 v2, alasan: jalan saat load sebelum WOW -> kedip, fill both tahan transform break hover] */
/* Override class animate.css yang dipakai WOW
.fadeIn { animation-name: motion-fadeIn; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; }
.fadeInUp { animation-name: motion-fadeInUp; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; }
.fadeInDown { animation-name: motion-fadeInDown; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; }
.fadeInLeft { animation-name: motion-fadeInLeft; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; }
.fadeInRight { animation-name: motion-fadeInRight; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; }
.zoomIn { animation-name: motion-zoomIn; animation-duration: 0.8s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; } */

/* [DINONAKTIFKAN 2026-10-03 v2, alasan: global .card re-animate saat scroll -> kedip]
.card { animation-name: motion-cardUp; animation-duration: 0.55s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: both; backface-visibility: hidden; } */

/* FIX: hanya aktif setelah WOW memberi .animated -> tidak ada animasi saat load, fill backwards agar hover tidak bentrok */
.wow.animated.fadeIn { animation-name: motion-fadeIn; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
.wow.animated.fadeInUp { animation-name: motion-fadeInUp; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
.wow.animated.fadeInDown { animation-name: motion-fadeInDown; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
.wow.animated.fadeInLeft { animation-name: motion-fadeInLeft; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
.wow.animated.fadeInRight { animation-name: motion-fadeInRight; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
.wow.animated.zoomIn { animation-name: motion-zoomIn; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
/* about cards override global.css aboutFadeLeft/Right (load setelah global.css -> lebih spesifik) */
.about .wow.animated.fadeInLeft { animation-name: motion-fadeInLeft; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }
.about .wow.animated.fadeInRight { animation-name: motion-fadeInRight; animation-duration: 0.7s; animation-timing-function: cubic-bezier(.22,1,.36,1); animation-fill-mode: backwards; }

/* ==================== LANDING: bar info + header turun halus ==================== */
.topbar, .nav-bar {
    animation: motion-fadeInDown 0.7s cubic-bezier(.22,1,.36,1) both;
    backface-visibility: hidden;
}

/* ==================== LOGIN ==================== */
.screen {
    animation-name: motion-loginCardIn;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
    animation-fill-mode: both;
    backface-visibility: hidden;
}
@keyframes motion-loginCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-logo { animation: motion-fadeInUpSm 0.55s cubic-bezier(.22,1,.36,1) 0.05s both; backface-visibility: hidden; }
.auth-title { animation: motion-fadeInUpSm 0.55s cubic-bezier(.22,1,.36,1) 0.1s both; backface-visibility: hidden; }
.auth-field { animation: motion-fadeInUpSm 0.55s cubic-bezier(.22,1,.36,1) 0.15s both; backface-visibility: hidden; }
.auth-submit { animation: motion-fadeInUpSm 0.55s cubic-bezier(.22,1,.36,1) 0.25s both; backface-visibility: hidden; }
.auth-right {
    animation-name: motion-fadeInRight;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
    animation-fill-mode: both;
    backface-visibility: hidden;
}
/* Lingkaran logo kanan membesar halus */
.auth-right > div > div:first-child {
    animation: motion-logoCircleIn 0.8s cubic-bezier(.22,1,.36,1) 0.1s both;
    backface-visibility: hidden;
}
@keyframes motion-logoCircleIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

/* ==================== BACKEND (inspeksi DOM: .lambada-rail, .lambada-panel, .page-header, .card, .small-box, .timeline-item, #tableList tbody tr) ==================== */
/* [DINONAKTIFKAN 2026-10-05 hp, alasan: fill-mode both hold transform=0 kalahkan state tertutup]
.lambada-rail {
    animation: motion-fadeInLeft 0.55s cubic-bezier(.22,1,.36,1) both;
    backface-visibility: hidden;
}
.lambada-panel {
    animation: motion-fadeInLeft 0.55s cubic-bezier(.22,1,.36,1) 0.05s both;
    backface-visibility: hidden;
}
*/
/* [DITAMBAH 2026-10-05 hp] Bug C fix: backwards agar tidak menahan transform tertutup */
@media (max-width:1199px){
.lambada-rail{animation:motion-fadeInLeft .4s cubic-bezier(.22,1,.36,1) backwards}
.lambada-panel{animation:motion-fadeInLeft .4s cubic-bezier(.22,1,.36,1) backwards}
}
.page-header-left h5, .page-header-breadcrumb {
    animation: motion-fadeInDown 0.45s cubic-bezier(.22,1,.36,1) both;
    backface-visibility: hidden;
}
.page-toolbar-wrap {
    animation: motion-fadeIn 0.4s cubic-bezier(.22,1,.36,1) 0.08s both;
    backface-visibility: hidden;
}
.card.card-secondary, .card.card-outline {
    animation: motion-cardUp 0.55s cubic-bezier(.22,1,.36,1) 0.12s both;
    backface-visibility: hidden;
}
.small-box {
    animation: motion-cardUp 0.55s cubic-bezier(.22,1,.36,1) both;
    backface-visibility: hidden;
}
.small-box:nth-child(1) { animation-delay: 0.12s; }
.small-box:nth-child(2) { animation-delay: 0.2s; }
.small-box:nth-child(3) { animation-delay: 0.28s; }
.small-box:nth-child(4) { animation-delay: 0.36s; }

/* Timeline dashboard */
.timeline-item {
    animation: motion-fadeInUpSm 0.45s cubic-bezier(.22,1,.36,1) both;
    backface-visibility: hidden;
}
.timeline-item:nth-child(1) { animation-delay: 0.15s; }
.timeline-item:nth-child(2) { animation-delay: 0.22s; }
.timeline-item:nth-child(3) { animation-delay: 0.29s; }
.timeline-item:nth-child(4) { animation-delay: 0.36s; }
.timeline-item:nth-child(5) { animation-delay: 0.43s; }

/* Wadah tabel fade + baris tabel fade pendek TANPA translate (anti lompat saat DataTables redraw/scroll) */
#tableList {
    animation: motion-fadeIn 0.4s cubic-bezier(.22,1,.36,1) 0.15s both;
    backface-visibility: hidden;
}
#tableList tbody tr:nth-child(-n+15) {
    animation: motion-fadeIn 0.28s cubic-bezier(.22,1,.36,1) both;
}
#tableList tbody tr:nth-child(1) { animation-delay: 0.2s; }
#tableList tbody tr:nth-child(2) { animation-delay: 0.26s; }
#tableList tbody tr:nth-child(3) { animation-delay: 0.32s; }
#tableList tbody tr:nth-child(4) { animation-delay: 0.38s; }
#tableList tbody tr:nth-child(5) { animation-delay: 0.44s; }
#tableList tbody tr:nth-child(6) { animation-delay: 0.5s; }
#tableList tbody tr:nth-child(7) { animation-delay: 0.56s; }
#tableList tbody tr:nth-child(8) { animation-delay: 0.62s; }
#tableList tbody tr:nth-child(9) { animation-delay: 0.68s; }
#tableList tbody tr:nth-child(10) { animation-delay: 0.74s; }
#tableList tbody tr:nth-child(11) { animation-delay: 0.8s; }
#tableList tbody tr:nth-child(12) { animation-delay: 0.86s; }
#tableList tbody tr:nth-child(13) { animation-delay: 0.92s; }
#tableList tbody tr:nth-child(14) { animation-delay: 0.98s; }
#tableList tbody tr:nth-child(15) { animation-delay: 1.04s; }

/* Footer backend fade */
.main-footer {
    animation: motion-fadeIn 0.4s cubic-bezier(.22,1,.36,1) 0.3s both;
    backface-visibility: hidden;
}

/* ==================== MODAL + TOAST ==================== */
.modal.fade .modal-dialog {
    animation: motion-modalIn 0.25s cubic-bezier(.22,1,.36,1) both;
    backface-visibility: hidden;
}
@keyframes motion-modalIn {
    from { opacity: 0; transform: scale(0.97) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.swal2-popup.swal2-toast.swal2-show {
    animation: lam-toast-in 0.25s cubic-bezier(.16,1,.3,1) forwards !important;
}
@keyframes lam-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* [DINONAKTIFKAN 2026-10-03, alasan: spec Fase3 reduce=true harus tetap bergerak; blok instan 0.001s bikin moving=0] */
/* ==================== REDUCED-MOTION: match baseline (animasi instan 0.001s, bukan none) ==================== */
/* @media (prefers-reduced-motion: reduce) {
    .topbar, .nav-bar { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight, .zoomIn, .card { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .lambada-rail, .lambada-panel { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .page-header-left h5, .page-header-breadcrumb { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .page-toolbar-wrap { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .card.card-secondary, .card.card-outline { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .small-box { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .timeline-item { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    #tableList { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    #tableList tbody tr { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .main-footer { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .modal.fade .modal-dialog { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .swal2-popup.swal2-toast.swal2-show { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .screen { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .auth-logo, .auth-title, .auth-field, .auth-submit { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .auth-right { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .auth-right > div > div:first-child { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    .lambada-main { animation-duration: 0.001s !important; animation-delay: 0s !important; }
    body::before, body::after, .auth-logo::before { animation-duration: 0.001s !important; animation-delay: 0s !important; }
} */

/* overflow-x clip: JANGAN overflow:hidden di induk header, biarkan global.css yang mengatur */
@media all { html, body { overflow-x: clip; } }

/* [DITAMBAH 2026-10-05 landing-hp] WOW jarak geser HP lebih pendek (anti scroll horiz) */
@media (max-width:767px){
@keyframes motion-fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-fadeInDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-fadeInLeft{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes motion-fadeInRight{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
@keyframes motion-zoomIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes motion-cardUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wow.animated.fadeInUp,.wow.animated.fadeInDown,.wow.animated.fadeInLeft,.wow.animated.fadeInRight,.wow.animated.zoomIn{animation-duration:.55s}
}