.network-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: transparent !important;
}

.network-background svg {
    width: 100%;
    height: 100%;
}

/* Líneas base casi invisibles (Regla 4) */
.connection-path {
    stroke: #00BFFF;
    stroke-width: 0.5;
    fill: none;
    opacity: 0.05;
    /* Casi invisible */
}

/* 1. Definición del Pulso en el SVG */
.data-pulse {
    stroke: url(#pulse-gradient);
    /* Usando el gradiente del SVG */
    stroke-width: 2;
    stroke-linecap: round;
    fill: none;
    filter: drop-shadow(0 0 5px #00BFFF);
    stroke-dasharray: 20 500;
    /* Guion corto y espacio largo (Regla 2) */
    animation: synapse-travel infinite linear;
}

/* 2. Animación de Trayectoria: Variación aleatoria de tiempos (nth-of-type) */
.data-pulse:nth-of-type(1) {
    animation-duration: 3.5s;
    animation-delay: -1s;
}

.data-pulse:nth-of-type(2) {
    animation-duration: 4.2s;
    animation-delay: -2s;
}

.data-pulse:nth-of-type(3) {
    animation-duration: 2.8s;
    animation-delay: -0.5s;
}

.data-pulse:nth-of-type(4) {
    animation-duration: 5.5s;
    animation-delay: -3s;
}

.data-pulse:nth-of-type(5) {
    animation-duration: 3.0s;
    animation-delay: -1.5s;
}

.data-pulse:nth-of-type(6) {
    animation-duration: 4.8s;
    animation-delay: -2.5s;
}

.data-pulse:nth-of-type(7) {
    animation-duration: 3.2s;
    animation-delay: -1.2s;
}

.data-pulse:nth-of-type(8) {
    animation-duration: 5.1s;
    animation-delay: -4s;
}

.data-pulse:nth-of-type(9) {
    animation-duration: 4.0s;
    animation-delay: -2.2s;
}

.data-pulse:nth-of-type(10) {
    animation-duration: 2.5s;
    animation-delay: -0.8s;
}

/* Más variaciones para líneas de clusters y bifurcaciones */
.data-pulse:nth-of-type(n+11) {
    animation-duration: 6s;
    animation-delay: -5s;
}

@keyframes synapse-travel {
    0% {
        stroke-dashoffset: 520;
        /* Empieza fuera */
    }

    100% {
        stroke-dashoffset: 0;
        /* Recorre la línea */
    }
}

/* 3. Efecto de 'Encendido' del Nodo (Regla 3) */
.neural-group circle {
    fill: #00BFFF;
    opacity: 0.2;
    transform-origin: center;
    transform-box: fill-box;
    filter: drop-shadow(0 0 2px #00BFFF);
    animation: node-glow 5s infinite ease-in-out;
}

@keyframes node-glow {

    0%,
    100% {
        opacity: 0.2;
        filter: drop-shadow(0 0 2px #00BFFF);
        fill: #00BFFF;
        transform: scale(1);
    }

    /* El brillo aumenta (Sinapsis) */
    50% {
        opacity: 0.8;
        filter: drop-shadow(0 0 10px #FFFFFF);
        fill: #E0FFFF;
        /* Blanco-Celeste brillante */
        transform: scale(1.1);
    }
}

/* Movimiento Global Suave */
.neural-group {
    animation: floating-network 20s infinite alternate ease-in-out;
}

@keyframes floating-network {
    0% {
        transform: translateY(0) scale(1);
    }

    100% {
        transform: translateY(-10px) scale(1.02);
    }
}