/* Matrix Grid */

.bg-grid{

    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-2;

    background-image:

        linear-gradient(rgba(0,255,120,.07) 1px, transparent 1px),

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

    background-size:40px 40px;
	filter:brightness(.25);
    animation:gridMove 12s linear infinite;

}

/* Moving Scan Line */

.bg-scan{

    position:fixed;

    left:0;
    top:-300px;

    width:100%;
    height:300px;

    pointer-events:none;

    z-index:2;

    background:linear-gradient(

        to bottom,

        rgba(0,255,120,0),

        rgba(0,255,120,.05),

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

        rgba(0,255,120,.05),

        rgba(0,255,120,0)

    );

    animation:scanDown 6s linear infinite;

}

/* CRT Noise */

.bg-noise{

    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:3;

    background:

    repeating-linear-gradient(

        0deg,

        rgba(255,255,255,.02) 0px,

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

        transparent 2px,

        transparent 4px

    );

    opacity:.35;

}

/* Vertical Grid Motion */

@keyframes gridMove{

    from{

        background-position:0 0,0 0;

    }

    to{

        background-position:0 40px,40px 0;

    }

}

/* Scan Line Animation */

@keyframes scanDown{

    from{

        transform:translateY(-350px);

    }

    to{

        transform:translateY(calc(100vh + 350px));

    }

}