/* =========================================
   ANIMATIONS.CSS (Versión Responsive Final)
   Contiene: Keyframes, Efectos FX, y Lógica Visual Compleja
   ========================================= */

/* --- 1. UTILIDADES DE ANIMACIÓN --- */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-pulse-fast { animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* --- NUEVA ANIMACIÓN: SAFER (Relleno vs Hueco) --- */

@keyframes hollow-switch {
    /* Estado 1: RELLENO (Con brillo) */
    0%, 45% { 
        color: #34d399; /* Color Emerald */
        -webkit-text-stroke: 0px transparent; /* Sin borde */
        text-shadow: 0 0 20px rgba(52, 211, 153, 0.8); /* Brillo intenso */
    }
    /* Estado 2: HUECO (Solo contorno, sin brillo) */
    50%, 95% { 
        color: transparent; /* Relleno transparente */
        -webkit-text-stroke: 2px #34d399; /* Borde Emerald de 2px */
        text-shadow: none; /* Sin brillo para un look técnico limpio */
    }
    /* Pequeña pausa al final para suavizar el bucle */
    100% {
        color: #34d399;
        -webkit-text-stroke: 0px transparent;
        text-shadow: 0 0 20px rgba(52, 211, 153, 0.8);
    }
}

.animate-safety {
    display: inline-block;
    /* Aplicamos la nueva animación */
    animation: hollow-switch 4s infinite; /* 4 segundos por ciclo completo */
    
    /* Asegura que el padding no corte el borde saliente */
    padding: 0 5px; 
    cursor: default;
}

/* --- 2. HERO VISUAL (PANEL DE SERVIDOR) --- */
.visual-glow-bg {
    animation: pulse 3s ease-in-out infinite;
    position: absolute; top: 0; right: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom left, rgba(16, 185, 129, 0.2), transparent);
    border-radius: 9999px; filter: blur(64px); z-index: 0;
}

@keyframes scanline {
    0% { top: -10%; opacity: 0; }
    50% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}
.scanline {
    position: absolute; left: 0; width: 100%; height: 2px;
    background-color: rgba(52, 211, 153, 0.5); 
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
    filter: blur(1px); z-index: 1; pointer-events: none;
    animation: scanline 3s linear infinite;
}

@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.ping-wave {
    position: absolute; height: 100%; width: 100%; border-radius: 50%; 
    background-color: #34d399; opacity: 0.75; 
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes equalizer { 0%, 100% { height: 20%; opacity: 0.5; } 50% { height: 90%; opacity: 1; box-shadow: 0 0 15px #10b981; } }
.bar-1 { animation: equalizer 2.1s ease-in-out infinite 0.1s; }
.bar-2 { animation: equalizer 2.3s ease-in-out infinite 0.2s; }
.bar-3 { animation: equalizer 2.6s ease-in-out infinite 0.3s; }
.bar-4 { animation: equalizer 1.9s ease-in-out infinite 0.4s; }
.bar-5 { animation: equalizer 2.5s ease-in-out infinite 0.1s; }

/* --- 3. KOMBUCHA IOT --- */
@keyframes pulseFlow { 0%, 100% { opacity: 0.3; height: 100%; } 50% { opacity: 1; height: 80%; } }
.line { 
    width: 1px; height: 100%; 
    background: linear-gradient(to bottom, transparent, #4ade80, transparent); 
    opacity: 0.6; animation: pulseFlow 2s infinite; 
}
.line-main { width: 2px; box-shadow: 0 0 8px #4ade80; animation-duration: 3s; }
.line-1 { animation-delay: 0.1s; } 
.line-2 { animation-delay: 0.3s; }
.line-3 { animation-delay: 0.2s; } 
.line-4 { animation-delay: 0.5s; }

.neon-green-text { color: #4ade80; text-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
.neon-cyan-text { color: #22d3ee; text-shadow: 0 0 8px rgba(34, 211, 238, 0.6); }
.graph-line-green { fill: none; stroke: #4ade80; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(74,222,128,0.8)); }
.graph-line-cyan { fill: none; stroke: #22d3ee; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.8)); }

/* --- 4. MAQUINARIA (DIGITAL TWIN) --- */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-cw { animation: spin 4s linear infinite; transform-origin: center; }
.spin-ccw { animation: spin 4s linear infinite reverse; transform-origin: center; }

@keyframes floatY { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.floating { animation: floatY 6s ease-in-out infinite; }

@keyframes pulseOpacity { from { opacity: 0.4; } to { opacity: 1; filter: drop-shadow(0 0 5px #22d3ee); } }
.hud-pulse { animation: pulseOpacity 1.5s infinite alternate; }

.dot-active { 
    width: 8px; height: 8px; background-color: #22d3ee; 
    border-radius: 50%; box-shadow: 0 0 8px #22d3ee;
    animation: pulse 2s infinite; 
}

/* AJUSTE RESPONSIVE: Ancho máximo flexible */
/* Originalmente era width: 400px fixed; */
.twin-panel {
    /* Sobrescribe el width del style.css para hacerlo flexible */
    width: 90% !important; 
    max-width: 400px;
    left: 50% !important; /* Centrado en lugar de left: 28% */
    transform: translateX(-50%); /* Truco para centrar absolutamente */
}

/* --- 5. EFECTOS INTERACTIVOS --- */
.glow-tilt {
    position: absolute; inset: -4px; 
    background: linear-gradient(to right, #059669, #2dd4bf);
    border-radius: 9999px; filter: blur(10px); opacity: 0.4; 
    transition: opacity 0.5s ease;
}
.group:hover .glow-tilt { opacity: 0.8; animation: pulse 2s infinite; }

/* =========================================
   ANIMACIÓN: BLUEPRINT REVEAL
   ========================================= */

/* A. Definición del Keyframe (El desplazamiento infinito) */
@keyframes blueprint-scroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 20px; /* Mueve exactamente un cuadro para hacer el loop perfecto */
    }
}

/* B. Transiciones Suaves (La entrada y salida del efecto) */
.visual-panel.panel-light {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}

.visual-panel.panel-light::before,
.visual-panel.panel-light::after {
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* C. Estados Activos (HOVER) */

/* 1. Comportamiento de la Tarjeta Madre */
.visual-panel.panel-light:hover {
    transform: translateY(-5px); /* Se eleva */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
    border-color: var(--c-emerald-400); /* El borde externo se ilumina */
}

/* 2. Revelado de la Cuadrícula Animada */
.visual-panel.panel-light:hover::before {
    opacity: 1;
    /* Aquí activamos la animación continua */
    animation: blueprint-scroll 2s linear infinite;
}

/* 3. Revelado del Marco Interno */
.visual-panel.panel-light:hover::after {
    opacity: 1;
}

/* 4. Extra: Animación del Icono (Avión de Papel) */
/* Esto asume que el icono está dentro de la tarjeta */
.visual-panel.panel-light:hover .fa-paper-plane {
    color: var(--c-emerald-500) !important;
    transform: translate(3px, -3px) scale(1.1);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/*======================================================================================*/
/*======================================================================================*/
/*======================================================================================*/

#canvas-container {
    width: 100%;
    height: 500px; /* O la altura que prefieras */
    position: relative;
    overflow: hidden;
}
/*======================================================================================*/
/*======================================================================================*/
/*======================================================================================*/