/* ==========================================================================
   ANIMATION & REVEAL ON SCROLL EFFECTS
   ========================================================================== */

/* Efek Muncul saat di-scroll (Reveal Base) */
.reveal {
    position: relative;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
}

/* Variasi Arah Muncul */
.fade-up {
    transform: translateY(50px);
}

.fade-up.active {
    transform: translateY(0);
}

.fade-left {
    transform: translateX(50px);
}

.fade-left.active {
    transform: translateX(0);
}

.fade-right {
    transform: translateX(-50px);
}

.fade-right.active {
    transform: translateX(0);
}

.zoom-in {
    transform: scale(0.85);
}

.zoom-in.active {
    transform: scale(1);
}

/* Efek Muncul Otomatis untuk Halaman Portfolio/Contact (Tanpa nunggu Scroll) */
.auto-fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: autoFadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes autoFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Efek Durasi Delay (Jeda Muncul Beruntun) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.4s; }
.delay-4 { transition-delay: 0.6s; }
.delay-5 { transition-delay: 0.8s; }


/* ==========================================================================
   MODIFIKASI BOLA CAHAYA DEKORASI LATAR BELAKANG (SHAPES)
   ========================================================================== */

/* Mengubah lingkaran kaku abu-abu menjadi pendaran cahaya bokeh yang menyatu */
.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); /* Efek blur tinggi agar garis kaku lingkarannya hilang total */
    z-index: 1;
    opacity: 0.5;
    animation: floatOrb 15s infinite ease-in-out alternate;
    pointer-events: none; /* Mencegah bentrokan klik dengan tombol */
}

/* Bola 1: Pendaran Cahaya Emas Pasir di Kiri Atas */
.shape-1 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(220, 183, 149, 0.3) 0%, rgba(37, 48, 41, 0) 70%);
    top: 8%;
    left: -5%;
}

/* Bola 2: Pendaran Cahaya Hijau Sage di Kanan Bawah */
.shape-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(90, 114, 99, 0.4) 0%, rgba(37, 48, 41, 0) 70%);
    bottom: -5%;
    right: -5%;
    animation-delay: -7s; /* Bergerak bergantian dengan bola 1 agar dinamis */
}

/* Efek Ambient Blob Tambahan di Latar Belakang */
.blob-bg {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(75, 95, 83, 0.2) 0%, rgba(37, 48, 41, 0) 60%);
    filter: blur(100px);
    z-index: 1;
    pointer-events: none;
}


/* ==========================================================================
   KEYFRAMES ANIMASI GERAKAN
   ========================================================================== */

/* Gerakan melayang bola cahaya yang sangat halus & natural */
@keyframes floatOrb {
    0% { 
        transform: translate(0, 0) scale(1); 
    }
    50% { 
        transform: translate(40px, -60px) scale(1.15); 
    }
    100% { 
        transform: translate(-30px, 40px) scale(0.9); 
    }
}

/* Efek Mengambang untuk Elemen Kaca Kecil (Glass Card Badge) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}