:root {
  --site-default-bg-image: url("/assets/yggdrasil.png");
  --site-default-bg-overlay-top: rgba(5, 10, 21, 0.36);
  --site-default-bg-overlay-bottom: rgba(5, 10, 21, 0.58);
}

html, body {
  min-height: 100%;
}

body {
  background:
    linear-gradient(var(--site-default-bg-overlay-top), var(--site-default-bg-overlay-bottom)),
    var(--cc-hero-image, var(--theme-bg, var(--site-default-bg-image))) center center / cover no-repeat fixed !important;
  background-color: #050b18 !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(78, 146, 255, 0.18), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(5, 10, 21, 0.08), rgba(5, 10, 21, 0.34)),
    var(--cc-hero-image, var(--theme-bg, var(--site-default-bg-image))) center center / cover no-repeat fixed;
  opacity: 0.96;
  pointer-events: none;
  z-index: -3;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 34%),
    linear-gradient(180deg, rgba(4,8,18,0.10), rgba(4,8,18,0.22));
  pointer-events: none;
  z-index: -2;
}

.ambientBackground {
  background-image: var(--theme-bg, var(--cc-hero-image, var(--site-default-bg-image)));
  filter: saturate(1.05) brightness(0.72);
}