/* =========================
   CINEMATIC BACKGROUND
========================= */

.cinematic-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

/* GRID */

.cinematic-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.03) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    mask-image:
        radial-gradient(
            circle at center,
            white,
            transparent 80%
        );

}

/* LIGHT */

.cinematic-light{

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,209,255,.16),
            transparent 70%
        );

    filter:blur(80px);

    top:-200px;
    right:-150px;

    animation:
        cinematicFloat 10s ease-in-out infinite;

}

/* SECOND LIGHT */

.cinematic-light-2{

    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,255,178,.08),
            transparent 70%
        );

    filter:blur(90px);

    bottom:-200px;
    left:-150px;

    animation:
        cinematicFloat2 14s ease-in-out infinite;

}

/* ANIMATION */

@keyframes cinematicFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(40px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes cinematicFloat2{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-50px);
    }

    100%{
        transform:translateY(0px);
    }

}
.cinematic-bg{

    z-index:0;

}

.noise,
.hero-light,
.hero-overlay{

    z-index:1;

}