/* === Fondo exterior compartido === */
/* dojo.jpg vive FUERA de la tarjeta, como fondo de la página. */
/* Definido aquí (única fuente) porque lo cargan login, register, welcome y recover. */

.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(200, 16, 46, 0.10),
      transparent 45%
    ),
    #080808;
  pointer-events: none;
}

.auth-bg__image {
  position: absolute;
  inset: 0;
  background: url("../img/dojo.jpg") center / cover no-repeat;
  filter: saturate(0.55) contrast(1.08);
}

.auth-bg__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 30%,
      rgba(0, 0, 0, 0.30) 0%,
      rgba(0, 0, 0, 0.62) 60%,
      rgba(0, 0, 0, 0.78) 100%
    );
}

/* === Loader de tres puntos (Senshi) === */
/* Compartido por login, register, welcome y recover. No duplicar. */

.senshi-loader {
  --loader-width: 120px;
  --loader-height: 52px;
  --loader-dot-size: 13px;
  --loader-shadow-width: 16px;
  --loader-shadow-height: 3px;
  --loader-color: #ED1638;
  --loader-shadow-color: rgba(232, 20, 50, 0.22);

  position: relative;
  width: var(--loader-width);
  height: var(--loader-height);
  z-index: 1;
}

.senshi-loader__dot {
  position: absolute;
  top: 0;
  width: var(--loader-dot-size);
  height: var(--loader-dot-size);
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #ED1638,
      #C8102E
    );

  transform-origin: 50%;
  animation:
    senshi-loader-bounce
    620ms
    alternate
    infinite
    ease-in-out;
}

/* El punto central se centra con margin (no transform) para que la
   animación de scaleX no le provoque salto horizontal. */
.senshi-loader__dot:nth-child(1) {
  left: 12%;
}

.senshi-loader__dot:nth-child(2) {
  left: 50%;
  margin-left: calc(-1 * var(--loader-dot-size) / 2);
  animation-delay: 150ms;
}

.senshi-loader__dot:nth-child(3) {
  right: 12%;
  animation-delay: 300ms;
}

@keyframes senshi-loader-bounce {
  0% {
    top: calc(
      var(--loader-height)
      - var(--loader-dot-size)
      - 5px
    );

    height: calc(
      var(--loader-dot-size)
      * 0.38
    );

    border-radius:
      999px
      999px
      50%
      50%;

    transform: scaleX(1.45);
  }

  42% {
    height: var(--loader-dot-size);
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 1px;
  }
}

.senshi-loader__shadow {
  position: absolute;
  bottom: 2px;
  width: var(--loader-shadow-width);
  height: var(--loader-shadow-height);
  border-radius: 50%;

  background:
    var(--loader-shadow-color);

  filter: blur(1px);

  animation:
    senshi-loader-shadow
    620ms
    alternate
    infinite
    ease-in-out;
}

.senshi-loader__shadow:nth-child(4) {
  left: 12%;
}

.senshi-loader__shadow:nth-child(5) {
  left: 50%;
  margin-left: calc(-1 * var(--loader-shadow-width) / 2);
  animation-delay: 150ms;
}

.senshi-loader__shadow:nth-child(6) {
  right: 12%;
  animation-delay: 300ms;
}

@keyframes senshi-loader-shadow {
  0% {
    transform: scaleX(1.45);
    opacity: 0.82;
  }

  42% {
    transform: scaleX(1);
    opacity: 0.58;
  }

  100% {
    transform: scaleX(0.25);
    opacity: 0.24;
  }
}

/* === Variante grande (panel de verificación) === */
/* La base del loader ya usa dimensiones grandes; el alias evita depender
   de los valores por defecto y permite ajustar el tamaño en un solo lugar. */
.senshi-loader--large {
  --loader-width: 120px;
  --loader-height: 52px;
  --loader-dot-size: 13px;
}

/* === Variante de botón === */
.senshi-loader--button {
  --loader-width: 50px;
  --loader-height: 22px;
  --loader-dot-size: 6px;
  --loader-shadow-width: 7px;
  --loader-shadow-height: 2px;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.senshi-loader--button .senshi-loader__dot {
  background: #FFFFFF;
}

.senshi-loader--button .senshi-loader__shadow {
  background: rgba(255, 255, 255, 0.28);
}

/* El texto del botón se oculta sin desplazar el layout durante loading. */
.is-loading .senshi-loader--button {
  pointer-events: none;
}

/* === Toggle mostrar/ocultar contraseña (compartido) === */
.password-visibility-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);

  width: 44px;
  height: 44px;
  padding: 0;

  display: grid;
  place-items: center;

  color: #A5A5B0;
  background: transparent;
  border: 0;
  border-radius: 8px;

  cursor: pointer;
  z-index: 3;

  transition:
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.password-visibility-toggle:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.045);
}

.password-visibility-toggle:focus-visible {
  outline: none;
  color: #FFFFFF;
  box-shadow:
    0 0 0 3px rgba(232, 20, 50, 0.22);
}

.password-visibility-toggle__icon {
  position: absolute;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

@keyframes senshi-eye-fill {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.password-visibility-toggle__icon:not([hidden]) {
  animation: senshi-eye-fill 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.password-visibility-toggle.is-animating .password-visibility-toggle__icon:not([hidden]) {
  animation: senshi-eye-fill 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .senshi-loader__dot,
  .senshi-loader__shadow {
    animation: none;
  }

  .senshi-loader__dot {
    top: 50%;
    transform: translateY(-50%);
  }

  .senshi-loader__shadow {
    display: none;
  }

  .password-visibility-toggle__icon:not([hidden]) {
    animation: none;
  }

  .password-visibility-toggle.is-animating .password-visibility-toggle__icon:not([hidden]) {
    animation: none;
  }
}