/* Animasi antarmuka global: modal (semua jenis), menu tarik-turun, dan perpindahan halaman.
 * Disisipkan otomatis ke semua halaman HTML (admin, teknisi, kasir, kolektor, agen, mitra, pelanggan) oleh app-customer.js.
 * Modal selain bawaan (.mo / .modal) ditangani motion.js lewat kelas .mo-in / .mo-panel-in. */

:root { --mo-ease: cubic-bezier(.22, 1, .36, 1); }

@keyframes moFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes moPop    { from { opacity: 0; transform: translateY(28px) scale(.93); } to { opacity: 1; transform: none; } }
@keyframes moSheet  { from { opacity: .6; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes ddIn     { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ptRise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ptFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Modal bawaan admin (.mo > .mb): muncul dengan latar memudar + kartu naik & membesar; di HP menjadi sheet dari bawah ── */
.mo.show { animation: moFade .2s ease backwards; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mo.show > .mb { animation: moPop .38s var(--mo-ease) backwards; }
@media (max-width: 576px) { .mo.show > .mb { animation: moSheet .34s var(--mo-ease) backwards; } }

/* ── Modal Bootstrap (portal teknisi, pelanggan, dll.): per kartu muncul dengan gerak pegas ringan ── */
.modal.fade .modal-dialog { opacity: 0; transform: translateY(26px) scale(.95); transition: transform .32s var(--mo-ease), opacity .24s ease; }
.modal.show .modal-dialog { opacity: 1; transform: none; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal.modal-static .modal-dialog { transform: scale(1.02); }
@media (max-width: 576px) { .modal.fade:not(.modal-fullscreen) .modal-dialog { transform: translateY(46px) scale(.97); } }
.offcanvas { transition-timing-function: var(--mo-ease) !important; }

/* ── Menu tarik-turun ── */
.dropdown-menu.show { animation: ddIn .16s ease backwards; transform-origin: top; }

/* ── Modal jenis lain (dibaca motion.js): latar & panel ── */
.mo-in { animation: moFade .2s ease backwards; }
.mo-panel-in { animation: moPop .38s var(--mo-ease) backwards; }
@media (max-width: 576px) { .mo-panel-in.mo-sheet { animation: moSheet .34s var(--mo-ease) backwards; } }

/* ── Perpindahan halaman: kerangka diam (lihat page-transition.css), blok isi muncul berurutan dengan naik halus ── */
@keyframes ptFadeOut { to { opacity: 0; } }
/* tombol: respons sentuhan halus */
.btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .mo.show, .mo.show > .mb, .mo-in, .mo-panel-in, .dropdown-menu.show, .mw > .page > * { animation: none !important; }
  .modal.fade .modal-dialog { transition: none; transform: none; }
}
@media print {
  .mo, .mo > .mb, .mw > .page > * { animation: none !important; }
}
/* HP: kabur layar penuh di belakang jendela (modal) sangat berat; cukup lapisan gelap */
@media (max-width: 992px) {
  .mo.show, .modal-backdrop.show { -webkit-backdrop-filter: none; backdrop-filter: none; }
}