body {
  overflow-x: hidden;
  background: #000;
  margin: 0;
  padding: 0;
}

/* Fondo (si usas una imagen estática aparte) */
.fogwrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 0;
  filter: blur(1px) grayscale(0.2) saturate(1.2) sepia(0.2);
}

/* Capas de niebla */
#foglayer_01,
#foglayer_02,
#foglayer_03 {
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}

/* Animación aplicada a cada capa */
#foglayer_01 {
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}

#foglayer_02 {
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

#foglayer_03 {
  animation: foglayer_03_opacity 25s linear infinite, foglayer_moveme 17s linear infinite;
}

/* Subcapas individuales */
#foglayer_01 .image01,
#foglayer_01 .image02,
#foglayer_02 .image01,
#foglayer_02 .image02,
#foglayer_03 .image01,
#foglayer_03 .image02 {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%; /* ✅ evita estiramiento */
  z-index: 2;
  filter: blur(1px); /* ✅ niebla más suave */
}

/* Imagen de niebla */
#foglayer_01 .image01,
#foglayer_01 .image02 {
  background-image: url("fog1.png");
}

#foglayer_02 .image01,
#foglayer_02 .image02,
#foglayer_03 .image01,
#foglayer_03 .image02 {
  background-image: url("fog2.png");
}

/* ANIMACIONES */

/* Movimiento horizontal continuo */
@keyframes foglayer_moveme {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Opacidad ligera para niebla tenue */
@keyframes foglayer_01_opacity {
  0% { opacity: 0.25; }
  22% { opacity: 0.22; }
  40% { opacity: 0.29; }
  58% { opacity: 0.21; }
  80% { opacity: 0.27; }
  100% { opacity: 0.25; }
}

@keyframes foglayer_02_opacity {
  0% { opacity: 0.28; }
  25% { opacity: 0.24; }
  50% { opacity: 0.23; }
  80% { opacity: 0.26; }
  100% { opacity: 0.28; }
}

@keyframes foglayer_03_opacity {
  0% { opacity: 0.21; }
  27% { opacity: 0.23; }
  52% { opacity: 0.27; }
  68% { opacity: 0.24; }
  100% { opacity: 0.21; }
}