Sunrise Sunset Sweep

<!-- Sunrise Sunset Sweep (background-position drives the sky's color shift) -->
<div class="nuda-wa2-sunset-sweep" role="img" aria-label="Sky sweeping through sunrise and sunset colors">
  <span class="nuda-wa2-sunset-sweep__sun"></span>
  <span class="nuda-wa2-sunset-sweep__horizon"></span>
</div>

.nuda-wa2-sunset-sweep {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#1a1030,#3a1d4a 25%,#a83e3e 50%,#e4823f 70%,#f4c95d 85%,#1a1030 100%);
  background-size: 100% 300%;
  will-change: background-position;
  animation: _nuda-wa2sunsetSweepSky 16s ease-in-out infinite alternate;
}

.nuda-wa2-sunset-sweep__horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: #09090b;
}

.nuda-wa2-sunset-sweep__sun {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle,#fff8dc,#e4ff54 60%,rgba(228,255,84,.2) 78%,transparent 82%);
  will-change: transform;
  animation: _nuda-wa2sunsetSweepSun 16s ease-in-out infinite alternate;
}

@keyframes _nuda-wa2sunsetSweepSky {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100%;
  }
}

@keyframes _nuda-wa2sunsetSweepSun {
  0% {
    transform: translate(-50%,40px);
  }
  100% {
    transform: translate(-50%,-30px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-sunset-sweep {
    animation: none;
    background-position: 0 40%;
  }
  .nuda-wa2-sunset-sweep__sun {
    animation: none;
    transform: translate(-50%,0);
  }
}