/* ============================================
   Page Entrance - Staggered Fade-Up Animation
   Ringan, smooth, dan tidak mengubah layout.
   ============================================ */

/* Kondisi awal: elemen disembunyikan & sedikit turun */
.pe-anim {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
}

/* Kondisi akhir: elemen muncul halus */
.pe-anim.pe-in {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: auto;
}

/* Elemen yang sudah selesai dianimasikan - bersihkan transform
   agar tidak mengganggu efek hover/sticky di dalamnya */
.pe-anim.pe-done {
    transform: none;
    transition: none;
}

/* Hormati preferensi pengguna yang mematikan animasi */
@media (prefers-reduced-motion: reduce) {
    .pe-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}