/* styles/atmosphere.css — split from styles.css (structural only) */
:root {
  color-scheme: dark;
  /* Между почти-чёрным и прошлым осветлением */
  --bg-main: #0a0c18;
  --bg-soft: #121628;
  --ink: #f0edff;
  --muted: #8f87af;
  --violet: #7a56ff;
  --cyan: #4bc4ff;
  --emerald: #4bffcf;
  --font-display: "SatyrSP", "Segoe UI", Georgia, serif;
  /* Валюта / ценники оформления */
  --font-currency: "zarubkaType-Regular", "SatyrSP", "Segoe UI", Georgia, serif;
}

.app-bg,
.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.app-bg {
  overflow: hidden;
  background: var(--bg-main);
}

/* Глобальная виньетка: центр светлее, края глубже */
.app-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 78% 72% at 50% 46%,
      rgba(8, 10, 22, 0) 0%,
      rgba(4, 5, 14, 0.22) 52%,
      rgba(2, 2, 8, 0.58) 78%,
      rgba(1, 1, 5, 0.82) 100%
    ),
    radial-gradient(
      ellipse 100% 100% at 50% 50%,
      transparent 42%,
      rgba(0, 0, 0, 0.38) 100%
    );
}

.parallax-layer {
  position: absolute;
  inset: -10%;
  will-change: transform;
  transition: transform 0.15s linear;
}

.layer-far {
  background:
    radial-gradient(circle at 20% 22%, rgba(78, 36, 140, 0.4), transparent 40%),
    radial-gradient(circle at 76% 30%, rgba(22, 78, 150, 0.34), transparent 42%),
    radial-gradient(circle at 55% 78%, rgba(28, 48, 120, 0.3), transparent 46%);
  filter: blur(42px);
}

.layer-mid {
  background:
    radial-gradient(circle at 35% 40%, rgba(130, 58, 180, 0.26), transparent 32%),
    radial-gradient(circle at 64% 60%, rgba(48, 118, 180, 0.24), transparent 38%);
  filter: blur(26px);
}

.layer-near {
  background:
    radial-gradient(circle at 48% 48%, rgba(118, 96, 210, 0.18), transparent 26%),
    radial-gradient(circle at 42% 58%, rgba(72, 150, 200, 0.12), transparent 32%);
  filter: blur(10px);
}

.orbit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.noise {
  opacity: 0.05;
  background-image: radial-gradient(#fff 0.55px, transparent 0.55px);
  background-size: 3px 3px;
}