/* CABAL XV whole-site background FIX V2
   Keeps the existing website/modules intact. This stylesheet only controls visual layers. */

html {
  min-height: 100%;
  background: #030106 !important;
}

/* IMPORTANT: the normal site theme paints its own body gradient.
   Force that layer transparent so the artwork can actually be seen. */
html[data-theme] body,
body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Real background layer. V1 used a negative z-index, which could fall behind
   the root/html canvas and disappear. V2 keeps it INSIDE the body stack. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.16) 48%, rgba(0,0,0,.28) 100%),
    url("../img/cabal-xv-body-background.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  filter: saturate(1.08) contrast(1.03) brightness(.86);
  transform: translateZ(0) scale(1.008);
}

/* Animated purple smoke / mist overlay. */
body::after {
  content: "";
  position: fixed;
  inset: -24vh -20vw;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(185,108,255,.32) 0 7%, rgba(105,43,168,.18) 18%, transparent 44%),
    radial-gradient(ellipse at 80% 22%, rgba(154,74,235,.28) 0 8%, rgba(80,29,126,.18) 20%, transparent 46%),
    radial-gradient(ellipse at 36% 80%, rgba(128,54,207,.24) 0 9%, rgba(63,19,102,.16) 21%, transparent 49%),
    radial-gradient(ellipse at 90% 76%, rgba(194,100,255,.22) 0 7%, rgba(75,23,116,.15) 19%, transparent 45%);
  filter: blur(36px);
  transform: translate3d(-4%, 0, 0) scale(1.08);
  animation: cabal-xv-smoke-v2 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes cabal-xv-smoke-v2 {
  0%   { transform: translate3d(-5%,  2%, 0) scale(1.05) rotate(-.5deg); opacity:.22; }
  45%  { transform: translate3d( 1%, -3%, 0) scale(1.11) rotate(.2deg);  opacity:.38; }
  100% { transform: translate3d( 6%,  2%, 0) scale(1.07) rotate(.6deg);  opacity:.27; }
}

/* Put all actual site content above the image/smoke layers. */
body > header,
body > aside,
body > main,
body > footer,
body > .beta-ribbon,
body > .site-style-switcher,
body > .flash-stack,
body > .site-music-player {
  position: relative;
  z-index: 3;
}

/* Preserve fixed/sticky behavior from the original classes. */
body > .side-shell { position: fixed; }
body > .top-shell { position: sticky; }
body > .site-style-switcher { position: fixed; }
body > .flash-stack { position: fixed; }
body > .site-music-player { position: fixed; }

/* Existing grid/noise should sit over the art, not behind it. */
.page-noise {
  z-index: 2 !important;
  opacity: .055 !important;
  pointer-events: none;
}

/* The page canvas itself must remain transparent. */
.page-main,
.member-layout .page-main,
.public-layout .page-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Make large page stages translucent so the background is visible. */
html[data-theme] .landing-hero,
.landing-hero {
  background:
    linear-gradient(105deg, rgba(4,3,7,.88) 7%, rgba(5,4,8,.58) 52%, rgba(32,9,52,.18) 100%) !important;
  backdrop-filter: blur(1px);
}

.auth-stage {
  background:
    radial-gradient(circle at 22% 44%, rgba(var(--theme-rgb),.18), transparent 34%),
    linear-gradient(90deg, rgba(3,2,5,.10), rgba(3,2,5,.44)) !important;
}

/* Navigation stays readable but allows some of the artwork to breathe through. */
.top-shell {
  background: rgba(5,5,8,.82) !important;
  backdrop-filter: blur(16px) saturate(1.12);
}

.side-shell {
  background: linear-gradient(180deg, rgba(12,10,17,.90), rgba(5,4,8,.93)) !important;
  backdrop-filter: blur(14px) saturate(1.08);
}

.side-logo {
  background: radial-gradient(circle, rgba(var(--theme-rgb),.18), rgba(5,4,8,.32) 64%) !important;
}

/* Keep panels readable. We only make their outer shell slightly glassy. */
.metal-panel,
.auth-card {
  backdrop-filter: blur(8px);
}

@media (max-width: 900px) {
  body::before {
    background-position: center top;
    background-attachment: scroll;
    transform: none;
  }
  body::after {
    opacity: .24;
    filter: blur(28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none !important;
    transform: none !important;
  }
}