/* =========================================
   ANIMATION: FADE (Pudar & Zoom In)
   ========================================= */

/* Pastikan elemen terlihat saat mode Edit Elementor */
body.elementor-editor-active .fade {
    opacity: 1;
    transform: scale(1);
}

/* Titik Awal (Tersembunyi & Kecil) */
.fade {
    transform: scale(0.8);
    opacity: 0;
    transition: opacity 1.5s, transform 1s;
}

/* Titik Akhir (Muncul saat in-view) */
.fade.reanimate.in-view {
    transform: scale(1);
    opacity: 1;
    transition: opacity 1.5s, transform 1s;
}

/* =========================================
   ANIMATION: ROTATE (Putar & Zoom In)
   ========================================= */

body.elementor-editor-active .rotate {
    opacity: 1;
    transform: scale(1);
}

.rotate {
    transform: scale(0.5) rotate(-20deg);
    opacity: 0;
    transition: opacity 0.5s, transform 1.5s;
}

.rotate.reanimate.in-view {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    transition: opacity 0.5s, transform 1.5s;
}

/* =========================================
   ANIMATION: LEFT (Masuk dari Kiri)
   ========================================= */

body.elementor-editor-active .left {
    opacity: 1;
    transform: translateX(0px);
}

.left {
    transform: translateX(-100px); /* Geser ke kiri 100px */
    opacity: 0;
    transition: opacity 1s, transform 1.5s;
}

.left.reanimate.in-view {
    transform: translateX(0px); /* Kembali ke posisi asal */
    opacity: 1;
    transition: opacity 1s, transform 1.5s;
}

/* =========================================
   ANIMATION: RIGHT (Masuk dari Kanan)
   ========================================= */

body.elementor-editor-active .right {
    opacity: 1;
    transform: translateX(0px);
}

.right {
    transform: translateX(100px); /* Geser ke kanan 100px */
    opacity: 0;
    transition: opacity 1s, transform 1.5s;
}

.right.reanimate.in-view {
    transform: translateX(0px);
    opacity: 1;
    transition: opacity 1s, transform 1.5s;
}

/* =========================================
   ANIMATION: UP (Masuk dari Bawah ke Atas)
   ========================================= */

body.elementor-editor-active .up {
    opacity: 1;
    transform: translateY(0px);
}

.up {
    transform: translateY(30px); /* Turun 30px */
    opacity: 0;
    transition: opacity 1s, transform 1.5s;
}

.up.reanimate.in-view {
    transform: translateY(0px);
    opacity: 1;
    transition: opacity 1s, transform 1.5s;
}