/* ================================================================
   12-animasi-transisi.css
   Transisi & animasi UI: tombol, kartu, navigasi sidebar, perpindahan
   halaman (page), landing page, login, modal, dropdown, toast.
   File ini HANYA menambah efek visual (transisi/animasi) — tidak
   mengubah struktur, warna, atau perilaku fungsional komponen yang
   sudah ada di file CSS lain.
   ================================================================ */

/* ── Keyframes umum ────────────────────────────────────────────── */
@keyframes fxFadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fxScaleIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fxPopIn {
  0%   { opacity: 0; transform: scale(.9) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.015) translateY(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fxLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes fxSpinSlow { to { transform: rotate(360deg); } }
@keyframes fxShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* ── Aksesibilitas: hormati preferensi "reduce motion" ───────────
   Kalau pengguna mengaktifkan pengaturan sistem "kurangi gerakan",
   semua animasi/transisi tambahan di file ini otomatis dipangkas
   jadi nyaris instan, tanpa menghapus efeknya sama sekali. ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   TOMBOL (semua varian .btn, icon-btn, tab, nav-item, dll)
   ================================================================ */
.btn {
  transition: transform .16s cubic-bezier(.34,1.56,.64,1),
              box-shadow .2s ease, background .2s ease,
              filter .2s ease, opacity .2s ease;
  will-change: transform;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.04);
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(15,27,53,.28); }
html[data-theme="dark"] .btn-primary:hover:not(:disabled) { box-shadow: 0 8px 18px rgba(59,130,246,.3); }
.btn:active:not(:disabled) {
  transform: translateY(0) scale(.96);
  transition-duration: .08s;
}
.btn:disabled { transform: none !important; }
.btn:focus-visible {
  outline: 2px solid var(--gold-light, #E8B84B);
  outline-offset: 2px;
}

.icon-btn { transition: all .18s ease; }
.icon-btn:hover { transform: translateY(-1px) scale(1.05); }
.icon-btn:active { transform: scale(.92); }

.tab { transition: all .2s ease; }
.tab:hover { transform: translateY(-1px); }

/* Password show/hide, back-to-landing, dan tombol teks kecil lain */
.login-back-landing { transition: transform .16s ease, color .2s ease; }
.login-back-landing:hover { transform: translateX(-2px); }

/* ================================================================
   SIDEBAR & NAVIGASI ANTAR MENU
   ================================================================ */
.nav-item, .nav-dropdown-toggle, .nav-subitem, .nav-group-toggle {
  transition: background .2s ease, color .2s ease,
              transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.nav-item:hover, .nav-dropdown-toggle:hover, .nav-subitem:hover {
  transform: translateX(3px);
}
.nav-item:active, .nav-subitem:active { transform: translateX(3px) scale(.97); transition-duration: .1s; }
.nav-item.active { animation: fxScaleIn .28s ease; }
.nav-item .nav-icon { transition: transform .25s ease; }
.nav-item:hover .nav-icon { transform: scale(1.12) rotate(-4deg); }

/* Panel flyout grup (Transaksi/Buku & Laporan/Fiskal) — item di dalamnya
   memakai geseran lebih halus & lebih pendek (panel sudah dekat dgn kursor). */
.nav-group-body .nav-item:hover { transform: translateX(2px); }
.nav-group-body .nav-item.active { animation: fxScaleIn .22s ease; }
.nav-group-toggle:active { transform: scale(.98); transition-duration: .1s; }

#sidebar {
  transition: transform .32s cubic-bezier(.4,0,.2,1),
              background-color .3s ease, color .3s ease, border-color .3s ease;
}
.sidebar-logo { transition: transform .3s ease; }
.sidebar-brand:hover .sidebar-logo { transform: scale(1.06) rotate(-2deg); }

/* Company switcher dropdown arrow */
.cs-arrow { transition: transform .25s ease; }
#sidebar-company-info.open .cs-arrow { transform: rotate(180deg); }

/* ================================================================
   PERPINDAHAN HALAMAN (.page.active)
   ================================================================ */
.page.active {
  animation: fxFadeInUp .34s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* Judul topbar — fade+geser halus setiap kali berganti menu (lihat
   setTopbarTitle() di js/03), alih-alih teks berganti instan/patah. */
.topbar-title-fade { animation: fxTopbarTitleIn .28s ease; }
@keyframes fxTopbarTitleIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Kartu & statistik di dalam halaman — sedikit terangkat saat hover,
   plus animasi masuk halus berjenjang (stagger) setiap kali sebuah halaman
   baru dibuka, supaya perpindahan antar menu terasa lebih hidup & tidak
   "meloncat" instan. Dibatasi 8 kartu pertama per halaman supaya total
   waktu tunggu animasi tetap singkat pada halaman dgn banyak kartu. */
.card, .stat-card {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease,
              background-color .3s ease, color .3s ease;
}
.card:hover, .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px var(--shadow-color, rgba(0,0,0,.09));
}
.page.active > .card { animation: fxFadeInUp .4s ease both; }
.page.active > .card:nth-child(1) { animation-delay: .02s; }
.page.active > .card:nth-child(2) { animation-delay: .06s; }
.page.active > .card:nth-child(3) { animation-delay: .1s; }
.page.active > .card:nth-child(4) { animation-delay: .14s; }
.page.active > .card:nth-child(5) { animation-delay: .18s; }
.page.active > .card:nth-child(6) { animation-delay: .22s; }
.page.active > .card:nth-child(7) { animation-delay: .26s; }
.page.active > .card:nth-child(8) { animation-delay: .3s; }
#page-dashboard.active .stat-card {
  animation: fxFadeInUp .45s ease both;
}
#page-dashboard.active .stat-card:nth-child(1) { animation-delay: .02s; }
#page-dashboard.active .stat-card:nth-child(2) { animation-delay: .08s; }
#page-dashboard.active .stat-card:nth-child(3) { animation-delay: .14s; }
#page-dashboard.active .stat-card:nth-child(4) { animation-delay: .2s; }

/* ================================================================
   LANDING PAGE (pemilihan peran)
   ================================================================ */
#landing-overlay.show,
#landing-overlay[style*="flex"] {
  animation: fxFadeIn .4s ease;
}
.landing-logo-wrap img { animation: fxLogoFloat 4.5s ease-in-out infinite; }
.landing-logo-wrap { animation: fxFadeInUp .5s ease both; }
.landing-badge { animation: fxFadeInUp .5s ease both .08s; }
.landing-title { animation: fxFadeInUp .55s ease both .14s; }
.landing-sub { animation: fxFadeInUp .55s ease both .2s; }
.landing-role-grid { animation: fxFadeIn .5s ease both .26s; }

.landing-role-card {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease,
              background .25s ease, border-color .25s ease;
  animation: fxFadeInUp .5s ease both;
}
.landing-role-grid .landing-role-card:nth-child(1) { animation-delay: .3s; }
.landing-role-grid .landing-role-card:nth-child(2) { animation-delay: .38s; }
.landing-role-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 16px 32px rgba(232,184,75,.16);
}
.landing-role-card:active { transform: translateY(-2px) scale(.99); }
.landing-role-icon { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.landing-role-card:hover .landing-role-icon { transform: scale(1.12) rotate(-6deg); }
.landing-role-cta { transition: transform .2s ease, gap .2s ease; display: inline-block; }
.landing-role-card:hover .landing-role-cta { transform: translateX(4px); }

/* ================================================================
   LOGIN
   ================================================================ */
#login-overlay[style*="flex"] .login-card {
  animation: fxPopIn .4s cubic-bezier(.22,.61,.36,1);
}
.login-logo { transition: transform .3s ease; }
.login-card:hover .login-logo { transform: scale(1.03); }

.form-control:focus {
  box-shadow: 0 0 0 3px rgba(200,149,46,.15);
  transform: translateY(-1px);
}
html[data-theme="dark"] .form-control:focus {
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}

.login-tipe-tag { animation: fxFadeIn .3s ease; }

/* ================================================================
   MODAL
   ================================================================ */
.modal-overlay { transition: background .2s ease; }
.modal-overlay.open .modal { animation: fxPopIn .32s cubic-bezier(.22,.61,.36,1); }
.modal-close { transition: transform .18s ease, color .2s ease, background .2s ease; }
.modal-close:hover { transform: rotate(90deg); }

/* ================================================================
   DROPDOWN (company switcher, user menu, dsb — sudah ada ddFadeIn,
   sedikit dihaluskan transisinya di sini)
   ================================================================ */
#company-dropdown, .user-menu { transition: opacity .2s ease, transform .2s ease; }

/* ================================================================
   TOAST
   ================================================================ */
.toast { transition: opacity .25s ease, transform .25s ease; }

/* ================================================================
   LOADING OVERLAY
   ================================================================ */
#app-loading-overlay { transition: opacity .3s ease; }

/* ================================================================
   TOMBOL TOGGLE SIDEBAR (panah collapse/expand)
   ================================================================ */
#sidebar-toggle-btn { transition: transform .25s ease, left .3s ease, background .2s ease; }
#sidebar-toggle-btn:hover { transform: scale(1.08); }
#sidebar-toggle-btn:active { transform: scale(.92); }
#sidebar-toggle-btn.collapsed svg { transform: rotate(180deg); }
#sidebar-toggle-btn svg { transition: transform .3s ease; }

/* ================================================================
   THEME SWITCH — transisi halus warna saat ganti tema terang/gelap
   ================================================================ */
body, #topbar, .login-card, .modal, #landing-overlay {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.form-control {
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease,
              background-color .3s ease, color .3s ease;
}