/* Shared SHIFT deep-space background */

body.shift-space-background {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: #f4f5ff;

    background:
        radial-gradient(
            ellipse at 50% -8%,
            rgba(31, 82, 188, 0.40) 0%,
            rgba(17, 56, 145, 0.22) 22%,
            transparent 52%
        ),
        radial-gradient(
            ellipse at 12% 10%,
            rgba(28, 71, 166, 0.24) 0%,
            transparent 38%
        ),
        radial-gradient(
            ellipse at 88% 14%,
            rgba(53, 72, 176, 0.22) 0%,
            transparent 42%
        ),
        radial-gradient(
            ellipse at 50% 108%,
            rgba(140, 114, 164, 0.46) 0%,
            rgba(92, 85, 145, 0.30) 20%,
            rgba(70, 58, 115, 0.17) 36%,
            transparent 57%
        ),
        radial-gradient(
            ellipse at 16% 94%,
            rgba(161, 153, 208, 0.16) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 86% 92%,
            rgba(140, 114, 164, 0.18) 0%,
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #010616 0%,
            #03102f 12%,
            #061a4b 28%,
            #0b2a67 45%,
            #18336f 61%,
            #303474 78%,
            #463a73 90%,
            #5c5591 100%
        );

    background-attachment: fixed;
}

body.shift-space-background::before,
body.shift-space-background::after {
    content: "";
    position: fixed;
    pointer-events: none;
}

body.shift-space-background::before {
    inset: -18%;
    z-index: -3;
    background:
        radial-gradient(
            ellipse at 72% 14%,
            rgba(161, 153, 208, 0.18) 0%,
            rgba(92, 85, 145, 0.08) 22%,
            transparent 46%
        ),
        radial-gradient(
            ellipse at 28% 28%,
            rgba(57, 69, 137, 0.16) 0%,
            transparent 34%
        ),
        radial-gradient(
            ellipse at 48% 82%,
            rgba(140, 114, 164, 0.18) 0%,
            rgba(92, 85, 145, 0.08) 22%,
            transparent 48%
        ),
        radial-gradient(
            ellipse at 80% 76%,
            rgba(76, 69, 120, 0.12) 0%,
            transparent 32%
        );
    filter: blur(26px);
    opacity: 0.96;
    transform: scale(1.05);
    animation: shift-nebula-drift 42s ease-in-out infinite alternate;
}

body.shift-space-background::after {
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            180deg,
            rgba(232, 217, 223, 0.02) 0%,
            rgba(161, 153, 208, 0.035) 22%,
            rgba(140, 114, 164, 0.04) 58%,
            rgba(232, 217, 223, 0.05) 100%
        );
    opacity: 0.92;
}

.shift-space-static-sky {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.shift-space-starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.shift-space-star {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.shift-space-star--static {
    width: var(--star-size, 1px);
    height: var(--star-size, 1px);

    background: rgba(
        238,
        243,
        255,
        var(--star-opacity, 0.58)
    );

    box-shadow:
        0 0 2px rgba(255, 255, 255, 0.34),
        0 0 5px rgba(161, 153, 208, 0.14);
}

.shift-space-star--ambient {
    width: var(--star-size, 2px);
    height: var(--star-size, 2px);

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.74),
        0 0 10px rgba(196, 187, 255, 0.34);

    animation:
        shift-space-ambient-twinkle
        var(--twinkle-speed, 5s)
        ease-in-out
        var(--twinkle-delay, 0s)
        infinite;
}

.shift-space-star--ambient::before,
.shift-space-star--ambient::after,
.shift-space-star--micro::before,
.shift-space-star--micro::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.shift-space-star--ambient::before {
    width: calc(var(--star-size, 2px) * 5.8);
    height: calc(var(--star-size, 2px) * 5.8);

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.34) 0%,
            rgba(204, 198, 255, 0.16) 24%,
            rgba(166, 157, 235, 0.07) 44%,
            transparent 70%
        );

    filter: blur(0.35px);
}

.shift-space-star--ambient::after {
    width: calc(var(--star-size, 2px) * 10);
    height: calc(var(--star-size, 2px) * 10);

    background:
        radial-gradient(
            circle,
            rgba(192, 202, 255, 0.10) 0%,
            rgba(154, 143, 230, 0.045) 36%,
            transparent 72%
        );

    filter: blur(1px);
}

.shift-space-star--micro::before {
    width: calc(var(--star-size, 1px) * 4.4);
    height: calc(var(--star-size, 1px) * 4.4);

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(209, 201, 255, 0.12) 30%,
            transparent 70%
        );
}

.shift-space-star--micro::after {
    width: calc(var(--star-size, 1px) * 7);
    height: calc(var(--star-size, 1px) * 7);

    background:
        radial-gradient(
            circle,
            rgba(175, 188, 255, 0.08) 0%,
            transparent 72%
        );

    filter: blur(0.7px);
}

@keyframes shift-nebula-drift {
    0% {
        transform: scale(1.05) translate3d(-1.4%, -1.1%, 0);
        opacity: 0.82;
    }

    100% {
        transform: scale(1.10) translate3d(1.6%, 1.2%, 0);
        opacity: 1;
    }
}

@keyframes shift-space-ambient-twinkle {
    0%,
    100% {
        opacity: 0.10;
        transform: translate(-50%, -50%) scale(0.76);
    }

    18% {
        opacity: 0.26;
    }

    37% {
        opacity: 0.62;
    }

    49% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.18);
    }

    61% {
        opacity: 0.34;
    }

    79% {
        opacity: 0.18;
    }
}

@keyframes shift-space-micro-flash {
    0%,
    72% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.55);
    }

    77% {
        opacity: 0.04;
    }

    81% {
        opacity: 0.42;
    }

    84% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.28);
    }

    87% {
        opacity: 0.32;
    }

    91%,
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.60);
    }
}

@media (max-width: 960px) {
    body.shift-space-background {
        background:
            radial-gradient(
                ellipse at 50% 108%,
                rgba(140, 114, 164, 0.34) 0%,
                rgba(92, 85, 145, 0.20) 20%,
                transparent 48%
            ),
            radial-gradient(
                ellipse at 20% 18%,
                rgba(57, 69, 137, 0.20) 0%,
                transparent 38%
            ),
            radial-gradient(
                ellipse at 80% 16%,
                rgba(92, 85, 145, 0.16) 0%,
                transparent 38%
            ),
            linear-gradient(
                180deg,
                #040e2e 0%,
                #09143b 24%,
                #162254 54%,
                #463a73 84%,
                #5c5591 100%
            );
        background-attachment: scroll;
    }

    body.shift-space-background::before {
        filter: blur(22px);
    }
}

@media (max-width: 767px) {
    body.shift-space-background::before {
        opacity: 0.80;
    }

    body.shift-space-background::after {
        opacity: 0.64;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.shift-space-background {
        background-attachment: scroll;
    }

    body.shift-space-background::before,
    .shift-space-star {
        animation: none !important;
    }

    .shift-space-star--appear {
        display: none;
    }
}