#atmospheric_effect-canvas,
#atmospheric_effect-fog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
}

#atmospheric_effect-canvas {
    z-index: 999990 !important;
    display: none;
}

#atmospheric_effect-fog {
    z-index: 999989 !important;
    display: none;
    overflow: hidden;
}

body.atmospheric_effect-active #atmospheric_effect-canvas {
    display: block;
}

body.atmospheric_effect-active.atmospheric_effect-effect-fog #atmospheric_effect-fog {
    display: block;
}

.atmospheric_effect-toggle {
    --atmo-color: #635BFF;
    --atmo-color2: #5148E8;
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 999999 !important;
    width: 68px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    outline: none !important;
}

.atmospheric_effect-toggle[data-position="left"] {
    right: auto !important;
    left: 24px !important;
}

.atmospheric_effect-track {
    position: relative;
    display: block;
    width: 68px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: #17191d;
    box-shadow: 0 8px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.03);
    transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.atmospheric_effect-knob {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .28s ease;
}

.atmospheric_effect-effect-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: #fff;
    line-height: 0;
    pointer-events: none;
    opacity: .92;
}
.atmospheric_effect-effect-icon svg { display:block; width:18px; height:18px; }

body.atmospheric_effect-active .atmospheric_effect-knob {
    transform: translateX(30px);
}

body.atmospheric_effect-active .atmospheric_effect-track {
    background: var(--atmo-color);
    border-color: rgba(255,255,255,.3);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--atmo-color) 30%, transparent);
}

@media (max-width: 767px) {
    .atmospheric_effect-toggle {
        right: 16px !important;
        bottom: 16px !important;
        transform: scale(.92);
        transform-origin: bottom right;
    }

    .atmospheric_effect-toggle[data-position="left"] {
        right: auto !important;
        left: 16px !important;
        transform-origin: bottom left;
    }
}

/* Fog — dense forest mist */
.atmospheric_effect-fog-cloud {
    position: absolute;
    width: 72vw;
    height: 24vh;
    left: -78vw;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(235,242,238,.22) 0%, rgba(225,235,230,.13) 38%, rgba(215,228,221,0) 76%);
    filter: blur(24px);
    opacity: .95;
    animation: atmospheric_effect-fog-move 30s linear infinite;
    mix-blend-mode: screen;
}
.atmospheric_effect-fog-cloud:nth-child(1) { top: 18%; height: 22vh; animation-duration: 34s; }
.atmospheric_effect-fog-cloud:nth-child(2) { top: 34%; height: 27vh; animation-delay: -12s; animation-duration: 29s; opacity: .82; }
.atmospheric_effect-fog-cloud:nth-child(3) { top: 52%; height: 25vh; animation-delay: -21s; animation-duration: 37s; opacity: .72; }
.atmospheric_effect-fog-cloud:nth-child(4) { top: 68%; height: 21vh; animation-delay: -7s; animation-duration: 32s; opacity: .62; }

@keyframes atmospheric_effect-fog-move {
    0% { transform: translateX(0) scale(1); }
    45% { transform: translateX(105vw) scale(1.18); }
    100% { transform: translateX(220vw) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    #atmospheric_effect-canvas,
    #atmospheric_effect-fog { display:none !important; }
}
