:root{
    --bg-deep:   #04050c;
    --bg-mid:    #0a0e1f;
    --bg-lift:   #121833;

    --aur-teal:   #14b8a6;
    --aur-violet: #7c3aed;
    --aur-blue:   #2563eb;
    --aur-amber:  #f59e0b;
}

html{ background: var(--bg-deep); }

body{
    background:
        linear-gradient(165deg, var(--bg-mid) 0%, var(--bg-deep) 55%, #06070f 100%);
}

.ambient{
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .65s ease;
}

body.has-bg .ambient{ opacity: 0; }

.aur{
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

.aur-1{
    width: 62vw; height: 62vw;
    min-width: 620px; min-height: 620px;
    top: -26vw; left: -18vw;
    background: radial-gradient(circle,
        rgba(37,99,235,.42) 0%,
        rgba(37,99,235,.16) 42%,
        transparent 68%);
    animation: aurDrift1 34s ease-in-out infinite;
}

.aur-2{
    width: 50vw; height: 50vw;
    min-width: 500px; min-height: 500px;
    top: 14%; right: -20vw;
    background: radial-gradient(circle,
        rgba(124,58,237,.38) 0%,
        rgba(124,58,237,.14) 45%,
        transparent 70%);
    animation: aurDrift2 41s ease-in-out infinite;
}

.aur-3{
    width: 56vw; height: 56vw;
    min-width: 540px; min-height: 540px;
    bottom: -30vw; left: 18%;
    background: radial-gradient(circle,
        rgba(20,184,166,.26) 0%,
        rgba(20,184,166,.09) 45%,
        transparent 70%);
    animation: aurDrift3 47s ease-in-out infinite;
}

.aur-4{
    width: 26vw; height: 26vw;
    min-width: 260px; min-height: 260px;
    top: 52%; left: 8%;
    background: radial-gradient(circle,
        rgba(245,158,11,.16) 0%,
        rgba(245,158,11,.05) 45%,
        transparent 68%);
    animation: aurDrift4 39s ease-in-out infinite;
}

@keyframes aurDrift1{
    0%,100%{ transform: translate3d(0,0,0)          scale(1);    }
    50%    { transform: translate3d(6vw,4vh,0)      scale(1.12); }
}
@keyframes aurDrift2{
    0%,100%{ transform: translate3d(0,0,0)          scale(1.05); }
    50%    { transform: translate3d(-5vw,7vh,0)     scale(.94);  }
}
@keyframes aurDrift3{
    0%,100%{ transform: translate3d(0,0,0)          scale(1);    }
    50%    { transform: translate3d(7vw,-5vh,0)     scale(1.1);  }
}
@keyframes aurDrift4{
    0%,100%{ transform: translate3d(0,0,0)          scale(.95);  }
    50%    { transform: translate3d(4vw,-6vh,0)     scale(1.15); }
}

.ambient-grain{
    position: absolute;
    inset: -50%;
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.ambient-vignette{
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 42%,
        rgba(2,3,8,.42) 78%,
        rgba(2,3,8,.68) 100%);
}

@media (prefers-reduced-motion: reduce){
    .aur{ animation: none !important; }
}