/* ---------------------------------------------------------------------------
   Shared ambient background for the sign-in screen and the desktop.

   Replaces the old flat blue radial wash. The goal is something with enough
   tonal variation that frosted-glass panels read as glass — glass needs
   colour behind it to refract, and a near-uniform field gives it nothing to
   work with. So: a deep indigo base, a slow aurora of teal / violet / amber,
   a fine grain to kill gradient banding, and a vignette to push focus inward.

   Everything animates on transform and opacity only. The blobs are baked
   radial-gradients rather than filter:blur(), which keeps this off the paint
   path on the low-powered machines this runs on.
   --------------------------------------------------------------------------- */

: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%);
}

/* The whole ambient stack sits behind everything and never takes input. */
.ambient{
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .65s ease;
}

/* A user's custom wallpaper replaces the aurora rather than fighting it. */
body.has-bg .ambient{ opacity: 0; }

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

/* Top-left, the anchor of the composition. */
.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;
}

/* Right side, the warm-cool tension against aur-1. */
.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;
}

/* Bottom, cool teal to keep the lower third from going muddy. */
.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;
}

/* A small warm accent. Kept low-opacity — it is seasoning, not a flavour. */
.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); }
}

/* Fine grain. Gradients this large band badly on 8-bit panels; a little noise
   dithers it away and gives the glass some texture to catch. */
.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");
}

/* Darkens the edges so panels in the middle sit forward. */
.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%);
}

/* Respect the OS setting — a slow drift is exactly the kind of motion that
   triggers vestibular discomfort. The composition still stands still. */
@media (prefers-reduced-motion: reduce){
    .aur{ animation: none !important; }
}