/**
 * VIREXIS — PAGE TRANSITION V1
 * Elaborado por Miguel Minier | MDesign
 */

.vx-page-loader{
    --vx-loader-bg:#021A2D;
    --vx-loader-cyan:#20B8F2;

    position:fixed;
    inset:0;
    z-index:999999;

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

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(10,87,146,.28) 0,
            rgba(3,39,67,.12) 32%,
            rgba(2,26,45,0) 62%
        ),
        var(--vx-loader-bg);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .22s ease,
        visibility 0s linear .22s;
}


/* Estado visible */

.vx-page-loader.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity .22s ease,
        visibility 0s linear 0s;
}


/* ----------------------------------------------------------
   Ambiente
---------------------------------------------------------- */

.vx-page-loader::before{
    content:"";

    position:absolute;
    left:50%;
    top:50%;

    width:min(560px,80vw);
    height:min(560px,80vw);

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(32,184,242,.09) 0,
            rgba(32,184,242,.035) 32%,
            transparent 68%
        );

    opacity:0;

    transition:opacity .45s ease;
}


.vx-page-loader.is-visible::before{
    opacity:1;
}


/* ----------------------------------------------------------
   Contenido
---------------------------------------------------------- */

.vx-page-loader__inner{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;

    width:min(360px,78vw);

    transform:translateY(8px) scale(.985);
    opacity:0;

    transition:
        opacity .3s ease,
        transform .45s cubic-bezier(.22,.61,.36,1);
}


.vx-page-loader.is-visible .vx-page-loader__inner{
    opacity:1;
    transform:translateY(0) scale(1);
}


/* ----------------------------------------------------------
   ISOTIPO
---------------------------------------------------------- */

.vx-page-loader__mark{
    position:relative;

    width:132px;
    height:132px;

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

    filter:
        drop-shadow(0 12px 34px rgba(0,0,0,.20));
}


/*
 * Imagen base.
 * Siempre permite reconocer la forma completa.
 */

.vx-page-loader__ghost,
.vx-page-loader__fill img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;
}


/* silueta tenue */

.vx-page-loader__ghost{
    opacity:.14;

    filter:
        brightness(0)
        invert(1);
}


/*
 * Contenedor que revela la segunda copia
 * desde abajo hacia arriba.
 */

.vx-page-loader__fill{
    position:absolute;

    inset:0;

    overflow:hidden;

    clip-path:inset(100% 0 0 0);

    will-change:clip-path;
}


/* isotipo luminoso */

.vx-page-loader__fill img{
    opacity:1;

    filter:
        brightness(0)
        invert(1)
        drop-shadow(0 0 12px rgba(32,184,242,.25));
}


/*
 * El llenado no representa un porcentaje real.
 * Es una animación visual durante la navegación.
 */

.vx-page-loader.is-visible
.vx-page-loader__fill{

    animation:
        vxLoaderFill
        1.15s
        cubic-bezier(.4,0,.2,1)
        .06s
        infinite;
}


@keyframes vxLoaderFill{

    0%{
        clip-path:inset(100% 0 0 0);
    }

    18%{
        clip-path:inset(84% 0 0 0);
    }

    58%{
        clip-path:inset(35% 0 0 0);
    }

    82%{
        clip-path:inset(0 0 0 0);
    }

    100%{
        clip-path:inset(0 0 0 0);
    }

}


/* ----------------------------------------------------------
   Línea de energía
---------------------------------------------------------- */

.vx-page-loader__energy{
    position:absolute;

    left:50%;
    bottom:0;

    width:112px;
    height:1px;

    transform:translateX(-50%);

    overflow:hidden;

    background:rgba(255,255,255,.08);
}


.vx-page-loader__energy::after{
    content:"";

    position:absolute;

    top:0;
    left:-48%;

    width:48%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(32,184,242,.95),
        #fff,
        rgba(32,184,242,.95),
        transparent
    );

    box-shadow:
        0 0 10px rgba(32,184,242,.65);

    animation:
        vxLoaderEnergy
        1.15s
        ease-in-out
        infinite;
}


@keyframes vxLoaderEnergy{

    0%{
        left:-48%;
        opacity:.25;
    }

    45%{
        opacity:1;
    }

    100%{
        left:100%;
        opacity:.25;
    }

}


/* ----------------------------------------------------------
   Marca
---------------------------------------------------------- */

.vx-page-loader__brand{
    margin-top:28px;

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:.34em;

    text-transform:uppercase;

    opacity:.94;
}


.vx-page-loader__caption{
    margin-top:9px;

    color:rgba(255,255,255,.46);

    font-size:9px;
    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;
}


/* ----------------------------------------------------------
   Entrada de página
---------------------------------------------------------- */

html.vx-page-enter body{
    animation:vxPageEnter .38s ease both;
}


@keyframes vxPageEnter{

    from{
        opacity:.76;
    }

    to{
        opacity:1;
    }

}


/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media(max-width:700px){

    .vx-page-loader__mark{
        width:108px;
        height:108px;
    }

    .vx-page-loader__brand{
        margin-top:24px;
        font-size:11px;
        letter-spacing:.30em;
    }

    .vx-page-loader__caption{
        font-size:8px;
    }

}


/* ----------------------------------------------------------
   Accesibilidad
---------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){

    .vx-page-loader,
    .vx-page-loader__inner{
        transition:none;
    }

    .vx-page-loader__fill,
    .vx-page-loader__energy::after,
    html.vx-page-enter body{
        animation:none !important;
    }

    .vx-page-loader__fill{
        clip-path:inset(0 0 0 0);
    }

}