/* =================================================
   FOG PNG — EDGE FADE + DRIFT (NO SEAMS SHOWING)
================================================== */

.fog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;

  -webkit-mask-image: radial-gradient(circle at center, black 55%, transparent 95%);
          mask-image: radial-gradient(circle at center, black 55%, transparent 95%);
}

/* Layer 1 */
.fog::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: url("img/fog.png") repeat;
  background-size: 1600px auto;
  opacity: 0.40;
  filter: blur(5px);
  animation: fogDrift1 60s linear infinite;
}

/* Layer 2 */
.fog::after {
  content: "";
  position: absolute;
  inset: -35%;
  background: url("img/fog.png") repeat;
  background-size: 2400px auto;
  opacity: 0.95;
  filter: blur(5px);
  animation: fogDrift2 120s linear infinite;
}

/* =========================
   Fog Exit Animation
========================= */

.fog-exit {
  animation: fogEdgeFade 3s ease forwards;
  animation-delay: 6s; /* visible for 6 seconds */
}

@keyframes fogEdgeFade {
  0% {
    opacity: 1;
    -webkit-mask-image: radial-gradient(circle at center, black 55%, transparent 95%);
            mask-image: radial-gradient(circle at center, black 55%, transparent 95%);
  }

  100% {
    opacity: 0;
    -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 100%);
            mask-image: radial-gradient(circle at center, black 10%, transparent 100%);
  }
}


@keyframes fogDrift1 {
  from { background-position: 0 0; }
  to   { background-position: -3000px 0; }
}

@keyframes fogDrift2 {
  from { background-position: 0 0; }
  to   { background-position: 3500px 0; }
}

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