/* Atmospheric background layers
   Layer order (bottom to top):
   z:1  Base background (#0a0a0f via body)
   z:2  Ambient gradient (slow color shift)
   z:3  Fog/mist (layered drift animation)
   z:4  Vignette (dark edge fade)
   z:10 Content (everything else)
*/

.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.atmosphere-ambient {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.81;
  background: linear-gradient(
    135deg,
    #0a0a0f 0%,
    #1a1020 15%,
    #0c1a2a 30%,
    #0a0a0f 45%,
    #1a0f15 60%,
    #0f1a25 75%,
    #0a0a0f 100%
  );
  background-size: 400% 400%;
  animation: atmosphereShift 60s ease infinite;
}

@keyframes atmosphereShift {
  0%   { background-position: 0% 0%; }
  25%  { background-position: 100% 50%; }
  50%  { background-position: 50% 100%; }
  75%  { background-position: 0% 50%; }
  100% { background-position: 0% 0%; }
}

.atmosphere-fog {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fog-band {
  position: absolute;
  width: 200%;
  left: -50%;
}

.fog-band--1 {
  bottom: 0;
  height: 65%;
  background: linear-gradient(
    to top,
    rgba(160, 150, 140, 0.14) 0%,
    rgba(140, 130, 130, 0.084) 30%,
    rgba(120, 115, 120, 0.042) 60%,
    transparent 100%
  );
  animation: fogDrift1 45s ease-in-out infinite;
}

.fog-band--2 {
  bottom: 5%;
  height: 55%;
  background: linear-gradient(
    to top,
    rgba(130, 120, 115, 0.10) 0%,
    rgba(110, 105, 110, 0.05) 40%,
    transparent 100%
  );
  animation: fogDrift2 60s ease-in-out infinite;
}

.fog-band--3 {
  bottom: -5%;
  height: 78%;
  background: linear-gradient(
    170deg,
    transparent 20%,
    rgba(100, 95, 100, 0.08) 50%,
    rgba(120, 110, 115, 0.056) 70%,
    transparent 90%
  );
  animation: fogDrift3 80s ease-in-out infinite;
}

.fog-wisp {
  position: absolute;
  width: 150%;
  left: -25%;
  height: 15%;
}

.fog-wisp--1 {
  top: 35%;
  background: radial-gradient(
    ellipse at center,
    rgba(140, 130, 130, 0.05) 0%,
    transparent 70%
  );
  animation: wispFloat1 35s ease-in-out infinite;
}

.fog-wisp--2 {
  top: 55%;
  background: radial-gradient(
    ellipse at center,
    rgba(140, 130, 130, 0.05) 0%,
    transparent 70%
  );
  animation: wispFloat2 50s ease-in-out infinite;
}

@keyframes fogDrift1 {
  0%, 100% { transform: translateX(0) scaleY(1); }
  30%      { transform: translateX(8%) scaleY(1.05); }
  70%      { transform: translateX(-5%) scaleY(0.95); }
}

@keyframes fogDrift2 {
  0%, 100% { transform: translateX(0); }
  40%      { transform: translateX(-10%); }
  80%      { transform: translateX(6%); }
}

@keyframes fogDrift3 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50%      { transform: translateX(12%) rotate(1deg); }
}

@keyframes wispFloat1 {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 0.6; }
  30%      { transform: translateX(15%) translateY(-20px); opacity: 1; }
  70%      { transform: translateX(-10%) translateY(10px); opacity: 0.4; }
}

@keyframes wispFloat2 {
  0%, 100% { transform: translateX(0) translateY(0); opacity: 0.5; }
  40%      { transform: translateX(-12%) translateY(-15px); opacity: 0.9; }
  80%      { transform: translateX(8%) translateY(5px); opacity: 0.3; }
}

.atmosphere-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 18%,
    rgba(5, 5, 8, 0.4) 52%,
    rgba(5, 5, 8, 0.76) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere-ambient { animation: none; }
  .fog-band, .fog-wisp { animation: none; }
}