/* ═══════════════════════════════════════════════════════════════════════════
   Helix — Aurora canvas (shared)
   Near-black canvas + one fixed, pointer-events:none ambient violet/indigo
   aurora layer (pure CSS radial gradients, no JS). Drifts slowly; frozen under
   reduced-motion. Extracted from the per-page Aurora passes so all app surfaces
   share ONE token set + recipe. See HELIX_AURORA_REDESIGN.md.

   Integration contract (per page):
   • Link this BEFORE the page's own stylesheet.
   • The aurora sits at z-index:0; give the page's shell container
     `position: relative; z-index: 1` so content renders above it (each page
     already does this on its .app / .app-container / .stage).
   • Page-specific glass (sidebar, login card, composer, pills) and display
     typography stay in the page's own stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --canvas:       #050507;                   /* near-black base behind aurora */
    --glass:        rgba(18, 18, 24, 0.55);    /* translucent surface */
    --glass-strong: rgba(16, 16, 22, 0.72);    /* composer / topbar / login card */
    --glass-border: rgba(255, 255, 255, 0.08);
    --radius-2xl:   26px;
    /* Snappy, precise motion — overshoot (--ease-pop) is for thumbs/badges/icons only */
    --dur-1:        0.12s;
    --dur-2:        0.19s;
    --ease-snap:    cubic-bezier(0.2, 0.9, 0.3, 1);
    --ease-pop:     cubic-bezier(0.3, 1.35, 0.5, 1);
}

/* `html body` (specificity 0,0,2) so the canvas wins over each page's own
   `body { background }` even though aurora.css is linked first. */
html body { background: var(--canvas); }

body::before {
    content: '';
    position: fixed;
    inset: -20vmax;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40vmax 36vmax at 20% -8%,   rgba(124,106,239,0.34), transparent 60%),
        radial-gradient(46vmax 42vmax at 112% 4%,   rgba(96, 80, 220, 0.26), transparent 58%),
        radial-gradient(50vmax 46vmax at 88% 116%,  rgba(150,120,255,0.24), transparent 60%),
        radial-gradient(40vmax 38vmax at -10% 112%, rgba(84, 72, 210, 0.22), transparent 60%);
    filter: saturate(1.08);
    animation: auroraDrift 34s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}