/* ============================================================
   ORION UNIVERSE BACKGROUNDS — Shared Effects Library
   Each page gets a unique cosmos animation variant.
   ============================================================ */

/* ── CANVAS BASE ──────────────────────────────────────────── */
#universe-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -10;
    pointer-events: none;
}

/* ── VARIANT OVERLAYS (tint each page differently) ─────────── */
.universe-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -9;
    pointer-events: none;
}

/* pricebook  → deep indigo nebula */
.u-variant-pricebook {
    background: radial-gradient(ellipse at 20% 50%, rgba(63, 0, 120, 0.35) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(0, 80, 160, 0.25) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 90%, rgba(0, 180, 255, 0.15) 0%, transparent 50%);
}

/* service.html (generic) → aurora borealis */
.u-variant-service {
    background: radial-gradient(ellipse at 30% 30%, rgba(0, 255, 180, 0.2) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 70%, rgba(0, 100, 255, 0.2) 0%, transparent 55%),
                radial-gradient(ellipse at 50% 10%, rgba(180, 0, 255, 0.15) 0%, transparent 50%);
}

/* service_N pages → orange/red fire nebula */
.u-variant-service-detail {
    background: radial-gradient(ellipse at 60% 40%, rgba(255, 80, 0, 0.2) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 70%, rgba(255, 200, 0, 0.12) 0%, transparent 55%),
                radial-gradient(ellipse at 80% 10%, rgba(180, 0, 80, 0.18) 0%, transparent 50%);
}

/* faq, legal → cyan/teal matrix */
.u-variant-info {
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 255, 255, 0.12) 0%, transparent 60%),
                radial-gradient(ellipse at 10% 20%, rgba(0, 200, 180, 0.15) 0%, transparent 55%),
                radial-gradient(ellipse at 90% 80%, rgba(0, 120, 200, 0.18) 0%, transparent 50%);
}