/* =====================================================
   CYBERPUNK COMMAND CENTER
   ATMOSPHERIC EFFECTS
===================================================== */


/* ==========================
   PERSPECTIVE GRID
========================== */


#grid{

    position:fixed;

    left:0;

    bottom:-25%;

    width:100%;

    height:70%;

    z-index:var(--z-grid);

    pointer-events:none;


    background-image:

    linear-gradient(
        rgba(0,247,255,.15) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(0,247,255,.15) 1px,
        transparent 1px
    );


    background-size:

    var(--grid-size)

    var(--grid-size);


    transform:

    perspective(600px)

    rotateX(65deg);


    transform-origin:center bottom;


    animation:

    gridMove 8s linear infinite,
    gridGlow 6s ease-in-out infinite;

}



@keyframes gridMove{


    from{

        background-position:

        0 0;

    }


    to{

        background-position:

        0 var(--grid-size);

    }

}

@keyframes gridGlow{

    0%{

        opacity:.35;

        filter:brightness(.9);

    }

    50%{

        opacity:.65;

        filter:brightness(1.2);

    }

    100%{

        opacity:.35;

        filter:brightness(.9);

    }

}

#grid::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:120px;

    background:

        linear-gradient(

            rgba(0,247,255,.22),

            transparent

        );

    filter:blur(20px);

}


/* ==========================
   SCANLINES
========================== */


#scanlines{

    position:fixed;

    inset:0;

    z-index:var(--z-overlay);

    pointer-events:none;


    background:

    repeating-linear-gradient(

        0deg,

        rgba(255,255,255,.025),

        rgba(255,255,255,.025) 1px,

        transparent 2px,

        transparent 4px

    );


    opacity:.35;

}



/* ==========================
   DIGITAL NOISE
========================== */


body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:20;


    opacity:.04;


    background-image:

    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");


}



/* ==========================
   VIGNETTE
========================== */


body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:19;


    background:

    radial-gradient(

        circle,

        transparent 45%,

        rgba(0,0,0,.75)

    );

}



/* ==========================
   NEON CORNERS
========================== */


.corner{

    position:absolute;

    width:35px;

    height:35px;

}



.corner.top-left{

    top:0;

    left:0;

    border-top:2px solid var(--cyan);

    border-left:2px solid var(--cyan);

}



.corner.top-right{

    top:0;

    right:0;

    border-top:2px solid var(--cyan);

    border-right:2px solid var(--cyan);

}



.corner.bottom-left{

    bottom:0;

    left:0;

    border-bottom:2px solid var(--purple);

    border-left:2px solid var(--purple);

}



.corner.bottom-right{

    bottom:0;

    right:0;

    border-bottom:2px solid var(--purple);

    border-right:2px solid var(--purple);

}



/* ==========================
   ENERGY GLOW
========================== */


.energy{

    position:relative;

}



.energy::before{

    content:"";

    position:absolute;

    inset:-20px;


    background:

    radial-gradient(

        circle,

        rgba(0,247,255,.18),

        transparent 70%

    );


    filter:blur(25px);

    z-index:-1;


    animation:

    energyPulse 4s infinite;

}



@keyframes energyPulse{


    0%{

        opacity:.3;

    }


    50%{

        opacity:.8;

    }


    100%{

        opacity:.3;

    }

}



/* ==========================
   HOLOGRAM LIGHT BEAM
========================== */


#hologram::marker{

    display:none;

}



#hologram{

    overflow:hidden;

}



#hologram .placeholder{

    position:relative;

    z-index:2;

}



#hologram::selection{

    background:none;

}



/* ==========================
   MOBILE OPTIMIZATION
========================== */


@media(max-width:700px){

    #grid{

        opacity:.4;

    }


    #scanlines{

        opacity:.15;

    }

}


/* ==========================
   PARTICLES
========================== */


#particles{

    position:fixed;

    inset:0;

    z-index:var(--z-particles);

    pointer-events:none;

    overflow:hidden;

}



.particle{

    position:absolute;

    background:var(--cyan);

    border-radius:50%;

    box-shadow:

        0 0 8px var(--cyan),

        0 0 20px var(--cyan);

}

/* =====================================================
   HUD SCANNER
===================================================== */

.hud-card{

    position:relative;

    overflow:hidden;

}

/*
    Scanner Beam
*/

.hud-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(0,247,255,.35),

            transparent

        );

    transform:skewX(-20deg);

    opacity:0;

}

/*
    Scanner Active
*/

.hud-card.scanning::before{

    animation:

        hudScan .8s linear forwards;

    opacity:1;

}

/* ==========================
   CURSOR GLOW
========================== */

#cursorGlow{

    position:fixed;

    width:220px;

    height:220px;

    left:0;
    top:0;

    transform:translate(-50%,-50%);

    border-radius:50%;

    pointer-events:none;

    z-index:9998;

    background:

        radial-gradient(

            circle,

            rgba(0,247,255,.20),

            rgba(0,247,255,.08),

            transparent 70%

        );

    filter:blur(12px);

    transition:opacity .3s;

    mix-blend-mode:screen;

}

/* =====================================================
   HUD EFFECT ANIMATION
===================================================== */

.hud-card.scanning{

    border-color:#00f7ff;

    box-shadow:

        0 0 30px rgba(0,247,255,.25),

        inset 0 0 20px rgba(0,247,255,.08);

}