body.bg-dots-on::before {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    opacity: 1;
    background-image: radial-gradient(circle at center, rgba(82, 94, 110, .32) 1px, transparent 1.6px);
    background-size: 16px 16px;
    background-repeat: repeat;
    background-position: center center;
    -webkit-mask-image:
        radial-gradient(ellipse 34% 42% at 8% 18%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 38% at 90% 14%, #000 0%, transparent 72%),
        radial-gradient(ellipse 32% 40% at 84% 80%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 36% at 16% 88%, #000 0%, transparent 72%),
        radial-gradient(ellipse 44% 26% at 50% 104%, rgba(0, 0, 0, .55) 0%, transparent 72%);
    mask-image:
        radial-gradient(ellipse 34% 42% at 8% 18%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 38% at 90% 14%, #000 0%, transparent 72%),
        radial-gradient(ellipse 32% 40% at 84% 80%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 36% at 16% 88%, #000 0%, transparent 72%),
        radial-gradient(ellipse 44% 26% at 50% 104%, rgba(0, 0, 0, .55) 0%, transparent 72%);
}

.dark body.bg-dots-on::before {
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, .2) 1.1px, transparent 1.7px);
}

body.bg-dots-on::after {
    opacity: 0;
}

@media (max-width: 600px) {
    body.bg-dots-on::before {
        background-size: 14px 14px;
        opacity: .8;
    }
}

body.bg-grid-on::before,
body.bg-grid-on::after {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    background-size: 48px 48px;
    background-repeat: repeat;
    background-position: center center;
}

body.bg-grid-on::before {
    opacity: 1;
    background-image:
        linear-gradient(to right, rgba(82, 94, 110, .16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(82, 94, 110, .16) 1px, transparent 1px);
    -webkit-mask-image:
        radial-gradient(ellipse 38% 46% at 6% 14%, #000 0%, transparent 70%),
        radial-gradient(ellipse 32% 40% at 94% 10%, rgba(0, 0, 0, .7) 0%, transparent 70%),
        radial-gradient(ellipse 36% 44% at 88% 86%, #000 0%, transparent 70%),
        radial-gradient(ellipse 30% 38% at 12% 90%, rgba(0, 0, 0, .55) 0%, transparent 70%),
        radial-gradient(ellipse 26% 30% at 70% 50%, rgba(0, 0, 0, .35) 0%, transparent 70%),
        linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12));
    mask-image:
        radial-gradient(ellipse 38% 46% at 6% 14%, #000 0%, transparent 70%),
        radial-gradient(ellipse 32% 40% at 94% 10%, rgba(0, 0, 0, .7) 0%, transparent 70%),
        radial-gradient(ellipse 36% 44% at 88% 86%, #000 0%, transparent 70%),
        radial-gradient(ellipse 30% 38% at 12% 90%, rgba(0, 0, 0, .55) 0%, transparent 70%),
        radial-gradient(ellipse 26% 30% at 70% 50%, rgba(0, 0, 0, .35) 0%, transparent 70%),
        linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12));
}

.dark body.bg-grid-on::before {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .075) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .075) 1px, transparent 1px);
}

body.bg-grid-on::after {
    opacity: .7;
    background-image:
        linear-gradient(to right, rgb(var(--primary, 14 165 233) / .55) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--primary, 14 165 233) / .55) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 100%);
    -webkit-mask-size: 560px 560px;
    mask-size: 560px 560px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 6% 12%;
    mask-position: 6% 12%;
    animation:
        bg-grid-wander 28s ease-in-out infinite,
        bg-grid-breathe 3.6s ease-in-out infinite alternate;
    will-change: mask-position, opacity;
}

@keyframes bg-grid-wander {
    0%, 100% { -webkit-mask-position: 6% 12%; mask-position: 6% 12%; }
    25%      { -webkit-mask-position: 94% 8%; mask-position: 94% 8%; }
    50%      { -webkit-mask-position: 92% 90%; mask-position: 92% 90%; }
    75%      { -webkit-mask-position: 8% 92%; mask-position: 8% 92%; }
}

@keyframes bg-grid-breathe {
    from { opacity: .3; }
    to   { opacity: .85; }
}

@media (max-width: 600px) {
    body.bg-grid-on::before,
    body.bg-grid-on::after {
        background-size: 36px 36px;
    }

    body.bg-grid-on::after {
        -webkit-mask-size: 340px 340px;
        mask-size: 340px 340px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.bg-grid-on::after {
        animation: none;
        opacity: 0;
    }
}

body:is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::before,
body:is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::after {
    inset: 0;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
}

body.bg-cubes-on::before {
    opacity: .5;
    background-image: url("decor/cubes.svg");
    background-size: 41.57px 72px;
    background-repeat: repeat;
    background-position: center top;
    -webkit-mask-image:
        radial-gradient(ellipse 36% 44% at 6% 16%, #000 0%, transparent 72%),
        radial-gradient(ellipse 32% 40% at 94% 12%, rgba(0, 0, 0, .8) 0%, transparent 72%),
        radial-gradient(ellipse 34% 42% at 88% 86%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 38% at 12% 88%, rgba(0, 0, 0, .7) 0%, transparent 72%);
    mask-image:
        radial-gradient(ellipse 36% 44% at 6% 16%, #000 0%, transparent 72%),
        radial-gradient(ellipse 32% 40% at 94% 12%, rgba(0, 0, 0, .8) 0%, transparent 72%),
        radial-gradient(ellipse 34% 42% at 88% 86%, #000 0%, transparent 72%),
        radial-gradient(ellipse 30% 38% at 12% 88%, rgba(0, 0, 0, .7) 0%, transparent 72%);
}

.dark body.bg-cubes-on::before {
    opacity: .38;
}

body.bg-cubes-on::after {
    opacity: 1;
    background-image: linear-gradient(115deg, transparent 42%, rgb(var(--primary, 14 165 233) / .07) 50%, transparent 58%);
    background-size: 250% 250%;
    background-repeat: no-repeat;
    -webkit-mask-image: url("decor/cubes.svg");
    mask-image: url("decor/cubes.svg");
    -webkit-mask-size: 41.57px 72px;
    mask-size: 41.57px 72px;
    -webkit-mask-position: center top;
    mask-position: center top;
    animation: bg-cubes-sheen 16s ease-in-out infinite;
}

@keyframes bg-cubes-sheen {
    from { background-position: 120% 0%; }
    to   { background-position: -20% 100%; }
}

body.bg-topo-on::before {
    inset: -3%;
    opacity: .32;
    background-image: url("decor/topo.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse 42% 38% at 50% 46%, transparent 0%, rgba(0, 0, 0, .35) 55%, #000 100%);
    mask-image: radial-gradient(ellipse 42% 38% at 50% 46%, transparent 0%, rgba(0, 0, 0, .35) 55%, #000 100%);
    animation: bg-topo-drift 46s ease-in-out infinite alternate;
}

.dark body.bg-topo-on::before {
    opacity: .26;
}

@keyframes bg-topo-drift {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.05) translate(-1%, 1.2%); }
}

body.bg-floor-on::before {
    top: auto;
    height: 62vh;
    opacity: .75;
    transform: perspective(420px) rotateX(64deg);
    transform-origin: 50% 100%;
    background-image:
        linear-gradient(to right, rgb(var(--primary, 14 165 233) / .4) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--primary, 14 165 233) / .4) 1px, transparent 1px);
    background-size: 64px 64px;
    background-repeat: repeat;
    background-position: center 0;
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 80%);
    mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 80%);
    animation: bg-floor-move 5s linear infinite;
}

.dark body.bg-floor-on::before {
    opacity: .6;
}

@keyframes bg-floor-move {
    from { background-position: center 0; }
    to   { background-position: center 64px; }
}

body.bg-floor-on::after {
    top: auto;
    height: 55vh;
    opacity: 1;
    background-image: radial-gradient(ellipse 70% 60% at 50% 100%, rgb(var(--primary, 14 165 233) / .14), transparent 70%);
}

@media (max-width: 600px) {
    body.bg-floor-on::before {
        height: 46vh;
        background-size: 48px 48px;
        animation-name: bg-floor-move-sm;
    }

    @keyframes bg-floor-move-sm {
        from { background-position: center 0; }
        to   { background-position: center 48px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    body:is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::before,
    body:is(.bg-cubes-on, .bg-topo-on, .bg-floor-on)::after {
        animation: none;
    }

    body.bg-cubes-on::after {
        opacity: 0;
    }
}

#bg-fx-glow,
#bg-fx-vignette,
#bg-fx-canvas {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}

#bg-fx-glow.is-on,
#bg-fx-vignette.is-on,
#bg-fx-canvas.is-on {
    opacity: 1;
}

#bg-fx-canvas {
    width: 100%;
    height: 100%;
}

#bg-fx-glow {
    overflow: hidden;
}

#bg-fx-glow span {
    position: absolute;
    width: 52vmax;
    height: 52vmax;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgb(var(--primary, 14 165 233) / .16), transparent 100%);
    animation: bg-glow-drift 40s ease-in-out infinite alternate;
    will-change: transform;
}

.dark #bg-fx-glow span {
    background: radial-gradient(circle closest-side, rgb(var(--primary, 14 165 233) / .2), transparent 100%);
}

#bg-fx-glow span:nth-child(1) { left: -14vmax; top: -18vmax; }
#bg-fx-glow span:nth-child(2) { right: -16vmax; top: 10vh; animation-duration: 52s; animation-delay: -18s; filter: hue-rotate(55deg); }
#bg-fx-glow span:nth-child(3) { left: 22vw; bottom: -26vmax; animation-duration: 46s; animation-delay: -30s; filter: hue-rotate(-40deg); }

@keyframes bg-glow-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(8vw, 6vh) scale(1.12); }
    100% { transform: translate(-6vw, 10vh) scale(.94); }
}

#bg-fx-vignette {
    background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 52%, rgba(15, 23, 42, .12) 100%);
}

.dark #bg-fx-vignette {
    background: radial-gradient(ellipse 78% 72% at 50% 45%, transparent 48%, rgba(0, 0, 0, .5) 100%);
}

@media (prefers-reduced-motion: reduce) {
    #bg-fx-glow span {
        animation: none;
    }
}

html.bg-saver body::before,
html.bg-saver body::after,
html.bg-saver #bg-fx-glow span {
    animation-play-state: paused !important;
}