/* Soft pools of light sit behind the homepage content and transparent artwork. */
body.theo-home-depth {
  isolation: isolate;
  --theo-depth-purple: rgba(159, 139, 231, .23);
  --theo-depth-gold: rgba(211, 174, 103, .16);
  --theo-depth-light: rgba(255, 255, 255, .7);
}

body.theo-home-depth::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 28%, var(--theo-depth-gold), transparent 58%),
    radial-gradient(ellipse at 100% 85%, var(--theo-depth-purple), transparent 65%),
    radial-gradient(ellipse at 2% 5%, var(--theo-depth-light), transparent 62%),
    var(--base);
}

[color-scheme="dark"] body.theo-home-depth {
  --theo-depth-purple: rgba(135, 108, 215, .19);
  --theo-depth-gold: rgba(188, 139, 59, .13);
  --theo-depth-light: rgba(96, 91, 113, .12);
}

@media (prefers-color-scheme: dark) {
  :root:not([color-scheme="light"]) body.theo-home-depth {
    --theo-depth-purple: rgba(135, 108, 215, .19);
    --theo-depth-gold: rgba(188, 139, 59, .13);
    --theo-depth-light: rgba(96, 91, 113, .12);
  }
}