/* ==========================================================================
   Toko Naca — Motion Layer
   ADDITIVE. Tidak mengubah layout/ukuran/posisi elemen, hanya gerak.
   Semua animasi hormati prefers-reduced-motion.
   ========================================================================== */

/* ---------- Token gerak ---------- */
:root {
  --tn-ease: cubic-bezier(.22, 1, .36, 1);        /* smooth out */
  --tn-ease-inout: cubic-bezier(.4, 0, .2, 1);
  --tn-fast: .18s;
  --tn-base: .32s;
  --tn-slow: .5s;
}

/* ==========================================================================
   1. ENTRANCE — konten muncul bertahap saat halaman dibuka
   ========================================================================== */

@keyframes tnFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tnFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tnScaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hanya elemen yang diberi kelas .tn-reveal oleh JS yang dianimasikan,
   supaya kalau JS gagal konten tetap terlihat (fail-safe). */
.tn-reveal {
  animation: tnFadeUp var(--tn-slow) var(--tn-ease) both;
}
.tn-reveal-fade { animation: tnFadeIn var(--tn-base) var(--tn-ease) both; }
.tn-reveal-scale { animation: tnScaleIn var(--tn-base) var(--tn-ease) both; }

/* Delay bertingkat untuk kartu yang sebaris */
.tn-d1 { animation-delay: .05s; }
.tn-d2 { animation-delay: .10s; }
.tn-d3 { animation-delay: .15s; }
.tn-d4 { animation-delay: .20s; }
.tn-d5 { animation-delay: .25s; }
.tn-d6 { animation-delay: .30s; }

/* ==========================================================================
   2. SIDEBAR — gerak halus saat dibuka
   ========================================================================== */

/* Desktop: beri transisi halus untuk item menu (tidak mengubah posisi) */
#tnSidebar nav a {
  transition: background-color var(--tn-fast) var(--tn-ease-inout),
              color var(--tn-fast) var(--tn-ease-inout),
              transform var(--tn-fast) var(--tn-ease);
}
#tnSidebar nav a:hover { transform: translateX(3px); }
#tnSidebar nav a:active { transform: translateX(1px) scale(.985); }

/* Ikon menu ikut bergerak halus */
#tnSidebar nav a .material-symbols-outlined {
  transition: transform var(--tn-base) var(--tn-ease),
              color var(--tn-fast) var(--tn-ease-inout);
}
#tnSidebar nav a:hover .material-symbols-outlined { transform: scale(1.12); }

/* Mobile: drawer pakai easing yang lebih lembut */
@media (max-width: 1023px) {
  #tnSidebar {
    transition: transform .34s var(--tn-ease),
                box-shadow .34s var(--tn-ease) !important;
  }
  #tnSidebar.tn-open {
    box-shadow: 8px 0 32px rgba(19, 27, 46, .22);
  }
  /* Item menu muncul bertahap saat drawer terbuka */
  #tnSidebar.tn-open nav a {
    animation: tnSlideIn .34s var(--tn-ease) both;
  }
  #tnSidebar.tn-open nav a:nth-child(1) { animation-delay: .04s; }
  #tnSidebar.tn-open nav a:nth-child(2) { animation-delay: .07s; }
  #tnSidebar.tn-open nav a:nth-child(3) { animation-delay: .10s; }
  #tnSidebar.tn-open nav a:nth-child(4) { animation-delay: .13s; }
  #tnSidebar.tn-open nav a:nth-child(5) { animation-delay: .16s; }
  #tnSidebar.tn-open nav a:nth-child(6) { animation-delay: .19s; }
  #tnSidebar.tn-open nav a:nth-child(7) { animation-delay: .22s; }
  #tnSidebar.tn-open nav a:nth-child(8) { animation-delay: .25s; }
  #tnSidebar.tn-open nav a:nth-child(9) { animation-delay: .28s; }
  #tnSidebar.tn-open nav a:nth-child(10) { animation-delay: .31s; }

  #tnBurger { transition: transform var(--tn-fast) var(--tn-ease), background-color var(--tn-fast); }
  #tnBurger:active { transform: scale(.92); }
}

@keyframes tnSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   3. KARTU — hover terangkat halus
   ========================================================================== */

.tn-lift {
  transition: transform var(--tn-base) var(--tn-ease),
              box-shadow var(--tn-base) var(--tn-ease);
  will-change: transform;
}
.tn-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(19, 27, 46, .18),
              0 2px 6px -2px rgba(19, 27, 46, .08);
}
.tn-lift:active { transform: translateY(-1px); }

/* Kartu KPI: sedikit lebih hidup */
.tn-kpi {
  transition: transform var(--tn-base) var(--tn-ease),
              box-shadow var(--tn-base) var(--tn-ease),
              border-color var(--tn-base) var(--tn-ease);
}
.tn-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(0, 69, 50, .22);
}

/* ==========================================================================
   4. TOMBOL — feedback tekan + kilau halus
   ========================================================================== */

.tn-press { transition: transform var(--tn-fast) var(--tn-ease); }
.tn-press:active { transform: scale(.96); }

/* Efek kilau saat hover pada tombol utama */
.tn-shine { position: relative; overflow: hidden; }
.tn-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--tn-ease);
  pointer-events: none;
}
.tn-shine:hover::after { transform: translateX(120%); }

/* ==========================================================================
   5. TABEL — baris masuk bertahap
   ========================================================================== */

.tn-row {
  animation: tnFadeIn var(--tn-base) var(--tn-ease) both;
}

/* Baris tabel: sorot halus saat hover */
tbody tr {
  transition: background-color var(--tn-fast) var(--tn-ease-inout);
}

/* ==========================================================================
   6. ANGKA — count-up (JS menaikkan nilainya, ini hanya transisinya)
   ========================================================================== */

.tn-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7. LOADING — skeleton halus saat data belum datang
   ========================================================================== */

@keyframes tnShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.tn-loading {
  background: linear-gradient(90deg, #f2f3ff 0%, #eaedff 50%, #f2f3ff 100%);
  background-size: 400px 100%;
  animation: tnShimmer 1.3s linear infinite;
  border-radius: .375rem;
  color: transparent !important;
  min-width: 3ch;
  display: inline-block;
}

/* ==========================================================================
   8. PROGRESS BAR — mengisi dari 0 saat muncul
   ========================================================================== */

@keyframes tnGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tn-bar {
  transform-origin: left center;
  animation: tnGrowX .8s var(--tn-ease) both;
}

/* ==========================================================================
   9. HALAMAN — transisi masuk
   ========================================================================== */

main { animation: tnFadeIn .28s var(--tn-ease) both; }

/* ==========================================================================
   10. AKSESIBILITAS — hormati preferensi pengguna
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tn-lift:hover, .tn-kpi:hover { transform: none; }
  #tnSidebar nav a:hover { transform: none; }
}