/* ==========================================================
   DELREX SYSTEM BOOT LOADER

   File:
   login/css/loading.css

   Complete Responsive HUD Interface

========================================================== */





/* ==========================================================
   RESET
========================================================== */


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html,
body{


    width:100%;

    height:100%;


}



body{


    overflow:hidden;


    background:#02060d;


    color:#ffffff;


    font-family:

    "Segoe UI",

    Arial,

    sans-serif;



}









/* ==========================================================
   BACKGROUND ENGINE
========================================================== */


#background-layer{


    position:fixed;


    inset:0;


    z-index:-5;



    background:


    radial-gradient(

        circle at center,

        #092039 0%,

        #050b14 42%,

        #02050a 75%,

        #000000 100%

    );



}








/*
   Vignette centrale
*/


#background-layer::after{


    content:"";


    position:absolute;


    inset:0;



    background:


    radial-gradient(

        circle,

        transparent 25%,

        rgba(0,0,0,.65) 90%

    );



}









/* ==========================================================
   HUD GRID
========================================================== */


body::before{


    content:"";


    position:fixed;


    inset:0;



    background-image:



    linear-gradient(

        rgba(0,229,255,.035) 1px,

        transparent 1px

    ),



    linear-gradient(

        90deg,

        rgba(0,229,255,.035) 1px,

        transparent 1px

    );




    background-size:


    70px 70px;



    animation:


    gridMove 45s linear infinite;



    pointer-events:none;



}






@keyframes gridMove{


from{

    transform:

    translateY(0);


}


to{


    transform:

    translateY(70px);


}


}









/* ==========================================================
   PARTICLES
========================================================== */


#particles-canvas{


    position:fixed;


    inset:0;



    width:100%;


    height:100%;



    z-index:-2;


}









/* ==========================================================
   BOOT CONTAINER
========================================================== */


.boot-container{


    position:absolute;


    inset:0;



    display:flex;


    flex-direction:column;



    align-items:center;



    justify-content:center;



    padding:20px;



}









/* ==========================================================
   RADAR SYSTEM
========================================================== */


.radar{


    position:absolute;



    width:430px;



    height:430px;



    border-radius:50%;



    opacity:.28;



    animation:


    radarRotate 45s linear infinite;



    pointer-events:none;



}








.radar-circle{


    position:absolute;



    inset:0;



    border-radius:50%;



    border:


    1px solid rgba(0,229,255,.22);



}






.circle-1{


    transform:


    scale(.45);


}



.circle-2{


    transform:


    scale(.70);


}



.circle-3{


    transform:


    scale(1);


}








.radar::after{


    content:"";


    position:absolute;



    inset:0;



    border-radius:50%;



    background:


    conic-gradient(

        transparent,

        rgba(0,229,255,.18),

        transparent 18%

    );



}








@keyframes radarRotate{


from{


    transform:

    rotate(0deg);


}



to{


    transform:

    rotate(360deg);


}



}









/* ==========================================================
   LOGO
========================================================== */


.boot-logo{


    position:relative;


    z-index:2;



}







.boot-logo img{


    width:120px;



    height:120px;



    object-fit:contain;




    filter:


    drop-shadow(

        0 0 18px rgba(0,229,255,.55)

    );



    animation:


    logoPulse 4s ease-in-out infinite;



}









@keyframes logoPulse{


0%,
100%{


    transform:

    scale(1);


}



50%{


    transform:

    scale(1.06);


}



}









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


h1{


    margin-top:32px;



    font-size:34px;



    font-weight:600;



    letter-spacing:.35em;



    text-align:center;



    text-shadow:


    0 0 20px rgba(0,229,255,.65);



}









.boot-subtitle{


    margin-top:10px;



    font-size:11px;



    letter-spacing:.45em;



    color:#72dcff;



    text-align:center;



}
/* ==========================================================
   BOOT STATUS
========================================================== */


.boot-status{


    margin-top:40px;


    width:100%;



    text-align:center;



    font-family:


    Consolas,

    "Courier New",

    monospace;



}





#boot-message{


    min-height:20px;



    font-size:14px;



    letter-spacing:.28em;



    color:#d8f7ff;



    text-shadow:


    0 0 10px rgba(0,229,255,.35);



}





#boot-step{


    margin-top:10px;



    font-size:10px;



    letter-spacing:.45em;



    color:#5d91a5;



}









/* ==========================================================
   PROGRESS SYSTEM
========================================================== */


.progress-container{


    width:340px;



    margin-top:35px;



}





.progress-header{


    display:flex;



    justify-content:space-between;



    align-items:center;



    margin-bottom:10px;



    font-family:


    Consolas,

    monospace;



    font-size:11px;



    letter-spacing:.3em;



    color:#6ba9bd;



}





#progress-value{


    color:#00e5ff;



    font-size:14px;



    text-shadow:


    0 0 12px #00e5ff;



}








.progress-track{


    position:relative;



    width:100%;



    height:8px;



    overflow:hidden;



    border-radius:20px;



    background:


    rgba(255,255,255,.05);



    border:


    1px solid rgba(0,229,255,.25);



}





#progress-bar{


    width:0%;



    height:100%;



    border-radius:20px;



    background:


    linear-gradient(

        90deg,

        #0066ff,

        #00e5ff

    );



    box-shadow:


    0 0 18px rgba(0,229,255,.9);



    transition:


    width .25s ease;



}









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


#boot-terminal{


    width:340px;



    height:115px;



    margin-top:25px;



    padding:14px;



    overflow:hidden;



    background:


    rgba(0,0,0,.45);



    border:


    1px solid rgba(0,229,255,.18);



    border-radius:6px;



    font-family:


    Consolas,

    monospace;



    font-size:11px;



    line-height:1.8;



    letter-spacing:.12em;



    color:#82dcff;



    text-align:left;



    box-shadow:


    inset 0 0 20px rgba(0,229,255,.05);



}








#boot-terminal div{


    animation:


    terminalAppear .3s ease;



}








@keyframes terminalAppear{


from{


    opacity:0;


    transform:

    translateY(8px);



}



to{


    opacity:1;


    transform:

    translateY(0);



}


}








.terminal-ok{


    color:#22c55e;


}









/* ==========================================================
   ACCESS GRANTED SCREEN
========================================================== */


#access-screen{


    position:fixed;



    inset:0;



    display:flex;



    justify-content:center;



    align-items:center;



    background:


    rgba(0,0,0,.88);



    opacity:0;



    pointer-events:none;



    transition:


    opacity .8s ease;



    z-index:100;



}








#access-screen.active{


    opacity:1;



}









.access-box{


    width:390px;



    padding:45px;



    text-align:center;



    background:


    rgba(4,15,30,.96);



    border:


    1px solid rgba(0,229,255,.35);



    border-radius:10px;



    box-shadow:


    0 0 45px rgba(0,229,255,.25);



    animation:


    accessAppear .8s ease;



}









@keyframes accessAppear{


from{


    opacity:0;



    transform:


    scale(.85);



}



to{


    opacity:1;



    transform:


    scale(1);



}


}








.access-icon{


    font-size:55px;



    color:#22c55e;



    text-shadow:


    0 0 25px #22c55e;



}








.access-box h2{


    margin-top:20px;



    font-size:32px;



    letter-spacing:.25em;



    color:white;



}








.access-line{


    width:100%;



    height:1px;



    margin:25px 0;



    background:


    rgba(0,229,255,.5);



}








.access-box p{


    color:#b8ecff;



    font-size:13px;



    letter-spacing:.3em;



}








.access-box span{


    display:block;



    margin-top:18px;



    color:#00e5ff;



    font-size:11px;



    letter-spacing:.35em;



}
/* ==========================================================
   RESPONSIVE MOBILE OPTIMIZATION
========================================================== */



@media(max-width:768px){



    /* ===============================
       GLOBAL
    =============================== */


    .boot-container{


        padding:15px;


        justify-content:center;



    }








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


    .radar{


        width:300px;


        height:300px;


        opacity:.18;



    }









    /* ===============================
       LOGO
    =============================== */


    .boot-logo img{


        width:85px;


        height:85px;



    }









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


    h1{


        margin-top:25px;



        font-size:23px;



        letter-spacing:.22em;



        white-space:nowrap;



    }








    .boot-subtitle{


        font-size:9px;



        letter-spacing:.28em;



        margin-top:8px;



    }









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


    .boot-status{


        margin-top:28px;



    }






    #boot-message{


        font-size:11px;



        letter-spacing:.15em;



        padding:0 10px;



    }








    #boot-step{


        font-size:9px;



        letter-spacing:.3em;



    }









    /* ===============================
       PROGRESS
    =============================== */


    .progress-container{


        width:


        calc(100vw - 80px);



        max-width:300px;



        margin-top:25px;



    }








    .progress-header{


        font-size:9px;



        letter-spacing:.18em;



    }








    #progress-value{


        font-size:12px;



    }








    .progress-track{


        height:7px;



    }









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


    #boot-terminal{


        width:


        calc(100vw - 80px);



        max-width:300px;



        height:90px;



        margin-top:20px;



        padding:10px;



        font-size:9px;



        line-height:1.6;



        letter-spacing:.08em;



    }









    /* ===============================
       ACCESS SCREEN
    =============================== */


    .access-box{


        width:


        calc(100vw - 50px);



        padding:30px 20px;



        border-radius:8px;



    }








    .access-icon{


        font-size:42px;



    }








    .access-box h2{


        font-size:21px;



        letter-spacing:.15em;



    }








    .access-box p{


        font-size:10px;



        letter-spacing:.18em;



    }








    .access-box span{


        font-size:9px;



        letter-spacing:.22em;



    }



}









/* ==========================================================
   SMALL PHONES
========================================================== */



@media(max-width:390px){



    .radar{


        width:240px;


        height:240px;



    }







    .boot-logo img{


        width:70px;


        height:70px;



    }








    h1{


        font-size:18px;



        letter-spacing:.15em;



    }








    .boot-subtitle{


        font-size:8px;



        letter-spacing:.22em;



    }








    .boot-status{


        margin-top:22px;



    }








    #boot-message{


        font-size:10px;



    }








    .progress-container{


        width:240px;



    }








    #boot-terminal{


        width:240px;



        height:75px;



    }





}









/* ==========================================================
   VERY SMALL HEIGHT DEVICES
   Exemple: iPhone SE paysage
========================================================== */



@media(max-height:650px){



    .boot-logo img{


        width:65px;


        height:65px;



    }







    h1{


        margin-top:15px;


        font-size:18px;



    }








    .boot-status{


        margin-top:15px;



    }








    .progress-container{


        margin-top:15px;



    }








    #boot-terminal{


        height:70px;



        margin-top:15px;



    }



}









/* ==========================================================
   PERFORMANCE MODE MOBILE
========================================================== */



@media(max-width:768px){



    body::before{


        animation-duration:80s;



        opacity:.5;



    }







    .radar{


        animation-duration:70s;



    }





}