/* ================================================================
   ForgeStudy — Global site background (single source of truth)
   Fixed monolithic canvas · No section skins · No UI changes
   ================================================================ */

:root {
  --site-bg-void: #03040f;
  --site-bg-mid: #050617;
  --site-bg-deep: #080a1a;
  --site-bg-lift: #0b1025;
  --site-bg-violet: #7c5cff;
  --site-bg-blue: #4f7cff;

  --site-canvas-void: var(--site-bg-void);
  --site-canvas-ink: #020208;
  --site-canvas-base: var(--site-bg-void);
  --canvas-void: var(--site-bg-void);
  --canvas-ink: #020208;
  --bg-main: var(--site-bg-void);
  --bg-deeper: #020208;
  --bg-secondary: var(--site-bg-mid);
  --atmosphere-void: var(--site-bg-void);

  --site-bg-ease: cubic-bezier(0.42, 0, 0.58, 1);
  --site-bg-ease-soft: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --site-bg-drift-a: 32s;
  --site-bg-drift-b: 41s;
  --site-bg-drift-c: 28s;
  --site-bg-drift-d: 36s;
  --site-bg-drift-e: 44s;
  --site-bg-haze: 38s;
}

@keyframes site-bg-light-a {
  0% {
    transform: translate3d(-2.2%, -1.8%, 0) scale(1);
    opacity: 0.78;
  }

  100% {
    transform: translate3d(2.8%, 2.2%, 0) scale(1.07);
    opacity: 0.94;
  }
}

@keyframes site-bg-light-b {
  0% {
    transform: translate3d(2.4%, 1.2%, 0) scale(1.01);
    opacity: 0.72;
  }

  100% {
    transform: translate3d(-3%, -1.8%, 0) scale(1.09);
    opacity: 0.88;
  }
}

@keyframes site-bg-light-c {
  0% {
    transform: translate3d(-1.8%, 2.4%, 0) scale(1);
    opacity: 0.64;
  }

  100% {
    transform: translate3d(2%, -2.2%, 0) scale(1.06);
    opacity: 0.82;
  }
}

@keyframes site-bg-light-d {
  0% {
    transform: translate3d(-1.2%, 0.8%, 0) scale(0.98);
    opacity: 0.58;
  }

  100% {
    transform: translate3d(1.6%, -1%, 0) scale(1.04);
    opacity: 0.76;
  }
}

@keyframes site-bg-light-e {
  0% {
    transform: translate3d(0, 1.5%, 0) scale(1.02);
    opacity: 0.52;
  }

  100% {
    transform: translate3d(0, -1.2%, 0) scale(1.05);
    opacity: 0.68;
  }
}

@keyframes site-bg-haze-breathe {
  0% {
    opacity: 0.62;
    transform: translate3d(-0.8%, 0.5%, 0) scale(1);
  }

  100% {
    opacity: 0.82;
    transform: translate3d(0.9%, -0.6%, 0) scale(1.02);
  }
}

@keyframes site-bg-depth-shift {
  0% {
    opacity: 0.88;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 1;
    transform: translate3d(-0.6%, 0.4%, 0) scale(1.015);
  }
}

.site-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background-color: var(--site-bg-void);
}

.site-background__base,
.site-background__depth,
.site-background__lights,
.site-background__light,
.site-background__haze,
.site-background__grid,
.site-background__grain,
.site-background__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-background__base {
  background:
    radial-gradient(
      ellipse 140% 95% at 50% 112%,
      rgba(11, 16, 37, 0.62) 0%,
      rgba(8, 12, 28, 0.22) 42%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 100% 78% at 50% -12%,
      rgba(18, 22, 48, 0.28) 0%,
      rgba(10, 12, 30, 0.1) 38%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 92% 72% at 14% 24%,
      rgba(124, 92, 255, 0.045) 0%,
      rgba(8, 10, 26, 0.18) 36%,
      transparent 64%
    ),
    radial-gradient(
      ellipse 90% 70% at 86% 30%,
      rgba(48, 42, 88, 0.028) 0%,
      rgba(5, 6, 23, 0.18) 34%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 72% 58% at 58% 38%,
      rgba(124, 92, 255, 0.035) 0%,
      rgba(48, 38, 98, 0.012) 40%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      #03040f 0%,
      #050617 22%,
      #080a1a 52%,
      #0b1025 78%,
      #070818 100%
    );
}

.site-background__depth {
  opacity: 0.92;
  background:
    radial-gradient(
      ellipse 88% 68% at 32% 62%,
      rgba(38, 52, 120, 0.08) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 82% 64% at 72% 48%,
      rgba(68, 54, 132, 0.06) 0%,
      transparent 56%
    ),
    radial-gradient(
      ellipse 120% 90% at 50% 50%,
      transparent 30%,
      rgba(2, 3, 10, 0.22) 100%
    );
  animation: site-bg-depth-shift 45s var(--site-bg-ease-soft) infinite alternate;
  will-change: transform, opacity;
}

.site-background__lights {
  isolation: isolate;
}

.site-background__light {
  border-radius: 50%;
  filter: blur(clamp(72px, 9vw, 120px));
  will-change: transform, opacity;
}

.site-background__light--violet {
  top: -22%;
  left: -12%;
  width: 78%;
  height: 62%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(124, 92, 255, 0.16) 0%,
    rgba(124, 92, 255, 0.07) 28%,
    rgba(124, 92, 255, 0.025) 48%,
    transparent 74%
  );
  animation: site-bg-light-a var(--site-bg-drift-a) var(--site-bg-ease) infinite alternate;
}

.site-background__light--blue {
  top: 4%;
  right: -18%;
  width: 72%;
  height: 58%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(79, 124, 255, 0.13) 0%,
    rgba(79, 124, 255, 0.055) 30%,
    rgba(79, 124, 255, 0.018) 50%,
    transparent 76%
  );
  animation: site-bg-light-b var(--site-bg-drift-b) var(--site-bg-ease) infinite alternate;
}

.site-background__light--deep {
  bottom: -28%;
  left: 14%;
  width: 80%;
  height: 58%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(32, 28, 58, 0.09) 0%,
    rgba(24, 22, 44, 0.04) 36%,
    rgba(16, 14, 32, 0.015) 56%,
    transparent 78%
  );
  animation: site-bg-light-c var(--site-bg-drift-c) var(--site-bg-ease) infinite alternate;
}

.site-background__light--center {
  top: 18%;
  left: 38%;
  width: 58%;
  height: 52%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(124, 92, 255, 0.09) 0%,
    rgba(98, 82, 200, 0.035) 32%,
    rgba(68, 54, 140, 0.012) 52%,
    transparent 74%
  );
  filter: blur(clamp(88px, 11vw, 140px));
  animation: site-bg-light-d var(--site-bg-drift-d) var(--site-bg-ease-soft) infinite alternate;
}

.site-background__light--horizon {
  bottom: -14%;
  left: -4%;
  width: 108%;
  height: 36%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 100% 100% at 50% 100%,
    rgba(42, 38, 72, 0.045) 0%,
    rgba(28, 26, 52, 0.02) 42%,
    transparent 74%
  );
  filter: blur(clamp(56px, 7vw, 88px));
  opacity: 0.72;
  animation: site-bg-light-e var(--site-bg-drift-e) var(--site-bg-ease) infinite alternate;
}

.site-background__haze {
  background:
    radial-gradient(
      ellipse 130% 95% at 24% 44%,
      rgba(72, 58, 120, 0.04) 0%,
      transparent 62%
    ),
    radial-gradient(
      ellipse 120% 88% at 78% 56%,
      rgba(58, 52, 96, 0.032) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 100% 80% at 50% 28%,
      rgba(48, 44, 82, 0.03) 0%,
      transparent 58%
    );
  filter: blur(clamp(48px, 6vw, 72px));
  will-change: transform, opacity;
  animation: site-bg-haze-breathe var(--site-bg-haze) var(--site-bg-ease-soft) infinite alternate;
}

.site-background__grid {
  opacity: 0.024;
  background-image:
    linear-gradient(rgba(140, 156, 220, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 156, 220, 0.28) 1px, transparent 1px),
    linear-gradient(rgba(140, 156, 220, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 156, 220, 0.12) 1px, transparent 1px);
  background-size:
    112px 112px,
    112px 112px,
    28px 28px,
    28px 28px;
  mask-image:
    radial-gradient(
      ellipse 92% 78% at 50% 44%,
      #000 0%,
      #000 32%,
      rgba(0, 0, 0, 0.35) 52%,
      transparent 82%
    );
  -webkit-mask-image:
    radial-gradient(
      ellipse 92% 78% at 50% 44%,
      #000 0%,
      #000 32%,
      rgba(0, 0, 0, 0.35) 52%,
      transparent 82%
    );
}

.site-background__grain {
  opacity: 0.028;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.site-background__vignette {
  background:
    radial-gradient(
      ellipse 124% 112% at 50% 50%,
      transparent 38%,
      rgba(2, 3, 10, 0.32) 100%
    ),
    radial-gradient(
      ellipse 120% 70% at 50% 108%,
      rgba(2, 3, 8, 0.42) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 80% 60% at 0% 50%,
      rgba(2, 3, 10, 0.18) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 80% 60% at 100% 50%,
      rgba(2, 3, 10, 0.18) 0%,
      transparent 72%
    );
}

html {
  background-color: var(--site-bg-void) !important;
}

html::before,
html::after {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}

body,
#root,
.spatial-root {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  position: relative;
  z-index: 1;
}

body::before,
body::after,
#root::before,
#root::after {
  display: none !important;
  content: none !important;
}

.spatial-root {
  overflow-x: clip;
}

html.fx-stable .site-background__light--violet {
  animation-duration: calc(var(--site-bg-drift-a) * 1.3);
}

html.fx-stable .site-background__light--blue {
  animation-duration: calc(var(--site-bg-drift-b) * 1.3);
}

html.fx-stable .site-background__light--deep {
  animation-duration: calc(var(--site-bg-drift-c) * 1.3);
}

html.fx-stable .site-background__light--center {
  animation-duration: calc(var(--site-bg-drift-d) * 1.3);
}

html.fx-stable .site-background__light--horizon {
  animation-duration: calc(var(--site-bg-drift-e) * 1.3);
}

html.fx-stable .site-background__haze,
html.fx-stable .site-background__depth {
  animation-duration: calc(var(--site-bg-haze) * 1.3);
}

@media (max-width: 767px) {
  .site-background__light--center {
    top: 22%;
    left: 10%;
    width: 80%;
    height: 48%;
  }

  .site-background__light--deep,
  .site-background__light--horizon {
    opacity: 0.75;
  }

  .site-background__grid {
    opacity: 0.016;
    background-size:
      80px 80px,
      80px 80px,
      20px 20px,
      20px 20px;
  }

  .site-background__light {
    filter: blur(64px);
  }

  .site-background__haze {
    filter: blur(40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background__light,
  .site-background__haze,
  .site-background__depth {
    animation: none !important;
    transform: none !important;
    opacity: 0.85 !important;
  }
}

/* -- Retire legacy background systems (do not stack) -- */
.env-atmosphere,
.env-atmosphere::before,
.env-atmosphere::after,
.env-atmosphere *,
.env-layer,
.env-beam,
.env-fog,
.env-depth,
.env-nav-aura,
.env-horizon,
.env-side-rail,
.env-particles,
.env-particles span,
.env-particles .env-particle,
.env-cosmic-base,
.env-cosmic-drift,
.cursor-ambient,
.hero-cinematic__atmosphere,
.hero-launch__atmosphere,
#home .hero-launch__atmosphere {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  animation: none !important;
  opacity: 0 !important;
}

.env-cosmic-base,
.env-cosmic-drift {
  background: transparent !important;
  background-image: none !important;
}

#home .hero-centerpiece__orbit-atmosphere,
#home .hero-centerpiece__orbit-field,
#home .hero-centerpiece__orbit-depth,
#home .hero-centerpiece__orbit-mist,
#contact.finale-stage::before,
#contact.finale-stage::after,
#contact.finale-stage > .page-container::before,
.finale-stage > .page-container::before,
.system-footer > .page-container::before {
  display: none !important;
  content: none !important;
  background: none !important;
  animation: none !important;
}