/* ==========================================================
   CYBERFRACTAL
   03-escenario.css
   Arquitectura v3.0
==========================================================*/


/* ==========================================================
   OVERLAY
========================================================== */

#overlay{

    position:fixed;

    inset:0;

    z-index:-30;

    pointer-events:none;

    background:

        rgba(0,0,0,.42);

}


/* ==========================================================
   NEBULOSA
========================================================== */

#nebula{

    position:fixed;

    inset:0;

    z-index:-20;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 25% 30%,
            rgba(214,184,92,.06),
            transparent 32%
        ),

        radial-gradient(
            circle at 72% 65%,
            rgba(90,120,180,.05),
            transparent 38%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(214,184,92,.025),
            transparent 62%
        );

}


/* ==========================================================
   CAMPO DE ESTRELLAS
========================================================== */

#canvas-estrellas{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    z-index:-10;

    pointer-events:none;

}


/* ==========================================================
   OSCURECIMIENTO SUPERIOR
========================================================== */

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-5;

    pointer-events:none;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.18),

            transparent 25%,

            transparent 75%,

            rgba(0,0,0,.22)

        );

}


/* ==========================================================
   VIÑETA SUAVE
========================================================== */

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-4;

    pointer-events:none;

    background:

        radial-gradient(

            ellipse at center,

            transparent 55%,

            rgba(0,0,0,.12) 82%,

            rgba(0,0,0,.30) 100%

        );

}


/* ==========================================================
   OPTIMIZACIÓN
========================================================== */

#overlay,
#nebula,
#canvas-estrellas{

    user-select:none;

    -webkit-user-select:none;

    -moz-user-select:none;

    -ms-user-select:none;

}