/* Fog effect - subtle mist overlay */
.fog-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

/* First mist layer */
.fog-1 {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.03) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: mist-movement-1 30s ease infinite;
  opacity: 0.5;
}

/* Second mist layer */
.fog-2 {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: mist-movement-2 40s ease infinite;
  opacity: 0.4;
}

/* Animations */
@keyframes mist-movement-1 {
  0% {
    transform: translateX(-10%) scale(1.1);
  }
  50% {
    transform: translateX(10%) scale(1);
  }
  100% {
    transform: translateX(-10%) scale(1.1);
  }
}

@keyframes mist-movement-2 {
  0% {
    transform: translateY(-5%) scale(1);
  }
  50% {
    transform: translateY(5%) scale(1.05);
  }
  100% {
    transform: translateY(-5%) scale(1);
  }
}