/* ==========================================================
   CYBERFRACTAL
   04-observatorio.css
   Arquitectura v3.0
========================================================== */


/* ==========================================================
   OBSERVATORIO
========================================================== */

#observatorio{

    position:relative;

    width:100%;

    max-width:820px;

    margin:auto;

}

/* ==========================================================
   MARCO
========================================================== */

#marco-observatorio{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border:1px solid rgba(214,184,92,.30);

    border-radius:22px;

    background:#000;

    box-shadow:

        0 0 10px rgba(214,184,92,.08),

        inset 0 0 20px rgba(214,184,92,.05);

}

/* ==========================================================
   VIDEO
========================================================== */

#video-compases{

    position:absolute;

    inset:0;

    z-index:1;

}

.video-compases{

    display:block;

    width:100%;

    height:100%;

    object-fit:contain;
background:#000;

    object-position:center;

  opacity:.62;

filter:
    brightness(.95)
    contrast(1.15)
    saturate(.90);

}


/* ==========================================================
   CAMPO FRACTAL
========================================================== */

#campo-fractal{

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:

        radial-gradient(

            circle,

            rgba(214,184,92,.02)

            transparent 72%

        );

}


/* ==========================================================
   CRISTAL
========================================================== */

#marco-observatorio::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:4;

    pointer-events:none;

    background:

        linear-gradient(

            to bottom,

            rgba(255,255,255,.08),

            rgba(255,255,255,.02) 14%,

            transparent 34%

        );

}


/* ==========================================================
   HALO
========================================================== */

#marco-observatorio::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:32%;

    aspect-ratio:1;

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

    border-radius:50%;

    z-index:5;

    pointer-events:none;

    background:

    radial-gradient(

        circle,

        rgba(214,184,92,.05),

        rgba(214,184,92,.02) 55%,

        transparent 78%

    );

}