/* ============================================
   Arrière-plan animé — épuré & dynamique
   ============================================ */

body.has-animated-bg {
    background: #05080f;
    position: relative;
    overflow-x: hidden;
}

body.has-animated-bg::before,
body.has-animated-bg::after {
    content: none !important;
    display: none !important;
}

body.has-animated-bg .floating-shapes {
    display: none !important;
}

body.has-animated-bg > #footer-container,
body.has-animated-bg > section,
body.has-animated-bg > footer,
body.has-animated-bg > main,
body.has-animated-bg > header,
body.has-animated-bg > nav,
body.has-animated-bg > .page-content,
body.has-animated-bg > div:not(#animated-bg):not(#navbar-container) {
    position: relative;
    z-index: 1;
}

body.has-animated-bg #navbar-container {
    position: relative;
    z-index: 10000;
    background: transparent !important;
}

#animated-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 85% at 50% -10%, #0d1a36 0%, #080f22 46%, #05080f 100%);
    transform: translateZ(0);
    will-change: transform;
    contain: strict;
}

/* ── Voiles « aurora » qui dérivent ── */
.bg-aurora {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(ellipse 38% 32% at 22% 26%, rgba(59, 130, 246, 0.22), transparent 60%),
        radial-gradient(ellipse 34% 30% at 80% 30%, rgba(56, 189, 248, 0.14), transparent 60%),
        radial-gradient(ellipse 44% 40% at 52% 82%, rgba(29, 78, 216, 0.18), transparent 62%);
    animation: auroraDrift 30s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.05); }
    100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.02); }
}

/* ── Orbes bokeh (accents de profondeur) ── */
.bg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.6;
    will-change: transform;
}

.bg-orb-1 {
    width: 440px;
    height: 440px;
    top: -10%;
    left: -6%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3), transparent 70%);
    animation: orbFloat1 26s ease-in-out infinite;
}

.bg-orb-2 {
    width: 360px;
    height: 360px;
    bottom: -8%;
    right: -5%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 70%);
    animation: orbFloat2 32s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(36px, 28px) scale(1.07); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-32px, -22px) scale(1.05); }
}

/* ── Canvas constellation ── */
#bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

/* ── Vignette (profondeur) ── */
.bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 95% 75% at 50% 38%, transparent 52%, rgba(3, 6, 14, 0.6) 100%);
}

/* ── Mode clair ── */
body.light-mode.has-animated-bg {
    background: #eef4ff;
}

body.light-mode.has-animated-bg #animated-bg {
    background: radial-gradient(ellipse 120% 85% at 50% -10%, #ffffff 0%, #e8f0fe 50%, #dbe7fb 100%);
}

body.light-mode.has-animated-bg .bg-aurora {
    background:
        radial-gradient(ellipse 38% 32% at 22% 26%, rgba(59, 130, 246, 0.14), transparent 60%),
        radial-gradient(ellipse 34% 30% at 80% 30%, rgba(56, 189, 248, 0.1), transparent 60%),
        radial-gradient(ellipse 44% 40% at 52% 82%, rgba(29, 78, 216, 0.1), transparent 62%);
}

body.light-mode.has-animated-bg .bg-orb {
    opacity: 0.4;
}

body.light-mode.has-animated-bg #bg-canvas {
    opacity: 0.5;
}

body.light-mode.has-animated-bg .bg-vignette {
    background: radial-gradient(ellipse 95% 75% at 50% 38%, transparent 58%, rgba(180, 200, 235, 0.35) 100%);
}

/* ── Réduction du mouvement ── */
html.reduced-motion-bg .bg-aurora,
html.reduced-motion-bg .bg-orb {
    animation: none !important;
}

html.reduced-motion-bg #bg-canvas {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .bg-aurora,
    .bg-orb {
        animation: none !important;
    }

    #bg-canvas {
        display: none;
    }
}

@media (max-width: 640px) {
    .bg-orb-1 { width: 300px; height: 300px; }
    .bg-orb-2 { width: 240px; height: 240px; }
}