/* ==========================================
   CUYABENO JARVIS PRELOADER
========================================== */

#cuyabeno-preloader {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 999999;

    overflow: hidden;

    background: #061719;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 1;

    visibility: visible;

    transition:
        opacity 1s ease,
        visibility 1s ease;

}


/* ==========================================
   FONDO
========================================== */

.jarvis-bg {

    position: absolute;

    inset: 0;

    background-image: url("https://www.ssturismocuyabenogroup.com/wp-content/uploads/preloader/fondo.jpg");

    background-size: cover;

    background-position: center;

    transform: scale(1.03);

    animation: bgBreath 8s ease-in-out infinite;

}


@keyframes bgBreath {

    0%,100% {
        transform: scale(1.03);
    }

    50% {
        transform: scale(1.06);
    }

}


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

.jarvis-overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at center,
            rgba(0, 230, 220, .08),
            rgba(0, 10, 15, .72) 65%,
            rgba(0, 5, 8, .9)
        );

}


/* ==========================================
   CORE
========================================== */

.jarvis-core {

    position: absolute;

    width: min(62vw, 620px);

    height: min(62vw, 620px);

    max-width: 620px;
    max-height: 620px;

    min-width: 300px;
    min-height: 300px;

}


/* ==========================================
   ANILLOS
========================================== */

.hud-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

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

    border: 1px solid rgba(46, 245, 238, .65);

    box-shadow:

        0 0 8px rgba(46,245,238,.25),

        inset 0 0 12px rgba(46,245,238,.08);

}


/* anillo exterior */

.ring-1 {

    width: 100%;
    height: 100%;

    border-top-color: transparent;
    border-bottom-color: transparent;

    animation:
        rotateClockwise 12s linear infinite;

}


/* segundo */

.ring-2 {

    width: 84%;
    height: 84%;

    border-left-color: transparent;
    border-right-color: transparent;

    animation:
        rotateCounter 8s linear infinite;

}


/* tercero */

.ring-3 {

    width: 68%;
    height: 68%;

    border-style: dashed;

    border-width: 1px;

    animation:
        rotateClockwise 18s linear infinite;

}


/* ==========================================
   ROTACIONES
========================================== */

@keyframes rotateClockwise {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

}


@keyframes rotateCounter {

    from {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

}


/* ==========================================
   CRUZ CENTRAL
========================================== */

.hud-cross {

    position: absolute;

    background: rgba(54,245,238,.35);

}


.hud-cross.horizontal {

    width: 100%;
    height: 1px;

    top: 50%;
    left: 0;

}


.hud-cross.vertical {

    height: 100%;
    width: 1px;

    left: 50%;
    top: 0;

}


/* ==========================================
   SCANNER
========================================== */

.hud-scan {

    position: absolute;

    left: 15%;

    width: 70%;

    height: 2px;

    top: 20%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(47,255,240,.1),
            rgba(47,255,240,1),
            rgba(47,255,240,.1),
            transparent
        );

    box-shadow:

        0 0 8px #2ffff1,

        0 0 25px rgba(47,255,240,.6);

    animation:

        scanMove 3s ease-in-out infinite;

}


@keyframes scanMove {

    0% {
        top: 20%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        top: 80%;
        opacity: 0;
    }

}


/* ==========================================
   CENTRO
========================================== */

.hud-center {

    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 150px;
    height: 150px;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:

        radial-gradient(
            circle,
            rgba(0,255,240,.12),
            rgba(0,20,25,.35) 65%,
            transparent
        );

    box-shadow:

        0 0 30px rgba(0,255,240,.18),

        inset 0 0 25px rgba(0,255,240,.1);

}


/* ==========================================
   PORCENTAJE
========================================== */

.loader-number {

    font-family:

        "Arial Narrow",
        Arial,
        sans-serif;

    font-size: 34px;

    font-weight: 300;

    letter-spacing: 2px;

    color: #dffffc;

    text-shadow:

        0 0 8px rgba(55,255,242,.8),

        0 0 20px rgba(55,255,242,.35);

}


/* ==========================================
   TEXTOS
========================================== */

.loader-status {

    margin-top: 8px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    letter-spacing: 3px;

    color: #42eee4;

}


.loader-sub {

    margin-top: 5px;

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 2px;

    color: rgba(220,255,252,.7);

}


/* ==========================================
   PUNTOS HUD
========================================== */

.hud-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #54fff4;

    box-shadow:

        0 0 8px #54fff4,

        0 0 20px rgba(84,255,244,.7);

    animation: dotPulse 1.5s ease-in-out infinite;

}


.dot-1 {
    top: 7%;
    left: 50%;
}

.dot-2 {
    right: 7%;
    top: 50%;
}

.dot-3 {
    bottom: 7%;
    left: 50%;
}

.dot-4 {
    left: 7%;
    top: 50%;
}


@keyframes dotPulse {

    0%,100% {
        opacity: .35;
        transform: scale(.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }

}


/* ==========================================
   INFORMACION
========================================== */

.jarvis-info {

    position: absolute;

    font-family: Arial, sans-serif;

    color: rgba(103,255,246,.9);

    letter-spacing: 3px;

    font-size: 10px;

}


.jarvis-info span {

    display: block;

}


.jarvis-info small {

    display: block;

    margin-top: 5px;

    font-size: 7px;

    letter-spacing: 2px;

    opacity: .55;

}


.top-left {
    top: 35px;
    left: 40px;
}


.top-right {

    top: 35px;
    right: 40px;

    text-align: right;

}


.bottom-left {

    bottom: 35px;
    left: 40px;

}


.bottom-right {

    bottom: 35px;
    right: 40px;

    text-align: right;

}


/* ==========================================
   DESAPARECER
========================================== */

#cuyabeno-preloader.loaded {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .jarvis-core {

        width: 88vw;
        height: 88vw;

        min-width: 280px;
        min-height: 280px;

    }

    .jarvis-info {

        font-size: 8px;

    }

    .top-left {
        top: 20px;
        left: 20px;
    }

    .top-right {
        top: 20px;
        right: 20px;
    }

    .bottom-left {
        bottom: 20px;
        left: 20px;
    }

    .bottom-right {
        bottom: 20px;
        right: 20px;
    }

}

/* ==========================================
   CATEGORÍAS DEL HUD
========================================== */

.hud-category {

    position: absolute;

    z-index: 5;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 2px;

    color: rgba(75,255,243,.85);

    text-shadow:
        0 0 6px rgba(75,255,243,.7);

    white-space: nowrap;

    opacity: .75;

}


/* pequeñas líneas de conexión */

.hud-category::before {

    content: "";

    position: absolute;

    background: rgba(75,255,243,.55);

}


/* ==========================================
   ARRIBA
========================================== */

.category-top {

    top: 18%;

    left: 50%;

    transform: translateX(-50%);

}


.category-top::before {

    width: 1px;

    height: 22px;

    left: 50%;

    top: 15px;

}


/* ==========================================
   DERECHA
========================================== */

.category-right {

    right: 12%;

    top: 50%;

    transform: translateY(-50%);

}


.category-right::before {

    width: 25px;

    height: 1px;

    right: calc(100% + 7px);

    top: 50%;

}


/* ==========================================
   ABAJO
========================================== */

.category-bottom {

    bottom: 18%;

    left: 50%;

    transform: translateX(-50%);

}


.category-bottom::before {

    width: 1px;

    height: 22px;

    left: 50%;

    bottom: 15px;

}


/* ==========================================
   IZQUIERDA
========================================== */

.category-left {

    left: 12%;

    top: 50%;

    transform: translateY(-50%);

}


.category-left::before {

    width: 25px;

    height: 1px;

    left: calc(100% + 7px);

    top: 50%;

}


/* ==========================================
   ANIMACIÓN
========================================== */

.hud-category {

    animation:
        categoryPulse 2.8s ease-in-out infinite;

}


.category-right {
    animation-delay: .5s;
}

.category-bottom {
    animation-delay: 1s;
}

.category-left {
    animation-delay: 1.5s;
}


@keyframes categoryPulse {

    0%,100% {

        opacity: .35;

        text-shadow:
            0 0 3px rgba(75,255,243,.2);

    }

    50% {

        opacity: 1;

        text-shadow:
            0 0 7px rgba(75,255,243,.8),
            0 0 15px rgba(75,255,243,.35);

    }

}
/* ==========================================
   AJUSTE DEL FONDO EN PANTALLAS ANCHAS
========================================== */

@media (min-width: 1200px) {

    .jarvis-bg {
        background-position: center 35%;
    }

}