.vg-sky {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 80% at 50% 0%, var(--vg-cobalt) 0%, var(--vg-midnight) 55%, #050a12 100%);
}

.vg-sky__swirl {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: vg-swirl 45s ease-in-out infinite alternate;
}

.vg-sky__swirl--1 {
    width: 70vw; height: 50vw;
    top: -10%; left: -15%;
    background: conic-gradient(from 120deg, var(--vg-ultra), var(--vg-cobalt), var(--vg-emerald), var(--vg-ultra));
}

.vg-sky__swirl--2 {
    width: 55vw; height: 45vw;
    top: 20%; right: -20%;
    background: conic-gradient(from 200deg, var(--vg-prussian), var(--vg-lavender), var(--vg-cobalt));
    animation-delay: -15s;
}

.vg-sky__swirl--3 {
    width: 40vw; height: 35vw;
    bottom: 5%; left: 20%;
    background: conic-gradient(from 40deg, var(--vg-emerald), var(--vg-olive), var(--vg-deep));
    animation-delay: -28s;
    opacity: 0.25;
}

@keyframes vg-swirl {
    from { transform: rotate(0deg) scale(1); }
    to { transform: rotate(25deg) scale(1.08); }
}

.vg-sky__moon {
    position: absolute;
    top: 8%;
    right: 12%;
    border-radius: 50%;
    filter: drop-shadow(0 0 40px color-mix(in srgb, var(--vg-moon) 60%, transparent));
    animation: vg-moon-glow 8s ease-in-out infinite alternate;
}

@keyframes vg-moon-glow {
    from { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--vg-moon) 40%, transparent)); }
    to { filter: drop-shadow(0 0 55px color-mix(in srgb, var(--vg-moon) 70%, transparent)); }
}

.vg-sky__stars {
    position: absolute;
    inset: 0;
}

.vg-sky__star {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--vg-moon);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--vg-moon);
    animation: vg-twinkle 4s ease-in-out infinite;
}

@keyframes vg-twinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.vg-sky__canvas {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}