/* ============================================
   LIGHT MODE - AI Neural Network Background
   Subtle animated neural network pattern
   Only visible in light mode
   ============================================ */

/* Neural Network Container - Hidden in light mode */
[data-theme="light"] .ai-neural-bg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide in dark mode */
[data-theme="dark"] .ai-neural-bg,
.ai-neural-bg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Neural Network Nodes (AI particles) */
[data-theme="light"] .ai-neural-bg .neural-node {
    position: absolute !important;
    width: 6px !important;
    height: 6px !important;
    background: rgba(59, 130, 246, 0.2) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25) !important;
    animation-name: neuralPulse !important;
    animation-duration: 4s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
    display: block !important;
    visibility: visible !important;
    opacity: 0.2 !important;
    will-change: opacity, width, height, box-shadow !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    transition: none !important;
}

/* Node positions - distributed across the screen */
[data-theme="light"] .neural-node.node-1 { 
    top: 10% !important; 
    left: 15% !important; 
    animation-delay: 0s !important; 
}

[data-theme="light"] .neural-node.node-2 { 
    top: 25% !important; 
    left: 35% !important; 
    animation-delay: 0.5s !important; 
}

[data-theme="light"] .neural-node.node-3 { 
    top: 15% !important; 
    left: 60% !important; 
    animation-delay: 1s !important; 
}

[data-theme="light"] .neural-node.node-4 { 
    top: 8% !important; 
    left: 85% !important; 
    animation-delay: 1.5s !important; 
}

[data-theme="light"] .neural-node.node-5 { 
    top: 45% !important; 
    left: 20% !important; 
    animation-delay: 0.3s !important; 
}

[data-theme="light"] .neural-node.node-6 { 
    top: 55% !important; 
    left: 50% !important; 
    animation-delay: 0.8s !important; 
}

[data-theme="light"] .neural-node.node-7 { 
    top: 40% !important; 
    left: 75% !important; 
    animation-delay: 1.3s !important; 
}

[data-theme="light"] .neural-node.node-8 { 
    top: 70% !important; 
    left: 25% !important; 
    animation-delay: 0.6s !important; 
}

[data-theme="light"] .neural-node.node-9 { 
    top: 75% !important; 
    left: 55% !important; 
    animation-delay: 1.1s !important; 
}

[data-theme="light"] .neural-node.node-10 { 
    top: 65% !important; 
    left: 80% !important; 
    animation-delay: 1.6s !important; 
}

[data-theme="light"] .neural-node.node-11 { 
    top: 90% !important; 
    left: 40% !important; 
    animation-delay: 0.4s !important; 
}

[data-theme="light"] .neural-node.node-12 { 
    top: 85% !important; 
    left: 70% !important; 
    animation-delay: 0.9s !important; 
}

/* Neural Network Connections (thin lines between nodes) */
[data-theme="light"] .ai-neural-bg .neural-connection {
    position: absolute !important;
    height: 1px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(59, 130, 246, 0.15) 50%, 
        transparent 100%) !important;
    transform-origin: left center !important;
    animation-name: neuralFlow !important;
    animation-duration: 6s !important;
    animation-timing-function: ease-in-out !important;
    animation-iteration-count: infinite !important;
    animation-fill-mode: both !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Connection lines between nodes */
[data-theme="light"] .neural-connection.conn-1 {
    top: 10% !important;
    left: 15% !important;
    width: 120px !important;
    transform: rotate(25deg) !important;
    animation-delay: 0s !important;
    will-change: transform, opacity !important;
    transform-origin: left center !important;
}

[data-theme="light"] .neural-connection.conn-2 {
    top: 25% !important;
    left: 35% !important;
    width: 150px !important;
    transform: rotate(-15deg) !important;
    animation-delay: 1s !important;
    will-change: transform, opacity !important;
    transform-origin: left center !important;
}

[data-theme="light"] .neural-connection.conn-3 {
    top: 15% !important;
    left: 60% !important;
    width: 130px !important;
    transform: rotate(45deg) !important;
    animation-delay: 2s !important;
    will-change: transform, opacity !important;
    transform-origin: left center !important;
}

[data-theme="light"] .neural-connection.conn-4 {
    top: 45% !important;
    left: 20% !important;
    width: 180px !important;
    transform: rotate(-30deg) !important;
    animation-delay: 0.5s !important;
    will-change: transform, opacity !important;
    transform-origin: left center !important;
}

[data-theme="light"] .neural-connection.conn-5 {
    top: 55% !important;
    left: 50% !important;
    width: 160px !important;
    transform: rotate(20deg) !important;
    animation-delay: 1.5s !important;
    will-change: transform, opacity !important;
    transform-origin: left center !important;
}

[data-theme="light"] .neural-connection.conn-6 {
    top: 70% !important;
    left: 25% !important;
    width: 140px !important;
    transform: rotate(-40deg) !important;
    animation-delay: 2.5s !important;
    will-change: transform, opacity !important;
    transform-origin: left center !important;
}

/* Pulse animation for nodes - using opacity and box-shadow for visibility */
@keyframes neuralPulse {
    0% {
        opacity: 0.2 !important;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.2) !important;
        width: 6px !important;
        height: 6px !important;
    }
    50% {
        opacity: 0.35 !important;
        box-shadow: 0 0 16px rgba(59, 130, 246, 0.35) !important;
        width: 8px !important;
        height: 8px !important;
    }
    100% {
        opacity: 0.2 !important;
        box-shadow: 0 0 8px rgba(59, 130, 246, 0.2) !important;
        width: 6px !important;
        height: 6px !important;
    }
}

/* Flow animation for connections - opacity only to avoid transform conflicts */
@keyframes neuralFlow {
    0% {
        opacity: 0.15 !important;
    }
    50% {
        opacity: 0.25 !important;
    }
    100% {
        opacity: 0.15 !important;
    }
}

/* Hide particles-js completely in light mode - only neural network visible */
[data-theme="light"] #particles-js {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -10 !important;
    pointer-events: none !important;
}