canvas#starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.site-space-bg {
    --space-glow-y: 61%;
    --space-planet-height: clamp(760px, 74.7vw, 956px);
    --space-planet-width: clamp(1784px, 175.2vw, 2242px);
    --space-planet-bottom: clamp(-668px, calc(288px - 74.7vw), -472px);
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.site-space-bg::before,
.site-space-bg::after {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--space-glow-y);
    pointer-events: none;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.site-space-bg::before {
    width: clamp(280px, 27.8vw, 400px);
    height: clamp(280px, 27.8vw, 400px);
    z-index: 0;
    opacity: 0.8;
    filter: blur(70px);
    background:
        conic-gradient(#e8d8ff 0deg,
            #b775ff 54.8916deg,
            #7142e8 106.699deg,
            #9e63ff 162deg,
            #44209e 252deg,
            #d39cff 306deg,
            #e8d8ff 360deg);
    animation: spaceColorDrift 18s linear infinite;
    mix-blend-mode: screen;
}

.site-space-bg::after {
    width: clamp(200px, 20.8vw, 300px);
    height: clamp(200px, 20.8vw, 300px);
    z-index: 0;
    opacity: 0.86;
    filter: blur(32px);
    background:
        conic-gradient(#f0e5ff 0deg,
            #9560ff 180deg,
            #d48cff 360deg);
    animation: spaceColorPulse 11s ease-in-out infinite alternate;
    mix-blend-mode: overlay;
}

.space-glow-core {
    position: absolute;
    left: 50%;
    top: var(--space-glow-y);
    width: clamp(200px, 20.8vw, 300px);
    height: clamp(200px, 20.8vw, 300px);
    z-index: 0;
    opacity: 1;
    filter: blur(32px);
    border-radius: 500px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
        conic-gradient(#f0e5ff 0deg,
            #9560ff 180deg,
            #d48cff 360deg);
    animation: spaceColorCore 14s linear infinite reverse;
    will-change: transform, opacity;
}

.space-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(rgba(9, 2, 34, 0.48) 0%, rgba(9, 2, 34, 0) 34%),
        radial-gradient(circle at center, transparent 38%, rgba(3, 0, 18, 0.78) 124%);
}

.space-planet-horizon {
    position: absolute;
    bottom: var(--space-planet-bottom);
    left: 50%;
    transform: translateX(-50%);
    width: max(150vw, var(--space-planet-width));
    min-width: 150vw;
    height: var(--space-planet-height);
    background: #030014;
    border-radius: 100%;
    z-index: 2;
    overflow: visible;
    isolation: isolate;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.78),
        0 -8px 36px 1px rgba(255, 255, 255, 0.34);
    animation: spacePlanetRise 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards, spaceArcBreath 8s infinite alternate 3s;
    will-change: transform;
}

.space-planet-horizon::before {
    content: '';
    position: absolute;
    pointer-events: none;
    left: -0.5%;
    right: -0.5%;
    top: -1px;
    height: 100%;
    z-index: -1;
    opacity: 0.46;
    border-radius: 100%;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(255, 255, 255, 0.18) 7%,
            rgba(255, 255, 255, 0.04) 20%,
            rgba(10, 10, 10, 0) 100%);
    mix-blend-mode: screen;
}

.space-planet-solid-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 16vh;
    background: #030014;
    z-index: 3;
    pointer-events: none;
}

.page,
.page-content,
.site-footer {
    position: relative;
    z-index: 10;
}

body.is-embed canvas#starfield,
body.is-embed .site-space-bg {
    display: none !important;
}

.space-bg-low-motion .site-space-bg::before,
.space-bg-low-motion .site-space-bg::after,
.space-bg-low-motion .space-glow-core,
.space-bg-low-motion .space-planet-horizon,
.space-bg-low-power .space-planet-horizon {
    animation: none !important;
}

.space-bg-low-power .site-space-bg::before,
.space-bg-low-power .site-space-bg::after,
.space-bg-low-power .space-glow-core {
    filter: blur(42px);
    opacity: 0.42;
}

@media (prefers-reduced-motion: reduce) {
    .site-space-bg::before,
    .site-space-bg::after,
    .space-glow-core,
    .space-planet-horizon {
        animation: none !important;
    }
}

@keyframes spacePlanetRise {
    from { transform: translateX(-50%) translateY(150px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes spaceColorDrift {
    from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.08); }
    to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes spaceColorPulse {
    from { transform: translate(-50%, -50%) rotate(0deg) scale(0.92); opacity: 0.18; }
    to { transform: translate(-50%, -50%) rotate(-70deg) scale(1.08); opacity: 0.34; }
}

@keyframes spaceColorCore {
    from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    50% { transform: translate(-50%, -50%) rotate(120deg) scale(1.04); }
    to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

@keyframes spaceArcBreath {
    from {
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.66),
            0 -7px 34px 1px rgba(255, 255, 255, 0.3);
    }
    to {
        box-shadow:
            inset 0 1px 1px rgba(255, 255, 255, 0.78),
            0 -8px 36px 1px rgba(255, 255, 255, 0.34);
    }
}