/* Main section container */
#main-section {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}

.fog-container {
    position: fixed; /* Or absolute, depending on your layout */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Keeps it in the background */
}

.blob {
    position: absolute; /* CRITICAL: This allows the JS 'top' and 'left' to work */
}


/* Float animation */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(80px, -120px) scale(1.2);
    }
    50% {
        transform: translate(-60px, -80px) scale(0.8);
    }
    75% {
        transform: translate(100px, 60px) scale(1.15);
    }
}

/* Ensure content sits above the fog background */
#main-section > :not(.fog-container) {
    position: relative;
    z-index: 10;
}

/* Disable on mobile */
@media (max-width: 768px) {
    .fog-container {
        display: none;
    }
}