/* === NEURAL NETWORK CANVAS === */
#neuralCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        rgba(0, 15, 30, 0.8) 0%,
        rgba(5, 5, 15, 0.95) 50%,
        rgba(0, 0, 0, 1) 100%);
}

/* === NEURAL NETWORK STYLES === */
.neural-node {
    position: absolute;
    border-radius: 50%;
    background: var(--neural-primary);
    box-shadow: 0 0 20px var(--neural-glow);
    animation: neuralPulse 3s ease-in-out infinite;
}

.neural-connection {
    position: absolute;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--neural-secondary) 50%,
        transparent 100%);
    height: 1px;
    transform-origin: left center;
    animation: neuralFlow 4s ease-in-out infinite;
}

@keyframes neuralPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
        box-shadow: 0 0 20px var(--neural-glow);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 40px var(--neural-glow);
    }
}

@keyframes neuralFlow {
    0% { opacity: 0; transform: scaleX(0); }
    20% { opacity: 1; transform: scaleX(0.3); }
    80% { opacity: 1; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
}

/* === PERFORMANCE OPTIMIZATIONS === */
.neural-node,
.neural-connection {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* === REDUCED MOTION SUPPORT === */
@media (prefers-reduced-motion: reduce) {
    .neural-node,
    .neural-connection {
        animation: none;
    }

    .neural-node {
        opacity: 0.3;
    }

    .neural-connection {
        opacity: 0.1;
    }
}