/* Backscreen — свет снизу + canvas-дым */

:root {
    --bs-void: #080608;
    --bs-light-core: rgba(240, 240, 255, 0.72);
    --bs-light-mid: rgba(160, 160, 175, 0.28);
    --bs-light-soft: rgba(90, 85, 95, 0.12);
}

html {
    background-color: var(--bs-void);
}

body {
    background-color: transparent;
    background-image: none;
    overflow-x: hidden;
}

#backscreen {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background-color: var(--bs-void);
    pointer-events: none;
}

/* Свет у нижнего края — уже, мягко гаснет к бокам */
.light-glow {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(68vw, 820px);
    height: min(32vh, 300px);
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse 62% 70% at 50% 100%,
        var(--bs-light-core) 0%,
        rgba(210, 210, 225, 0.4) 18%,
        var(--bs-light-mid) 40%,
        var(--bs-light-soft) 60%,
        rgba(8, 6, 8, 0.5) 78%,
        transparent 100%
    );
}

.fog-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.4;
    transition: opacity 0.8s ease;
}

.smoke-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0.85;
    transition: opacity 0.8s ease;
}

.snow-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* Затемнение только углов, без blur */
.corner-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 38% 34% at 0% 0%,
            rgba(8, 6, 8, 0.8) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 38% 34% at 100% 0%,
            rgba(8, 6, 8, 0.8) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 38% 34% at 0% 100%,
            rgba(8, 6, 8, 0.7) 0%,
            transparent 70%
        ),
        radial-gradient(
            ellipse 38% 34% at 100% 100%,
            rgba(8, 6, 8, 0.7) 0%,
            transparent 70%
        );
}

@media (max-width: 768px) {
    .light-glow {
        width: 78vw;
        height: 26vh;
        bottom: 0;
    }
}

@media (max-width: 640px) {
    .light-glow {
        width: 92vw;
        height: 22vh;
    }
}