Focus Ring

<!-- Focus Ring — input with animated focus ring -->
<input class="nuda-focus-ring" type="text" placeholder="Focus me..." />

/* ── Focus Ring ──────────────────────────────────────────────
   Customize:
     --nuda-fr-clr      : focus accent color
     --nuda-fr-border   : default border color
     --nuda-fr-radius   : border radius
     --nuda-fr-ring-w   : ring width at peak
   ──────────────────────────────────────────────────────────── */
.nuda-focus-ring {
  --nuda-fr-clr: #6366f1;
  --nuda-fr-border: #d1d5db;
  --nuda-fr-radius: 8px;
  --nuda-fr-ring-w: 6px;

  padding: 10px 16px;
  font-size: 1rem;
  border: 2px solid var(--nuda-fr-border);
  border-radius: var(--nuda-fr-radius);
  outline: none;
  background: transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  max-width: 320px;
}

.nuda-focus-ring:focus {
  border-color: var(--nuda-fr-clr);
  animation: nuda-focus-ring-pulse 0.5s ease;
}

@keyframes nuda-focus-ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
  70%  { box-shadow: 0 0 0 var(--nuda-fr-ring-w) rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-focus-ring {
    animation: none !important;
  }
  .nuda-focus-ring:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  }
}