/**
 * Inventaris Pertanian - Animasi bergaya aplikasi (tetap berbasis website).
 *
 * Semua animasi hanya aktif kalau perangkat TIDAK meminta "kurangi gerakan"
 * (prefers-reduced-motion), jadi aman untuk pengguna yang sensitif gerakan.
 *
 * Isi:
 *  1. Transisi antar halaman (View Transitions; header & menu bawah tetap diam)
 *  2. Konten muncul bertahap (fade + naik)
 *  3. Efek tekan pada tombol/kartu + riak (ripple)
 *  4. Menu bawah: ikon "pop" & garis aktif tumbuh
 *  5. Sidebar, jendela hapus (bottom sheet), notifikasi
 *  6. Bar progres tipis di atas saat pindah halaman
 *
 * @package Inventaris_Pertanian
 */

/* Interaksi ala aplikasi: tanpa jeda ketuk 300ms & tanpa kilatan biru. */
.inv-nav-item,
.inv-hamburger,
.inv-drawer-item,
.inv-drawer-subitem,
.inv-btn-primary,
.inv-btn-secondary,
.inv-btn-add,
.inv-aksi-btn,
.inv-jenis-btn,
.inv-page-btn,
.inv-back-link,
a.inv-beranda-card,
a.inv-tutorial-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.inv-nav-item,
.inv-nav-item *,
.inv-drawer-item,
.inv-hamburger {
    -webkit-user-select: none;
    user-select: none;
}

@media (prefers-reduced-motion: no-preference) {

    /* ========================================================
       1. TRANSISI ANTAR HALAMAN
       Browser yang mendukung (Chrome/Edge/Safari baru) akan cross-fade
       konten, sementara header & menu bawah tetap di tempat.
       Browser lain memakai cadangan di inv-animations.js.
       ======================================================== */
    @view-transition {
        navigation: auto;
    }

    .inv-header { view-transition-name: inv-header; }
    .inv-nav    { view-transition-name: inv-nav; }

    ::view-transition-group(inv-header),
    ::view-transition-group(inv-nav) {
        animation-duration: 0s;
    }
    ::view-transition-old(inv-header),
    ::view-transition-old(inv-nav) {
        display: none;
    }
    ::view-transition-new(inv-header),
    ::view-transition-new(inv-nav) {
        animation: none;
    }

    ::view-transition-old(root) {
        animation: inv-vt-out 0.14s ease both;
    }
    ::view-transition-new(root) {
        animation: inv-vt-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    @keyframes inv-vt-out {
        to { opacity: 0; }
    }
    @keyframes inv-vt-in {
        from { opacity: 0; transform: translateY(8px); }
    }

    /* Cadangan untuk browser tanpa View Transitions: redupkan sebentar saat pindah. */
    html.inv-leaving body {
        opacity: 0.55;
        transition: opacity 0.16s ease;
    }

    /* ========================================================
       2. KONTEN MUNCUL BERTAHAP
       Pakai fill-mode "backwards" (bukan "both") supaya setelah selesai
       transform kembali normal dan efek hover/tekan tetap jalan.
       ======================================================== */
    @keyframes inv-rise {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
    }

    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial) > *,
    :is(.inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > * {
        animation: inv-rise 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }

    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial,
        .inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > :nth-child(2) { animation-delay: 0.04s; }
    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial,
        .inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > :nth-child(3) { animation-delay: 0.08s; }
    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial,
        .inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > :nth-child(4) { animation-delay: 0.12s; }
    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial,
        .inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > :nth-child(5) { animation-delay: 0.16s; }
    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial,
        .inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > :nth-child(6) { animation-delay: 0.2s; }
    :is(.inv-beranda, .inv-stok, .inv-pilih-merek, .inv-pilih-barang, .inv-detail-barang,
        .inv-pilih-jenis, .inv-form-masuk, .inv-form-keluar, .inv-riwayat, .inv-profil,
        .inv-tambah-barang, .inv-tambah-kategori, .inv-tambah-merek, .inv-tutorial,
        .inv-activity-list, .inv-barang-pick-list, .inv-riwayat-list, .inv-tutorial-list) > :nth-child(n+7) { animation-delay: 0.24s; }

    /* ========================================================
       3. EFEK TEKAN + RIAK
       ======================================================== */
    .inv-nav-item,
    .inv-drawer-item,
    .inv-drawer-subitem,
    .inv-btn-primary,
    .inv-btn-secondary,
    .inv-btn-add,
    .inv-aksi-btn,
    .inv-jenis-btn,
    .inv-page-btn,
    .inv-back-link,
    .inv-hamburger,
    a.inv-beranda-card,
    a.inv-tutorial-card,
    a.inv-barang-pick {
        transition: transform 0.14s ease, background-color 0.2s ease, background 0.2s ease,
                    border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .inv-btn-primary:active,
    .inv-btn-secondary:active,
    .inv-btn-add:active,
    .inv-aksi-btn:active,
    .inv-jenis-btn:active,
    .inv-page-btn:active,
    .inv-back-link:active,
    .inv-hamburger:active,
    a.inv-beranda-card:active,
    a.inv-tutorial-card:active,
    a.inv-barang-pick:active {
        transform: scale(0.97);
    }

    .inv-drawer-item:active,
    .inv-drawer-subitem:active {
        transform: scale(0.99);
    }

    .inv-nav-item .inv-nav-icon {
        transition: transform 0.18s ease;
    }
    .inv-nav-item:active .inv-nav-icon {
        transform: scale(0.82);
    }

    /* Riak: elemen .inv-ripple dibuat oleh inv-animations.js */
    .inv-ripple-host {
        position: relative;
        overflow: hidden;
    }
    .inv-ripple {
        position: absolute;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.2;
        transform: scale(0);
        pointer-events: none;
        animation: inv-ripple 0.6s ease-out forwards;
    }
    @keyframes inv-ripple {
        to { transform: scale(1); opacity: 0; }
    }

    /* ========================================================
       4. MENU BAWAH
       ======================================================== */
    .inv-nav-item.is-active .inv-nav-icon {
        animation: inv-pop 0.42s cubic-bezier(0.3, 1.6, 0.5, 1);
    }
    .inv-nav-item.is-active::before {
        animation: inv-bar 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }
    @keyframes inv-pop {
        0%   { transform: scale(0.7); }
        100% { transform: scale(1); }
    }
    @keyframes inv-bar {
        from { width: 0; opacity: 0; }
    }

    /* ========================================================
       5. SIDEBAR, JENDELA HAPUS, NOTIFIKASI
       ======================================================== */
    .inv-drawer {
        transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.24, 1);
    }

    /* Item sidebar muncul satu per satu saat dibuka */
    .inv-drawer.is-open .inv-drawer-profile,
    .inv-drawer.is-open .inv-drawer-item,
    .inv-drawer.is-open .inv-drawer-footer {
        animation: inv-slide-in 0.36s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
    }
    .inv-drawer.is-open .inv-drawer-item:nth-of-type(1) { animation-delay: 0.06s; }
    .inv-drawer.is-open .inv-drawer-item:nth-of-type(2) { animation-delay: 0.10s; }
    .inv-drawer.is-open .inv-drawer-item:nth-of-type(3) { animation-delay: 0.14s; }
    .inv-drawer.is-open .inv-drawer-item:nth-of-type(4) { animation-delay: 0.18s; }
    .inv-drawer.is-open .inv-drawer-footer { animation-delay: 0.22s; }
    @keyframes inv-slide-in {
        from { opacity: 0; transform: translateX(-14px); }
    }

    /* Submenu "Hapus Data" membuka dengan lembut */
    .inv-drawer-sub:not([hidden]) {
        animation: inv-fade-down 0.22s ease backwards;
    }
    .inv-drawer-sub:not([hidden]) .inv-drawer-subitem {
        animation: inv-slide-in 0.26s ease backwards;
    }
    .inv-drawer-sub:not([hidden]) .inv-drawer-subitem:nth-child(2) { animation-delay: 0.04s; }
    .inv-drawer-sub:not([hidden]) .inv-drawer-subitem:nth-child(3) { animation-delay: 0.08s; }
    @keyframes inv-fade-down {
        from { opacity: 0; transform: translateY(-6px); }
    }

    /* Jendela hapus: latar memudar, panel meluncur dari bawah */
    .inv-hapus-backdrop {
        animation: inv-fade 0.22s ease backwards;
    }
    .inv-hapus-sheet {
        animation: inv-sheet-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    }
    @keyframes inv-fade {
        from { opacity: 0; }
    }
    @keyframes inv-sheet-up {
        from { transform: translateY(100%); }
    }

    /* Notifikasi (sukses/gagal) turun dari atas */
    .inv-alert {
        animation: inv-alert-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    }
    @keyframes inv-alert-in {
        from { opacity: 0; transform: translateY(-10px); }
    }

    /* Form edit (ganti foto / ubah nama) membuka dengan lembut */
    .inv-ganti-foto-form:not([hidden]),
    .inv-ubah-nama-form:not([hidden]) {
        animation: inv-fade-down 0.26s ease backwards;
    }

    /* ========================================================
       6. BAR PROGRES SAAT PINDAH HALAMAN
       ======================================================== */
    .inv-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0;
        background: var(--inv-accent, #1e88e5);
        box-shadow: 0 0 8px var(--inv-accent, #1e88e5);
        border-radius: 0 3px 3px 0;
        z-index: 100000;
        opacity: 1;
        pointer-events: none;
    }
    .inv-progress.is-active {
        width: 82%;
        transition: width 1.4s cubic-bezier(0.1, 0.6, 0.2, 1);
    }
    .inv-progress.is-done {
        width: 100%;
        opacity: 0;
        transition: width 0.2s ease, opacity 0.35s ease 0.15s;
    }
}