/* ==========================================================================
   Toko Naca — Motion Layer khusus HALAMAN MOBILE
   ADDITIVE. Tidak mengubah layout/ukuran/posisi. Hanya gerak.
   Dimuat SETELAH animations.css supaya bisa saling melengkapi.
   Semua gerak hormati prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   1. ENTRANCE — kartu masuk dari bawah sedikit lebih terasa di HP
   Halaman HP sempit, jadi gerak 14px terasa datar. 20px lebih hidup,
   tapi tidak berlebihan supaya tidak bikin pusing saat scroll cepat.
   ========================================================================== */

@keyframes tnFadeUpMobile {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tn-reveal {
  animation: tnFadeUpMobile .42s var(--tn-ease) both;
}

/* Delay bertingkat dirapatkan: di HP kartu lebih banyak & lebih pendek,
   delay 0.05s membuat kartu paling bawah terasa lambat. */
.tn-d1 { animation-delay: .03s; }
.tn-d2 { animation-delay: .06s; }
.tn-d3 { animation-delay: .09s; }
.tn-d4 { animation-delay: .12s; }
.tn-d5 { animation-delay: .15s; }
.tn-d6 { animation-delay: .18s; }

/* ==========================================================================
   2. HEADER — menempel halus saat discroll
   ========================================================================== */

header {
  transition: box-shadow .25s var(--tn-ease),
              background-color .25s var(--tn-ease);
}
header.tn-scrolled {
  box-shadow: 0 4px 16px -6px rgba(19, 27, 46, .18);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* ==========================================================================
   3. BOTTOM NAV — indikator aktif bergerak, bukan pindah mendadak
   ========================================================================== */

nav a {
  transition: color .2s var(--tn-ease-inout),
              transform .18s var(--tn-ease);
}
nav a:active { transform: scale(.94); }

/* Ikon ikut naik sedikit saat tab aktif */
nav a .material-symbols-outlined {
  transition: transform .3s var(--tn-ease), font-variation-settings .3s var(--tn-ease);
}
nav a[aria-current="page"] .material-symbols-outlined,
nav a.tn-aktif .material-symbols-outlined {
  transform: translateY(-2px) scale(1.06);
}
nav a[aria-current="page"]::before,
nav a.tn-aktif::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: currentColor;
  transform: translateX(-50%);
  animation: tnTabIn .3s var(--tn-ease) both;
}
@keyframes tnTabIn {
  from { width: 0; opacity: 0; }
  to   { width: 22px; opacity: 1; }
}
nav a { position: relative; }

/* ==========================================================================
   4. TOMBOL BESAR — feedback tekan lebih berasa (jari vs kursor beda)
   ========================================================================== */

.tn-press:active { transform: scale(.955); }

/* Kartu yang bisa ditekan: seluruh area kartu, bukan cuma tombol kecil */
.tn-tap {
  transition: transform .16s var(--tn-ease), box-shadow .16s var(--tn-ease);
  -webkit-tap-highlight-color: transparent;
}
.tn-tap:active {
  transform: scale(.977);
  box-shadow: 0 2px 8px -4px rgba(19, 27, 46, .16);
}

/* ==========================================================================
   5. SCROLL — konten muncul saat masuk viewport (bukan semua di awal)
   ========================================================================== */

.tn-muncul {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s var(--tn-ease), transform .45s var(--tn-ease);
}
.tn-muncul.tn-terlihat {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   6. CHART / BAR — tumbuh dengan easing yang lebih halus
   ========================================================================== */

.tn-bar { animation-duration: .9s; }

/* Spinner halus untuk state loading yang lebih lama */
@keyframes tnSpin { to { transform: rotate(360deg); } }
.tn-spin { animation: tnSpin .9s linear infinite; }

/* ==========================================================================
   7. SKELETON — warna disesuaikan tema NACA (bukan biru generik)
   ========================================================================== */

.tn-loading {
  background: linear-gradient(90deg, #f1ece5 0%, #e6ded2 50%, #f1ece5 100%);
  background-size: 400px 100%;
}

/* ==========================================================================
   8. RIPPLE — umpan balik sentuh pada elemen ber-role button
   ========================================================================== */

@keyframes tnRipple {
  from { transform: scale(0); opacity: .35; }
  to   { transform: scale(2.6); opacity: 0; }
}
.tn-ripple-host { position: relative; overflow: hidden; }
.tn-ripple {
  position: absolute;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
  animation: tnRipple .55s var(--tn-ease) forwards;
}

/* ==========================================================================
   9. AKSESIBILITAS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tn-muncul { opacity: 1 !important; transform: none !important; }
  .tn-reveal, .tn-bar, .tn-ripple { animation: none !important; }
  header.tn-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .tn-tap:active, .tn-press:active { transform: none; }
}