/* ============================================================
   animations.css — micro-interactions premium (ringan, CSS-only)
   1) Ripple "membal" pada button / .nav-item / .card
   2) Animasi FAB (+) → (x)
   3) Transisi bottom sheet & backdrop
   4) Transisi pindah halaman (dipakai router via .view.is-active)
   Dimuat paling akhir supaya boleh menimpa nilai dasar komponen.
   ============================================================ */

/* ---------- 1. Ripple "membal" ---------- */
/* Class ini ditambahkan lewat JS ke elemen yang ditekan. overflow
   memotong ripple tepat di tepi elemen (mengikuti border-radius). */
.ripple-host {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  transform: scale(0);
  pointer-events: none;
  animation: ripple-out .58s cubic-bezier(.22, .61, .36, 1) forwards;
  will-change: transform, opacity;
}

/* Di permukaan gelap / tombol penuh warna, ripple dibuat putih. */
.btn-primary .ripple,
.btn-danger .ripple,
.quick-fab .ripple,
.top-action-btn .ripple {
  background: #fff;
}

@keyframes ripple-out {
  from { transform: scale(0); opacity: .34; }
  to   { transform: scale(1); opacity: 0; }
}

/* Efek fisik saat ditekan: sedikit mengecil. */
button:active,
.nav-item:active {
  transform: scale(.96);
}
button { transition: transform .1s ease; }
.nav-item { transition: color .16s ease, transform .12s ease; }
.card { transition: transform .18s ease, box-shadow .18s ease; }

/* ---------- 2. FAB (+) ---------- */
/* Muncul dengan scale-up + bounce ringan saat aplikasi dibuka. */
@keyframes fab-in {
  0%   { opacity: 0; transform: scale(.5) translateY(16px); }
  55%  { opacity: 1; transform: scale(1.1) translateY(0); }
  75%  { transform: scale(.97); }
  100% { transform: scale(1); }
}
.quick-fab {
  overflow: hidden;
  animation: fab-in .55s cubic-bezier(.22, .61, .36, 1);
  /* Halo cincin dipertahankan lewat box-shadow; tidak ikut terpotong
     overflow seperti ::after. */
  box-shadow: var(--shadow-fab), 0 0 0 1px rgba(18, 113, 90, .18);
}
/* Karena JS menambah .ripple-host, pastikan FAB tetap fixed. */
.quick-fab.ripple-host { position: fixed; overflow: hidden; }

.quick-fab .ico {
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
/* Ikon (+) berputar 45° menjadi (x) saat sheet terbuka. */
body.is-sheet-open .quick-fab .ico { transform: rotate(45deg); }

/* Saat sheet terbuka, FAB naik ke kanan atas dan menjadi tombol tutup. */
body.is-sheet-open .quick-fab {
  display: grid !important;
  top: calc(12px + env(safe-area-inset-top));
  bottom: auto;
  z-index: 1001; /* di atas backdrop sheet (1000) */
}

/* ---------- 3. Bottom sheet ---------- */
/* Beri ruang di atas panel supaya FAB penutup tidak menimpa konten. */
body.is-sheet-open .sheet-panel {
  max-height: calc(100dvh - 88px - env(safe-area-inset-top));
}
.sheet-backdrop {
  transition: opacity .3s ease;
  will-change: opacity;
}
.sheet-panel {
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* Transisi pindah halaman (fade-in + slide-up) didefinisikan di
   base.css pada .view.is-active / @keyframes view-in. */

/* ---------- Aksesibilitas ---------- */
@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
  .quick-fab { animation: none; }
  .quick-fab .ico,
  .sheet-panel,
  .sheet-backdrop,
  .view.is-active { transition: none; animation: none; }
}