Feature Pulse

<!-- Feature Pulse — pulsing dot on a button/link drawing attention to "new" feature -->
<div class="nuda-fpulse">
  <button class="nuda-fpulse__target" type="button">Settings</button>
  <span class="nuda-fpulse__ring"></span>
  <span class="nuda-fpulse__ring nuda-fpulse__ring--b"></span>
  <span class="nuda-fpulse__dot"></span>
</div>

/* Feature Pulse
   Notification dot with two concentric expanding rings on the target's corner.
   Customize: --fpulse-accent, dot offset. */

.nuda-fpulse {
  --fpulse-accent: #e4ff54;
  position: relative;
  display: inline-block;
  padding: 8px 6px;
}

.nuda-fpulse__target {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fafafa;
  border-radius: 8px;
  font: 600 0.875rem ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.nuda-fpulse__ring {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--fpulse-accent);
  border-radius: 50%;
  transform: translate(50%, -50%);
  animation: nuda-fpulse-ring 1.6s ease-out infinite;
  opacity: 0;
}

.nuda-fpulse__ring--b { animation-delay: 0.6s; }

.nuda-fpulse__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--fpulse-accent);
  border: 2px solid #09090b;
  border-radius: 50%;
  transform: translate(50%, -50%);
  box-shadow: 0 0 8px rgba(228, 255, 84, 0.6);
  z-index: 1;
}

@keyframes nuda-fpulse-ring {
  0%   { transform: translate(50%, -50%) scale(0.6); opacity: 1; }
  100% { transform: translate(50%, -50%) scale(2.4); opacity: 0; }
}

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