OTP Inputs

<!-- OTP Inputs — four single-digit boxes that glow + advance on entry -->
<div class="nuda-otp" role="group" aria-label="One-time code">
  <input class="nuda-otp__box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 1" />
  <input class="nuda-otp__box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 2" />
  <input class="nuda-otp__box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 3" />
  <input class="nuda-otp__box" type="text" inputmode="numeric" maxlength="1" aria-label="Digit 4" />
</div>

/* ── OTP Inputs ──────────────────────────────────────────────
   Each box glows and lifts on focus.
   Customize: --nuda-otp-clr for the focus accent.
   ──────────────────────────────────────────────────────────── */
.nuda-otp {
  --nuda-otp-clr: #e4ff54;
  display: inline-flex;
  gap: 10px;
}

.nuda-otp__box {
  width: 46px;
  height: 54px;
  text-align: center;
  background: #0c0c10;
  color: #fafafa;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  font-size: 20px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease,
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nuda-otp__box:focus {
  border-color: var(--nuda-otp-clr);
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.2);
  transform: translateY(-2px);
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-otp__box {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
}

/* ── OTP Inputs — vanilla JS ─────────────────────────────────
   Auto-advances on entry and steps back on Backspace.
   ──────────────────────────────────────────────────────────── */
(function () {
  document.querySelectorAll(".nuda-otp").forEach(function (group) {
    var boxes = group.querySelectorAll(".nuda-otp__box");
    boxes.forEach(function (box, i) {
      box.addEventListener("input", function () {
        box.value = box.value.replace(/[^0-9]/g, "").slice(0, 1);
        if (box.value && boxes[i + 1]) boxes[i + 1].focus();
      });
      box.addEventListener("keydown", function (e) {
        if (e.key === "Backspace" && !box.value && boxes[i - 1]) {
          boxes[i - 1].focus();
        }
      });
    });
  });
})();