.bg-gradient {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(28, 16, 50, 0.55), transparent 55%),
    radial-gradient(ellipse at 82% 72%, rgba(16, 28, 40, 0.4), transparent 50%),
    radial-gradient(ellipse at 50% 105%, rgba(42, 24, 12, 0.3), transparent 45%),
    var(--bg-deep);
  transition: background 3s ease;
}

.atmo-layer {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 60%,
    hsla(var(--atmo-hue), var(--atmo-sat), 15%, var(--atmo-opacity)),
    transparent 70%
  );
  transition: all 3s ease;
}

.mountains {
  position: fixed; bottom: 0; left: 0;
  width: 100%; height: 38vh; z-index: 2; pointer-events: none;
}
.mountains path { animation: breathe 8s ease-in-out infinite; }
.mountains path:nth-child(2) { animation-delay: -2.5s; }
.mountains path:nth-child(3) { animation-delay: -5s; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

.mist { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.mist-b {
  position: absolute; border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle, rgba(201, 169, 82, .4), transparent 70%);
}
.mist-b:nth-child(1) { width: 50vw; height: 30vh; top: 18%; left: -10%; opacity: .025; animation: dr1 28s ease-in-out infinite alternate; }
.mist-b:nth-child(2) { width: 42vw; height: 26vh; bottom: 28%; right: -5%; opacity: .02; animation: dr2 24s ease-in-out infinite alternate; }
@keyframes dr1 { to { transform: translate(8vw, 5vh); } }
@keyframes dr2 { to { transform: translate(-7vw, -4vh); } }

#particles-canvas { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .018;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 200px 200px;
}