/* BlackBox Forensics - Animated Circuit Board Background */

/* Circuit Board Background Container */
.circuit-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 50%, #1a202c 100%);
    overflow: hidden;
}

/* Circuit Board Grid Pattern */
.circuit-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(66, 153, 225, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 153, 225, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

/* Circuit Trace Paths */
.circuit-trace {
    position: absolute;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(34, 197, 94, 0.8) 20%, 
        rgba(34, 197, 94, 1) 50%, 
        rgba(34, 197, 94, 0.8) 80%, 
        transparent 100%
    );
    border-radius: 1px;
    box-shadow: 
        0 0 10px rgba(34, 197, 94, 0.6),
        0 0 20px rgba(34, 197, 94, 0.3),
        0 0 30px rgba(34, 197, 94, 0.1);
}

/* Horizontal Traces */
.trace-horizontal {
    height: 2px;
    width: 0;
    animation: traceFlow 4s ease-in-out infinite;
}

/* Vertical Traces */
.trace-vertical {
    width: 2px;
    height: 0;
    animation: traceFlowVertical 4s ease-in-out infinite;
}

/* Circuit Trace Animations */
@keyframes traceFlow {
    0% {
        width: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        width: 200px;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        width: 200px;
        opacity: 0;
    }
}

@keyframes traceFlowVertical {
    0% {
        height: 0;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        height: 150px;
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        height: 150px;
        opacity: 0;
    }
}

/* Circuit Nodes/Junctions */
.circuit-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(34, 197, 94, 1) 0%, rgba(34, 197, 94, 0.5) 70%, transparent 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 15px rgba(34, 197, 94, 0.8),
        0 0 25px rgba(34, 197, 94, 0.4);
    animation: nodePulse 3s ease-in-out infinite;
}

@keyframes nodePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

/* Electrical Current Effect */
.electrical-current {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(34, 197, 94, 1);
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(34, 197, 94, 1),
        0 0 20px rgba(34, 197, 94, 0.6);
    animation: currentFlow 6s linear infinite;
}

/* Current Flow Path Animation */
@keyframes currentFlow {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    25% {
        transform: translate(200px, 0);
        opacity: 1;
    }
    30% {
        transform: translate(200px, 150px);
        opacity: 1;
    }
    50% {
        transform: translate(400px, 150px);
        opacity: 1;
    }
    55% {
        transform: translate(400px, 300px);
        opacity: 1;
    }
    75% {
        transform: translate(600px, 300px);
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translate(600px, 300px);
        opacity: 0;
    }
}

/* Multiple Current Paths */
.current-path-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.current-path-2 {
    top: 40%;
    left: 15%;
    animation-delay: 2s;
}

.current-path-3 {
    top: 60%;
    left: 5%;
    animation-delay: 4s;
}

.current-path-4 {
    top: 80%;
    left: 20%;
    animation-delay: 1s;
}

/* Specific positioning for circuit traces */
.trace-h1 { top: 15%; left: 5%; }
.trace-h2 { top: 35%; left: 10%; }
.trace-h3 { top: 55%; left: 15%; }
.trace-h4 { top: 75%; left: 8%; }
.trace-v1 { top: 20%; left: 25%; }
.trace-v2 { top: 40%; left: 45%; }
.trace-v3 { top: 60%; left: 65%; }
.trace-v4 { top: 30%; left: 85%; }

/* Specific positioning for circuit nodes */
.node-1 { top: 15%; left: 25%; }
.node-2 { top: 35%; left: 45%; }
.node-3 { top: 55%; left: 65%; }
.node-4 { top: 75%; left: 25%; }
.node-5 { top: 25%; left: 85%; }

/* Specific positioning for circuit components */
.component-1 { top: 25%; left: 35%; }
.component-2 { top: 45%; left: 55%; }
.component-3 { top: 65%; left: 75%; }
.component-4 { top: 85%; left: 15%; }

/* Circuit Component Indicators */
.circuit-component {
    position: absolute;
    width: 12px;
    height: 8px;
    background: linear-gradient(45deg, rgba(66, 153, 225, 0.8), rgba(66, 153, 225, 0.4));
    border: 1px solid rgba(66, 153, 225, 0.6);
    border-radius: 2px;
    animation: componentGlow 4s ease-in-out infinite;
}

@keyframes componentGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(66, 153, 225, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(66, 153, 225, 0.8);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .circuit-grid {
        background-size: 30px 30px;
    }
    
    .trace-horizontal {
        animation-duration: 3s;
    }
    
    .trace-vertical {
        animation-duration: 3s;
    }
    
    .electrical-current {
        animation-duration: 4s;
    }
}

/* Performance Optimizations */
.circuit-background * {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .circuit-trace,
    .electrical-current,
    .circuit-node,
    .circuit-component {
        animation: none;
    }
    
    .circuit-background {
        opacity: 0.5;
    }
}