/* style.css */

body { 
    font-family: 'Poppins', sans-serif; 
}

/* --- LIQUID GLASS NAVBAR --- */
.glass-pill {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 8px 32px 0 rgba(31, 38, 135, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.9), 
        inset 0 -1px 2px rgba(255, 255, 255, 0.3);
}

.dark .glass-pill {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.3));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 2px 4px rgba(255,255,255,1);
}

.dark .glass-btn {
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255,255,255,0.1);
}

/* Animasi Scroll Otomatis Atas-Bawah Halus */
@keyframes autoScrollVertical {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        /* Menggeser kontainer ke atas sebesar tinggi konten tersembunyi */
        transform: translateY(calc(-100% + 340px)); 
    }
}

.animate-scroll-y {
    animation: autoScrollVertical 12s ease-in-out infinite;
}

/* Menghentikan animasi saat kursor mouse menyentuh area tools */
.animate-scroll-y:hover {
    animation-play-state: paused;
}