/* ==========================================================================
   Atmosphere — the quiet texture that sits behind everything
   ========================================================================== */

body {
  position: relative;
}

/* fine grain, fixed, extremely subtle — avoids the page feeling flat-vector */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* living-bg — the sitewide Three.js ecosystem (js/living-bg.js), fixed
   behind every page. Fades in once its WebGL context is ready; if WebGL
   or Three.js is unavailable the script never adds "ready" and this stays
   invisible, leaving the plain .ambient gradient below as the fallback. */
#living-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s var(--ease-out);
}
#living-bg-canvas.ready { opacity: 1; }

/* ambient light blobs, fixed behind content — physical, not neon.
   This is the no-JS / no-WebGL fallback; once living-bg.js confirms a
   working WebGL context it flags <html class="living-bg-active"> and
   this fades out in favour of the animated scene. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1s var(--ease-out);
}

.living-bg-active .ambient {
  opacity: 0;
}

.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.16;
}

.ambient::before {
  width: 60vw;
  height: 60vw;
  background: var(--blue);
  top: -20%;
  right: -10%;
}

.ambient::after {
  width: 46vw;
  height: 46vw;
  background: var(--violet);
  bottom: -10%;
  left: -12%;
  opacity: 0.10;
}

/* scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--aurora);
  z-index: 200;
  transition: width 0.1s linear;
}

/* everything else renders above the atmosphere */
.navbar, main, footer { position: relative; z-index: 1; }