/**
 * Quantum Network - Advanced Futuristic Pattern
 */

.quantum-network {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Quantum Circuit Pattern */
.quantum-circuit {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        /* Quantum gates */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(124, 58, 237, 0.03) 100px,
            rgba(124, 58, 237, 0.03) 101px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(37, 99, 235, 0.03) 100px,
            rgba(37, 99, 235, 0.03) 101px
        );
}

/* Quantum Nodes with Glow */
.quantum-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    border-radius: 50%;
    box-shadow: 
        0 0 10px rgba(124, 58, 237, 0.5),
        0 0 20px rgba(124, 58, 237, 0.3);
}

/* Create a pattern of nodes */
.quantum-node:nth-child(1) { top: 10%; left: 15%; }
.quantum-node:nth-child(2) { top: 25%; left: 85%; }
.quantum-node:nth-child(3) { top: 60%; left: 50%; }
.quantum-node:nth-child(4) { top: 80%; left: 20%; }
.quantum-node:nth-child(5) { top: 45%; left: 75%; }

/* Blockchain Connections */
.blockchain-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(37, 99, 235, 0.3) 10%,
        rgba(37, 99, 235, 0.5) 50%,
        rgba(37, 99, 235, 0.3) 90%,
        transparent 100%
    );
    transform-origin: left center;
}

/* Data Flow Particles */
.data-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #06b6d4;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.8);
    opacity: 0;
}

/* Hexagonal Mesh Overlay */
.hex-mesh {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='86' viewBox='0 0 100 86' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0l25 14.4v28.8L50 57.6 25 43.2V14.4L50 0z' fill='none' stroke='rgba(124,58,237,0.1)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 100px 86px;
}

/* Quantum Entanglement Waves */
.entanglement-wave {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(124, 58, 237, 0.4) 45%,
        rgba(37, 99, 235, 0.6) 50%,
        rgba(6, 182, 212, 0.4) 55%,
        transparent 100%
    );
    opacity: 0;
}

/* Static Quantum Field */
.quantum-field {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        /* Central quantum core */
        radial-gradient(circle at 50% 50%, 
            rgba(124, 58, 237, 0.1) 0%, 
            transparent 30%
        ),
        /* Distributed nodes */
        radial-gradient(circle at 20% 30%, 
            rgba(37, 99, 235, 0.08) 0%, 
            transparent 20%
        ),
        radial-gradient(circle at 80% 70%, 
            rgba(6, 182, 212, 0.08) 0%, 
            transparent 20%
        ),
        radial-gradient(circle at 70% 20%, 
            rgba(124, 58, 237, 0.08) 0%, 
            transparent 20%
        ),
        radial-gradient(circle at 30% 80%, 
            rgba(37, 99, 235, 0.08) 0%, 
            transparent 20%
        );
}

/* Animated Scanning Line (optional - subtle) */
.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(6, 182, 212, 0.5) 50%,
        transparent 100%
    );
    top: 0;
    opacity: 0;
    animation: scan 8s ease-in-out infinite;
}

@keyframes scan {
    0%, 100% { 
        top: 0;
        opacity: 0;
    }
    10% {
        opacity: 0.5;
    }
    90% {
        opacity: 0.5;
    }
    50% {
        top: 100%;
    }
}

/* Replace the basic quantum-dots with this advanced pattern */
.quantum-blockchain-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        /* Node clusters */
        radial-gradient(circle at 15% 15%, #7c3aed 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 15%, rgba(124, 58, 237, 0.15) 15px, transparent 15px),
        
        radial-gradient(circle at 85% 15%, #2563eb 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 15%, rgba(37, 99, 235, 0.15) 15px, transparent 15px),
        
        radial-gradient(circle at 50% 50%, #06b6d4 2px, transparent 2px),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.1) 20px, transparent 20px),
        
        radial-gradient(circle at 15% 85%, #7c3aed 1.5px, transparent 1.5px),
        radial-gradient(circle at 15% 85%, rgba(124, 58, 237, 0.15) 15px, transparent 15px),
        
        radial-gradient(circle at 85% 85%, #2563eb 1.5px, transparent 1.5px),
        radial-gradient(circle at 85% 85%, rgba(37, 99, 235, 0.15) 15px, transparent 15px),
        
        /* Connection grid */
        linear-gradient(to right, rgba(124, 58, 237, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
        
        /* Diagonal quantum paths */
        linear-gradient(45deg, 
            transparent 48%, 
            rgba(6, 182, 212, 0.03) 49%, 
            rgba(6, 182, 212, 0.03) 51%, 
            transparent 52%
        ),
        linear-gradient(-45deg, 
            transparent 48%, 
            rgba(124, 58, 237, 0.03) 49%, 
            rgba(124, 58, 237, 0.03) 51%, 
            transparent 52%
        );
    
    background-size: 
        200px 200px, 200px 200px,
        200px 200px, 200px 200px,
        200px 200px, 200px 200px,
        200px 200px, 200px 200px,
        200px 200px, 200px 200px,
        50px 50px,
        50px 50px,
        100px 100px,
        100px 100px;
        
    background-position:
        0 0, 0 0,
        0 0, 0 0,
        0 0, 0 0,
        0 0, 0 0,
        0 0, 0 0,
        0 0,
        0 0,
        0 0,
        0 0;
}