/* frontend/css/mascota.css */

/* --- CONTENEDOR PRINCIPAL --- */
#mascota-container {
    position: fixed;
    bottom: 40px;
    left: 20px;
    display: flex;
    align-items: center; 
    gap: 15px;
    z-index: 10000;
    transition: all 0.8s ease-in-out;
    pointer-events: none;
}

#mascota-container.dragging {
    transition: none !important; 
}

.mascota-wrapper, #mascota-globo {
    pointer-events: auto;
}

/* --- TRAYECTORIAS Y DIRECCIONES --- */
.mascota-oculto.lado-izquierdo { transform: translateX(-150vw); opacity: 0; }
.mascota-oculto.lado-derecho { transform: translateX(150vw); opacity: 0; }
.mascota-oculto-v { transform: translateY(250px); opacity: 0; }

.mascota-visible { transform: translate(0px, 0px); opacity: 1; }

.lado-izquierdo { flex-direction: row; left: 20px; right: auto; }
.lado-derecho { flex-direction: row-reverse; right: 20px; left: auto; }
.lado-izquierdo #mascota-globo { border-radius: 16px 16px 16px 0px; }
.lado-derecho #mascota-globo { border-radius: 16px 16px 0px 16px; }

/* --- GLOBO DE TEXTO NEUBRUTALISTA --- */
#mascota-globo {
    background-color: var(--bg-color, #ffffff);
    color: var(--text-color, #000000);
    padding: 12px 18px;
    border: 3px solid #000000;
    box-shadow: 4px 4px 0px #000000;
    max-width: 220px;
    font-weight: bold;
    font-size: 13px;
    display: none;
    position: relative;
    top: -20px; 
}

.mascota-sombra {
    width: 60px;
    height: 10px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    filter: blur(3px);
    margin-top: -10px;
    animation: sombra-flotar 3s ease-in-out infinite;
}

/* --- ESTILOS DE LA IMAGEN DE FRANXX --- */
#franxx-img {
    width: 120px; 
    height: auto;
    cursor: grab;
    pointer-events: auto;
    animation: flotar 3s ease-in-out infinite;
    /* Sombra normal en modo claro */
    filter: drop-shadow(2px 4px 0px rgba(0,0,0,0.2));
    transition: transform 0.3s ease, filter 0.5s ease;
}

#franxx-img:active {
    cursor: grabbing;
}

/* 🔥 NUEVO: AURA AMARILLA EN MODO OSCURO (EFECTO FOCO ENCENDIDO) 🔥 */
body.dark-mode #franxx-img {
    /* Doble drop-shadow para crear un resplandor intenso cerca y difuminado lejos */
    filter: drop-shadow(0 0 8px rgba(253, 224, 71, 0.9)) 
            drop-shadow(0 0 25px rgba(253, 224, 71, 0.5));
}

/* --- EFECTO ESPEJO --- */
#franxx-img.espejo { transform: scaleX(-1) translateY(0); }
#franxx-img.espejo { animation: flotar-espejo 3s ease-in-out infinite; }


/* --- ANIMACIONES GLOBALES --- */
@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes flotar-espejo {
    0%, 100% { transform: scaleX(-1) translateY(0); }
    50% { transform: scaleX(-1) translateY(-10px); }
}

@keyframes sombra-flotar {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(0.7); opacity: 0.2; }
}

.shake-anim { animation: shake 0.4s both; }
@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    30%, 70% { transform: translate3d(-4px, 0, 0); }
    50% { transform: translate3d(4px, 0, 0); }
}

/* --- ANIMACIÓN MODO ALERTA (SIRENA POLICÍA CON FILTROS) --- */
.modo-alerta #franxx-img {
    /* El !important asegura que la sirena anule el aura amarilla temporalmente si hay un error */
    animation: flotar 3s ease-in-out infinite, sirena-policia 0.4s infinite alternate !important;
}

@keyframes sirena-policia {
    0% { filter: drop-shadow(0 0 5px #ff0000) sepia(1) hue-rotate(-50deg) saturate(5); }
    100% { filter: drop-shadow(0 0 25px #ff0000) sepia(1) hue-rotate(-50deg) saturate(10); }
}