/*
=====================================================
Estilos y animaciones del login
Sistema: Arcangelvet
Módulo: Login y Autenticación

Descripción:
Animaciones de entrada de la tarjeta, campos escalonados y estados
de la mascota (reposo, ojos tapados, espiando, triste, feliz).
Sin dependencias externas: todo es CSS sobre el SVG inline.

Ubicación: public/assets/css/login-animado.css
=====================================================
*/

/* ============ Variables ============ */
:root {
    --av-violeta: #667eea;
    --av-morado: #764ba2;
    --av-texto: #495057;
}

/* ============ Fondo ============ */
body {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    position: relative;
    padding: 24px 12px;
}

/* Manchas suaves que flotan detrás de la tarjeta */
.fondo-blob {
    position: fixed;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    filter: blur(2px);
    pointer-events: none;
    animation: flotar-blob 18s ease-in-out infinite;
}

.fondo-blob--1 { width: 320px; height: 320px; top: -80px; left: -60px; }
.fondo-blob--2 { width: 240px; height: 240px; bottom: -70px; right: -40px; animation-delay: -6s; }
.fondo-blob--3 { width: 160px; height: 160px; top: 55%; left: 8%; animation-delay: -11s; }

@keyframes flotar-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(24px, -28px) scale(1.08); }
    66%      { transform: translate(-18px, 20px) scale(0.94); }
}

/* ============ Tarjeta ============ */
.login-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    max-width: 450px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: entrada-tarjeta 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes entrada-tarjeta {
    from { opacity: 0; transform: translateY(48px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sacudida cuando las credenciales son incorrectas */
.login-container.sacudir {
    animation: sacudir 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes sacudir {
    10%, 90% { transform: translateX(-6px); }
    20%, 80% { transform: translateX(9px); }
    30%, 50%, 70% { transform: translateX(-12px); }
    40%, 60% { transform: translateX(12px); }
}

.login-header {
    background: linear-gradient(135deg, var(--av-violeta) 0%, var(--av-morado) 100%);
    color: white;
    padding: 22px 30px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-body { padding: 32px 40px 40px; }

/* Entrada escalonada de los elementos del formulario */
.campo-anim {
    animation: entrada-campo 0.5s ease-out both;
}

@keyframes entrada-campo {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.campo-anim--1 { animation-delay: 0.30s; }
.campo-anim--2 { animation-delay: 0.38s; }
.campo-anim--3 { animation-delay: 0.46s; }
.campo-anim--4 { animation-delay: 0.54s; }
.campo-anim--5 { animation-delay: 0.62s; }
.campo-anim--6 { animation-delay: 0.70s; }
.campo-anim--7 { animation-delay: 0.78s; }

/* ============ Formulario ============ */
.form-label {
    font-weight: 600;
    color: var(--av-texto);
    margin-bottom: 8px;
}

.input-group { margin-bottom: 20px; }

.input-group-text {
    background-color: #f8f9fa;
    border-right: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.form-control {
    border-left: none;
    padding: 12px;
}

.form-control:focus {
    border-color: var(--av-violeta);
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* El icono del prefijo se tine cuando el campo tiene el foco */
.input-group:focus-within .input-group-text {
    background-color: var(--av-violeta);
    color: #fff;
    border-color: var(--av-violeta);
}

.btn-login {
    background: linear-gradient(135deg, var(--av-violeta) 0%, var(--av-morado) 100%);
    border: none;
    padding: 12px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.btn-login:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.45);
}

/* Destello que recorre el boton */
.btn-login::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    animation: destello-boton 3.4s ease-in-out infinite;
}

@keyframes destello-boton {
    0%, 65% { left: -60%; }
    100%    { left: 130%; }
}

.link-registro {
    color: var(--av-violeta);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.link-registro:hover {
    color: var(--av-morado);
    text-decoration: underline;
}

.divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #dee2e6;
}

.divider span {
    background: white;
    padding: 0 10px;
    position: relative;
    color: #6c757d;
    font-size: 14px;
}

.alert {
    border-radius: 10px;
    font-size: 14px;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

/* =====================================================
   MASCOTA
   ===================================================== */
.mascota-wrap {
    width: 160px;
    margin: 0 auto -2px;
}

.mascota {
    width: 100%;
    height: auto;
    display: block;
}

/* Los grupos animables giran/escalan respecto a su propio recuadro */
.mascota g,
.mascota path,
.mascota ellipse {
    transform-box: fill-box;
}

/* ---- Reposo ---- */
.m-cuerpo {
    transform-origin: center bottom;
    animation: respirar 3.2s ease-in-out infinite;
}

@keyframes respirar {
    0%, 100% { transform: scale(1, 1); }
    50%      { transform: scale(1.02, 1.03); }
}

.m-cabeza {
    transform-origin: center bottom;
    animation: balanceo-cabeza 5s ease-in-out infinite;
}

@keyframes balanceo-cabeza {
    0%, 100% { transform: rotate(0deg); }
    30%      { transform: rotate(2.2deg); }
    70%      { transform: rotate(-2.2deg); }
}

.m-cola {
    transform-origin: left bottom;
    animation: mover-cola 1.4s ease-in-out infinite;
}

@keyframes mover-cola {
    0%, 100% { transform: rotate(-9deg); }
    50%      { transform: rotate(12deg); }
}

.m-oreja {
    transform-origin: center top;
    animation: mover-oreja 5s ease-in-out infinite;
}

.m-oreja--der { animation-delay: -2.5s; }

@keyframes mover-oreja {
    0%, 100% { transform: rotate(0deg); }
    35%      { transform: rotate(4deg); }
    75%      { transform: rotate(-4deg); }
}

/* ---- Ojos ---- */
.m-pupilas-g {
    transition: transform 0.18s ease-out;
}

.m-parpado {
    transform-origin: center top;
    transform: scaleY(0);
    animation: parpadear 5.5s ease-in-out infinite;
}

.m-ojo--der .m-parpado { animation-delay: 0.06s; }

@keyframes parpadear {
    0%, 90%, 100% { transform: scaleY(0); }
    93%           { transform: scaleY(2); }
    96%           { transform: scaleY(0); }
}

/* ---- Lengua (oculta salvo cuando esta feliz) ---- */
.m-lengua {
    transform-origin: center top;
    transform: scaleY(0);
    transition: transform 0.3s ease-out;
}

/* ---- Patas ---- */
.m-pata {
    transform-origin: center center;
    transition: transform 0.42s cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* =====================================================
   ESTADO: ojos tapados (foco en la contrasena)
   ===================================================== */
.mascota.esta-tapado .m-pata--izq { transform: translate(22px, -130px) rotate(-14deg); }
.mascota.esta-tapado .m-pata--der { transform: translate(-22px, -130px) rotate(14deg); }

.mascota.esta-tapado .m-parpado {
    animation: none;
    transform: scaleY(2);
}

.mascota.esta-tapado .m-cabeza { animation: none; }
.mascota.esta-tapado .m-cola { animation-duration: 2.6s; }

/* =====================================================
   ESTADO: espiando (contrasena visible)
   ===================================================== */
.mascota.esta-espiando .m-pata--der { transform: translate(-26px, -101px) rotate(26deg); }

.mascota.esta-espiando .m-ojo--der .m-parpado { transform: scaleY(0.55); }

/* =====================================================
   ESTADO: triste (error de credenciales)
   ===================================================== */
.mascota.esta-triste .m-oreja { animation: none; transition: transform 0.4s ease; }
.mascota.esta-triste .m-oreja--izq { transform: rotate(17deg); }
.mascota.esta-triste .m-oreja--der { transform: rotate(-17deg); }
.mascota.esta-triste .m-ceja { transition: transform 0.4s ease; }
.mascota.esta-triste .m-ceja--izq { transform: translate(2px, 4px) rotate(16deg); }
.mascota.esta-triste .m-ceja--der { transform: translate(-2px, 4px) rotate(-16deg); }
.mascota.esta-triste .m-boca {
    transform-origin: center center;
    transform: translateY(5px) rotate(180deg);
}
.mascota.esta-triste .m-cola { animation-duration: 3.4s; }

/* =====================================================
   ESTADO: feliz (envio del formulario)
   ===================================================== */
.mascota.esta-feliz .m-lengua { transform: scaleY(1); }
.mascota.esta-feliz .m-cola { animation-duration: 0.35s; }
.mascota.esta-feliz .m-parpado {
    animation: none;
    transform: scaleY(1.15);
}
.mascota.esta-feliz .m-cabeza { animation: brincar 0.5s ease-in-out infinite; }

@keyframes brincar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 575.98px) {
    .mascota-wrap { width: 124px; }
    .login-body { padding: 26px 24px 32px; }
    .fondo-blob { display: none; }
}

/* =====================================================
   Accesibilidad: sin movimiento si el sistema lo pide.
   La mascota sigue tapandose los ojos, pero sin rebotes.
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
    .login-container,
    .campo-anim,
    .fondo-blob,
    .btn-login::after,
    .m-cuerpo,
    .m-cabeza,
    .m-cola,
    .m-oreja,
    .m-parpado {
        animation: none !important;
    }

    .login-container { opacity: 1; transform: none; }
    .campo-anim { opacity: 1; transform: none; }
    .m-pata { transition-duration: 0.01ms; }
    .m-pupilas-g { transition: none; }
}