/* Ambient background effects. */

:root {
  --mesh-haze-a: rgba(16, 45, 104, 0.09);
  --mesh-haze-b: rgba(70, 142, 110, 0.08);
  --mesh-haze-warm: rgba(242, 191, 94, 0.15);
  --mesh-sheen: rgba(255, 255, 255, 0.44);
  --mesh-line: rgba(16, 45, 104, 0.03);
  --mesh-toplight: rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] {
  --mesh-haze-a: rgba(143, 181, 255, 0.14);
  --mesh-haze-b: rgba(124, 208, 166, 0.12);
  --mesh-haze-warm: rgba(255, 206, 120, 0.16);
  --mesh-sheen: rgba(11, 15, 24, 0.08);
  --mesh-line: rgba(255, 255, 255, 0.05);
  --mesh-toplight: rgba(143, 181, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mesh-haze-a: rgba(143, 181, 255, 0.14);
    --mesh-haze-b: rgba(124, 208, 166, 0.12);
    --mesh-haze-warm: rgba(255, 206, 120, 0.16);
    --mesh-sheen: rgba(11, 15, 24, 0.08);
    --mesh-line: rgba(255, 255, 255, 0.05);
    --mesh-toplight: rgba(143, 181, 255, 0.08);
  }
}

.mesh-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(960px 560px at 8% 10%, var(--mesh-haze-warm), transparent 58%),
    radial-gradient(860px 520px at 88% 8%, var(--mesh-haze-a), transparent 56%),
    radial-gradient(980px 640px at 52% 96%, var(--mesh-haze-b), transparent 62%);
}

.mesh-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--mesh-sheen), transparent 24%, transparent 100%),
    linear-gradient(90deg, transparent 0%, transparent 18%, var(--mesh-line) 50%, transparent 82%, transparent 100%);
}

.mesh-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 280px at 50% 0%, var(--mesh-toplight), transparent 70%);
  opacity: 0.6;
}