.bg-gradient, .bg-noise, .bg-grid, .bg-vignette,
.particle-container, .circuit-container, .data-flow, .binary-rain {
    pointer-events: none;
}
.bg-gradient {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, #060a12 0%, #0c1220 50%, #080e1a 100%);
    z-index: 0;
}
.bg-noise {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=');
    z-index: 1; opacity: 0.3;
}
.bg-grid {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-size: 60px 60px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    z-index: 2;
}
.bg-vignette {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, var(--color-darker) 130%);
    z-index: 3;
}
.bg-glow {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    overflow: hidden; z-index: 4; pointer-events: none;
}
.glow-point {
    position: absolute; border-radius: 50%;
    filter: blur(100px); opacity: 0.35;
}
.glow-point:nth-child(1) {
    width: 500px; height: 500px; top: -250px; left: 15%;
    background: radial-gradient(circle, rgba(80, 120, 160, 0.35), transparent 70%);
    animation: glow-drift 28s ease-in-out infinite alternate;
}
.glow-point:nth-child(2) {
    width: 600px; height: 600px; top: 35%; right: -250px;
    background: radial-gradient(circle, rgba(100, 140, 170, 0.25), transparent 70%);
    animation: glow-drift 35s ease-in-out infinite alternate-reverse;
}
.glow-point:nth-child(3) {
    width: 450px; height: 450px; bottom: -200px; left: 40%;
    background: radial-gradient(circle, rgba(130, 165, 190, 0.2), transparent 70%);
    animation: glow-drift 22s ease-in-out infinite alternate;
}
@keyframes glow-drift {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(60px, 40px) scale(1.05); }
    100% { transform: translate(-40px, 60px) scale(0.95); }
}

/* Particles */
.particle-container {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 5; opacity: 0;
    animation: particles-in 4s ease-out 0.5s forwards; overflow: hidden;
}
@keyframes particles-in { to { opacity: 0.6; } }
.particle {
    position: absolute;
    background: rgba(150, 180, 200, 0.18);
    border-radius: 50%;
    filter: blur(1px);
    animation: float-particle var(--duration) linear infinite;
}
/* Circuits */
.circuit-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5; opacity: 0;
    animation: particles-in 5s ease-out 2s forwards; overflow: hidden;
}
.circuit {
    position: absolute;
    background: linear-gradient(90deg, rgba(147,197,253,0) 0%, rgba(147,197,253,0.4) 50%, rgba(147,197,253,0) 100%);
    height: 1px; transform-origin: left center;
    animation: circuit-animate var(--duration) ease-out infinite var(--delay) both;
}
@keyframes circuit-animate {
    0% { transform: scaleX(0); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* Data flow */
.data-flow {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5; overflow: hidden;
}
.data-stream {
    position: absolute;
    background: linear-gradient(90deg, rgba(78,142,184,0) 0%, rgba(78,142,184,0.05) 50%, rgba(78,142,184,0) 100%);
    height: 2px; opacity: 0; transform-origin: left center;
    animation: data-stream-animate var(--duration) ease-out 1 var(--delay) forwards;
}
@keyframes data-stream-animate {
    0% { transform: scaleX(0); opacity: 0; }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% { transform: scaleX(1); opacity: 0; }
}

/* Binary rain */
.binary-rain {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5; overflow: hidden;
    opacity: 0; animation: fade-in-slow 10s ease-out 1s forwards;
}
@keyframes fade-in-slow { to { opacity: 0.27; } }
.binary-column {
    position: absolute; top: -20px;
    color: rgba(147, 197, 253, 0.7);
    font-family: monospace; font-size: 14px; line-height: 1.2;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(99, 130, 246, 0.6);
    animation: binary-fall linear infinite;
}
@keyframes binary-fall {
    0% { transform: translateY(0); opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translateY(calc(100vh + 100px)); opacity: 0; }
}

@keyframes float-particle {
    0% { transform: translate3d(var(--x), 100vh, 0); opacity: 0; }
    10% { opacity: var(--o); }
    90% { opacity: var(--o); }
    100% { transform: translate3d(var(--x2), -20px, 0); opacity: 0; }
}