/* ============================================================
   MOTION — satu ritme untuk seluruh app.
   Spec: docs/superpowers/specs/2026-07-12-entrance-motion-design.md

   Semua yang beranimasi saat masuk (card, bar, chart, donut) membaca
   ritme dari SINI. Sebelumnya ada tiga ritme yang jalan sendiri-sendiri
   (chart-animations.js 700ms/80ms, donutEntrance 550ms tanpa antre,
   dan motion baru) — itu yang bikin tabrakan.

   Elemen TIDAK diganti animasinya. Yang diatur cuma GILIRAN-nya:
   setiap peserta dapat --mo-i (nomor antrean) dari js/entrance.js,
   lalu mulai pada  giliran x --mo-stag.
   ============================================================ */
:root{
  /* Kecepatan 2/10 — pilihan user. Ubah dua angka ini = seluruh app ikut. */
  --mo-dur:1066ms;        /* durasi satu elemen masuk        */
  --mo-stag:144ms;        /* jeda antar giliran              */
  --mo-bar-dur:1998ms;    /* bar terisi (lebih panjang, wajar) */
  --mo-ease:cubic-bezier(.05,.7,.1,1);   /* Material emphasized-decelerate, tanpa bounce */
  --mo-rise:14px;
}

/* Giliran → delay. Dipakai bareng oleh semua peserta. */
.mo-in,
.chart-donut-wrap,
.mo-bar{
  animation-delay: calc(var(--mo-i, 0) * var(--mo-stag));
}

/* Card & panel: naik + fade. */
@keyframes moLift{
  from{ opacity:0; transform:translateY(var(--mo-rise)); }
  to  { opacity:1; transform:none; }
}
.mo-in{
  animation-name: moLift;
  animation-duration: var(--mo-dur);
  animation-timing-function: var(--mo-ease);
  animation-fill-mode: backwards;   /* JANGAN 'both' — 'both' mengunci transform:none
                                       dan mematikan :hover + 3D tilt effects.js */
  will-change: opacity, transform;
}

/* Bar: terisi 0 → nilai. Satu-satunya sumber transisi bar (inline di
   dashboard.js sudah dihapus, biar tidak dobel deklarasi). */
.mo-bar{
  transition: width var(--mo-bar-dur) var(--mo-ease);
  transition-delay: calc(var(--mo-i, 0) * var(--mo-stag));
  animation: none;   /* .mo-bar hanya pakai transition, bukan animation */
}

/* ── Tahan konten basi saat pindah tab ────────────────────────
   sw() menyalakan section (display:block) SEBELUM datanya dimuat, dan
   loadDashboard() dkk baru menyembunyikan isinya setelah debounce 300ms
   (dashboard.js:42). Tanpa ini, isi dari kunjungan sebelumnya sempat terlihat
   penuh lalu hilang — itulah "glitch sekali" saat pindah tab.
   .mo-hold dipasang oleh entrance.js secara sinkron di sw(), jadi isi basi tidak
   pernah sempat ter-paint. Dilepas begitu konten (baru) dapat gilirannya. */
.mo-hold .ds-card,
.mo-hold .mc,
.mo-hold .dc-card,
.mo-hold .dd-card,
.mo-hold .card,
.mo-hold .chart-donut-wrap{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .mo-in{ animation:none !important; }
  .mo-bar{ transition:none !important; }
  .chart-donut-wrap{ animation:none !important; }
  .mo-hold .ds-card,
  .mo-hold .mc,
  .mo-hold .dc-card,
  .mo-hold .dd-card,
  .mo-hold .card,
  .mo-hold .chart-donut-wrap{ opacity:1; }
}