No Data Pulse

<!-- No Data Pulse -->
<div class="nuda-no-data" role="status" aria-label="No data available">
  <div class="nuda-no-data__scene">
    <span class="nuda-no-data__ring nuda-no-data__ring--a"></span>
    <span class="nuda-no-data__ring nuda-no-data__ring--b"></span>
    <span class="nuda-no-data__ring nuda-no-data__ring--c"></span>
    <div class="nuda-no-data__core">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2.5" stroke-linecap="round">
        <path d="M5 12 L19 12" />
      </svg>
    </div>
  </div>
  <p class="nuda-no-data__text">No data available</p>
</div>

/* No Data Pulse
   Centered icon with three concentric rings expanding outward.
   Customize: --no-data-color, --no-data-icon, --no-data-text, --no-data-size */

.nuda-no-data {
  --no-data-color: #e4ff54;
  --no-data-icon: #09090b;
  --no-data-text: rgba(255, 255, 255, 0.55);
  --no-data-size: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--no-data-color);
}

.nuda-no-data__scene {
  position: relative;
  width: var(--no-data-size);
  height: var(--no-data-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-no-data__ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: nuda-no-data-pulse 2.4s ease-out infinite;
}

.nuda-no-data__ring--a { animation-delay: 0s; }
.nuda-no-data__ring--b { animation-delay: 0.8s; }
.nuda-no-data__ring--c { animation-delay: 1.6s; }

.nuda-no-data__core {
  position: relative;
  width: 38%;
  height: 38%;
  background: currentColor;
  color: var(--no-data-icon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(228, 255, 84, 0.4);
  animation: nuda-no-data-core 2.4s ease-in-out infinite;
}

.nuda-no-data__core svg {
  width: 60%;
  height: 60%;
}

.nuda-no-data__text {
  font: 500 12px ui-sans-serif, system-ui, sans-serif;
  color: var(--no-data-text);
  letter-spacing: 0.02em;
  margin: 0;
}

@keyframes nuda-no-data-pulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1);    opacity: 0;   }
}

@keyframes nuda-no-data-core {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-no-data__ring,
  .nuda-no-data__core {
    animation: none;
  }
  .nuda-no-data__ring--a { opacity: 0.3; }
  .nuda-no-data__ring--b,
  .nuda-no-data__ring--c { opacity: 0; }
}