/**
 * OutputLag Dynamic Background System
 * 
 * @package OutputLag
 * @since 1.0.0
 */

/* Base container - fixed behind all content */
.site-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgb(var(--rgb-primary-dark));
    overflow: hidden;
    pointer-events: none;
}

/* Layer management system */
.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, transform 0.3s ease;
    will-change: transform, opacity;
}

/* Grid Foundation Layer */
.bg-grid {
    opacity: 0.2;
    z-index: 1;
}

#bg-grid-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(var(--rgb-primary-accent), 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--rgb-primary-accent), 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridShift 120s linear infinite;
}

@keyframes gridShift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* Circuit Traces Layer - Disabled in favor of electric grid */
.bg-circuits {
    opacity: 0;
    z-index: 2;
    display: none;
}

.circuit-svg {
    width: 100%;
    height: 100%;
    filter: blur(0.5px);
}

/* Data Particles Layer */
.bg-particles {
    opacity: 0.8;
    z-index: 3;
}

.particle-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.data-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
    filter: blur(0.5px);
}

/* Ambient Glow Layer */
.bg-ambient {
    opacity: 0.4;
    z-index: 2;
    filter: blur(100px);
    mix-blend-mode: screen;
}

/* Noise Texture Layer */
.bg-noise {
    opacity: 0.02;
    z-index: 4;
    mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxmaWx0ZXIgaWQ9Im5vaXNlRmlsdGVyIj4KICAgICAgPGZlVHVyYnVsZW5jZSBiYXNlRnJlcXVlbmN5PSIwLjciIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjEiLz4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbm9pc2VGaWx0ZXIpIiBvcGFjaXR5PSIwLjAzIi8+Cjwvc3ZnPgo=');
    animation: noiseShift 0.5s steps(8) infinite;
}

@keyframes noiseShift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-10px, -10px); }
}

/* Performance quality classes */
.bg-quality-low .bg-circuits,
.bg-quality-low .bg-particles,
.bg-quality-low .bg-ambient {
    display: none;
}

.bg-quality-low .bg-grid {
    opacity: 0.05;
}

.bg-quality-medium .bg-particles .data-particle {
    animation: none;
}

.bg-quality-medium .bg-ambient {
    filter: blur(150px);
}

/* Circuit path animations */
.circuit-path {
    fill: none;
    stroke: rgba(var(--rgb-primary-accent), 0.4);
    stroke-width: 1;
    stroke-dasharray: 0 1000;
    opacity: 0;
    animation: circuitFlow 15s ease-in-out infinite;
}

.circuit-path:nth-child(2n) {
    stroke: rgba(var(--rgb-secondary-accent), 0.3);
    animation-delay: 2s;
    animation-duration: 18s;
}

.circuit-path:nth-child(3n) {
    stroke: rgba(var(--rgb-tertiary-accent), 0.2);
    animation-delay: 4s;
    animation-duration: 12s;
}

@keyframes circuitFlow {
    0% {
        stroke-dasharray: 0 1000;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    50% {
        stroke-dasharray: 200 800;
        opacity: 0.6;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        stroke-dasharray: 1000 0;
        opacity: 0;
    }
}

/* Ambient glow node animations */
.glow-node {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

@keyframes floatGlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(50px, -30px) scale(1.1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-30px, 40px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translate(40px, 20px) scale(1.05);
        opacity: 0.6;
    }
}

/* Content-aware intensity adjustments */
.home .site-background {
    opacity: 1.2;
}

.single-post .site-background {
    opacity: 0.8;
}

.archive .site-background {
    opacity: 0.9;
}

/* Scroll-based enhancements */
.scrolling .bg-layer {
    opacity: 1.3;
    transition: opacity 0.3s ease;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .site-background {
        animation: none !important;
    }
    
    .bg-layer,
    .data-particle,
    .glow-node,
    .circuit-path {
        animation: none !important;
        transition: none !important;
    }
    
    .grid-overlay {
        animation: none !important;
    }
    
    /* Maintain static visual interest */
    .bg-grid {
        opacity: 0.08;
    }
    
    .bg-circuits {
        opacity: 0.1;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .site-background {
        background: #000;
    }
    
    .bg-layer {
        opacity: 0.5;
    }
    
    .data-particle {
        filter: none;
        box-shadow: none;
    }
}

/* Print media support */
@media print {
    .site-background {
        display: none !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .bg-circuits,
    .bg-ambient {
        display: none;
    }
    
    .bg-grid {
        opacity: 0.05;
    }
    
    .bg-particles .data-particle {
        animation-duration: 8s; /* Slower for battery life */
    }
}