/* ===== ANIMASI KITO: navigasi dan transisi halaman (mobile-first) =====
   Berdiri sendiri: dimuat setelah semua CSS lain dan tidak mengubah file lain.
   Pasangannya: assets/js/animasi.js
   Semua gerak dimatikan otomatis jika perangkat memilih "kurangi gerakan". */

/* Animasi "naik" bawaan di style.css diputar ulang pada SETIAP render
   (misalnya saat mengganti tombol kecil). Sekarang kartu hanya beranimasi
   saat berpindah tab, cabang, atau tampilan; kelasnya dipasang animasi.js. */
#app .cd { animation: none; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. NAVIGASI BAWAH ---------- */

  /* masuk dari bawah setelah splash selesai (fill backwards: tidak mengunci transform) */
  /* navigasi masuk setelah splash ditutup (splash.js memberi <html> kelas "kito-siap") */
  .nav { transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); }
  html.kito-siap .nav { animation: kito-nav-masuk 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) 0.15s backwards; }
  @keyframes kito-nav-masuk {
    from { transform: translate(-50%, 150%); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
  }

  /* kapsul penanda tab aktif meluncur antar tombol, dengan sedikit pantulan */
  .nav-pill {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: var(--pw, 0px);
    transform: translateX(var(--px, 0px));
    border-radius: 999px;
    background: var(--nv);
    box-shadow: 0 4px 12px rgba(0, 32, 96, 0.28);
    pointer-events: none;
    z-index: 0;
  }
  .nav-pill.siap {
    transition:
      transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1),
      width 0.35s cubic-bezier(0.34, 1.2, 0.64, 1);
  }
  [data-theme="dark"] .nav-pill { background: #2a4fa0; }

  /* tombol di atas kapsul; latar tombol aktif dipindah ke kapsul */
  .nav button {
    position: relative;
    z-index: 1;
    transition: color 0.25s ease;
    -webkit-user-select: none;
    user-select: none;
  }
  .nav button.on,
  [data-theme="dark"] .nav button.on { background: transparent; color: #fff; }

  .nav .ik { transition: transform 0.18s ease; }
  .nav button:active .ik { transform: scale(0.8); }
  .nav button.on .ik { animation: kito-ik-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes kito-ik-pop {
    0%   { transform: scale(0.6) translateY(5px); }
    55%  { transform: scale(1.3) translateY(-3px); }
    100% { transform: none; }
  }

  /* sembunyi saat menggulir turun, muncul lagi saat menggulir naik (layar HP) */
  @media (max-width: 720px) {
    .nav.nav-sembunyi { transform: translate(-50%, calc(100% + 28px)); }
  }

  /* ---------- 2. TRANSISI HALAMAN ---------- */

  /* arah geser: tab ke kanan (Region -> Area -> Cabang) masuk dari kanan, sebaliknya dari kiri */
  #app.an-maju .cd   { animation: kito-dari-kanan 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
  #app.an-mundur .cd { animation: kito-dari-kiri 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;  animation-delay: calc(var(--i, 0) * 45ms); }
  /* ganti cabang / area / tampilan: naik dan mekar halus */
  #app.an-ganti .cd  { animation: kito-ganti 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;       animation-delay: calc(var(--i, 0) * 45ms); }
  /* ganti tanggal: hanya redup sebentar, tanpa menggeser tata letak */
  #app.an-lembut     { animation: kito-lembut 0.28s ease; }

  @keyframes kito-dari-kanan { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
  @keyframes kito-dari-kiri  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
  @keyframes kito-ganti      { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
  @keyframes kito-lembut     { from { opacity: 0.45; } to { opacity: 1; } }

  /* mencegah bilah gulir horizontal muncul sekejap saat kartu digeser */
  html.an-jalan { overflow-x: hidden; }

  /* batang kemajuan tumbuh dari kiri saat halaman baru muncul */
  #app.an-maju .bar b,    #app.an-mundur .bar b,    #app.an-ganti .bar b,
  #app.an-maju .sh-bar i, #app.an-mundur .sh-bar i, #app.an-ganti .sh-bar i,
  #app.an-maju .wt-bar i, #app.an-mundur .wt-bar i, #app.an-ganti .wt-bar i,
  #app.an-maju .o2o-track i, #app.an-mundur .o2o-track i, #app.an-ganti .o2o-track i,
  #app.an-maju .wt-stack i,  #app.an-mundur .wt-stack i,  #app.an-ganti .wt-stack i {
    transform-origin: left center;
    animation: kito-isi 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
  }
  @keyframes kito-isi { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ---------- 3. HEADER ---------- */

  /* filter dan pencarian muncul halus saat kembali ke tab yang menampilkannya
     (animasi CSS otomatis diputar saat display berubah dari none) */
  body:not(.maint) header .geser,
  body:not(.maint) header .tab-geser,
  #sc { animation: kito-turun 0.32s ease both; }
  @keyframes kito-turun { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* tombol tema berputar saat diketuk */
  .tema.putar { animation: kito-putar 0.5s cubic-bezier(0.34, 1.3, 0.64, 1); }
  @keyframes kito-putar { from { transform: rotate(-200deg) scale(0.7); } to { transform: none; } }

  /* warna berubah mulus saat ganti tema terang / gelap */
  html.tema-ganti *,
  html.tema-ganti *::before,
  html.tema-ganti *::after {
    transition:
      background-color 0.35s ease,
      color 0.35s ease,
      border-color 0.35s ease,
      fill 0.35s ease,
      stroke 0.35s ease !important;
  }

  /* ---------- 4. UMPAN BALIK SENTUHAN (layar sentuh saja) ---------- */
  @media (hover: none) and (pointer: coarse) {
    .seg button, .btn, .unduh, .area-open, .tab-geser button, .cetak, .tema, .pg-tab,
    .ak-branch, .rk, .wt-row, .o2o-rank-row {
      transition:
        transform 0.14s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
    }
    .seg button:active, .btn:active, .unduh:active, .area-open:active,
    .tab-geser button:active, .cetak:active, .tema:active, .pg-tab:active { transform: scale(0.95); }
    .ak-branch:active, .rk:active, .wt-row:active, .o2o-rank-row:active { transform: scale(0.98); }
    tr[data-d]:active td { background: rgba(37, 99, 235, 0.14); }
  }
}

@media print {
  * { animation: none !important; transition: none !important; }
  .nav-pill { display: none; }
}