/* Animasi pengganti Framer Motion: opacity 0, y: 40 ke opacity 1, y: 0 */
.hero-content {
    opacity: 0;
    transform: translateY(40px);
    animation: motionFadeInUp 0.8s ease-out forwards;
}

/* Animasi pengganti Framer Motion: opacity 0, x: -20 ke opacity 1, x: 0 dengan delay 0.2s */
.badge-wisata {
    opacity: 0;
    transform: translateX(-20px);
    animation: motionFadeInRight 0.6s ease-out 0.2s forwards;
}

/* Detail Gerakan ke Atas */
@keyframes motionFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Detail Gerakan ke Kanan */
@keyframes motionFadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animasi pengganti Framer Motion: y: [0, 10, 0] untuk Scroll Indicator */
.scroll-indicator {
    animation: motionBounce 1.5s infinite;
}

@keyframes motionBounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 10px);
    }
}

/* ==========================================
   ANIMASI SCROLL REVEAL (Digunakan di Section 2, 4, dan Footer)
========================================== */
.reveal-up {
    opacity: 0;
    transform: translateY(50px);
    /* Transisi smooth bezier curve untuk memunculkan elemen */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Class ini akan ditambahkan oleh JavaScript saat elemen terlihat di layar */
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   ANIMASI SCROLL REVEAL ZOOM (Digunakan di Section 3 / Galeri)
========================================== */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.85); /* Datang dari belakang (ukuran 85%) */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-zoom.active {
    opacity: 1;
    transform: scale(1); /* Tumbuh menjadi 100% */
}