/* ==========================================
   VOLUMETRIC STEAM & HEAT DISTORTION PHYSICS
   100% Pure CSS Keyframe Turbulence Animations
   ========================================== */

.steam-viewport {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 280px;
  pointer-events: none;
  z-index: 35;
  opacity: var(--steam-opacity);
  transition: opacity 0.4s ease;
}

.steam-viewport.hidden {
  opacity: 0 !important;
}

/* Individual Steam Cloud Particles */
.steam-cloud {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 240, 220, 0.28) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(14px);
  animation: steam-rise 5s ease-out infinite;
}

/* Multi-Phase Layer Timings & Placements */
.steam-cloud.s1 {
  left: 20%;
  width: 140px;
  height: 140px;
  animation-duration: 4.8s;
  animation-delay: 0s;
}

.steam-cloud.s2 {
  left: 45%;
  width: 180px;
  height: 180px;
  animation-duration: 5.5s;
  animation-delay: 1.5s;
}

.steam-cloud.s3 {
  left: 30%;
  width: 160px;
  height: 160px;
  animation-duration: 4.2s;
  animation-delay: 2.8s;
}

.steam-cloud.s4 {
  left: 60%;
  width: 130px;
  height: 130px;
  animation-duration: 6s;
  animation-delay: 0.8s;
}

/* Keyframe Turbulence Physics */
@keyframes steam-rise {
  0% {
    transform: translateY(40px) scale(0.6) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.78;
  }
  60% {
    transform: translateY(-120px) scale(1.3) rotate(15deg);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-260px) scale(1.9) rotate(-25deg);
    opacity: 0;
  }
}

/* Heat Distortion Glow Base */
.heat-distortion {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 70px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 200, 150, 0.25) 0%,
    transparent 80%
  );
  filter: blur(10px);
  animation: heat-shimmer 2s ease-in-out infinite alternate;
}

@keyframes heat-shimmer {
  0% { transform: translateX(-50%) scaleX(1); opacity: 0.6; }
  100% { transform: translateX(-50%) scaleX(1.15); opacity: 0.9; }
}