/* Clave · Moxen (moxen.cl/recursos, licence: use in own product). Adapted for lgrust.ru: palette and sizes in account.css. */
/* Clave · Moxen — los estilos del efecto y de la demostración. */
 
* { box-sizing: border-box; }

/* ── el efecto ─────────────────────────────────────────────────────── */
.cl-grupo { position: relative; display: flex; gap: var(--cl-hueco); }
.cl-casilla {
  position: relative; width: var(--cl-ancho); height: var(--cl-alto); border-radius: var(--cl-radio); overflow: hidden;
  background: linear-gradient(var(--cl-casilla-a), var(--cl-casilla-b));
  box-shadow: inset 0 1px 0 var(--cl-filo), inset 0 0 0 1px var(--cl-borde), var(--cl-sombra);
  transition: box-shadow .3s, transform .6s var(--cl-rebote) calc(var(--dc) * 55ms), opacity .25s calc(var(--dc) * 55ms);
}
.cl-casilla.is-llena { box-shadow: inset 0 1px 0 var(--cl-filo), inset 0 0 0 1px var(--cl-borde-lleno), var(--cl-sombra); }
.cl-casilla input {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; outline: none; background: none; text-align: center;
  color: var(--cl-texto); font: inherit; font-size: var(--cl-letra); font-weight: 500; font-variant-numeric: tabular-nums;
  caret-color: transparent; transition: opacity .3s, transform .3s, color .25s;
}
.cl-casilla input::selection { background: transparent; }
/* cada cifra entra desde abajo con rebote, y la casilla acusa el golpe */
.cl-casilla.is-nueva { animation: cl-golpe .45s var(--cl-curva); }
.cl-casilla.is-nueva input { animation: cl-entra .5s var(--cl-rebote); }
@keyframes cl-golpe { 25% { transform: scale(.94); } }
@keyframes cl-entra { from { transform: translateY(42%) scale(.4); opacity: 0; } }

/* El anillo de la casilla activa: una sola pieza que clave.js lleva de
   una casilla a otra con un resorte (y que se estira con la velocidad).
   Dentro, el cursor, que late suave mientras la casilla está vacía. */
.cl-anillo {
  position: absolute; left: 0; top: 0; width: var(--cl-ancho); height: var(--cl-alto); border-radius: var(--cl-radio);
  box-shadow: inset 0 0 0 1.5px var(--cl-texto), 0 0 0 5px var(--cl-halo); pointer-events: none;
  opacity: 0; transition: opacity .25s; will-change: transform;
}
.cl-grupo.is-foco .cl-anillo { opacity: 1; }
.cl-cursor {
  position: absolute; left: 50%; top: 31%; bottom: 31%; width: 2.5px; margin-left: -1.25px; border-radius: 2px;
  background: var(--cl-texto); opacity: 0; transform: scaleY(.4); transition: opacity .15s, transform .3s var(--cl-curva);
}
.cl-anillo.is-vacia .cl-cursor { opacity: 1; transform: none; animation: cl-late 1.1s ease-in-out infinite .3s; }
@keyframes cl-late { 0%, 40% { opacity: 1; } 55%, 85% { opacity: .1; } 100% { opacity: 1; } }

/* comprobando: un barrido de luz recorre las casillas y las cifras hacen la ola */
.cl-casilla::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, var(--cl-barrido) 50%, transparent 70%);
  transform: translateX(-110%);
}
.cl-grupo.is-revisa .cl-casilla::after { opacity: 1; animation: cl-barre .9s var(--cl-junta) infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes cl-barre { to { transform: translateX(110%); } }
.cl-grupo.is-revisa .cl-casilla input { animation: cl-ola .9s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); }
@keyframes cl-ola { 30% { transform: translateY(-7%); } 60% { transform: none; } }

/* error: tiembla, se tiñe de rojo y las cifras se caen una tras otra */
.cl-grupo.is-mal { animation: cl-tiembla .5s cubic-bezier(.36, .07, .19, .97); }
.cl-grupo.is-mal .cl-casilla { box-shadow: inset 0 1px 0 var(--cl-filo), inset 0 0 0 1.5px var(--cl-mal), var(--cl-sombra); }
.cl-grupo.is-mal .cl-casilla input { color: var(--cl-mal); }
@keyframes cl-tiembla { 15% { transform: translateX(-12px); } 35% { transform: translateX(10px); } 55% { transform: translateX(-6px); } 75% { transform: translateX(3px); } }
.cl-grupo.is-cae .cl-casilla input { animation: cl-cae .42s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes cl-cae { 20% { transform: translateY(-8%); } to { transform: translateY(70%) rotate(var(--giro)); opacity: 0; } }

/* Listo: las casillas se juntan en el centro (se cierran los huecos) y
   las cifras se apagan; encima aparece la pieza, que se recoge en un
   círculo azul y dibuja el ✓, con una onda y unas chispas. */
.cl-grupo.is-listo .cl-casilla {
  transform: translateX(calc((var(--c) - var(--i)) * var(--cl-hueco))); opacity: 0;
  transition: transform .42s var(--cl-junta), opacity .1s .4s, box-shadow .3s;
}
.cl-grupo.is-listo .cl-casilla input { opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--cl-junta); }

.cl-pieza {
  position: absolute; left: 50%; top: 0; width: calc(var(--n) * var(--cl-ancho)); height: var(--cl-alto);
  margin-left: calc(var(--n) * var(--cl-ancho) / -2); pointer-events: none; opacity: 0; transition: opacity .2s;
}
.cl-pieza-forma {
  position: absolute; inset: 0; border-radius: var(--cl-radio); overflow: hidden;
  background: linear-gradient(var(--cl-casilla-a), var(--cl-casilla-b));
  box-shadow: inset 0 1px 0 var(--cl-filo), inset 0 0 0 1px var(--cl-borde-lleno);
  clip-path: inset(0 0 round var(--cl-radio)); transition: clip-path 0s .25s;
}
.cl-pieza-color {
  position: absolute; inset: 0; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cl-bien), #fff 18%), var(--cl-bien) 60%, color-mix(in srgb, var(--cl-bien), #000 18%));
}
.cl-grupo.is-listo .cl-pieza { opacity: 1; transition: opacity .12s .36s; animation: cl-late-pieza .55s var(--cl-curva) .9s; }
.cl-grupo.is-listo .cl-pieza-forma {
  clip-path: inset(0 calc(50% - var(--cl-alto) / 2) round calc(var(--cl-alto) / 2));
  transition: clip-path .52s var(--cl-junta) .46s;
}
.cl-grupo.is-listo .cl-pieza-color { opacity: 1; transition: opacity .35s .62s; }
@keyframes cl-late-pieza { 35% { transform: scale(1.07); } }
.cl-visto {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1;
}
.cl-grupo.is-listo .cl-visto { stroke-dashoffset: 0; transition: stroke-dashoffset .42s cubic-bezier(.65, 0, .35, 1) .86s; }
.cl-onda {
  position: absolute; left: 50%; top: 50%; width: var(--cl-alto); height: var(--cl-alto); margin: calc(var(--cl-alto) / -2) 0 0 calc(var(--cl-alto) / -2);
  border-radius: 50%; box-shadow: 0 0 0 1.5px var(--cl-bien); opacity: 0;
}
.cl-grupo.is-listo .cl-onda { animation: cl-onda 1.1s var(--cl-curva) .9s forwards; }
@keyframes cl-onda { from { opacity: .9; transform: scale(.95); } to { opacity: 0; transform: scale(2.1); } }
.cl-chispas { position: absolute; left: 50%; top: 50%; }
.cl-chispas i {
  position: absolute; left: -1px; top: -9px; width: 2px; height: 18px; border-radius: 2px; background: var(--cl-texto); opacity: 0;
}
.cl-chispas i:nth-child(odd) { background: var(--cl-bien); }
.cl-grupo.is-listo .cl-chispas i { animation: cl-chispa .8s var(--cl-curva) .92s forwards; }
@keyframes cl-chispa {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--cl-alto) * -.55)) scaleY(.2); }
  40% { opacity: 1; transform: rotate(var(--a)) translateY(calc(var(--cl-alto) * -.72)) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--cl-alto) * -.86)) scaleY(0); }
}

/* ── la demostración ───────────────────────────────────────────────── */
/* una luz cenital suave detrás de las casillas */
.cl-texto { margin: 1rem 0 3rem; color: var(--cl-suave); font-size: 1.125rem; }
.cl-texto b { color: var(--cl-texto); font-weight: 500; }
.cl-estado { position: relative; width: 100%; height: 1.6rem; margin: 2.2rem 0 .6rem; font-size: 1.0625rem; font-weight: 500; }
.cl-estado span {
  position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .4s var(--cl-curva);
}
.cl-listo { color: var(--cl-bien); }
.cl-fallo { color: var(--cl-mal); }
.cl-nuevo { color: var(--cl-suave); }
.cl-grupo.is-listo ~ .cl-estado .cl-listo { opacity: 1; transform: none; transition-delay: 1.05s; }
.cl-grupo.is-fallo ~ .cl-estado .cl-fallo, .cl-grupo.is-reenvio ~ .cl-estado .cl-nuevo { opacity: 1; transform: none; }
.cl-otro {
  padding: .7rem 1.1rem; border: 0; border-radius: 99px; background: none; color: var(--cl-suave);
  font: inherit; font-size: 1rem; cursor: pointer; text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: var(--cl-tenue); transition: color .2s;
}
.cl-otro:hover { color: var(--cl-texto); }
.cl-otro:focus-visible { outline: 2px solid var(--cl-texto); outline-offset: 2px; }

@media (max-width: 620px) {
  :root { --cl-ancho: 46px; --cl-alto: 60px; --cl-hueco: 8px; --cl-radio: 14px; --cl-letra: 1.75rem; }
    .cl-texto { font-size: 1rem; margin-bottom: 2.2rem; }
  .cl-visto { width: 40px; height: 40px; margin: -20px 0 0 -20px; stroke-width: 5; }
  .cl-estado { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-grupo *, .cl-grupo *::after, .cl-estado span { transition-duration: .01s !important; transition-delay: 0s !important; }
  .cl-casilla.is-nueva, .cl-casilla.is-nueva input, .cl-grupo.is-revisa .cl-casilla::after, .cl-grupo.is-revisa .cl-casilla input,
  .cl-grupo.is-mal, .cl-grupo.is-cae .cl-casilla input, .cl-grupo.is-listo .cl-pieza, .cl-grupo.is-listo .cl-onda,
  .cl-grupo.is-listo .cl-chispas i, .cl-anillo.is-vacia .cl-cursor { animation: none; }
}