Aurora Sky

<!-- Aurora Sky (3 swaying curtain bands over a faint starfield) -->
<div class="nuda-weather-aurora" role="img" aria-label="Ambient aurora curtain">
  <span class="nuda-weather-aurora__band nuda-weather-aurora__band--1"></span>
  <span class="nuda-weather-aurora__band nuda-weather-aurora__band--2"></span>
  <span class="nuda-weather-aurora__band nuda-weather-aurora__band--3"></span>
  <span class="nuda-weather-aurora__stars"></span>
</div>

/* Aurora Sky
   Three blurred, screen-blended curtain bands sway over a faint starfield.
   The lime accent leads band 1. Customize: band colors, sway speeds. */

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

.nuda-weather-aurora__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 22%, #fafafa, transparent),
    radial-gradient(1px 1px at 64% 14%, #fafafa, transparent),
    radial-gradient(1px 1px at 82% 32%, #fafafa, transparent),
    radial-gradient(1px 1px at 40% 18%, #fafafa, transparent);
  opacity: 0.5;
}

.nuda-weather-aurora__band {
  position: absolute;
  left: -30%;
  top: 0;
  width: 160%;
  height: 70%;
  border-radius: 50%;
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: 0.55;
  will-change: transform;
}

.nuda-weather-aurora__band--1 {
  background: linear-gradient(90deg, transparent, #e4ff54, #22c55e, transparent);
  animation: nuda-weather-aurora-sway 14s ease-in-out infinite alternate;
}

.nuda-weather-aurora__band--2 {
  top: 10%;
  background: linear-gradient(90deg, transparent, #22d3ee, #e4ff54, transparent);
  animation: nuda-weather-aurora-sway 18s ease-in-out infinite alternate-reverse;
}

.nuda-weather-aurora__band--3 {
  top: 22%;
  background: linear-gradient(90deg, transparent, #a855f7, #22d3ee, transparent);
  animation: nuda-weather-aurora-sway 22s ease-in-out infinite alternate;
}

@keyframes nuda-weather-aurora-sway {
  0%   { transform: translateX(-12%) scaleY(0.8)  skewX(-6deg); }
  100% { transform: translateX(12%)  scaleY(1.15) skewX(6deg); }
}

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