/**
 * Shadow Nexus Social — Living World CSS
 * snx-living-bg.css  v5.0.0  (SNS-2026-NEXUS-REALM-BG-001)
 *
 * Complete cinematic animated world — CSS layers only.
 * Canvas (rain, particles, lightning, arcs) is handled exclusively
 * by the ECLIPSE STORM ENGINE in index.html.
 *
 * Z-INDEX ARCHITECTURE (back → front):
 *   -3   #snx-realm-artwork      — Nexus Realm artwork (THE WORLD)
 *   -2   .snx-bg-nebula          — dark atmospheric tint over artwork
 *   -1.5 #snx-readability-overlay— subtle dark gradient for text readability
 *   -1   #bg-canvas              — primary storm canvas (rain/particles/lightning)
 *    0   #snxStarsCanvas         — animated starfield canvas
 *    2   .snx-bg-clouds          — storm cloud layer 1 (slow drift)
 *    2   .snx-bg-clouds2         — storm cloud layer 2 (counter-drift)
 *    3   .snx-bg-clouds3         — upper cloud bank (slowest)
 *    3   .snx-bg-fog2            — upper fog band
 *    4   .snx-bg-fog             — lower/denser fog band
 *    5   .snx-bg-mist            — foreground mist wisps
 *  9993  .snx-bg-green-accent    — neon green horizon line
 *  9994  .snx-bg-energy          — electric blue bottom sweep
 *  9995  .snx-bg-stars           — CSS star dots (subtle)
 *  9996  #snx-lightning-flash    — full-screen flash overlay (JS-triggered)
 *  9997  #snx-rain-veil          — foreground rain overlay
 *  9998  body::before            — vignette edges
 *  9999  body::after             — slow fog drift overlay
 */

/* ═══════════════════════════════════════════════════════
   NEXUS REALM ARTWORK — THE WORLD (Layer -3, deepest)
   The castle/grim reaper artwork is the environmental base.
   All animation layers live above it.
   ═══════════════════════════════════════════════════════ */

/* Desktop: full artwork using picture element or background-image */
#snx-realm-artwork {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    user-select: none;
    /* New Nexus Realm artwork — full panoramic scene */
    background-image: url('nexus-realm-bg.webp');
    background-size: cover;
    /* Center keeps the castle/moon focal point visible on all screen sizes.
       The Grim Reaper on the left remains visible down to ~900px wide. */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* GPU layer — no repaints on scroll */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    /* Fade in gently on first load so the background world 'materialises' */
    animation: snxArtworkFadeIn 1.8s ease-out both;
    will-change: auto;
}
@keyframes snxArtworkFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* JPEG fallback for browsers that don't support WebP (auto-detected at paint time).
   Modern browsers all support WebP; this keeps older ones working. */
@supports not (background-image: url('x.webp')) {
    #snx-realm-artwork {
        background-image: url('nexus-realm-bg.jpg');
    }
}

/* ─── READABILITY OVERLAY (Layer -1.5) ──────────────────
   Placed between the artwork and the canvas animation layers.
   Subtle dark gradient — improves UI legibility without hiding
   the artwork. NOT a giant black rectangle. */
#snx-readability-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    user-select: none;
    background:
        /* Deep top-down gradient — darkens sky slightly */
        linear-gradient(180deg,
            rgba(0,2,8,0.30) 0%,
            rgba(0,4,12,0.18) 30%,
            rgba(0,4,12,0.12) 60%,
            rgba(0,2,8,0.38) 100%
        ),
        /* Left-edge darkening where grim reaper lives — nav sits here on desktop */
        linear-gradient(90deg,
            rgba(0,0,8,0.45) 0%,
            transparent 30%
        ),
        /* Atmospheric bottom dark — merges into interface floor */
        radial-gradient(ellipse 100% 40% at 50% 100%,
            rgba(0,4,16,0.55) 0%,
            transparent 100%
        );
    will-change: auto;
}

/* ═══════════════════════════════════════════════════════
   MASTER TOGGLE — .snx-bg-off kills all atmospheric effects
   Artwork stays visible for fallback; only animations are off.
   ═══════════════════════════════════════════════════════ */
.snx-bg-off body::after,
.snx-bg-off .snx-bg-layer,
.snx-bg-off #bg-canvas,
.snx-bg-off #snxStarsCanvas,
.snx-bg-off #snx-lightning-flash,
.snx-bg-off #snx-rain-veil,
.snx-bg-off .rain-drop,
.snx-bg-off .realm-energy-wave {
    animation: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION — keep design, stop movement
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .snx-bg-layer,
    body::after,
    #bg-canvas,
    #snxStarsCanvas,
    .rain-drop,
    .realm-energy-wave {
        animation: none !important;
        opacity: 0.12 !important;
    }
    /* Keep nebula visible as static background */
    .snx-bg-nebula { opacity: 1 !important; animation: none !important; }
    .snx-bg-energy { animation: none !important; opacity: 0.3 !important; }
    .snx-bg-green-accent { animation: none !important; opacity: 0.25 !important; }
}

/* ═══════════════════════════════════════════════════════
   SHARED LAYER PROPERTIES
   ═══════════════════════════════════════════════════════ */
.snx-bg-layer,
#bg-canvas,
#snxStarsCanvas {
    pointer-events: none !important;
    user-select: none !important;
}

/* ═══════════════════════════════════════════════════════
   LAYER 1 — NEBULA BASE / ATMOSPHERIC TINT OVER ARTWORK
   Subtle blue radial gradients that blend with the artwork's
   natural blues/greens — enhanced, not replaced.
   z-index: -2 (sits directly above the artwork)
   ═══════════════════════════════════════════════════════ */
.snx-bg-nebula {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background:
        /* Subtle blue atmospheric depth — blends with artwork sky */
        radial-gradient(ellipse 90% 70% at 5% 20%,  rgba(0,40,140,0.18) 0%, transparent 65%),
        /* Right cold glow — gentle, let artwork show through */
        radial-gradient(ellipse 70% 60% at 95% 30%, rgba(0,20,90,0.14) 0%, transparent 65%),
        /* Bottom blue glow — matches artwork's water/mist at bottom */
        radial-gradient(ellipse 120% 55% at 50% 100%, rgba(0,50,160,0.22) 0%, transparent 60%),
        /* Central tint — very subtle so artwork remains visible */
        radial-gradient(ellipse 100% 80% at 50% 50%, rgba(0,10,40,0.22) 0%, transparent 100%),
        /* Very top — keep dark like the artwork's storm sky */
        radial-gradient(ellipse 100% 35% at 50% 0%, rgba(0,5,18,0.38) 0%, transparent 80%);
    animation: snxNebulaBreathe 28s ease-in-out infinite alternate;
    will-change: opacity;
}
@keyframes snxNebulaBreathe {
    0%   { opacity: 0.75; }
    40%  { opacity: 0.92; }
    70%  { opacity: 0.80; }
    100% { opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════
   CANVAS LAYERS — #bg-canvas and #snxStarsCanvas
   Overrides ensure correct stacking and no layout interference.
   ═══════════════════════════════════════════════════════ */
#bg-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Use 100% on a fixed element — resolves to layout viewport, stable on mobile.
       Combined with JS pixel dims locked to first innerWidth/Height,
       the CSS display size never reacts to address-bar show/hide. */
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: -1 !important;
    opacity: 1;
    /* Promote to its own GPU compositor layer on mobile so scrolling
       and address-bar transitions don't cause a repaint of this canvas. */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
#snxStarsCanvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════
   LAYER 2 — STORM CLOUDS
   Three independent layers at different speeds and depths.
   Width 200%+: translation animates them seamlessly.
   ═══════════════════════════════════════════════════════ */

/* Cloud bank 1 — main foreground storm mass */
.snx-bg-clouds {
    position: fixed;
    inset: 0;
    width: 220%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    /* Layered thunderhead silhouettes with blue-tinted inner storm glow */
    background:
        radial-gradient(ellipse 55% 18% at 28%  6%, rgba(4,10,26,0.78) 0%, transparent 60%),
        radial-gradient(ellipse 70% 22% at 68%  4%, rgba(3,8,24,0.72) 0%, transparent 60%),
        radial-gradient(ellipse 50% 14% at 48% 13%, rgba(5,12,30,0.65) 0%, transparent 50%),
        radial-gradient(ellipse 80% 16% at 18% 20%, rgba(3,8,22,0.55) 0%, transparent 65%),
        radial-gradient(ellipse 60% 12% at 78% 26%, rgba(4,10,24,0.50) 0%, transparent 55%),
        /* Storm inner glow — cold blue */
        radial-gradient(ellipse 40% 10% at 43% 10%, rgba(0,30,100,0.28) 0%, transparent 60%),
        radial-gradient(ellipse 35%  8% at 70% 16%, rgba(0,25,85,0.22) 0%, transparent 60%),
        /* Very subtle under-cloud blue lightning hint */
        radial-gradient(ellipse 25%  6% at 55%  8%, rgba(0,60,180,0.15) 0%, transparent 55%);
    animation: snxClouds1Scroll 85s linear infinite;
    will-change: transform;
}
@keyframes snxClouds1Scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Cloud bank 2 — mid-layer, slightly different speed */
.snx-bg-clouds2 {
    position: fixed;
    inset: 0;
    width: 220%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(ellipse 60% 20% at 14% 14%, rgba(3,8,22,0.58) 0%, transparent 60%),
        radial-gradient(ellipse 45% 14% at 58%  8%, rgba(5,11,28,0.52) 0%, transparent 55%),
        radial-gradient(ellipse 70% 18% at 83% 18%, rgba(4,9,26,0.50) 0%, transparent 60%),
        radial-gradient(ellipse 35% 10% at 36% 16%, rgba(0,28,90,0.24) 0%, transparent 55%),
        radial-gradient(ellipse 28%  7% at 76% 22%, rgba(0,22,75,0.18) 0%, transparent 55%);
    animation: snxClouds2Scroll 115s linear infinite;
    will-change: transform;
}
@keyframes snxClouds2Scroll {
    0%   { transform: translateX(-8%); }
    100% { transform: translateX(-58%); }
}

/* Cloud bank 3 — upper slow bank, near horizon */
.snx-bg-clouds3 {
    position: fixed;
    inset: 0;
    width: 220%;
    height: 60%;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(ellipse 90% 30% at 40%  0%, rgba(2,6,16,0.45) 0%, transparent 70%),
        radial-gradient(ellipse 70% 25% at 75% 10%, rgba(3,7,20,0.38) 0%, transparent 65%),
        radial-gradient(ellipse 50% 18% at 15% 18%, rgba(3,7,18,0.32) 0%, transparent 60%),
        /* Blue atmospheric haze between cloud layers */
        radial-gradient(ellipse 100% 20% at 50% 30%, rgba(0,15,55,0.14) 0%, transparent 70%);
    animation: snxClouds3Scroll 145s linear infinite;
    will-change: transform;
}
@keyframes snxClouds3Scroll {
    0%   { transform: translateX(-4%); }
    100% { transform: translateX(-54%); }
}

/* ═══════════════════════════════════════════════════════
   LAYER 3 — ATMOSPHERIC FOG BANDS
   Two layers at different depths, drifting in opposite directions.
   ═══════════════════════════════════════════════════════ */

/* Lower denser fog */
.snx-bg-fog {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background:
        /* Wide lower fog bands — blue-tinted ground mist */
        radial-gradient(ellipse 140% 58% at 20% 88%, rgba(0,80,200,0.13) 0%, transparent 68%),
        radial-gradient(ellipse  95% 42% at 80% 92%, rgba(0,50,140,0.10) 0%, transparent 68%),
        radial-gradient(ellipse 115% 52% at 50% 95%, rgba(0,65,165,0.09) 0%, transparent 68%),
        radial-gradient(ellipse  75% 38% at  8% 65%, rgba(0,35,110,0.08) 0%, transparent 62%),
        /* Mid-body atmospheric haze */
        radial-gradient(ellipse  60% 30% at 90% 55%, rgba(0,25,80,0.06) 0%, transparent 60%);
    animation: snxFogDrift1 28s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Upper lighter fog */
.snx-bg-fog2 {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(ellipse 105% 45% at 78% 12%, rgba(0,20,75,0.09) 0%, transparent 68%),
        radial-gradient(ellipse  85% 38% at 18% 22%, rgba(0,15,60,0.08) 0%, transparent 68%),
        radial-gradient(ellipse  95% 42% at 48% 42%, rgba(0,22,80,0.07) 0%, transparent 68%),
        /* Very subtle upper atmosphere haze */
        radial-gradient(ellipse 120% 25% at 50%  0%, rgba(0,10,40,0.05) 0%, transparent 70%);
    animation: snxFogDrift2 36s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes snxFogDrift1 {
    0%   { transform: translateX(-5%) translateY(0)     scale(1.04); opacity: 0.72; }
    25%  { transform: translateX(1%)  translateY(-1.5%) scale(1.06); opacity: 0.96; }
    50%  { transform: translateX(-2%) translateY(0.8%)  scale(1.05); opacity: 0.88; }
    75%  { transform: translateX(3%)  translateY(-0.5%) scale(1.03); opacity: 0.82; }
    100% { transform: translateX(6%)  translateY(1.2%)  scale(1.02); opacity: 0.76; }
}
@keyframes snxFogDrift2 {
    0%   { transform: translateX(4%)  translateY(0)     scale(1.03); opacity: 0.55; }
    30%  { transform: translateX(-1%) translateY(2.0%)  scale(1.05); opacity: 0.82; }
    60%  { transform: translateX(-3%) translateY(0.5%)  scale(1.04); opacity: 0.70; }
    100% { transform: translateX(-5%) translateY(-1.0%) scale(1.02); opacity: 0.60; }
}

/* ═══════════════════════════════════════════════════════
   LAYER 4 — FOREGROUND MIST
   Very subtle close-range moving mist.
   ═══════════════════════════════════════════════════════ */
.snx-bg-mist {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    background:
        radial-gradient(ellipse 180% 28% at 30% 78%, rgba(0,60,160,0.06) 0%, transparent 65%),
        radial-gradient(ellipse 120% 22% at 70% 85%, rgba(0,40,120,0.05) 0%, transparent 65%),
        radial-gradient(ellipse 100% 18% at 15% 92%, rgba(0,30,100,0.04) 0%, transparent 60%);
    animation: snxMistDrift 18s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes snxMistDrift {
    0%   { transform: translateX(-3%) translateY(0);    opacity: 0.55; }
    50%  { transform: translateX(2%)  translateY(-2%);  opacity: 0.80; }
    100% { transform: translateX(5%)  translateY(0.5%); opacity: 0.45; }
}

/* ═══════════════════════════════════════════════════════
   LAYER 5 — CSS STAR DOTS (subtle atmospheric sparkles)
   z-index: 9995
   ═══════════════════════════════════════════════════════ */
.snx-bg-stars {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9995;
    background-image:
        /* Blue sparks scattered across upper half */
        radial-gradient(1px 1px at  9%  6%,  rgba(0,200,255,0.40) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 14%,  rgba(0,180,255,0.30) 0%, transparent 100%),
        radial-gradient(1px 1px at 38%  3%,  rgba(57,255,20,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 54%  9%,  rgba(0,200,255,0.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 71% 17%,  rgba(0,160,255,0.28) 0%, transparent 100%),
        radial-gradient(1px 1px at 86%  5%,  rgba(57,255,20,0.22) 0%, transparent 100%),
        /* Mid-height sparks */
        radial-gradient(1px 1px at  4% 38%,  rgba(0,200,255,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 17% 52%,  rgba(57,255,20,0.20) 0%, transparent 100%),
        radial-gradient(1px 1px at 31% 44%,  rgba(0,180,255,0.22) 0%, transparent 100%),
        radial-gradient(1px 1px at 48% 60%,  rgba(0,200,255,0.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 63% 35%,  rgba(57,255,20,0.20) 0%, transparent 100%),
        radial-gradient(1px 1px at 79% 48%,  rgba(0,160,255,0.22) 0%, transparent 100%),
        radial-gradient(1px 1px at 93% 28%,  rgba(0,200,255,0.24) 0%, transparent 100%),
        /* Lower sparse sparks */
        radial-gradient(1px 1px at 12% 72%,  rgba(0,180,255,0.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 44% 80%,  rgba(57,255,20,0.16) 0%, transparent 100%),
        radial-gradient(1px 1px at 67% 68%,  rgba(0,160,255,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 88% 76%,  rgba(57,255,20,0.14) 0%, transparent 100%);
    animation: snxStarsBreathe 11s ease-in-out infinite alternate;
    will-change: opacity;
}
@keyframes snxStarsBreathe {
    0%   { opacity: 0.40; }
    40%  { opacity: 0.78; }
    100% { opacity: 0.92; }
}

/* ═══════════════════════════════════════════════════════
   LAYER 6 — ELECTRIC ENERGY SWEEP (bottom glow)
   z-index: 9994
   ═══════════════════════════════════════════════════════ */
.snx-bg-energy {
    position: fixed;
    bottom: 0;
    left: -25%;
    width: 150%;
    height: 42%;
    pointer-events: none;
    z-index: 9994;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,65,155,0.04)  30%,
        rgba(0,100,225,0.08) 58%,
        rgba(0,75,175,0.06)  78%,
        rgba(0,40,120,0.04)  92%,
        transparent 100%
    );
    animation: snxEnergySweep 42s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
@keyframes snxEnergySweep {
    0%   { transform: translateX(-10%) skewX(-1.5deg); opacity: 0.60; }
    30%  { transform: translateX(-2%)  skewX(0.5deg);  opacity: 0.95; }
    65%  { transform: translateX(5%)   skewX(-0.8deg); opacity: 0.80; }
    100% { transform: translateX(12%)  skewX(-1.2deg); opacity: 0.65; }
}

/* ═══════════════════════════════════════════════════════
   LAYER 7 — NEON GREEN HORIZON LINE
   z-index: 9993
   ═══════════════════════════════════════════════════════ */
.snx-bg-green-accent {
    position: fixed;
    bottom: 14%;
    left: 0;
    width: 100%;
    height: 1px;
    pointer-events: none;
    z-index: 9993;
    background: linear-gradient(90deg,
        transparent           0%,
        rgba(57,255,20,0)     12%,
        rgba(57,255,20,0.10)  32%,
        rgba(57,255,20,0.22)  50%,
        rgba(57,255,20,0.10)  68%,
        rgba(57,255,20,0)     88%,
        transparent           100%
    );
    animation: snxGreenHorizon 16s ease-in-out infinite alternate;
    will-change: opacity, transform;
}
@keyframes snxGreenHorizon {
    0%   { opacity: 0.40; transform: scaleX(0.78); }
    35%  { opacity: 0.80; transform: scaleX(1.00); }
    70%  { opacity: 0.60; transform: scaleX(1.12); }
    100% { opacity: 0.50; transform: scaleX(0.85); }
}

/* ═══════════════════════════════════════════════════════
   LIGHTNING FLASH OVERLAY (JS-triggered)
   z-index: 9996
   ═══════════════════════════════════════════════════════ */
#snx-lightning-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
    opacity: 0;
    background: radial-gradient(ellipse 100% 80% at 50% 0%,
        rgba(0,80,200,0.18) 0%, transparent 70%);
    transition: opacity 0.08s ease-out;
    will-change: opacity;
}
#snx-lightning-flash.snx-flash-active {
    opacity: 1;
    transition: opacity 0.04s ease-in;
}

/* ═══════════════════════════════════════════════════════
   RAIN VEIL (foreground rain shimmer — CSS only)
   z-index: 9997
   ═══════════════════════════════════════════════════════ */
#snx-rain-veil {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    /* Subtle diagonal rain texture — very faint */
    background: repeating-linear-gradient(
        172deg,
        transparent 0px,
        transparent 3px,
        rgba(0,150,255,0.015) 3px,
        rgba(0,150,255,0.015) 4px
    );
    animation: snxRainVeilDrift 8s linear infinite;
    will-change: transform;
    opacity: 0.6;
}
@keyframes snxRainVeilDrift {
    0%   { transform: translateY(-8px); }
    100% { transform: translateY(12px); }
}

/* ═══════════════════════════════════════════════════════
   CSS DOM RAIN DROPS (realm.css .rain-drop)
   Override to prevent duplicate system conflicts.
   These are kept but opacity reduced — main rain is canvas.
   ═══════════════════════════════════════════════════════ */
.rain-drop {
    opacity: 0.0 !important; /* Hidden — canvas rain is authoritative */
}

/* ═══════════════════════════════════════════════════════
   CSS .realm-energy-wave — keep but limit
   ═══════════════════════════════════════════════════════ */
.realm-energy-wave {
    /* These are still injected by initEnergyWaves but we keep
       them at reduced opacity so they don't conflict */
    opacity: 0 !important; /* Canvas engine handles energy */
}

/* ═══════════════════════════════════════════════════════
   UI GLASS — translucent panels integrated into the world
   backdrop-filter only on desktop — on mobile it forces every
   card to be GPU-composited separately over the canvas, causing
   severe jank during scroll.
   ═══════════════════════════════════════════════════════ */
body:not(.snx-bg-off) .section-card {
    background: rgba(6, 16, 34, 0.90) !important;
}
@media (min-width: 769px) {
    body:not(.snx-bg-off) .section-card {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

/* ═══════════════════════════════════════════════════════
   SECTION MOOD MODIFIERS
   Applied as class on <html> element by SNXLivingBg.setMood()
   ═══════════════════════════════════════════════════════ */

/* Music Hub: stronger energy, faster cloud movement */
.snx-mood-music .snx-bg-energy {
    animation: snxEnergySweepMusic 26s ease-in-out infinite alternate;
    opacity: 1;
}
@keyframes snxEnergySweepMusic {
    0%   { transform: translateX(-12%) skewX(-2deg); opacity: 0.90; }
    40%  { transform: translateX(2%)   skewX(1deg);  opacity: 1.0;  }
    100% { transform: translateX(14%)  skewX(-1.5deg); opacity: 0.95; }
}
.snx-mood-music .snx-bg-clouds  { animation-duration: 62s; }
.snx-mood-music .snx-bg-clouds2 { animation-duration: 88s; }
.snx-mood-music .snx-bg-fog     { opacity: 1.05; }

/* Live: electric atmosphere — brighter, slightly faster */
.snx-mood-live .snx-bg-clouds  { animation-duration: 68s; }
.snx-mood-live .snx-bg-clouds2 { animation-duration: 92s; }
.snx-mood-live .snx-bg-fog     { opacity: 0.95; }
.snx-mood-live .snx-bg-energy  { opacity: 1.0; animation-duration: 32s; }

/* Messages: calmer — slower everything, reduced intensity */
.snx-mood-messages .snx-bg-fog      { animation-duration: 42s; opacity: 0.78; }
.snx-mood-messages .snx-bg-fog2     { animation-duration: 52s; opacity: 0.55; }
.snx-mood-messages .snx-bg-mist     { opacity: 0.35; animation-duration: 30s; }
.snx-mood-messages .snx-bg-energy   { opacity: 0.50; animation-duration: 58s; }
.snx-mood-messages .snx-bg-clouds   { animation-duration: 118s; }
.snx-mood-messages .snx-bg-clouds2  { animation-duration: 145s; }

/* Profile: cinematic slow — the most dramatic presentation */
.snx-mood-profile .snx-bg-fog       { animation-duration: 46s; }
.snx-mood-profile .snx-bg-fog2      { animation-duration: 62s; }
.snx-mood-profile .snx-bg-clouds    { animation-duration: 128s; }
.snx-mood-profile .snx-bg-clouds2   { animation-duration: 155s; }
.snx-mood-profile .snx-bg-energy    { opacity: 0.65; animation-duration: 54s; }
.snx-mood-profile .snx-bg-nebula    { animation-duration: 42s; }

/* ═══════════════════════════════════════════════════════
   ENVIRONMENTAL REACTION CLASSES
   Short-duration classes applied/removed by SNXLivingBg.react()
   ═══════════════════════════════════════════════════════ */

/* Nav open: quick blue energy sweep */
html.snx-react-nav .snx-bg-energy {
    opacity: 1 !important;
    transition: opacity 0.15s ease-out;
}
html.snx-react-nav .snx-bg-green-accent {
    opacity: 0.9 !important;
    transition: opacity 0.15s ease-out;
}

/* Music hub open: slight pulse */
html.snx-react-music .snx-bg-energy {
    transform: translateX(-5%) skewX(-1deg);
    opacity: 1 !important;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Live open: stronger electrical atmosphere */
html.snx-react-live .snx-bg-energy {
    opacity: 1 !important;
    filter: brightness(1.3);
    transition: opacity 0.2s, filter 0.3s;
}

/* Notification: neon green pulse */
html.snx-react-notif .snx-bg-green-accent {
    opacity: 1 !important;
    transform: scaleX(1.2);
    transition: opacity 0.1s, transform 0.1s;
}

/* Music playing: gentle glow breathing on energy layer */
html.snx-music-active .snx-bg-energy {
    animation: snxEnergyMusicBreath 3.5s ease-in-out infinite alternate !important;
}
@keyframes snxEnergyMusicBreath {
    0%   { opacity: 0.65; transform: translateX(-8%) skewX(-1deg); }
    50%  { opacity: 1.00; transform: translateX(0%)  skewX(0deg);  }
    100% { opacity: 0.75; transform: translateX(8%)  skewX(0.5deg); }
}
html.snx-music-active .snx-bg-nebula {
    animation-duration: 6s !important;
}

/* ═══════════════════════════════════════════════════════
   PAGE-HIDDEN — pause CSS animations when tab loses focus
   ═══════════════════════════════════════════════════════ */
.snx-page-hidden .snx-bg-fog,
.snx-page-hidden .snx-bg-fog2,
.snx-page-hidden .snx-bg-mist,
.snx-page-hidden .snx-bg-clouds,
.snx-page-hidden .snx-bg-clouds2,
.snx-page-hidden .snx-bg-clouds3,
.snx-page-hidden .snx-bg-energy,
.snx-page-hidden .snx-bg-green-accent,
.snx-page-hidden .snx-bg-stars,
.snx-page-hidden .snx-bg-nebula,
.snx-page-hidden #snx-rain-veil,
.snx-page-hidden .rain-drop,
.snx-page-hidden .realm-energy-wave {
    animation-play-state: paused !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE PERFORMANCE — reduce complexity
   Still animated, just lighter
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── NEXUS REALM ARTWORK — mobile background fix ──────
       CRITICAL: background-attachment:fixed causes iOS Safari
       and Android Chrome to disable GPU compositing, making every
       scroll trigger a full-page repaint (white flash / jump).
       On mobile we switch to scroll + a static centered position.
       The new panoramic artwork centers the castle/moon; centered
       positioning shows the most impactful part of the scene. */
    #snx-realm-artwork {
        background-attachment: scroll !important;
        /* Center the scene for portrait phone screens.
           The new artwork is 1774×887 — centering shows the castle/moon/waterfall. */
        background-position: center 20% !important;
        /* Remove animation on mobile (saves a compositor layer) */
        animation: none !important;
        opacity: 1 !important;
        will-change: auto !important;
    }
    /* Readability overlay — slightly stronger on mobile for smaller text */
    #snx-readability-overlay {
        background:
            linear-gradient(180deg,
                rgba(0,2,8,0.40) 0%,
                rgba(0,4,12,0.25) 35%,
                rgba(0,4,12,0.18) 65%,
                rgba(0,2,8,0.50) 100%
            ),
            radial-gradient(ellipse 100% 40% at 50% 100%,
                rgba(0,4,16,0.65) 0%,
                transparent 100%
            );
    }

    /* Hide most expensive CSS layers on mobile */
    .snx-bg-fog2         { display: none; }
    .snx-bg-clouds2      { display: none; }
    .snx-bg-clouds3      { display: none; }
    .snx-bg-stars        { display: none; }
    .snx-bg-green-accent { opacity: 0.6; }
    .snx-bg-energy       { opacity: 0.40; }
    #snx-rain-veil       { opacity: 0.3; }
    /* Slower cloud animation on mobile */
    .snx-bg-clouds       { animation-duration: 130s; }
    /* Less fog movement */
    .snx-bg-fog          { animation-duration: 40s; }
    .snx-bg-mist         { display: none; }

    /* Remove will-change from ALL animated layers on mobile.
       will-change: transform on a fixed full-viewport element forces the GPU
       to allocate a full-screen off-screen buffer per layer — on phones with
       limited VRAM this causes frame drops and flickering. */
    .snx-bg-clouds  { will-change: auto; }
    .snx-bg-fog     { will-change: auto; }
    .snx-bg-fog2    { will-change: auto; }
    .snx-bg-nebula  { will-change: auto; }
    .snx-bg-energy  { will-change: auto; }
    .snx-bg-green-accent { will-change: auto; }
    #snx-rain-veil  { will-change: auto; }

    /* FIX: body::after double-animation override for mobile.
       The visual-upgrades block runs fogDrift + lightningStreak simultaneously
       on body::after. The lightningStreak animation uses translateX(-110%) which
       forces a large off-screen paint on mobile — replace both with only fogDrift. */
    body::after {
        animation: fogDrift 22s ease-in-out infinite alternate !important;
        will-change: auto !important;
    }

    /* Override fog keyframes to remove scale() on mobile.
       scale() on a fixed full-viewport element causes the GPU to repaint the
       entire texture every frame — without scale() it can scroll the cached
       texture cheaply instead. */
    @keyframes snxFogDrift1 {
        0%   { transform: translateX(-5%) translateY(0);     opacity: 0.72; }
        25%  { transform: translateX(1%)  translateY(-1.5%); opacity: 0.96; }
        50%  { transform: translateX(-2%) translateY(0.8%);  opacity: 0.88; }
        75%  { transform: translateX(3%)  translateY(-0.5%); opacity: 0.82; }
        100% { transform: translateX(6%)  translateY(1.2%);  opacity: 0.76; }
    }
    @keyframes snxFogDrift2 {
        0%   { transform: translateX(4%)  translateY(0);     opacity: 0.55; }
        30%  { transform: translateX(-1%) translateY(2.0%);  opacity: 0.82; }
        60%  { transform: translateX(-3%) translateY(0.5%);  opacity: 0.70; }
        100% { transform: translateX(-5%) translateY(-1.0%); opacity: 0.60; }
    }
    @keyframes snxMistDrift {
        0%   { transform: translateX(-3%) translateY(0);    opacity: 0.55; }
        50%  { transform: translateX(2%)  translateY(-2%);  opacity: 0.80; }
        100% { transform: translateX(5%)  translateY(0.5%); opacity: 0.45; }
    }
    @keyframes snxEnergySweep {
        0%   { transform: translateX(-10%); opacity: 0.60; }
        30%  { transform: translateX(-2%);  opacity: 0.95; }
        65%  { transform: translateX(5%);   opacity: 0.80; }
        100% { transform: translateX(12%);  opacity: 0.65; }
    }
}

/* ═══════════════════════════════════════════════════════
   TABLET — intermediate performance
   ═══════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet artwork: still fixed attachment — tablets have no address-bar
       jump issue. Keep full panoramic scene centered. */
    #snx-realm-artwork {
        background-position: center center;
    }
    .snx-bg-clouds3 { display: none; }
    .snx-bg-stars   { opacity: 0.6; }
    .snx-bg-clouds  { animation-duration: 100s; }
    .snx-bg-clouds2 { animation-duration: 135s; }
}

/* Landscape phone — center the wide panoramic scene */
@media (max-width: 768px) and (orientation: landscape) {
    #snx-realm-artwork {
        background-position: center center !important;
        background-size: cover !important;
    }
}

/* Very small phones (< 380px wide) — keep castle/moon visible */
@media (max-width: 380px) {
    #snx-realm-artwork {
        background-position: 60% 20% !important;
    }
}

/* ═══════════════════════════════════════════════════════
   STARTUP FADE-IN
   Environment fades in during first ~1.2 seconds.
   UI is already usable immediately.
   ═══════════════════════════════════════════════════════ */
.snx-bg-fog,
.snx-bg-fog2,
.snx-bg-mist,
.snx-bg-clouds,
.snx-bg-clouds2,
.snx-bg-clouds3 {
    animation-fill-mode: both;
}

/* Nebula and energy layers fade in gently */
.snx-bg-nebula {
    animation-name: snxNebulaBreathe, snxStartupFadeIn;
    animation-duration: 28s, 1.2s;
    animation-timing-function: ease-in-out, ease-out;
    animation-fill-mode: normal, both;
    animation-iteration-count: infinite, 1;
    animation-direction: alternate, normal;
}
.snx-bg-energy {
    animation-name: snxEnergySweep, snxStartupFadeIn;
    animation-duration: 42s, 1.5s;
    animation-timing-function: ease-in-out, ease-out;
    animation-fill-mode: normal, both;
    animation-iteration-count: infinite, 1;
    animation-direction: alternate, normal;
}
@keyframes snxStartupFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════
   HARD SAFETY — pointer-events and user-select lockout
   ═══════════════════════════════════════════════════════ */
.snx-bg-layer,
.snx-bg-nebula,
.snx-bg-stars,
.snx-bg-fog,
.snx-bg-fog2,
.snx-bg-mist,
.snx-bg-clouds,
.snx-bg-clouds2,
.snx-bg-clouds3,
.snx-bg-energy,
.snx-bg-green-accent,
#snx-lightning-flash,
#snx-rain-veil {
    pointer-events: none !important;
    user-select: none !important;
}