Sun Rays

<!-- Sun Rays -->
<div class="nuda-weather-sun" role="img" aria-label="Rotating sun rays">
  <span class="nuda-weather-sun__rays"></span>
  <span class="nuda-weather-sun__core"></span>
</div>

/* Sun Rays
   Slowly rotating conic god-rays around a pulsing core.
   Customize: --sun-color, ray count via conic stops. */

.nuda-weather-sun {
  --sun-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #241f08, #09090b 70%);
}

.nuda-weather-sun__rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(228, 255, 84, 0.22) 0deg,
    rgba(228, 255, 84, 0.22) 4deg,
    transparent 4deg,
    transparent 18deg
  );
  will-change: transform;
  animation: nuda-weather-sun-spin 24s linear infinite;
}

.nuda-weather-sun__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    #fafafa 0 20%,
    var(--sun-color) 45%,
    rgba(228, 255, 84, 0.2) 70%,
    transparent 75%
  );
  will-change: transform, opacity;
  animation: nuda-weather-sun-pulse 5s ease-in-out infinite;
}

@keyframes nuda-weather-sun-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes nuda-weather-sun-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.9; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1;   }
}

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