/* ================================================================
   LAPISAN ANIMASI — efek hidup tanpa mengubah desain asli.
   Hanya memakai transform/opacity (GPU-safe), tidak menyentuh
   warna/layout. Otomatis nonaktif pada prefers-reduced-motion
   (aturan global !important di atas sudah mencakup blok ini).
   ================================================================ */
@keyframes gskFadeScale{from{opacity:0;transform:scale(.96) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes gskFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes gskSlideDown{from{opacity:0;transform:translateY(-18px);}to{opacity:1;transform:translateY(0);}}
@keyframes gskRowIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
@keyframes gskCardIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes gskPop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
@keyframes gskFlash{0%{background-color:#E7F6EC;}100%{background-color:transparent;}}
@keyframes gskPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,178,124,.45);}50%{box-shadow:0 0 0 7px rgba(74,178,124,0);}}
@keyframes gskFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
@keyframes gskBell{0%,100%{transform:rotate(0);}15%{transform:rotate(14deg);}30%{transform:rotate(-11deg);}45%{transform:rotate(7deg);}60%{transform:rotate(-4deg);}}

/* 1. Layar pemilih peran */
@keyframes gskGradient{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
#role-screen{background:linear-gradient(130deg,var(--navy-900),var(--navy-700),var(--navy-900))!important;background-size:280% 280%;animation:gskGradient 14s ease-in-out infinite;}
.role-card{animation:gskFadeScale .5s cubic-bezier(.22,1,.36,1) both;}
.role-reopen{animation:gskSlideDown .45s cubic-bezier(.22,1,.36,1) both;}
.role-option{transition:transform .18s ease,box-shadow .18s ease;}
.role-option:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.role-option:active{transform:scale(.985);}

/* 2. Transisi antar halaman */
.page-enter{animation:gskFadeUp .38s ease-out both;}
.page-enter .stat-card,
.page-enter .book-card{animation:gskCardIn .45s ease both;}
.page-enter .stat-row .stat-card:nth-child(1){animation-delay:.05s;}
.page-enter .stat-row .stat-card:nth-child(2){animation-delay:.10s;}
.page-enter .stat-row .stat-card:nth-child(3){animation-delay:.15s;}
.page-enter .stat-row .stat-card:nth-child(4){animation-delay:.20s;}
.page-enter .book-card:nth-child(1){animation-delay:.03s;}
.page-enter .book-card:nth-child(2){animation-delay:.08s;}
.page-enter .book-card:nth-child(3){animation-delay:.13s;}
.page-enter .book-card:nth-child(4){animation-delay:.18s;}
.page-enter .book-card:nth-child(5){animation-delay:.23s;}
.page-enter .book-card:nth-child(6){animation-delay:.28s;}
.page-enter .book-card:nth-child(7){animation-delay:.33s;}
.page-enter .book-card:nth-child(8){animation-delay:.38s;}

/* 3. Baris tabel masuk berurutan */
.panel tbody tr{animation:gskRowIn .35s ease both;}
.panel tbody tr:nth-child(2){animation-delay:.05s;}
.panel tbody tr:nth-child(3){animation-delay:.10s;}
.panel tbody tr:nth-child(4){animation-delay:.15s;}
.panel tbody tr:nth-child(5){animation-delay:.20s;}
.panel tbody tr:nth-child(6){animation-delay:.25s;}
.panel tbody tr:nth-child(7){animation-delay:.30s;}
.panel tbody tr:nth-child(8){animation-delay:.35s;}

/* 4. Mikro-interaksi badge & tombol */
.badge-pop{animation:gskPop .4s ease;}
.row-flash{animation:gskFlash 1.1s ease-out;}
.book-grid .book-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background-color .22s ease;}
.book-grid .book-card:hover{transform:translateY(-4px);}
.icon-btn-text{transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease;}
.icon-btn-text:hover:not(:disabled){transform:translateY(-1px);}
.icon-btn-text:active:not(:disabled){transform:scale(.96);}

/* 5. Aksen hidup yang halus */
.mode-pill .dot{animation:gskPulse 2.2s ease-in-out infinite;}
.shelf-svg{animation:gskFloat 7s ease-in-out infinite;}
.bell svg{animation:gskBell 2.8s ease-in-out 1.2s;}