/* ==========================================================
   CYBERFRACTAL
   05-hud.css
   Arquitectura v3.0
   HUD (Heads-Up Display)
==========================================================*/


/*==========================================================
  CAPA HUD
==========================================================*/

#hud{

    position:absolute;
    inset:0;

    z-index:20;

    pointer-events:none;

}


/*==========================================================
  RETÍCULA GENERAL
==========================================================*/

.hud-grid{

    position:absolute;
    inset:0;

    opacity:.10;

    background-image:

        linear-gradient(
            rgba(214,184,92,.12) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(214,184,92,.12) 1px,
            transparent 1px
        );

    background-size:64px 64px;

}


/*==========================================================
  RETÍCULO CENTRAL
==========================================================*/

.reticulo{

    position:absolute;

    left:50%;
    top:50%;

    width:190px;
height:190px;

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

}

.reticulo::before{

    content:"";

    position:absolute;

    left:50%;
    top:0;

    width:1px;
    height:100%;

    background:rgba(214,184,92,.28);

}

.reticulo::after{

    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:100%;
    height:1px;

    background:rgba(214,184,92,.28);

}


/*==========================================================
  CÍRCULO CENTRAL
==========================================================*/

.reticulo-circulo{

    position:absolute;

    left:50%;
    top:50%;

    width:150px;
    height:150px;

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

    border-radius:50%;

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

}


/*==========================================================
  ESQUINAS
==========================================================*/

.hud-corner{

    position:absolute;

  width:46px;
height:46px;

    border-color:rgba(255,255,255,.95);

    filter:

        drop-shadow(0 0 4px rgba(255,255,255,.30));

}

.hud-tl{

    top:18px;
    left:18px;

    border-top:2px solid;
    border-left:2px solid;

}

.hud-tr{

    top:18px;
    right:18px;

    border-top:2px solid;
    border-right:2px solid;

}

.hud-bl{

    bottom:18px;
    left:18px;

    border-bottom:2px solid;
    border-left:2px solid;

}

.hud-br{

    bottom:18px;
    right:18px;

    border-bottom:2px solid;
    border-right:2px solid;

}


/*==========================================================
  ESCALA LATERAL IZQUIERDA
==========================================================*/

.hud-scale-left{

    position:absolute;

    left:14px;

    top:50%;

    transform:translateY(-50%);

    width:14px;

    height:220px;

}

.hud-scale-left span{

    display:block;

    width:12px;

    height:1px;

    margin:8px 0;

    background:rgba(214,184,92,.45);

}


/*==========================================================
  ESCALA LATERAL DERECHA
==========================================================*/

.hud-scale-right{

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:14px;

    height:220px;

}

.hud-scale-right span{

    display:block;

    width:12px;

    height:1px;

    margin:8px 0;

    background:rgba(214,184,92,.45);

}


/*==========================================================
  TEXTO HUD
==========================================================*/

.hud-label{

    position:absolute;

    color:#d6b85c;

    font-family:"Share Tech Mono", monospace;

    font-size:14px;

    font-weight:600;

    letter-spacing:.20em;

    line-height:1;

    white-space:nowrap;

    text-transform:uppercase;

    opacity:.95;

    text-shadow:

        0 0 2px rgba(0,0,0,.95),

        0 0 6px rgba(0,0,0,.80),

        0 0 12px rgba(214,184,92,.18);

}

.hud-top-left{

    top:26px;

    left:78px;

}

.hud-top-right{

    top:26px;

    right:78px;

}

.hud-bottom-left{

    bottom:28px;

    left:28px;

}

.hud-bottom-right{

    bottom:28px;

    right:28px;

}

/*==========================================================
  ANILLO DE EXPLORACIÓN
==========================================================*/

.scan-ring{

    position:absolute;

    left:50%;
    top:50%;

    width:240px;
    height:240px;

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

    border-radius:50%;

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

    animation:hudPulse 6s ease-in-out infinite;

}


/*==========================================================
  LÍNEA DE ESCANEO
==========================================================*/

.scan-line{

    position:absolute;

    left:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(
            to right,
            transparent,
            rgba(214,184,92,.45),
            transparent
        );

    animation:hudScan 12s linear infinite;

}


/*==========================================================
  ANIMACIONES
==========================================================*/

@keyframes hudPulse{

    0%{

        transform:translate(-50%,-50%) scale(.96);

        opacity:.25;

    }

    50%{

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

        opacity:.60;

    }

    100%{

        transform:translate(-50%,-50%) scale(.96);

        opacity:.25;

    }

}

@keyframes hudScan{

    0%{

        top:0;

        opacity:0;

    }

    10%{

        opacity:.60;

    }

    90%{

        opacity:.60;

    }

    100%{

        top:100%;

        opacity:0;

    }

}

/*==========================================================
  HUD · TEMPORIZADOR
==========================================================*/

#hud-timer{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    margin:18px auto;

    user-select:none;

}

.hud-timer-title{

    font-family:"Share Tech Mono", monospace;

    font-size:13px;

    letter-spacing:5px;

    color:rgba(214,184,92,.75);

    margin-bottom:10px;

    text-shadow:

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

}

#cuenta-regresiva{

    font-family:"Share Tech Mono", monospace;

    font-size:48px;

    font-weight:600;

    color:#d6b85c;

    line-height:1;

    letter-spacing:2px;

    text-shadow:

        0 0 4px rgba(214,184,92,.40),

        0 0 14px rgba(214,184,92,.25),

        0 0 28px rgba(214,184,92,.12);

    transition:all .25s ease;

}