/* ==========================================================================
   112 — OTP Input
   Saisie de code à 6 cases. Chaque chiffre pop dans sa case (scale + fade
   depuis le bas) et la bordure s'allume. Code complet → vérification :
   succès = onde verte qui traverse les cases + check dessiné dans le statut ;
   erreur = shake groupé + bordures rouges. Les états .is-success / .is-error
   sont posés par anim.js sur la racine, .is-filled sur chaque case.
   ========================================================================== */

.otp-input {
  --otp-accent: var(--ml-accent, #7c8cff);
  --otp-accent-2: var(--ml-accent-2, #2dd4bf);
  --otp-error: var(--otp-input-error, #f87171);
  --otp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ml-fg, #e8eaf2);
}

.otp-input__title {
  margin: 0;
  color: var(--ml-muted, #8b91a3);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

/* --- Cases ------------------------------------------------------------------ */

.otp-input__cells {
  display: flex;
  gap: 8px;
}

/* index de chaque case, pour l'onde de succès en cascade */
.otp-input__box:nth-child(1) { --otp-i: 0; }
.otp-input__box:nth-child(2) { --otp-i: 1; }
.otp-input__box:nth-child(3) { --otp-i: 2; }
.otp-input__box:nth-child(4) { --otp-i: 3; }
.otp-input__box:nth-child(5) { --otp-i: 4; }
.otp-input__box:nth-child(6) { --otp-i: 5; }

.otp-input__box {
  position: relative;
  width: 38px;
  height: 48px;
  border-radius: 10px;
  background-color: var(--ml-surface, #151a24);
  border: 1px solid color-mix(in srgb, var(--ml-muted, #8b91a3) 28%, transparent);
  transition:
    border-color 0.25s var(--otp-ease),
    box-shadow 0.25s var(--otp-ease),
    transform 0.25s var(--otp-ease);
}

/* le focus montre clairement la case active (clavier ET souris) */
.otp-input__box:focus-within {
  border-color: var(--otp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--otp-accent) 22%, transparent);
}

.otp-input__box.is-filled {
  border-color: color-mix(in srgb, var(--otp-accent) 55%, transparent);
}

/* l'input porte la saisie et l'accessibilité ; le chiffre visible est
   rendu par le span animé (le texte de l'input est transparent) */
.otp-input__cell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: transparent;
  caret-color: var(--otp-accent);
  font: inherit;
  font-size: 1.15rem;
  text-align: center;
  outline: none; /* focus porté par la bordure + le glow de la case */
}

.otp-input__cell::selection {
  background-color: color-mix(in srgb, var(--otp-accent) 30%, transparent);
  color: transparent;
}

.otp-input__digit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ml-fg, #e8eaf2);
  opacity: 0;
  pointer-events: none;
  transition: color 0.3s var(--otp-ease);
}

/* pop du chiffre : scale + fade depuis le bas, léger overshoot */
.otp-input__box.is-filled .otp-input__digit {
  opacity: 1;
  animation: otp-input-pop 0.28s var(--otp-ease) both;
}

@keyframes otp-input-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(0.5); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Succès : onde verte qui traverse les cases ------------------------------- */

.otp-input.is-success .otp-input__box {
  border-color: var(--otp-accent-2);
  animation: otp-input-wave 0.55s var(--otp-ease) both;
  animation-delay: calc(var(--otp-i, 0) * 70ms);
}

.otp-input.is-success .otp-input__digit {
  color: var(--otp-accent-2);
  transition-delay: calc(var(--otp-i, 0) * 70ms);
}

@keyframes otp-input-wave {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--otp-accent-2) 45%, transparent);
  }
  40% {
    transform: translateY(-7px);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--otp-accent-2) 30%, transparent);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--otp-accent-2) 0%, transparent);
  }
}

/* --- Erreur : shake groupé + bordures rouges ----------------------------------- */

.otp-input.is-error .otp-input__cells {
  animation: otp-input-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.otp-input.is-error .otp-input__box {
  border-color: var(--otp-error);
}

.otp-input.is-error .otp-input__digit {
  color: var(--otp-error);
}

@keyframes otp-input-shake {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(-10px); }
  28%  { transform: translateX(9px); }
  44%  { transform: translateX(-6px); }
  60%  { transform: translateX(4px); }
  76%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* --- Statut + indice ------------------------------------------------------------ */

.otp-input__status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 1.25em; /* slot réservé, pas de saut de layout */
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.3s var(--otp-ease),
    transform 0.3s var(--otp-ease);
}

.otp-input.is-success .otp-input__status,
.otp-input.is-error .otp-input__status {
  opacity: 1;
  transform: translateY(0);
}

.otp-input.is-success .otp-input__status {
  color: var(--otp-accent-2);
  transition-delay: 0.35s; /* arrive avec la fin de l'onde */
}

.otp-input.is-error .otp-input__status {
  color: var(--otp-error);
}

.otp-input__status-icon {
  display: none;
  width: 15px;
  height: 15px;
}

.otp-input.is-success .otp-input__status-icon {
  display: block;
}

.otp-input__check-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1; /* calé sur pathLength="1" */
  stroke-dashoffset: 1;
}

/* check dessiné une fois l'onde passée */
.otp-input.is-success .otp-input__check-path {
  transition: stroke-dashoffset 0.35s var(--otp-ease) 0.45s;
  stroke-dashoffset: 0;
}

.otp-input__hint {
  margin: 0;
  color: color-mix(in srgb, var(--ml-muted, #8b91a3) 70%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

/* --- Reduced motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .otp-input__box.is-filled .otp-input__digit,
  .otp-input.is-success .otp-input__box,
  .otp-input.is-error .otp-input__cells {
    animation: none; /* chiffres instantanés, pas d'onde ni de shake — la couleur suffit */
  }

  .otp-input__box,
  .otp-input__digit,
  .otp-input__status,
  .otp-input.is-success .otp-input__status,
  .otp-input.is-success .otp-input__check-path {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
}