/* ==========================================================================
   06 GERAK — katalog animasi. Setiap gerak punya alasan (R-19), MOTION 2:
   transisi yang menuntun mata, tanpa animasi berulang tanpa pemicu.
   ========================================================================== */

/* Halaman masuk: geser naik pendek + pudar. Menandai konten baru. */
@keyframes ios-masuk-halaman { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
/* Modal: skala dari 0.94 dengan pantulan. Meniru sheet iOS. */
@keyframes ios-modal-masuk { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ios-modal-keluar { to { opacity: 0; transform: translateY(16px) scale(.96); } }
/* Bottom sheet (HP): naik dari bawah. */
@keyframes ios-sheet-naik { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ios-sheet-turun { to { transform: translateY(100%); } }
/* Dialog sistem: membesar dari 1.12 ke 1, seperti alert iOS. */
@keyframes ios-alert-masuk { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
/* Menu konteks: tumbuh dari sudut tombol. */
@keyframes ios-menu-masuk { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
/* Toast dan notifikasi: turun dari pulau. */
@keyframes ios-turun { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ios-naik-hilang { to { opacity: 0; transform: translateY(-12px) scale(.96); } }
/* Ikon aplikasi muncul bergelombang saat Home Screen dibuka (pertama kali). */
@keyframes ios-ikon-muncul { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
/* Barang masuk keranjang: denyut sekali di angka keranjang. */
@keyframes ios-denyut { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* Centang berhasil: garis tergambar. */
@keyframes ios-centang { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }
@keyframes ios-lingkar { from { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } to { transform: none; } }
/* Kerangka memuat dan putaran: hanya selama data dimuat. */
@keyframes ios-kilau { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes ios-putar { to { transform: rotate(360deg); } }
/* Buka kunci: lock screen naik dan memudar, ruang kerja mendekat. */
@keyframes ios-buka-kunci { to { transform: translateY(-100%); opacity: 0; } }
@keyframes ios-ruang-muncul { from { opacity: 0; transform: scale(1.06); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

.ios-anim-pop { animation: ios-denyut 380ms var(--ease-spring); }

/* ---------- Efek simbol (padanan efek SF Symbols) ----------
   Dipasang sementara oleh window.iosSimbol (shell.js) hanya saat ada
   interaksi atau perubahan status; tidak ada ikon yang bergerak sendiri. */
@keyframes sim-pantul { 0% { transform: scale(1); } 28% { transform: scale(.82); } 62% { transform: scale(1.12); } 82% { transform: scale(.97); } 100% { transform: scale(1); } }
@keyframes sim-pantul-naik { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) scale(1.06); } 70% { transform: translateY(.5px); } }
@keyframes sim-denyut { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sim-putar { to { transform: rotate(360deg); } }
@keyframes sim-goyang { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(14deg); } 36% { transform: rotate(-11deg); } 54% { transform: rotate(7deg); } 72% { transform: rotate(-4deg); } }
@keyframes sim-ganti-masuk { from { opacity: 0; transform: scale(.5); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sim-gambar { from { stroke-dashoffset: var(--sim-panjang, 40); } to { stroke-dashoffset: 0; } }

.ios-ic.sim-pantul { animation: sim-pantul 460ms var(--ease-spring); transform-origin: 50% 55%; }
.ios-ic.sim-pantul-naik { animation: sim-pantul-naik 520ms var(--ease-spring); }
.ios-ic.sim-goyang { animation: sim-goyang 640ms var(--ease-io); transform-origin: 50% 12%; }
.ios-ic.sim-ganti { animation: sim-ganti-masuk 320ms var(--ease-spring); }
/* Pulse dan rotate hanya hidup selama statusnya berlangsung (memuat, live). */
.ios-ic.sim-denyut .s,
.ios-ic.sim-denyut:not(:has(.s)) { animation: sim-denyut 1.4s var(--ease-io) infinite; }
.ios-ic.sim-putar { animation: sim-putar 900ms linear infinite; transform-origin: 50% 50%; }
.ios-ic.sim-putar-sekali { animation: sim-putar 560ms var(--ease-io); transform-origin: 50% 50%; }
/* Draw-in: setiap goresan tergambar dari awal (panjang diisi JS). */
.ios-ic.sim-gambar path,
.ios-ic.sim-gambar circle { stroke-dasharray: var(--sim-panjang, 40); animation: sim-gambar 520ms var(--ease-io) both; }
.ios-ic.sim-gambar .k { animation-delay: 160ms; }

/* Pemicu deklaratif: tombol tab, sidebar, dan ikon aplikasi memantul saat
   ditekan. Ikon tab yang aktif masuk dengan efek ganti (garis -> terisi). */
.ios-tab[aria-current="page"] > .ios-ic--isi { animation: sim-ganti-masuk 360ms var(--ease-spring); }

/* Ganti tema halus: warna latar dan teks bertransisi singkat, hanya saat
   tombol mode ditekan (kelas dipasang sementara oleh JS). */
html.ios-ganti-tema,
html.ios-ganti-tema *,
html.ios-ganti-tema *::before,
html.ios-ganti-tema *::after {
    transition: background-color 360ms var(--ease-io), color 360ms var(--ease-io), border-color 360ms var(--ease-io), fill 360ms, stroke 360ms !important;
}

/* Kurangi gerak: semua animasi dipersingkat, tanpa gerak spasial. */
@media (prefers-reduced-motion: reduce) {
    html[data-ui="ios26"] *,
    html[data-ui="ios26"] *::before,
    html[data-ui="ios26"] *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}
html[data-gerak="kurang"] *,
html[data-gerak="kurang"] *::before,
html[data-gerak="kurang"] *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
}