/* ==========================================================================
   EQWeb / FACTUEXPRESS — PANTALLA 01 — LOGIN
   Animación de acceso exitoso (fase visual).

   Todo scopeado bajo .eq-login-page. 0 cambio de autenticación -- este
   archivo es puramente presentacional, orquestado por login-transition.js
   DESPUÉS de que el backend real ya confirmó éxito.
   ========================================================================== */

/* -------------------------------------------------------------------- */
/* 1) Contenido funcional que desaparece al confirmar acceso             */
/* -------------------------------------------------------------------- */
.eq-login-form-content {
  /* Pedido del cliente (2026-08-16): "hazlo más lento, ni siquiera se
     aprecia" -- toda la secuencia de éxito se alargó ~2x (ver también
     el colapso del panel, la mancha final y el SAFETY_TIMEOUT_MS en
     login-transition.js, que crece en la misma proporción). */
  transition:
    opacity 380ms ease,
    transform 420ms ease,
    filter 360ms ease;
}

.eq-login-form-content.is-hiding {
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}

/* -------------------------------------------------------------------- */
/* 2) Núcleo de marca (badge + wordmark) -- persiste y se activa         */
/* -------------------------------------------------------------------- */
.eq-login-panel.is-collapsed .eq-login-brand-block .eq-login-badge {
  animation: eqBadgePulse 650ms ease-out;
}

.eq-login-panel.is-collapsed .eq-login-brand-block .eq-login-brand,
.eq-login-panel.is-collapsed .eq-login-brand-block .eq-login-brand-underline {
  animation: eqWordmarkLift 650ms ease-out forwards;
}

@keyframes eqBadgePulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes eqWordmarkLift {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* -------------------------------------------------------------------- */
/* 3) Colapso del panel -- dimensiones reales, no scale() del texto      */
/* -------------------------------------------------------------------- */
.eq-login-panel {
  transition:
    width 950ms cubic-bezier(.22, 1, .36, 1),
    min-height 950ms cubic-bezier(.22, 1, .36, 1),
    padding 950ms cubic-bezier(.22, 1, .36, 1),
    transform 950ms cubic-bezier(.22, 1, .36, 1);
}

.eq-login-panel.is-collapsed {
  width: 500px;
  min-height: 160px;
  padding: 26px 40px;
  transform: translateY(-24px);
}

/* Pequeño overshoot elástico al asentarse (sección 16 del pedido) --
   muy sutil, nunca "jelly" exagerado. */
.eq-login-panel.is-settling {
  animation: eqPanelSettle 300ms ease-out;
  transform-origin: center;
}

@keyframes eqPanelSettle {
  0%   { transform: translateY(-24px) scale(1, 1); }
  55%  { transform: translateY(-24px) scale(1.018, .985); }
  100% { transform: translateY(-24px) scale(1, 1); }
}

.eq-login-panel.is-collapsed .eq-login-form-content,
.eq-login-panel.is-collapsed .eq-login-copyright {
  display: none;
}

/* -------------------------------------------------------------------- */
/* 4) Trazo de conexión (SVG overlay, posiciones calculadas por JS)      */
/* -------------------------------------------------------------------- */
.eq-login-connection {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 150ms ease;
}

.eq-login-connection.is-active {
  opacity: 1;
}

.eq-login-connection-underlay {
  stroke: rgba(11, 122, 130, .18);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eq-login-connection-main {
  stroke: #0B7A82;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------------- */
/* 5) Reacción de la tienda al conectar -- solo CSS, 0 cambio de asset   */
/* -------------------------------------------------------------------- */
.eq-login-illustration {
  transition: transform 380ms ease, filter 380ms ease;
}

.eq-login-illustration.is-connected {
  transform: scale(1.015);
  filter: drop-shadow(0 26px 35px rgba(11, 122, 130, .18));
}

/* -------------------------------------------------------------------- */
/* 6) Confirmación "¡Todo listo!"                                        */
/* -------------------------------------------------------------------- */
.eq-login-success-state {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 320ms ease, transform 320ms ease;
  outline: none;
}

.eq-login-success-state.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.eq-login-success-check {
  width: 128px;
  height: 128px;
  margin-bottom: 10px;
  object-fit: contain;
  animation: eqLoginSuccessAssetIn 480ms ease-out both;
}

@keyframes eqLoginSuccessAssetIn {
  0% { opacity: 0; transform: scale(.75); }
  65% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

.eq-login-success-title {
  font-family: var(--cp-font-hand);
  font-weight: 400;
  font-size: 32px;
  color: var(--cp-ink);
  margin: 0 0 4px;
}

.eq-login-success-sub {
  font-family: var(--cp-font-body);
  font-size: 15px;
  color: var(--cp-muted);
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* 7) Transición final -- mancha de acuarela creciendo, NO fade blanco   */
/* -------------------------------------------------------------------- */
.eq-watercolor-transition {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  visibility: hidden;
  overflow: hidden;
}

.eq-watercolor-transition.is-active {
  visibility: visible;
}

.eq-wc-blob {
  /* Bug encontrado con navegador real (2026-08-16): base fija 30px +
     scale(70) = 2100px de diámetro. Para un origen cerca del centro
     eso alcanza matemáticamente cualquier esquina en 1776x864 (radio
     1050px > distancia real a la esquina, ~987px) -- PERO el
     border-radius asimétrico (mancha orgánica, no un círculo real)
     "corta" cada esquina con una elipse distinta, y la esquina
     inferior derecha del viewport cae fuera de esa elipse (~1.06 en
     la ecuación normalizada, >1 = fuera) -- hueco visible y
     reproducible al 100%, confirmado con captura real + medición de
     eqLoginTransition. Además el tamaño fijo en px no escala con el
     viewport real (roto seguro en monitores grandes/ultrawide).
     Fix: base en vmax (relativa a pantalla real, cualquier tamaño) y
     mucho más grande -- 250vmax de diámetro final cubre con margen
     enorme incluso el peor caso (origen en una esquina, alcanzar la
     esquina opuesta). transform ahora escala 0→1, no 0→70. */
  position: absolute;
  top: var(--eq-wc-y, 50%);
  left: var(--eq-wc-x, 50%);
  width: 250vmax;
  height: 250vmax;
  margin: -125vmax 0 0 -125vmax;
  border-radius: 45% 55% 60% 40% / 55% 35% 65% 45%;
  transform: scale(0);
  /* 700ms -> 1500ms (pedido "hazlo más lento", 2026-08-16): era el
     momento más visible de todo el cierre y el que menos tiempo real
     tenía para apreciarse. */
  transition: transform 1500ms cubic-bezier(.76, 0, .24, 1);
}

.eq-wc-blob-1 {
  background: #F7F1E7;
  /* Esta es la capa OPACA que debe ocultar 100% de la pantalla antes
     del redirect -- círculo real (no la mancha orgánica) para que la
     cobertura sea geométricamente garantizada en cualquier esquina,
     sin depender de dónde caiga --eq-wc-x/--eq-wc-y. Las capas 2/3 de
     abajo son decorativas (semitransparentes, montadas ENCIMA de esta
     ya opaca) y sí conservan la mancha orgánica -- ahí la imperfección
     de forma es parte del look, no un bug. */
  border-radius: 50%;
}
.eq-wc-blob-2 { background: rgba(11, 122, 130, .08); transition-delay: 70ms; }
.eq-wc-blob-3 { background: rgba(215, 178, 123, .06); transition-delay: 120ms; }

.eq-watercolor-transition.is-active .eq-wc-blob {
  transform: scale(1);
}

/* -------------------------------------------------------------------- */
/* Accesibilidad -- prefers-reduced-motion: solo fundido corto           */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eq-login-form-content,
  .eq-login-panel,
  .eq-login-panel.is-settling,
  .eq-login-illustration.is-connected,
  .eq-login-connection,
  .eq-wc-blob {
    transition: none !important;
    animation: none !important;
  }
  .eq-login-panel.is-collapsed {
    width: auto;
    min-height: auto;
    padding: 60px 54px 40px;
    transform: none;
  }
  .eq-login-connection,
  .eq-watercolor-transition {
    display: none !important;
  }
  .eq-login-success-state {
    transition: opacity 180ms ease !important;
  }
}