/* ============================================================
   style-fx.css — Orcidia Visual FX
   Deep Nebula Background
   À inclure dans chaque page après le <style> existant :
   <link rel="stylesheet" href="style-fx.css">
   ============================================================ */

/* ── Remplace le background fixe inline ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse 80% 60% at 20% 80%, rgba(0, 30, 60, 0.95) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 15, 40, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse 100% 100% at 50% 50%, #050d1a 0%, #000 70%);
    animation: nebulaShift 18s ease-in-out infinite alternate;
}

/* ── Couche de couleur nebula ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 25% 75%, rgba(0, 80, 160, 0.10) 0%, transparent 45%),
        radial-gradient(circle at 75% 25%, rgba(0, 50, 120, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(0, 30, 80, 0.05) 0%, transparent 60%);
    animation: nebulaShift 24s ease-in-out infinite alternate-reverse;
}

@keyframes nebulaShift {
    0%   { transform: scale(1)    translate(0px,   0px);  opacity: 0.85; }
    33%  { transform: scale(1.04) translate(-8px,  4px);  opacity: 1;    }
    66%  { transform: scale(1.06) translate( 5px, -6px);  opacity: 0.9;  }
    100% { transform: scale(1.08) translate(-12px, 8px);  opacity: 0.95; }
}

/* ── Starfield — couche 1 (étoiles fines) ── */
.stars-layer-1 {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at  5%  8%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 19%  3%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 27% 48%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 33% 14%, rgba(255,255,255,0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 72%, rgba(255,255,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 29%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 54% 57%, rgba(255,255,255,0.40) 0%, transparent 100%),
        radial-gradient(1px 1px at 61% 11%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 82%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 74% 37%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 81% 64%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 87% 19%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(1px 1px at 93% 44%, rgba(255,255,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 97% 78%, rgba(255,255,255,0.40) 0%, transparent 100%),
        radial-gradient(1px 1px at  8% 91%, rgba(255,255,255,0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 67%, rgba(255,255,255,0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 50% 93%, rgba(255,255,255,0.50) 0%, transparent 100%),
        radial-gradient(1px 1px at 76% 88%, rgba(255,255,255,0.60) 0%, transparent 100%),
        radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.40) 0%, transparent 100%);
    animation: twinkleA 8s ease-in-out infinite alternate;
}

/* ── Starfield — couche 2 (étoiles brillantes) ── */
.stars-layer-2 {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at  9% 16%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(2px   2px   at 24%  6%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 38% 73%, rgba(255,255,255,0.95) 0%, transparent 100%),
        radial-gradient(2px   2px   at 55% 12%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 70% 58%, rgba(255,255,255,0.90) 0%, transparent 100%),
        radial-gradient(2px   2px   at 83% 33%, rgba(255,255,255,0.85) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 92% 77%, rgba(255,255,255,0.75) 0%, transparent 100%),
        radial-gradient(2px   2px   at 16% 88%, rgba(255,255,255,0.80) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 44% 42%, rgba(255,255,255,0.70) 0%, transparent 100%),
        radial-gradient(2px   2px   at 63% 96%, rgba(255,255,255,0.85) 0%, transparent 100%);
    animation: twinkleB 11s ease-in-out infinite alternate-reverse;
}

@keyframes twinkleA {
    0%   { opacity: 0.6; }
    40%  { opacity: 1;   }
    100% { opacity: 0.5; }
}

@keyframes twinkleB {
    0%   { opacity: 0.5; }
    60%  { opacity: 1;   }
    100% { opacity: 0.7; }
}

/* ── Supprime le background du div inline existant ── */
div[style*="radial-gradient(circle at 50% 50%"] {
    background: transparent !important;
    animation: none !important;
}