.overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  overflow: hidden;
  animation: fadeIn 3s ease-in;
  filter: var(--fog-filter);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.layer1,
.layer2,
.layer3 {
  position: absolute;
  width: 200%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Each layer has blobs duplicated at +50% offset so translating by -50% is seamless */

.layer1 {
  background:
    radial-gradient(
      ellipse 18% 30% at 8% 50%,
      rgba(220, 220, 235, 0.45),
      transparent
    ),
    radial-gradient(
      ellipse 13% 40% at 22% 40%,
      rgba(210, 215, 230, 0.35),
      transparent
    ),
    radial-gradient(
      ellipse 15% 35% at 38% 55%,
      rgba(220, 220, 240, 0.4),
      transparent
    ),
    radial-gradient(
      ellipse 18% 30% at 58% 50%,
      rgba(220, 220, 235, 0.45),
      transparent
    ),
    radial-gradient(
      ellipse 13% 40% at 72% 40%,
      rgba(210, 215, 230, 0.35),
      transparent
    ),
    radial-gradient(
      ellipse 15% 35% at 88% 55%,
      rgba(220, 220, 240, 0.4),
      transparent
    );
  animation: drift1 50s linear infinite;
}

.layer2 {
  background:
    radial-gradient(
      ellipse 20% 25% at 5% 60%,
      rgba(200, 205, 220, 0.35),
      transparent
    ),
    radial-gradient(
      ellipse 15% 35% at 25% 35%,
      rgba(215, 215, 235, 0.3),
      transparent
    ),
    radial-gradient(
      ellipse 18% 30% at 42% 50%,
      rgba(205, 210, 225, 0.35),
      transparent
    ),
    radial-gradient(
      ellipse 20% 25% at 55% 60%,
      rgba(200, 205, 220, 0.35),
      transparent
    ),
    radial-gradient(
      ellipse 15% 35% at 75% 35%,
      rgba(215, 215, 235, 0.3),
      transparent
    ),
    radial-gradient(
      ellipse 18% 30% at 92% 50%,
      rgba(205, 210, 225, 0.35),
      transparent
    );
  animation: drift2 70s linear infinite;
}

.layer3 {
  background:
    radial-gradient(
      ellipse 22% 20% at 12% 45%,
      rgba(220, 220, 240, 0.3),
      transparent
    ),
    radial-gradient(
      ellipse 15% 30% at 32% 55%,
      rgba(210, 215, 230, 0.25),
      transparent
    ),
    radial-gradient(
      ellipse 13% 35% at 45% 40%,
      rgba(220, 220, 235, 0.3),
      transparent
    ),
    radial-gradient(
      ellipse 22% 20% at 62% 45%,
      rgba(220, 220, 240, 0.3),
      transparent
    ),
    radial-gradient(
      ellipse 15% 30% at 82% 55%,
      rgba(210, 215, 230, 0.25),
      transparent
    ),
    radial-gradient(
      ellipse 13% 35% at 95% 40%,
      rgba(220, 220, 235, 0.3),
      transparent
    );
  animation: drift3 40s linear infinite;
}

/* Translate exactly -50% = one full pattern repeat = seamless loop */
@keyframes drift1 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes drift2 {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes drift3 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
