/* =====================================================================
   AMBIENT AURORA LAYER
   Driven by ambient.js — two stacked fixed-position layers:

     .ambient          — behind the UI. Large soft drifting blobs in
                          brand orange + aurora teal. Shows through any
                          translucent surface or empty page.
     .ambient-overlay  — above the UI, mix-blend-mode: screen at very
                          low alpha. Tints the rail / topbar / step
                          cards with the aurora's current palette so
                          the effect is felt everywhere, not just in
                          empty pages. Screen blend only ADDS light,
                          never darkens, so text legibility is safe.

   Four blob positions shared between both layers via CSS custom
   properties — JS sets them once per frame.
===================================================================== */

.ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(1400px 1100px at var(--ax, 30%) var(--ay, 70%),
            rgba(255, 106, 44, 0.14), transparent 70%),
        radial-gradient(1300px 1000px at var(--bx, 78%) var(--by, 22%),
            rgba(232, 85, 16, 0.11), transparent 70%),
        radial-gradient(1100px 900px at var(--cx, 18%) var(--cy, 20%),
            rgba(61, 217, 207, 0.11), transparent 70%),
        radial-gradient(1200px 950px at var(--dx, 85%) var(--dy, 80%),
            rgba(255, 138, 85, 0.10), transparent 70%);
}

/* Stack body content above the background aurora. ``.modal`` and
 * ``.toast-stack`` are excluded because they must keep their own
 * ``position: fixed`` (z-index 10000 / 10001) - letting this rule
 * clobber that wrecks the centred-popup layout and drops toasts into
 * normal flow below the fold. Any future fixed-position body child
 * needs adding here too. */
body > *:not(.ambient):not(.ambient-overlay):not(.modal):not(.toast-stack) {
    position: relative;
    z-index: 1;
}

.ambient-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        radial-gradient(1400px 1100px at var(--ax, 30%) var(--ay, 70%),
            rgba(255, 106, 44, 0.049), transparent 72%),
        radial-gradient(1300px 1000px at var(--bx, 78%) var(--by, 22%),
            rgba(232, 85, 16, 0.038), transparent 72%),
        radial-gradient(1100px 900px at var(--cx, 18%) var(--cy, 20%),
            rgba(61, 217, 207, 0.045), transparent 72%),
        radial-gradient(1200px 950px at var(--dx, 85%) var(--dy, 80%),
            rgba(255, 138, 85, 0.042), transparent 72%);
}