:root{
    --wm-atmosphere-star-opacity:.20;
    --wm-atmosphere-mist-opacity:.09;
    --wm-atmosphere-moon-opacity:.13;
}

.wm-atmosphere-host{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.wm-atmosphere-stage{
    --wm-atmosphere-x:0;
    --wm-atmosphere-y:0;
    position:absolute;
    inset:0;
    z-index:4;
    overflow:hidden;
    pointer-events:none;
}

.wm-atmosphere-layer{
    position:absolute;
    pointer-events:none;
    will-change:transform,opacity;
}

.wm-atmosphere-stars{
    inset:-8%;
    opacity:var(--wm-atmosphere-star-opacity);
    background-image:
        radial-gradient(circle,rgba(255,255,255,.82) 0 1px,transparent 1.5px),
        radial-gradient(circle,rgba(199,207,255,.62) 0 1px,transparent 1.4px);
    background-position:0 0,41px 59px;
    background-size:118px 118px,157px 157px;
    animation:wm-safe-star-drift 38s linear infinite;
    transform:translate3d(
        calc(var(--wm-atmosphere-x)*-3px),
        calc(var(--wm-atmosphere-y)*-2px),
        0
    );
}

.wm-atmosphere-moon{
    inset:-14%;
    opacity:var(--wm-atmosphere-moon-opacity);
    background:
        radial-gradient(circle at 73% 20%,rgba(216,225,255,.74),transparent 9%),
        radial-gradient(circle at 73% 20%,rgba(137,115,255,.38),transparent 23%);
    animation:wm-safe-moon-breathe 10s ease-in-out infinite;
}

.wm-atmosphere-mist-back{
    left:-12%;
    right:-12%;
    bottom:2%;
    height:30%;
    opacity:calc(var(--wm-atmosphere-mist-opacity)*.65);
    background:
        radial-gradient(ellipse at 22% 62%,rgba(216,223,255,.52),transparent 47%),
        radial-gradient(ellipse at 77% 58%,rgba(180,165,255,.42),transparent 49%);
    filter:blur(22px);
    animation:wm-safe-mist-back 28s ease-in-out infinite alternate;
}

.wm-atmosphere-mist-front{
    left:-16%;
    right:-16%;
    bottom:-9%;
    height:29%;
    opacity:var(--wm-atmosphere-mist-opacity);
    background:
        radial-gradient(ellipse at 28% 68%,rgba(221,226,255,.46),transparent 51%),
        radial-gradient(ellipse at 78% 64%,rgba(172,155,255,.42),transparent 53%);
    filter:blur(28px);
    animation:wm-safe-mist-front 23s ease-in-out infinite alternate;
    transform:translate3d(
        calc(var(--wm-atmosphere-x)*5px),
        calc(var(--wm-atmosphere-y)*3px),
        0
    );
}

.wm-atmosphere-vignette{
    inset:0;
    opacity:.18;
    background:
        linear-gradient(180deg,transparent 61%,rgba(5,4,17,.42)),
        radial-gradient(ellipse at center,transparent 62%,rgba(4,3,15,.25));
}

@keyframes wm-safe-star-drift{
    from{background-position:0 0,41px 59px}
    to{background-position:118px 59px,198px 138px}
}

@keyframes wm-safe-moon-breathe{
    0%,100%{opacity:calc(var(--wm-atmosphere-moon-opacity)*.76);transform:scale(.99)}
    50%{opacity:var(--wm-atmosphere-moon-opacity);transform:scale(1.025)}
}

@keyframes wm-safe-mist-back{
    from{transform:translate3d(-2%,1%,0) scale(1)}
    to{transform:translate3d(2%,-1%,0) scale(1.04)}
}

@keyframes wm-safe-mist-front{
    from{margin-left:2%;transform:translate3d(-1%,0,0) scale(1.02)}
    to{margin-left:-2%;transform:translate3d(1%,-1%,0) scale(1.06)}
}

@media(max-width:720px){
    :root{
        --wm-atmosphere-star-opacity:.12;
        --wm-atmosphere-mist-opacity:.055;
        --wm-atmosphere-moon-opacity:.08;
    }
}

@media(prefers-reduced-motion:reduce){
    .wm-atmosphere-layer{
        animation:none!important;
        transition:none!important;
    }

    .wm-atmosphere-stage{
        --wm-atmosphere-x:0!important;
        --wm-atmosphere-y:0!important;
    }
}