/* =========================================================
   WRATH64 STUDIOS
   GLOBAL LOADING SCREEN
   ========================================================= */


/* =========================================================
   LOADER
   ========================================================= */

.wrath64-loader {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 999999;

    display: flex;

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

    background:
        #000000;

    color:
        #00ff66;

    font-family:
        "Courier New",
        Courier,
        monospace;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.75s ease,
        visibility 0s linear 0.75s;

}



/* =========================================================
   CONTENIDO
   ========================================================= */

.wrath64-loader-inner {

    width:
        min(90%, 440px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}



/* =========================================================
   AREA DEL LOGO / IMAGEN

   Preparada para una futura imagen horizontal:
   WRATH OS
   ========================================================= */

.wrath64-loader-symbol {

    width:
        min(78vw, 360px);

    height:
        170px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom:
        28px;

}



/* =========================================================
   IMAGEN

   Tu 666.gif actual seguirá funcionando.

   Cuando hagamos WRATH OS, podrá ser horizontal
   sin deformarse.
   ========================================================= */

.wrath64-loader-symbol img {

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    object-fit:
        contain;

    image-rendering:
        auto;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

}



/* =========================================================
   TERMINAL
   ========================================================= */

.wrath64-loader-terminal {

    width: 100%;

}



/* =========================================================
   TITLE
   ========================================================= */

.wrath64-loader-title {

    margin:
        0 0 11px;

    padding: 0;

    color:
        #f1fff5;

    font-size:
        13px;

    font-weight:
        normal;

    letter-spacing:
        1.4px;

    text-shadow:

        0 0 2px
        rgba(255, 255, 255, 0.45),

        0 0 6px
        rgba(0, 255, 102, 0.50);

}



/* =========================================================
   STATUS
   ========================================================= */

.wrath64-loader-status {

    min-height:
        15px;

    margin:
        0 0 18px;

    padding: 0;

    color:
        #00ff66;

    font-size:
        10px;

    letter-spacing:
        0.6px;

    opacity:
        0.83;

    text-shadow:

        0 0 4px
        rgba(0, 255, 102, 0.35);

}



/* =========================================================
   XP-STYLE LOADING TRACK
   ========================================================= */

.wrath64-loader-progress {

    position: relative;

    width: 100%;

    height:
        15px;

    overflow:
        hidden;

    background:
        #020302;

    border-top:
        1px solid #292929;

    border-left:
        1px solid #292929;

    border-right:
        1px solid #777777;

    border-bottom:
        1px solid #777777;

    box-shadow:

        inset 0 0 6px
        rgba(0, 0, 0, 0.95),

        0 0 4px
        rgba(0, 255, 102, 0.10);

}



/* =========================================================
   MOVING BLOCKS

   IMPORTANTE:
   Esta barra ya NO representa directamente el porcentaje.

   El porcentaje lógico continúa en JS,
   pero visualmente tenemos un marquee tipo Windows XP.
   ========================================================= */

.wrath64-loader-progress-bar {

    position: absolute;

    top:
        3px;

    left:
        -82px;

    width:
        82px;

    height:
        7px;

    background:

        repeating-linear-gradient(
            to right,

            #00ff66 0px,
            #00ff66 10px,

            transparent 10px,
            transparent 15px
        );

    filter:
        drop-shadow(
            0 0 2px
            rgba(0, 255, 102, 0.65)
        );

    animation:

        wrath64-loader-blocks
        1.15s
        linear
        infinite;

    will-change:
        left;

}



/* =========================================================
   BLOCK MOVEMENT
   ========================================================= */

@keyframes wrath64-loader-blocks {

    from {

        left:
            -82px;

    }

    to {

        left:
            100%;

    }

}



/* =========================================================
   COMPLETED STATE
   ========================================================= */

.wrath64-loader-progress-bar.loader-progress-complete {

    animation-duration:
        0.55s;

}



/* =========================================================
   PERCENTAGE
   ========================================================= */

.wrath64-loader-percentage {

    margin:
        9px 0 0;

    padding: 0;

    color:
        #9cffb4;

    font-size:
        9px;

    letter-spacing:
        1px;

    opacity:
        0.78;

}



/* =========================================================
   LOADER FINISHED
   ========================================================= */

.wrath64-loader.loader-finished {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}



/* =========================================================
   BLOCK SCROLL WHILE BOOTING
   ========================================================= */

html[data-wrath64-boot]:not(
    [data-wrath64-boot="ready"]
) {

    overflow: hidden;

}



/* =========================================================
   MAIN SITE HIDDEN INITIALLY
   ========================================================= */

body > .frame {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.85s ease;

}



/* =========================================================
   SITE FADE IN
   ========================================================= */

body.site-loaded > .frame {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



/* =========================================================
   SITE READY
   ========================================================= */

html[data-wrath64-boot="ready"]
body > .frame {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}



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

@media (max-width: 767px) {

    .wrath64-loader-inner {

        width:
            min(88%, 350px);

    }


    .wrath64-loader-symbol {

        width:
            min(82vw, 300px);

        height:
            140px;

        margin-bottom:
            23px;

    }


    .wrath64-loader-title {

        font-size:
            11px;

    }


    .wrath64-loader-status {

        font-size:
            9px;

    }


    .wrath64-loader-progress {

        height:
            13px;

    }


    .wrath64-loader-progress-bar {

        top:
            3px;

        height:
            5px;

        width:
            70px;

    }


    .wrath64-loader-percentage {

        font-size:
            8px;

    }

}



/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .wrath64-loader-progress-bar {

        animation-duration:
            2.5s;

    }

}