/* ============================================
   DARK BG + NARROW RED FOG on html element
   ============================================ */

html {
    background: #080808 !important;
}

body {
    background: transparent !important;
    animation: none !important;
}

body::before,
body::after {
    content: none !important;
    display: none !important;
}

/* Smoke overlay — fixed, covers everything, no clipping */
#mesh-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* TOP narrow fog band */
.smoke-top {
    position: absolute !important;
    top: 0;
    left: -5%;
    width: 110%;
    height: 130px;
    background: linear-gradient(
        to bottom,
        rgba(170, 0, 0, 0.40) 0%,
        rgba(120, 0, 0, 0.18) 45%,
        transparent 100%
    );
    filter: blur(20px);
    animation: fogH 16s ease-in-out infinite alternate;
}

/* BOTTOM narrow fog band */
.smoke-bottom {
    position: absolute !important;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 120px;
    background: linear-gradient(
        to top,
        rgba(160, 0, 0, 0.38) 0%,
        rgba(110, 0, 0, 0.15) 48%,
        transparent 100%
    );
    filter: blur(20px);
    animation: fogH 20s ease-in-out infinite alternate-reverse;
}

/* LEFT narrow fog band */
.smoke-left {
    position: absolute !important;
    top: -5%;
    left: 0;
    width: 120px;
    height: 110%;
    background: linear-gradient(
        to right,
        rgba(150, 0, 0, 0.35) 0%,
        rgba(100, 0, 0, 0.12) 50%,
        transparent 100%
    );
    filter: blur(18px);
    animation: fogV 18s ease-in-out infinite alternate;
}

/* RIGHT narrow fog band */
.smoke-right {
    position: absolute !important;
    top: -5%;
    right: 0;
    width: 120px;
    height: 110%;
    background: linear-gradient(
        to left,
        rgba(150, 0, 0, 0.35) 0%,
        rgba(100, 0, 0, 0.12) 50%,
        transparent 100%
    );
    filter: blur(18px);
    animation: fogV 24s ease-in-out infinite alternate-reverse;
}

@keyframes fogH {
    0%   { transform: translateX(0px)   scaleY(1.0); opacity: 0.85; }
    50%  { transform: translateX(20px)  scaleY(1.1); opacity: 1.0;  }
    100% { transform: translateX(-15px) scaleY(0.9); opacity: 0.75; }
}

@keyframes fogV {
    0%   { transform: translateY(0px)   scaleX(1.0); opacity: 0.85; }
    50%  { transform: translateY(15px)  scaleX(1.1); opacity: 1.0;  }
    100% { transform: translateY(-12px) scaleX(0.9); opacity: 0.75; }
}

@media (max-width: 768px) {
    .smoke-top    { height: 80px; }
    .smoke-bottom { height: 75px; }
    .smoke-left   { width: 75px; }
    .smoke-right  { width: 75px; }
}