/**
 * Shared marketing background and layer styles.
 *
 * This file owns the fixed atmosphere used by the homepage and marketing page
 * families that opt in with `body.shared-bg`:
 * - z-index 0: shared background (`#marketing-shared-background`)
 * - z-index 5: optional vignette (`#marketing-vignette-overlay`)
 * - z-index 10: page content
 */

body.home-page,
body.shared-bg {
  --marketing-background-color: rgba(9, 5, 24, 1);
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: var(--marketing-background-color) !important;
}

body:not(.home-page):not(.shared-bg) #marketing-shared-background,
body:not(.home-page):not(.shared-bg) #marketing-vignette-overlay,
body:not(.home-page):not(.shared-bg) .marketing-bg-glow {
  display: none !important;
}

#marketing-shared-background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  background: var(--marketing-background-color);
}

#marketing-vignette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(0, 0, 0, 0) 48%,
    rgba(0, 0, 0, 0.2) 65%,
    rgba(0, 0, 0, 0.5) 80%,
    rgba(0, 0, 0, 0.8) 100%
  );
  background-position: center;
  background-size: 100% 150%;
}

body.home-page #app,
body.home-page #main-content,
body.shared-bg #app,
body.shared-bg #main-content {
  position: relative;
}

body.home-page #main-content > *:not(#header-container),
body.shared-bg #main-content > *:not(#header-container) {
  position: relative;
  z-index: 10;
}

body.home-page #footer-container {
  position: relative;
  z-index: 10;
  isolation: isolate;
}