/* ════════════════════════════════════════════════
   ANIMATIONS — transisi halaman & efek scroll
   ════════════════════════════════════════════════ */

/* ── Transisi masuk halaman ──────────────────────
   .main di-fade + slide saat halaman dimuat.
   PENTING: pakai fill-mode "backwards" (BUKAN "both"). Dengan "both",
   .main menahan transform:translateY(0) selamanya setelah animasi selesai.
   Elemen ber-transform menjadi "containing block" untuk anak position:fixed,
   sehingga modal (.mp-modal) ter-anchor ke .main (konten yang tinggi),
   bukan ke viewport — tombol diklik, modal muncul jauh di bawah / seolah
   tidak muncul. "backwards" mengembalikan .main ke transform:none setelah
   animasi, jadi modal kembali ter-anchor ke viewport. */
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.main {
    animation: pageFadeIn .45s cubic-bezier(.22, .61, .36, 1) backwards;
}

/* ── Transisi keluar halaman ──────────────────────
   Ditambahkan via JS sesaat sebelum pindah halaman. */
.page-leaving .main {
    animation: pageFadeOut .25s ease forwards;
}

@keyframes pageFadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* ── Animasi saat scroll (reveal on scroll) ──────
   Elemen ber-atribut [data-animate] disembunyikan,
   lalu muncul saat masuk viewport (class .in-view). */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity .6s cubic-bezier(.22, .61, .36, 1),
        transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

[data-animate].in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Variasi arah */
[data-animate="left"]  { transform: translateX(-28px); }
[data-animate="right"] { transform: translateX(28px); }
[data-animate="zoom"]  { transform: scale(.94); }

[data-animate="left"].in-view,
[data-animate="right"].in-view { transform: translateX(0); }
[data-animate="zoom"].in-view  { transform: scale(1); }

/* ── Stagger: jeda muncul berurutan utk anak-anak ──
   Set [data-animate-stagger] di kontainer; anaknya
   muncul satu per satu. */
[data-animate-stagger].in-view > * {
    animation: itemRise .55s cubic-bezier(.22, .61, .36, 1) both;
}
[data-animate-stagger].in-view > *:nth-child(1)  { animation-delay: .00s; }
[data-animate-stagger].in-view > *:nth-child(2)  { animation-delay: .06s; }
[data-animate-stagger].in-view > *:nth-child(3)  { animation-delay: .12s; }
[data-animate-stagger].in-view > *:nth-child(4)  { animation-delay: .18s; }
[data-animate-stagger].in-view > *:nth-child(5)  { animation-delay: .24s; }
[data-animate-stagger].in-view > *:nth-child(6)  { animation-delay: .30s; }
[data-animate-stagger].in-view > *:nth-child(7)  { animation-delay: .36s; }
[data-animate-stagger].in-view > *:nth-child(8)  { animation-delay: .42s; }

@keyframes itemRise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hormati preferensi reduce-motion ──────────── */
@media (prefers-reduced-motion: reduce) {
    .main,
    [data-animate],
    [data-animate-stagger].in-view > * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}