:root {
  --site-bg-color: #0c0e13;
  --site-bg-color-deep: #08090d;
  --site-bg-grid: rgba(255, 255, 255, 0.02);
  --site-bg-particle-core: rgba(255, 255, 255, 0.78);
  --site-bg-particle-accent: rgba(166, 194, 255, 0.7);
  --site-bg-glow-left: rgba(76, 118, 223, 0.11);
  --site-bg-glow-right: rgba(103, 126, 213, 0.09);
}

html {
  background: var(--site-bg-color-deep);
}

body.global-bg-enabled {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.site-background__base,
.site-background__canvas,
.site-background__grid,
.site-background__glow,
.site-background::after {
  position: absolute;
  inset: 0;
}

.site-background__base {
  background:
    radial-gradient(circle at 14% 18%, rgba(86, 112, 190, 0.11), transparent 28%),
    radial-gradient(circle at 82% 12%, rgba(128, 150, 222, 0.08), transparent 22%),
    radial-gradient(circle at 50% 120%, rgba(88, 103, 164, 0.07), transparent 34%),
    linear-gradient(180deg, var(--site-bg-color) 0%, var(--site-bg-color-deep) 100%);
}

.site-background__canvas {
  width: 100%;
  height: 100%;
}

.site-background__grid {
  opacity: 0.22;
  background-image:
    linear-gradient(var(--site-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--site-bg-grid) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.5), transparent 92%);
}

.site-background__glow {
  border-radius: 50%;
  filter: blur(125px);
  opacity: 0.68;
}

.site-background__glow--left {
  inset: 8% auto auto -4%;
  width: min(44rem, 56vw);
  height: min(44rem, 56vw);
  background: radial-gradient(circle, var(--site-bg-glow-left) 0%, transparent 68%);
}

.site-background__glow--right {
  inset: 24% -6% auto auto;
  width: min(38rem, 50vw);
  height: min(38rem, 50vw);
  background: radial-gradient(circle, var(--site-bg-glow-right) 0%, transparent 70%);
}

.site-background::after {
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 58% 35% at 50% 25%, rgba(6, 8, 13, 0.56) 0%, rgba(6, 8, 13, 0.5) 45%, transparent 100%),
    radial-gradient(ellipse 70% 58% at 50% 38%, rgba(8, 10, 16, 0.3) 0%, transparent 72%);
}

@media (max-width: 1024px) {
  .site-background__grid {
    opacity: 0.18;
    background-size: 132px 132px;
  }

  .site-background__glow {
    filter: blur(98px);
  }
}

@media (max-width: 767px) {
  .site-background__grid {
    opacity: 0.12;
    background-size: 144px 144px;
  }

  .site-background__glow {
    filter: blur(72px);
    opacity: 0.5;
  }

  .site-background::after {
    background:
      radial-gradient(ellipse 72% 34% at 50% 22%, rgba(6, 8, 13, 0.62) 0%, rgba(6, 8, 13, 0.56) 46%, transparent 100%),
      radial-gradient(ellipse 90% 66% at 50% 40%, rgba(8, 10, 16, 0.32) 0%, transparent 74%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background__grid,
  .site-background__glow {
    opacity: 0.12;
  }
}