Focus Underline

<!-- Focus Underline — underline grows from the center on focus -->
<div class="nuda-focus-underline">
  <input class="nuda-focus-underline__input" type="text" placeholder="Type here..." />
  <span class="nuda-focus-underline__bar"></span>
</div>

/* ── Focus Underline ─────────────────────────────────────────
   A scaleX(0)->scaleX(1) bar centred under the field.
   Customize: --nuda-fu-clr for the underline color.
   ──────────────────────────────────────────────────────────── */
.nuda-focus-underline {
  --nuda-fu-clr: #e4ff54;
  position: relative;
  width: 240px;
}

.nuda-focus-underline__input {
  width: 100%;
  padding: 10px 2px;
  background: transparent;
  color: #fafafa;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  outline: none;
}

.nuda-focus-underline__input::placeholder { color: #666; }

.nuda-focus-underline__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--nuda-fu-clr);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.nuda-focus-underline__input:focus ~ .nuda-focus-underline__bar {
  transform: scaleX(1);
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-focus-underline__bar { transition: none; }
}