Fog

<!-- Fog (3 blurred layers rolling at different speeds) -->
<div class="nuda-weather-fog" role="img" aria-label="Rolling fog">
  <span class="nuda-weather-fog__layer nuda-weather-fog__layer--1"></span>
  <span class="nuda-weather-fog__layer nuda-weather-fog__layer--2"></span>
  <span class="nuda-weather-fog__layer nuda-weather-fog__layer--3"></span>
</div>

/* Fog
   Soft, blurred gradient banks rolling slowly back and forth.
   Customize: blur amount, layer opacities/speeds. */

.nuda-weather-fog {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #0e0e14, #09090b);
}

.nuda-weather-fog__layer {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  filter: blur(8px);
  will-change: transform;
}

.nuda-weather-fog__layer--1 {
  background-image:
    radial-gradient(120px 50px at 30% 60%, rgba(250, 250, 250, 0.10), transparent),
    radial-gradient(140px 60px at 75% 70%, rgba(250, 250, 250, 0.08), transparent);
  background-size: 60% 100%;
  opacity: 0.8;
  animation: nuda-weather-fog-roll 28s ease-in-out infinite alternate;
}

.nuda-weather-fog__layer--2 {
  background-image:
    radial-gradient(160px 70px at 50% 55%, rgba(228, 255, 84, 0.06), transparent),
    radial-gradient(130px 55px at 85% 65%, rgba(250, 250, 250, 0.07), transparent);
  background-size: 65% 100%;
  opacity: 0.6;
  animation: nuda-weather-fog-roll 40s ease-in-out infinite alternate-reverse;
}

.nuda-weather-fog__layer--3 {
  background-image:
    radial-gradient(180px 80px at 40% 80%, rgba(250, 250, 250, 0.06), transparent);
  background-size: 70% 100%;
  opacity: 0.45;
  animation: nuda-weather-fog-roll 56s ease-in-out infinite alternate;
}

@keyframes nuda-weather-fog-roll {
  0%   { transform: translateX(-12%); }
  100% { transform: translateX(12%); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-weather-fog__layer { animation: none; }
}