/* Green/lime mesh + magnetic ASCII field — sits behind page content */

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  background-color: #06140c;
  --ambient-tint: var(--mitri-ambient-accent, #b8e62e);
  --ambient-lime: #c8ff2e;
  --ambient-green: #2dff7a;
  --ambient-yellow: #e8ff4a;
  --ambient-cyan: #2affc2;
}

#page-stage {
  position: relative;
  z-index: 1;
}

.ambient-bg__mesh {
  position: absolute;
  inset: -18%;
}

.ambient-bg__blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
  background: radial-gradient(circle at 35% 32%, var(--blob-color) 0%, transparent 70%);
  opacity: 1;
}

.ambient-bg__blob--lime {
  --blob-color: var(--ambient-lime);
  width: min(86vw, 50rem);
  height: min(86vw, 50rem);
  top: -20%;
  left: -14%;
}

.ambient-bg__blob--green {
  --blob-color: var(--ambient-green);
  width: min(78vw, 46rem);
  height: min(78vw, 46rem);
  bottom: -18%;
  left: -16%;
}

.ambient-bg__blob--yellow {
  --blob-color: var(--ambient-yellow);
  width: min(64vw, 38rem);
  height: min(64vw, 38rem);
  top: -10%;
  right: -12%;
  opacity: 0.85;
}

.ambient-bg__blob--cyan {
  --blob-color: var(--ambient-cyan);
  width: min(60vw, 36rem);
  height: min(60vw, 36rem);
  bottom: -14%;
  right: -12%;
  opacity: 0.72;
}

.ambient-bg__blob--tint {
  --blob-color: var(--ambient-tint);
  width: min(52vw, 32rem);
  height: min(52vw, 32rem);
  top: 30%;
  left: 34%;
  opacity: 0.8;
}

html.dark .ambient-bg__blob {
  mix-blend-mode: screen;
}

.ambient-bg__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.ambient-bg__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(6, 20, 12, 0.06) 0%, rgba(6, 20, 12, 0.28) 100%);
}

html:not(.dark) .ambient-bg {
  background-color: #f3ffe6;
}

html:not(.dark) .ambient-bg__blob {
  opacity: 0.92;
  mix-blend-mode: multiply;
}

html:not(.dark) .ambient-bg__blob--yellow,
html:not(.dark) .ambient-bg__blob--cyan {
  opacity: 0.7;
}

html:not(.dark) .ambient-bg__blob--tint {
  opacity: 0.75;
}

html:not(.dark) .ambient-bg__veil {
  background:
    linear-gradient(to bottom, rgba(243, 255, 230, 0.1), rgba(243, 255, 230, 0.22));
}

@media (prefers-reduced-motion: reduce) {
  .ambient-bg__blob {
    will-change: auto;
  }
}