/* The main container for the fog effect */
.fog-container {
    position: fixed; /* Use fixed to keep it locked to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Adjust z-index as needed to place it correctly in your layers */
}

/* Base styles for both fog image layers */
.fog-img {
    position: absolute;
    height: 100vh; /* Full screen height */
    width: 300vw;  /* ✅ Key part: Make it 3x wider than the screen */
}

/* Style for the first (back) fog layer */
.fog-img-first {
    background: url("../../assets/files/fx/fog-1.webp");
    background-repeat: repeat-x;
    background-size: cover;
    animation: marquee 90s linear infinite;
    opacity: 0.75; /* ✅ Add this line (e.g., 40% opaque) 0.2 to 0.7 -> (ok)*/
}

/* Style for the second (front) fog layer */
.fog-img-second {
    background: url("../../assets/files/fx/fog-2.webp");
    background-repeat: repeat-x;
    background-size: cover;
    animation: marquee 30s linear infinite;
    opacity: 0.25; /* ✅ Add this line (e.g., 20% opaque) */
}

/* The animation that scrolls the images horizontally */
@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        /* ✅ Key part: Move left by 200vw, which is 2/3 of the total width */
        transform: translate3d(-200vw, 0, 0);
    }
}