Pulse Beacon

<!-- Pulse Beacon — glowing status beacon -->
<span class="nuda-neon-beacon" role="status" aria-label="Online">
  <span class="nuda-neon-beacon__core"></span>
  <span class="nuda-neon-beacon__ring"></span>
</span>

/* ── Pulse Beacon ────────────────────────────────────────────
   A steady glowing core with an expanding-and-fading halo ring.
   Cyan-green secondary hue reads well as an "online" indicator.
   Customize:
     --neon-beacon-color : status hue
     --neon-beacon-speed : pulse cycle
   ──────────────────────────────────────────────────────────── */
.nuda-neon-beacon {
  --neon-beacon-color: #6ee7b7;
  --neon-beacon-speed: 1.8s;
  position: relative;
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.nuda-neon-beacon__core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-beacon-color);
  box-shadow: 0 0 8px var(--neon-beacon-color), 0 0 16px rgba(110, 231, 183, 0.7);
}

.nuda-neon-beacon__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--neon-beacon-color);
  animation: nuda-neon-beacon-pulse var(--neon-beacon-speed) ease-out infinite;
  will-change: transform, opacity;
}

@keyframes nuda-neon-beacon-pulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-neon-beacon__ring {
    animation: none;
    opacity: 0;
  }
}