/*==================================================
PREMIUM AI SCI-FI LOADER
REACTOR CORE EDITION
==================================================*/


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

html{

    overflow-y:scroll;
    scrollbar-gutter:stable;

}


body.loading{

    height:100vh;
    overflow:hidden;

}



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


#aiLoader{

    position:fixed;

    inset:0;

    z-index:999999;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:#020303;

    opacity:1;

    visibility:visible;

    transition:
        opacity .7s ease,
        visibility .7s ease;

}


#aiLoader.hide{

    opacity:0;

    visibility:hidden;

}



/*=========================================
BACKGROUND GRID
=========================================*/


.ai-grid{

    position:absolute;

    inset:0;


    background:

        linear-gradient(
            rgba(30,215,96,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(30,215,96,.045) 1px,
            transparent 1px
        );


    background-size:45px 45px;


    animation:gridMove 14s linear infinite;

}



/*=========================================
CONTENT AREA
=========================================*/


.loader-box{

    position:relative;

    z-index:20;

    width:620px;

    max-width:92%;

    text-align:center;

}



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


.loader-core{

    position:relative;


    width:340px;

    height:340px;


    margin:0 auto 45px;


    display:flex;

    justify-content:center;

    align-items:center;


}



/*=========================================
CENTER LOGO CORE
=========================================*/


.center-logo{

    position:relative;

    z-index:50;


    width:130px;

    height:130px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:

        radial-gradient(
            circle,
            rgba(30,215,96,.18),
            #050505 65%
        );


    border:

        2px solid rgba(30,215,96,.75);



    box-shadow:


        0 0 25px rgba(30,215,96,.8),

        0 0 70px rgba(30,215,96,.35),

        inset 0 0 35px rgba(30,215,96,.25);


}



.center-logo img{


    width:90px;

    height:auto;



    filter:


        drop-shadow(0 0 12px #1ED760)

        drop-shadow(
            0 0 35px rgba(30,215,96,.8)
        );


}



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


.core-glow{


    position:absolute;


    width:180px;

    height:180px;


    border-radius:50%;


    background:


        radial-gradient(

            circle,

            rgba(30,215,96,.45),

            rgba(30,215,96,.15) 40%,

            transparent 75%

        );


    filter:blur(6px);


    animation:

        pulseCore 3s ease-in-out infinite;


}



/*=========================================
COMMON RING
=========================================*/


.ring{


    position:absolute;


    border-radius:50%;


    pointer-events:none;


}



/*=========================================
INNER HUD RING
=========================================*/


.ring1{


    width:170px;

    height:170px;



    border:

        2px solid rgba(30,215,96,.6);



    box-shadow:


        0 0 20px rgba(30,215,96,.35);



    animation:

        spin1 22s linear infinite;


}



/*=========================================
SECOND SEGMENT RING
=========================================*/


.ring2{


    width:220px;

    height:220px;



    border:

        2px dashed rgba(30,215,96,.5);



    opacity:.85;



    animation:

        spin2 35s linear infinite;


}



/*=========================================
THIRD REACTOR RING
=========================================*/


.ring3{


    width:270px;

    height:270px;



    border-top:

        3px solid #1ED760;


    border-left:

        3px solid rgba(30,215,96,.5);



    border-right:

        3px solid transparent;


    border-bottom:

        3px solid transparent;



    box-shadow:


        0 0 18px rgba(30,215,96,.4);



    opacity:.9;



    animation:

        spin1 48s linear infinite;


}



/*=========================================
OUTER TECHNOLOGY RING
=========================================*/


.ring4{


    width:320px;

    height:320px;



    border:

        2px dotted rgba(30,215,96,.35);



    opacity:.65;



    animation:

        spin2 65s linear infinite;


}

/*=========================================
ORBIT NODES
=========================================*/


.orbit{

    position:absolute;

    top:50%;
    left:50%;


    width:10px;

    height:10px;


    margin:-5px;


    border-radius:50%;


    background:

        radial-gradient(
            circle,
            #ffffff 0%,
            #1ED760 40%,
            transparent 75%
        );


    box-shadow:


        0 0 12px #1ED760,

        0 0 30px rgba(30,215,96,.9);


    z-index:15;

}



.orbit1{

    animation:

        orbit1 8s linear infinite;

}



.orbit2{


    width:7px;

    height:7px;


    margin:-3.5px;



    animation:

        orbit2 12s linear infinite;


}



/*=========================================
HUD TECH DOTS
=========================================*/


.tech-dot{


    position:absolute;


    width:6px;

    height:6px;


    border-radius:50%;


    background:#1ED760;


    box-shadow:


        0 0 12px #1ED760,

        0 0 25px rgba(30,215,96,.8);



}



.dot1{

    top:10px;

    left:50%;

}



.dot2{

    right:10px;

    top:50%;

}



.dot3{

    bottom:10px;

    left:50%;

}



.dot4{

    left:10px;

    top:50%;

}



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


.scanner{


    position:absolute;


    width:250px;

    height:250px;


    border-radius:50%;


    overflow:hidden;



}



.scanner::before{


    content:"";


    position:absolute;


    width:100%;

    height:3px;


    top:50%;


    left:0;



    background:


        linear-gradient(

            90deg,

            transparent,

            #1ED760,

            transparent

        );



    box-shadow:


        0 0 15px #1ED760,

        0 0 35px rgba(30,215,96,.8);



    transform-origin:center;



    animation:

        scan 5s linear infinite;


}


/*=========================================
RANDOM AI PARTICLES
=========================================*/

.data-particles span{

    position:absolute;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#1ED760;

    box-shadow:

        0 0 8px #1ED760,
        0 0 18px rgba(30,215,96,.9);


    animation:

        particleFloat var(--speed) linear infinite;


    opacity:0;

}


/* Random positions */

.data-particles span:nth-child(1){

    left:8%;
    bottom:10%;

    --speed:3s;

}


.data-particles span:nth-child(2){

    left:22%;
    bottom:20%;

    --speed:5s;

}


.data-particles span:nth-child(3){

    left:37%;
    bottom:5%;

    --speed:2.8s;

}


.data-particles span:nth-child(4){

    left:52%;
    bottom:15%;

    --speed:4s;

}


.data-particles span:nth-child(5){

    left:68%;
    bottom:8%;

    --speed:3.5s;

}


.data-particles span:nth-child(6){

    left:80%;
    bottom:25%;

    --speed:6s;

}


.data-particles span:nth-child(7){

    left:92%;
    bottom:12%;

    --speed:4.5s;

}


.data-particles span:nth-child(8){

    left:45%;
    bottom:30%;

    --speed:2.5s;

}



/* Random floating motion */

@keyframes particleFloat{


    0%{

        transform:

            translate3d(
                0,
                0,
                0
            )
            scale(.5);


        opacity:0;

    }



    20%{

        opacity:1;

    }



    50%{

        transform:

            translate3d(
                40px,
                -50vh,
                0
            )
            scale(1.3);


        opacity:.9;

    }



    100%{


        transform:

            translate3d(
                -30px,
                -110vh,
                0
            )
            scale(.2);



        opacity:0;


    }


}


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


.loader-title{


    margin:0 0 10px;


    color:#ffffff;


    font-size:34px;


    font-weight:700;


    letter-spacing:6px;


    text-transform:uppercase;


}



.loader-subtitle{


    margin-bottom:42px;


    color:#1ED760;


    font-size:13px;


    letter-spacing:4px;


}



/*=========================================
FOOTER
=========================================*/


.loader-footer{


    margin-top:40px;


    color:#ffffff;


    font-size:12px;


    letter-spacing:5px;


    opacity:.8;


}



/*=========================================
ANIMATIONS
=========================================*/


@keyframes gridMove{


    from{

        transform:translateY(0);

    }


    to{

        transform:translateY(45px);

    }

}



@keyframes pulseCore{


    0%,100%{

        transform:scale(1);

        opacity:1;

    }


    50%{

        transform:scale(1.15);

        opacity:.55;

    }


}



@keyframes spin1{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}



@keyframes spin2{


    from{

        transform:rotate(360deg);

    }


    to{

        transform:rotate(0deg);

    }

}



@keyframes orbit1{


    from{

        transform:

        rotate(0deg)

        translateX(125px)

        rotate(0deg);

    }


    to{

        transform:

        rotate(360deg)

        translateX(125px)

        rotate(-360deg);

    }


}



@keyframes orbit2{


    from{

        transform:

        rotate(360deg)

        translateX(150px)

        rotate(-360deg);

    }


    to{

        transform:

        rotate(0deg)

        translateX(150px)

        rotate(360deg);

    }


}



@keyframes scan{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }


}



@keyframes particle{


    0%{

        transform:translateY(0);

        opacity:0;

    }


    20%{

        opacity:1;

    }


    100%{

        transform:translateY(-110vh);

        opacity:0;

    }


}



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


@media(max-width:768px){


    .loader-core{

        width:260px;

        height:260px;

    }



    .center-logo{

        width:100px;

        height:100px;

    }



    .center-logo img{

        width:70px;

    }



    .ring1{

        width:140px;

        height:140px;

    }



    .ring2{

        width:180px;

        height:180px;

    }



    .ring3{

        width:220px;

        height:220px;

    }



    .ring4{

        width:250px;

        height:250px;

    }



    .scanner{

        width:200px;

        height:200px;

    }



    .loader-title{

        font-size:24px;

        letter-spacing:3px;

    }



    .loader-subtitle{

        font-size:11px;

        letter-spacing:2px;

    }


}