/**
 * snx-world-bg.css
 * Shadow Nexus Social — Global Cinematic Background
 * Build: SNS-2026-DJ-MIC-001 / v94
 *
 * Source image : ChatGPT Image Sep 25, 2026, 07_54_47 AM.png  (supplied)
 * Website copy : assets/images/shadow-nexus-global-bg.png
 *
 * TWO complementary background layers:
 *   1. #snx-global-world-bg  — dedicated position:fixed <div> element
 *   2. html::before           — position:fixed pseudo-element fallback
 * Both reference the SAME supplied PNG. The div element is more reliable
 * on Android WebView and Samsung Internet which sometimes drop ::before.
 *
 * ONE static background image placed at the root.
 * NO animations, NO parallax, NO canvas, NO video.
 * Loads after all other stylesheets so overrides land cleanly.
 *
 * Visual hierarchy (z-index stack, lowest to highest):
 *   html::before                          z-index: -2  (fallback)
 *   #snx-global-world-bg                  z-index: -1  (primary world art)
 *   #snxStarsCanvas / #bg-canvas          z-index:  0  (atmospheric canvas)
 *   rain/energy effects                   z-index:  1  (ambient)
 *   navigation / content                  auto / 2000+ (all content)
 *   body::after (fog)                     z-index: 9997
 *   body::before (vignette)               z-index: 9998
 *   #snx-auth-gate (world bg during auth) z-index: 9990
 *   cinematic intro                       z-index: 999999
 *
 * IMPORTANT — iOS / Android:
 *   background-attachment: fixed on <html> is BROKEN on iOS Safari.
 *   It causes the background to go blank or render at wrong size.
 *   We use position:fixed on both the div and the pseudo-element
 *   for true fixed-position backgrounds that work on all platforms.
 */

/* ═══════════════════════════════════════════════════════
   LAYER 1: #snx-global-world-bg
   A dedicated position:fixed <div> injected as the FIRST child
   of <body>. More reliable than ::before on Android WebView,
   Samsung Internet, and older iOS PWA shells.
   ═══════════════════════════════════════════════════════ */
#snx-global-world-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* z-index -1 — behind all normal body content, but above the html background
     color. Using -9999 was too deep (rendered behind the root element entirely
     on many browsers). Using -1 places it correctly as the first visual layer
     behind body content. The html::before fallback uses z-index -2 (below this). */
  z-index: -1 !important;
  pointer-events: none !important;
  display: block !important;

  /* The cold-start bootstrap script (_snxBootstrapStyle) and
     snx-adaptive-performance.js both call _setBgSrc() which writes to
     the dynamic _snxAdaptiveBgStyle <style> tag with !important, setting
     this div's background-image correctly regardless of specificity order.
     Do NOT use !important here — that would block the !important dynamic
     style from a later-cascade stylesheet from taking effect in the same
     layer. Instead, set a transparent fallback so the div shows only
     after the image is applied. */
  background-image: none;

  background-color: #02040a;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════
   LAYER 2: html::before (position:fixed pseudo-element)
   Fallback / reinforcement in case the div is removed by
   third-party scripts or browser extensions.
   ═══════════════════════════════════════════════════════ */

/* Step 1: give html a dark background-color fallback so
   there's no white flash before layers render. */
html {
  background-color: #02040a !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* Step 2: the world image as a fixed pseudo-element — universally supported */
html::before {
  content: '';
  position: fixed;
  inset: 0;                      /* top:0; right:0; bottom:0; left:0 */
  z-index: -2;                   /* below everything except #snx-global-world-bg */
  pointer-events: none;

  /* Stage 2A.1: No hardcoded image here — overridden by _snxBootstrapStyle and
     snx-adaptive-performance.js _setBgSrc() before the frame is painted. */
  background-image: none;

  background-color: #02040a;     /* fallback if image fails */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* NO background-attachment here — position:fixed already achieves the
     "fixed to viewport" behavior without the iOS Safari bug. */

  /* Promote to GPU layer — smooth on all devices */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* ── Remove the competing solid body backgrounds so the world shows through ── */
/* nexus-glass.css and realm.css both set body { background: … !important }.   */
/* We override body here to be transparent so html::before world shines through. */
body {
  background: transparent !important;
  background-attachment: unset !important;
}

/* ── Quality-mode body override: nexus-glass.css sets:
      .snx-quality-lite body    { background: #03080f !important }   (spec 0,1,1)
      .snx-quality-minimal body { background: #03080f !important }   (spec 0,1,1)
   These have higher specificity than plain `body` (spec 0,0,1) and would make
   body solid, covering the world background completely.
   We defeat them here with matching specificity + later cascade position.
   snx-world-bg.css loads after nexus-glass.css, so same-specificity rules here win. */
.snx-quality-lite body,
.snx-quality-minimal body,
.snx-live-active body,
.snx-camera-active body {
  background: transparent !important;
  background-attachment: unset !important;
}

/* ── Kill the fog-drift animation on body::after (index.html inline style)  ── */
/* It runs JavaScript-free but still burns a compositing layer continuously.   */
/* The static world already provides all the atmospheric depth we need.        */
body::after {
  animation: none !important;
  background: none !important;
}

/* ── Vignette (body::before) — significantly reduced so artwork shines through ── */
/* The inline <style> has a heavy vignette (0.45–0.55 black corners).             */
/* Override with very subtle edges only — artwork must be clearly visible.        */
body::before {
  background:
    radial-gradient(ellipse at 50% 50%,   transparent 40%, rgba(0,0,0,0.18) 100%),
    radial-gradient(ellipse at 0%   50%,  rgba(0,0,0,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(0,0,0,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 50%  100%,rgba(0,0,0,0.15) 0%, transparent 50%) !important;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION SIDEBAR — stays fully opaque / readable
   ═══════════════════════════════════════════════════════ */
#shadowCore {
  background: linear-gradient(
    180deg,
    rgba(0, 4, 12, 0.97) 0%,
    rgba(0, 8, 22, 0.96) 60%,
    rgba(0, 3, 10, 0.97) 100%
  ) !important;
}

/* Mobile slide-out drawer */
.sidebar {
  background: linear-gradient(
    180deg,
    rgba(0, 4, 12, 0.97) 0%,
    rgba(2, 8, 22, 0.96) 100%
  ) !important;
}

/* ═══════════════════════════════════════════════════════
   CONTENT SURFACES — world subtly visible behind cards
   Uses a dark semi-transparent surface so the world art
   breathes through without harming readability.
   ═══════════════════════════════════════════════════════ */

/* Feed posts */
.postBox {
  background: rgba(3, 7, 18, 0.80) !important;
  border: 1px solid rgba(0, 140, 220, 0.22) !important;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 80, 160, 0.06) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Section cards (Music Hub, TV, Search, etc.) */
.section-card {
  background: rgba(3, 7, 18, 0.82) !important;
  border: 1px solid rgba(0, 140, 220, 0.22) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(0, 80, 160, 0.06) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Login page card — stronger opacity for readability */
#login .section-card {
  background: rgba(2, 5, 16, 0.94) !important;
  border-color: rgba(0, 174, 239, 0.35) !important;
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.80),
    0 0 0 1px rgba(0, 174, 239, 0.08) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Messages / Inbox panes — stronger readability required */
.inbox-chat-pane,
.inbox-list-pane {
  background: rgba(3, 6, 18, 0.92) !important;
}
.inbox-split {
  background: rgba(3, 6, 16, 0.90) !important;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Message input area — always opaque */
.ipc-modal-input-wrap,
.inbox-chat-input-wrap,
.storm-footer-input-wrap {
  background: rgba(3, 6, 20, 0.96) !important;
}

/* Notification toast */
#notification-toast {
  background: rgba(3, 7, 20, 0.97) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════════
   FORMS & INPUTS — opaque so art doesn't bleed through text
   ═══════════════════════════════════════════════════════ */
input, textarea, select {
  background: rgba(2, 5, 16, 0.94) !important;
}

/* ═══════════════════════════════════════════════════════
   MODALS — very dark, world visible only as atmosphere
   ═══════════════════════════════════════════════════════ */
.edit-profile-inner,
.social-list-inner,
.badge-tooltip-inner,
.fam-req-inner,
.delete-modal-inner,
.inbox-nm-card,
.inbox-del-card {
  background: rgba(2, 5, 16, 0.97) !important;
}

/* ═══════════════════════════════════════════════════════
   TV / LIVE — video containers must stay solid dark
   ═══════════════════════════════════════════════════════ */
video {
  /* No transparency or filters that would degrade video quality */
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════
   PERFORMANCE GATES
   On lite/minimal devices: remove backdrop-filter entirely.
   Use fully opaque cards to preserve scroll performance.
   ═══════════════════════════════════════════════════════ */
.snx-quality-lite .postBox,
.snx-quality-minimal .postBox,
.snx-quality-lite .section-card,
.snx-quality-minimal .section-card,
.snx-quality-lite .inbox-split,
.snx-quality-minimal .inbox-split {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #04090f !important;
}

/* During live/camera: pull back all blurs immediately */
.snx-live-active .postBox,
.snx-camera-active .postBox,
.snx-live-active .section-card,
.snx-camera-active .section-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ═══════════════════════════════════════════════════════
   MOBILE — responsive background positioning
   The image is 1774×887 landscape. On portrait phones
   the right half (castle/moon area) is a strong crop.
   Shift right slightly to catch more of the Grim Reaper
   side on the left and remain dramatic.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Portrait phones: shift the image focus toward the Grim Reaper
     (left-center) so the most dramatic subject is always visible.
     The castle/moon remains visible on the right. */
  #snx-global-world-bg {
    background-position: 35% center !important;
  }
  html::before {
    background-position: 35% center;
  }

  /* Remove backdrop-filter on mobile — GPU compositing cost */
  .postBox,
  .section-card,
  .inbox-split {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Slightly more opaque on mobile to maintain readability on small screens */
  .postBox {
    background: rgba(3, 7, 18, 0.90) !important;
  }
  .section-card {
    background: rgba(3, 7, 18, 0.91) !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  /* Tablet: centered crop — show full dramatic composition */
  html::before {
    background-position: center center;
  }
}

/* ═══════════════════════════════════════════════════════
   PREVENT HORIZONTAL OVERFLOW
   The background image is on <html>, not a child element,
   so it cannot cause document overflow. Belt-and-suspenders:
   ═══════════════════════════════════════════════════════ */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════
   STAGE 2A — ADAPTIVE BACKGROUND QUALITY
   Background derivatives are selected by snx-adaptive-performance.js
   via JS (swapping #snx-global-world-bg background-image) and via a
   dynamic <style id="_snxAdaptiveBgStyle"> for html::before.

   These CSS rules provide a consistent snx-quality-full alias and
   reduce backdrop-filter cost on LITE mode for the page-hidden state.
   ═══════════════════════════════════════════════════════ */

/* snx-quality-full  — alias for when SNXPerformance mode is FULL  */
/* (snx-perf.js applies snx-quality-high for FULL; we alias both)   */
.snx-quality-full #snx-global-world-bg,
[data-snx-mode="full"] #snx-global-world-bg {
  /* Full quality — JS will have set background-image to the full PNG */
}

/* Page hidden: no visual updates needed for the background layer */
.snx-page-hidden #snx-global-world-bg {
  will-change: auto;
}

/* LITE: reduce decorative visual cost on content surfaces */
.snx-quality-lite body::before,
.snx-quality-minimal body::before {
  /* Minimal vignette on LITE/minimal — reduce compositing work */
  background:
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.12) 100%) !important;
}

/* BALANCED: subtle vignette (already default, kept for explicitness) */
.snx-quality-balanced body::before {
  background:
    radial-gradient(ellipse at 50% 50%,   transparent 40%, rgba(0,0,0,0.18) 100%),
    radial-gradient(ellipse at 0%   50%,  rgba(0,0,0,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 50%, rgba(0,0,0,0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 50%  100%,rgba(0,0,0,0.12) 0%, transparent 50%) !important;
}

/* LITE + MINIMAL: disable fog animation entirely */
.snx-quality-lite body::after,
.snx-quality-minimal body::after,
.snx-live-active body::after,
.snx-camera-active body::after {
  animation: none !important;
  background: none !important;
  opacity: 0 !important;
}