Drifting Clouds

<!-- Drifting Clouds (3 parallax layers) -->
<div class="nuda-weather-clouds" role="img" aria-label="Drifting clouds">
  <span class="nuda-weather-clouds__layer nuda-weather-clouds__layer--1"></span>
  <span class="nuda-weather-clouds__layer nuda-weather-clouds__layer--2"></span>
  <span class="nuda-weather-clouds__layer nuda-weather-clouds__layer--3"></span>
</div>

/* Drifting Clouds
   Three radial-gradient cloud bands drifting at different speeds (parallax).
   Customize: layer speeds, opacities, gradient sizes. */

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

.nuda-weather-clouds__layer {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 60px;
  background-repeat: repeat-x;
  will-change: transform;
}

.nuda-weather-clouds__layer--1 {
  top: 18%;
  background-image:
    radial-gradient(40px 22px at 20% 60%, rgba(228, 255, 84, 0.10), transparent),
    radial-gradient(60px 28px at 55% 50%, rgba(250, 250, 250, 0.10), transparent),
    radial-gradient(50px 24px at 85% 60%, rgba(250, 250, 250, 0.08), transparent);
  background-size: 50% 100%;
  opacity: 0.9;
  animation: nuda-weather-cloud-drift 26s linear infinite;
}

.nuda-weather-clouds__layer--2 {
  top: 42%;
  background-image:
    radial-gradient(70px 30px at 30% 50%, rgba(250, 250, 250, 0.12), transparent),
    radial-gradient(50px 24px at 70% 55%, rgba(250, 250, 250, 0.08), transparent);
  background-size: 55% 100%;
  opacity: 0.7;
  animation: nuda-weather-cloud-drift 40s linear infinite reverse;
}

.nuda-weather-clouds__layer--3 {
  top: 64%;
  background-image:
    radial-gradient(90px 34px at 40% 50%, rgba(250, 250, 250, 0.07), transparent),
    radial-gradient(60px 26px at 80% 55%, rgba(250, 250, 250, 0.05), transparent);
  background-size: 60% 100%;
  opacity: 0.5;
  animation: nuda-weather-cloud-drift 58s linear infinite;
}

@keyframes nuda-weather-cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(25%); }
}

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