/* Desain 3 + Tahap 5B: perpindahan halaman halus (mode SPA, wire:navigate). Murni tampilan.
   - bar progres tipis amber di atas layar (Livewire: nprogress; warna lewat variabel bawaan Livewire)
   - halaman lama memudar cepat (.15 s); isi halaman baru masuk dari arah urutan dock (data-vy-arah pada <html>): ke menu di kanan = dari kanan, ke kiri = dari kiri;
     translateX ±46 px + opacity 0→1 + scale .97→1, .42 s, cubic-bezier(.22,1,.36,1). Dock, menu bawah, dan kerangka halaman tidak ikut bergerak (@persist); hanya isi.
   - bila isi belum datang dalam 300 ms: kerangka kaca ringan (#vy-kerangka, kelas vy-lambat) tampil sampai halaman terpasang.
   Kelas pada <html>: vy-pindah (sedang berpindah), vy-baru (halaman baru baru terpasang), vy-lambat (menunggu > 300 ms), atribut data-vy-arah = kanan|kiri (hanya perpindahan antar-menu dock). */
:root:root { --livewire-progress-bar-color: #F2A33A; }
#nprogress .bar { height: 3px !important; background: #F2A33A !important; }
#nprogress .peg { box-shadow: 0 0 10px #F2A33A, 0 0 5px #F2A33A !important; }

.vy-kerangka { display: none; }

@media (prefers-reduced-motion: no-preference) {
    html.vy-pindah .fi-main-ctn { opacity: 0 !important; transition: opacity .15s ease; }   /* !important: Filament memberi gaya opacity sebaris lewat Alpine */
    html.vy-baru .fi-main-ctn { animation: vy-masuk .25s ease both; }
    @keyframes vy-masuk { from { opacity: .55; } to { opacity: 1; } }

    /* antar-menu dock: geser masuk. Transform pada .fi-main-ctn menjadikannya acuan elemen fixed di dalamnya (bar Simpan/ketik): bar itu disembunyikan selama gerak lalu dimunculkan. */
    html[data-vy-arah].vy-baru { overflow-x: clip; }
    html[data-vy-arah="kanan"].vy-baru .fi-main-ctn { animation: vy-geser-kanan .42s cubic-bezier(.22, 1, .36, 1) both; }
    html[data-vy-arah="kiri"].vy-baru .fi-main-ctn { animation: vy-geser-kiri .42s cubic-bezier(.22, 1, .36, 1) both; }
    @keyframes vy-geser-kanan { from { opacity: 0; transform: translateX(46px) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes vy-geser-kiri { from { opacity: 0; transform: translateX(-46px) scale(.97); } to { opacity: 1; transform: none; } }
    html[data-vy-arah].vy-baru .fi-main-ctn :is(.d5-bar, .vy-simpan-bar, .fi-form-actions, .jl-bawah, .d4-bar, .d4-lanjut, .gm-fab) { animation: vy-bar-masuk .2s ease .36s both; }
    @keyframes vy-bar-masuk { from { opacity: 0; } to { opacity: 1; } }

    /* kerangka kaca (HP gelap, di atas dock): empat kartu berdenyut pelan */
    @media screen and (max-width: 767px) {
        html.dark.vy-lambat .vy-kerangka { display: grid; position: fixed; z-index: 12; left: var(--vy-d-kiri, 16px); right: var(--vy-d-kanan, 16px); top: calc(env(safe-area-inset-top, 0px) + 84px); bottom: calc(var(--vy-d-ruang, 88px) + 14px); gap: 14px; grid-template-rows: 1.5fr 1fr 1fr 1fr; pointer-events: none; }
        html.dark .vy-kerangka i { display: block; border-radius: 26px; border: 1px solid rgba(255, 222, 185, .14); background-color: rgba(22, 15, 10, .4); background-image: linear-gradient(160deg, rgba(255, 232, 205, .12), rgba(255, 232, 205, .04)); animation: vy-kerangka-denyut 1.3s ease-in-out infinite; }
        html.dark .vy-kerangka i:nth-child(2) { animation-delay: .15s; }
        html.dark .vy-kerangka i:nth-child(3) { animation-delay: .3s; }
        html.dark .vy-kerangka i:nth-child(4) { animation-delay: .45s; }
        @keyframes vy-kerangka-denyut { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
    }
}

@media (prefers-reduced-motion: reduce) {
    /* tanpa geser dan tanpa kerangka: halaman lama tetap tampil sampai halaman baru terpasang, lalu pudar sangat cepat (.01 s) */
    html.vy-baru .fi-main-ctn { animation: vy-masuk-cepat .01s linear both; }
    @keyframes vy-masuk-cepat { from { opacity: 0; } to { opacity: 1; } }
    html.vy-lambat .vy-kerangka { display: none !important; }
}