/* =========================================
   PARTICLE NETWORK BACKGROUND STYLES
   ========================================= */

/* Canvas Positioning */
#particle-canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1; /* Behind everything */
    background-color: transparent; /* Main background handled by body */
    pointer-events: all; /* Allows mouse interaction */
}

/* 
   Vignette Overlay 
   Adds a radial gradient to darken corners, giving depth
   and focusing attention on the center content.
*/
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1; /* Above canvas, behind content */
    background: radial-gradient(
        circle at center, 
        transparent 0%, 
        transparent 40%, 
        rgba(11, 14, 20, 0.8) 100%
    );
}

/* High-res Display Optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #particle-canvas {
        /* JS handles scaling, this ensures layout stability */
        width: 100%;
        height: 100%;
    }
}