/* =========================================
   FOG / MIST EFFECT (ROBUST & VISIBLE)
========================================= */

#fx-layer.fx-fog::before,
#fx-layer.fx-fog::after {
    content: "";
    position: absolute;
    inset: -50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,0.10) 0%,
            rgba(255,255,255,0.06) 30%,
            rgba(255,255,255,0.03) 55%,
            rgba(255,255,255,0.0) 70%
        ),
        radial-gradient(
            ellipse at 20% 40%,
            rgba(255,255,255,0.08),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 80% 60%,
            rgba(255,255,255,0.06),
            transparent 65%
        );

    animation: fogDrift 80s linear infinite;
    pointer-events: none;
}

#fx-layer.fx-fog::after {
    animation-duration: 120s;
    opacity: 0.6;
}

@keyframes fogDrift {
    0% {
        transform: translate(0%, 0%) scale(1.15);
    }
    50% {
        transform: translate(6%, 3%) scale(1.15);
    }
    100% {
        transform: translate(0%, 0%) scale(1.15);
    }
}