/* ==================================================
   PAGE BACKGROUND  
================================================== */

body{

    background:var(--gradient-background);

}


/* ==================================================
   GLOBAL BLOBS
================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background:

    radial-gradient(
        circle at 12% 15%,
        rgba(0,205,255,.28),
        transparent 34%
    ),

    radial-gradient(
        circle at 85% 18%,
        rgba(35,90,255,.34),
        transparent 40%
    ),

    radial-gradient(
        circle at 35% 85%,
        rgba(0,240,210,.20),
        transparent 35%
    ),

    radial-gradient(
        circle at 75% 72%,
        rgba(5,35,120,.28),
        transparent 42%
    );

   }


/* ==================================================
   EXTRA DEPTH
================================================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-1;

    filter:blur(100px);

   background:

    radial-gradient(
        circle at 75% 12%,
        rgba(0,45,140,.22),
        transparent 28%
    ),

    radial-gradient(
        circle at 18% 82%,
        rgba(0,90,190,.18),
        transparent 32%
    ),

    radial-gradient(
        circle at 55% 45%,
        rgba(0,60,170,.12),
        transparent 45%
    );
   
}


/* ==================================================
   HERO BLOBS
================================================== */

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(110px);

    opacity:.9;

}

.blob-1{

    width:520px;
    height:520px;

    left:-160px;
    top:-120px;

    background:var(--blob-1);

}

.blob-2{

    width:620px;
    height:620px;

    right:-180px;
    top:10%;

    background:var(--blob-2);

}

.blob-3{

    width:480px;
    height:480px;

    bottom:-160px;
    left:40%;

    background:var(--blob-3);

}


/* ==================================================
   WAVES
================================================== */

.wave{

    position:fixed;

    inset:0;

    opacity:var(--wave-opacity);

    pointer-events:none;

    background-image:

        repeating-radial-gradient(

            circle at 0% 100%,

            transparent 0,

            transparent 18px,

            rgba(255,255,255,.18) 19px,

            transparent 20px

        );

}


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

.noise{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:var(--noise-opacity);

    background-image:

        radial-gradient(circle,#000 1px,transparent 1px);

    background-size:18px 18px;

}

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

.page-background::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            transparent 45%,
            rgba(0,40,110,.08) 100%
        );

    z-index:-1;

}