/* Inicio de sesión (LOGIN-PREMIUM-02 y -03, 17 de octubre de 2026): movimiento (AGENTE 2). Solo animaciones y transiciones;
   colores, bordes y anillos de foco son de login-form.css, y la composición de login.css / login-marca.css /
   login-showcase.css.

   Reglas:
   - Tokens de motion.css (curva --motion-ease, desaceleración sin rebote). Solo `opacity`, las propiedades sueltas
     `translate` y `scale` (no pisan el `transform` con que la composición ubica las piezas) y `stroke-dashoffset`
     (con su `stroke-dasharray` solo dentro de los fotogramas) para dibujar las curvas.
   - Entrada con `backwards`: antes de empezar cada pieza está en su estado inicial y, al terminar, no queda nada
     aplicado. Sin animación (reducir movimiento) todo se ve en su lugar desde el primer cuadro.
   - El formulario nunca se bloquea: el correo tiene autofocus y se escribe desde el primer instante; la tarjeta solo se
     funde (opacidad), sin pointer-events ni visibility.
   - Entrada completa (.mo-full: llegar desde otra pantalla o recargar), solapada; la composición queda completa a los
     ~1,8 s (LOGIN-PREMIUM-03):
        tarjeta            0 ms   500 ms  opacidad + sube 8 px (el formulario se usa desde el primer cuadro)
        luces (.lgn-glow)  0 ms  1100 ms  opacidad + escala .92 → 1
        símbolo            0 ms   750 ms  opacidad + sube 10 px + escala .94 → 1
        palabra          120 ms   700 ms  opacidad + avanza 14 px desde el símbolo
        titular          200 ms   800 ms  opacidad .35 → 1 + sube 12 px (parte visible: no retrasa el LCP)
        curvas           300 ms  1200 ms  se dibujan una vez (stroke-dashoffset), 120 ms entre curvas
        mensaje          400 ms   600 ms  opacidad + sube 8 px
        descripción      480 ms   600 ms  opacidad + sube 8 px
        funciones        560 ms + 80 ms por fila, 550 ms  opacidad + sube 10 px
        dispositivo      600 ms  1100 ms  opacidad .12 → 1 + sube 28 px + escala .975 → 1 (la figura .lgn-showcase
                                          entera; parte apenas visible para que el LCP sea el primer cuadro y no el
                                          final). Al terminar no queda nada aplicado: la tableta vuelve a su única
                                          transform afín y la agenda se rasteriza nítida.
        resplandor       900 ms   900 ms  opacidad (.lgn-aura, hermana del equipo: la luz ambiental llega al final)
        puntos           900 ms + 90 ms por punto, 500 ms  opacidad + escala .4 → 1
   - Dispositivo (LOGIN-PREMIUM-05, 18 de octubre de 2026): nunca se anima la opacidad de .lgn-device, ni de
     .lgn-screen, .lgn-shot o .lgn-lens por separado, ni de nada que contenga la pantalla salvo la figura entera: una
     capa con opacidad < 1 o escalada que quedara aplicada dejaría la agenda borrosa. La captura ya no se funde por su
     cuenta (antes .6 → 1); el vidrio, el contorno y el reflejo de la fase 4 (.lgn-glass, .lgn-rim, .lgn-glare) ya no
     existen.
   - Volver con un error (.mo-soft: el POST /login vuelve a /login): marca y tarjeta quietas; solo el aviso se funde.
   - Ambiente (después de la entrada, también en .mo-soft): los puntos respiran (opacidad) y las luces derivan unos px,
     en ciclos de 9 a 18 s. Nunca el logotipo, nunca rotaciones. login-motion.js lo pausa (clase .lgn-still en .lgn)
     cuando la pestaña no se ve, cuando la marca sale de la pantalla y, para siempre, a los 45 s.
   - Reducir movimiento (sistema o .mo-reduced): nada se anima, ni ambiente; todo visible al instante.
   - Curvas: el largo del trazo lo pone login-motion.js en --lgn-len, medido en píxeles de pantalla, porque las curvas
     llevan vector-effect: non-scaling-stroke y con eso Chrome mide el guion en pantalla e ignora pathLength. */

.lgn {
  --lgn-card-dur: 500ms;
  --lgn-glow-dur: 1100ms;
  --lgn-logo-dur: 750ms;
  --lgn-curve-dur: 1200ms;    --lgn-curve-delay: 300ms;   --lgn-curve-step: 120ms;
  --lgn-word-dur: 700ms;      --lgn-word-delay: 120ms;
  --lgn-head-dur: 800ms;      --lgn-head-delay: 200ms;
  --lgn-show-dur: 1100ms;     --lgn-show-delay: 600ms;
  --lgn-aura-dur: 900ms;      --lgn-aura-delay: 900ms;
  --lgn-tag-dur: 600ms;       --lgn-tag-delay: 400ms;
  --lgn-desc-dur: 600ms;      --lgn-desc-delay: 480ms;
  --lgn-feat-dur: 550ms;      --lgn-feat-delay: 560ms;    --lgn-feat-step: 80ms;
  --lgn-spark-dur: 500ms;     --lgn-spark-delay: 900ms;   --lgn-spark-step: 90ms;
  --lgn-alert-dur: 300ms;     /* aviso o error al volver con un error */
  /* Ambiente */
  --lgn-amb-start: 2000ms;    /* empieza cuando la entrada ya terminó (en .mo-soft, antes) */
  --lgn-spark-cycle: 9s;      /* respiración de los puntos */
  --lgn-glow-cycle: 18s;      /* deriva de las luces */
}
.mo-soft .lgn { --lgn-amb-start: 400ms; }

@keyframes lgn-fade-in { from { opacity: 0; } }
@keyframes lgn-logo-in { from { opacity: 0; translate: 0 10px; scale: .94; } }
@keyframes lgn-word-in { from { opacity: 0; translate: -14px 0; } }
@keyframes lgn-head-in { from { opacity: .35; translate: 0 12px; } }
@keyframes lgn-line-in { from { opacity: 0; translate: 0 8px; } }
@keyframes lgn-feat-in { from { opacity: 0; translate: 0 10px; } }
@keyframes lgn-show-in { from { opacity: .12; translate: 0 28px; scale: .975; } }
@keyframes lgn-card-in { from { opacity: 0; translate: 0 8px; } }
@keyframes lgn-glow-in { from { opacity: 0; scale: .92; } }
@keyframes lgn-spark-in { from { opacity: 0; scale: .4; } }
@keyframes lgn-curve-in {
  from { stroke-dasharray: var(--lgn-len, 3000); stroke-dashoffset: var(--lgn-len, 3000); }
  to { stroke-dasharray: var(--lgn-len, 3000); stroke-dashoffset: 0; }
}
@keyframes lgn-alert-in { from { opacity: 0; translate: 0 -4px; } }
/* Ambiente: solo el 50 %; los extremos son el valor de la composición, así el ciclo no cambia el reposo. */
@keyframes lgn-spark-breathe { 50% { opacity: .35; } }
@keyframes lgn-glow-drift { 50% { translate: 6px -5px; } }

/* El fundido general de <main> (motion.css) no se suma: aquí cada pieza tiene su propia entrada. */
main:has(.lgn) { animation: none !important; }

/* ── Entrada completa ─────────────────────────────────────────────────────────────────────────────────────────── */
.mo-full .lgn-card { animation: lgn-card-in var(--lgn-card-dur) var(--motion-ease) backwards; }
.mo-full .lgn-logo { animation: lgn-logo-in var(--lgn-logo-dur) var(--motion-ease) backwards; }
.mo-full .lgn-word { animation: lgn-word-in var(--lgn-word-dur) var(--motion-ease) var(--lgn-word-delay) backwards; }
.mo-full .lgn-headline { animation: lgn-head-in var(--lgn-head-dur) var(--motion-ease) var(--lgn-head-delay) backwards; }
.mo-full .lgn-tagline,
.mo-full .lgn-claim { animation: lgn-line-in var(--lgn-tag-dur) var(--motion-ease) var(--lgn-tag-delay) backwards; }
.mo-full .lgn-desc { animation: lgn-line-in var(--lgn-desc-dur) var(--motion-ease) var(--lgn-desc-delay) backwards; }
.mo-full .lgn-feature {
  animation: lgn-feat-in var(--lgn-feat-dur) var(--motion-ease) backwards;
  animation-delay: calc(var(--lgn-feat-delay) + var(--lgn-i, 0) * var(--lgn-feat-step));
}
.mo-full .lgn-showcase { animation: lgn-show-in var(--lgn-show-dur) var(--motion-ease) var(--lgn-show-delay) backwards; }
.mo-full .lgn-aura { animation: lgn-fade-in var(--lgn-aura-dur) var(--motion-ease) var(--lgn-aura-delay) backwards; }
.mo-full .lgn-curve path,
.mo-full path.lgn-curve {
  animation: lgn-curve-in var(--lgn-curve-dur) var(--motion-ease) backwards;
  animation-delay: calc(var(--lgn-curve-delay) + var(--lgn-i, 0) * var(--lgn-curve-step));
}

/* Índice de cada fila, curva o punto (lo da el CSS: no depende del script). Los puntos, por su clase de posición
   (--p1…--p6), porque comparten contenedor con las luces. */
.lgn-feature:nth-child(2), path.lgn-curve:nth-of-type(2), .lgn-curve path:nth-of-type(2), .lgn-spark--p2 { --lgn-i: 1; }
.lgn-feature:nth-child(3), path.lgn-curve:nth-of-type(3), .lgn-curve path:nth-of-type(3), .lgn-spark--p3 { --lgn-i: 2; }
.lgn-feature:nth-child(4), path.lgn-curve:nth-of-type(4), .lgn-curve path:nth-of-type(4), .lgn-spark--p4 { --lgn-i: 3; }
.lgn-feature:nth-child(n+5), path.lgn-curve:nth-of-type(n+5), .lgn-curve path:nth-of-type(n+5), .lgn-spark--p5 { --lgn-i: 4; }
.lgn-spark--p6 { --lgn-i: 5; }

/* Luces y puntos: entrada (solo .mo-full) + ambiente (ambos modos). La lista de animaciones lleva siempre las dos,
   así .lgn-still pausa solo la segunda. */
.mo-full .lgn-glow {
  animation: lgn-glow-in var(--lgn-glow-dur) var(--motion-ease) backwards,
    lgn-glow-drift var(--lgn-glow-cycle) ease-in-out var(--lgn-amb-start) infinite;
}
.mo-soft .lgn-glow { animation: none 0s, lgn-glow-drift var(--lgn-glow-cycle) ease-in-out var(--lgn-amb-start) infinite; }
.lgn-glow--b { animation-duration: var(--lgn-glow-dur), calc(var(--lgn-glow-cycle) * 1.3); animation-direction: normal, reverse; }

.mo-full .lgn-spark {
  animation: lgn-spark-in var(--lgn-spark-dur) var(--motion-ease) backwards,
    lgn-spark-breathe var(--lgn-spark-cycle) ease-in-out infinite;
  animation-delay: calc(var(--lgn-spark-delay) + var(--lgn-i, 0) * var(--lgn-spark-step)),
    calc(var(--lgn-amb-start) + var(--lgn-i, 0) * 1.7s);
}
.mo-soft .lgn-spark {
  animation: none 0s, lgn-spark-breathe var(--lgn-spark-cycle) ease-in-out infinite;
  animation-delay: 0s, calc(var(--lgn-amb-start) + var(--lgn-i, 0) * 1.7s);
}

/* Pausa del ambiente (login-motion.js): pestaña oculta, marca fuera de la pantalla o pasado el tope. */
.lgn.lgn-still .lgn-glow,
.lgn.lgn-still .lgn-spark { animation-play-state: running, paused; }

/* ── Volver con un error ──────────────────────────────────────────────────────────────────────────────────────── */
.mo-soft .lgn-alert { animation: lgn-alert-in var(--lgn-alert-dur) var(--motion-ease) backwards; }

/* ── Microinteracciones ───────────────────────────────────────────────────────────────────────────────────────── */
/* Campos: el cambio de borde, anillo y fondo al enfocar (los valores los pone login-form.css) se funde. */
.lgn-input {
  transition: border-color var(--motion-control) var(--motion-ease), box-shadow var(--motion-control) var(--motion-ease),
    background-color var(--motion-control) var(--motion-ease);
}

/* Botón Entrar: color y sombra se funden; al pasar el mouse sube 1 px; al presionar vuelve. */
.lgn-submit {
  transition: background-color var(--motion-control) var(--motion-ease), background-position var(--motion-control) var(--motion-ease),
    border-color var(--motion-control) var(--motion-ease), box-shadow var(--motion-control) var(--motion-ease),
    color var(--motion-control) var(--motion-ease), translate var(--motion-control) var(--motion-ease),
    transform var(--motion-control) var(--motion-ease);
}
.lgn-submit:not(:disabled):not(.is-loading):hover { translate: 0 -1px; }
.lgn-submit:not(:disabled):not(.is-loading):active { translate: 0 0; }

/* ── Reducir movimiento (del sistema o .mo-reduced): nada se anima, todo visible al instante ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lgn, .lgn *, .lgn *::before, .lgn *::after { animation: none !important; transition: none !important; }
  .lgn-submit:hover, .lgn-submit:active { translate: none !important; }
}
.mo-reduced .lgn, .mo-reduced .lgn *, .mo-reduced .lgn *::before, .mo-reduced .lgn *::after { animation: none !important; transition: none !important; }
.mo-reduced .lgn-submit:hover, .mo-reduced .lgn-submit:active { translate: none !important; }