/*================================
        CYBER CURSOR
================================*/


*{

    cursor:none;

}



.cyber-cursor{


    position:fixed;

    top:0;

    left:0;


    pointer-events:none;


    z-index:99999;


}



.cursor-dot{


    width:8px;

    height:8px;


    background:#00e5ff;


    border-radius:50%;


    box-shadow:

    0 0 20px #00e5ff;


    position:absolute;


    transform:

    translate(-50%,-50%);


}



.cursor-ring{


    width:45px;

    height:45px;


    border:

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


    border-radius:50%;


    position:absolute;


    transform:

    translate(-50%,-50%);


    box-shadow:

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


    transition:.15s ease;


}



.cursor-hover .cursor-ring{


    width:70px;

    height:70px;


    border-color:#8a2be2;


    box-shadow:

    0 0 35px #8a2be2;


}


.cursor-hover .cursor-dot{


    background:#8a2be2;


}
/*================================
        CYBER CURSOR
================================*/


*{

    cursor:none;

}



.cyber-cursor{

    position:fixed;

    top:0;

    left:0;

    z-index:99999;

    pointer-events:none;

}



.cursor-dot{

    width:8px;

    height:8px;

    background:#00e5ff;

    border-radius:50%;

    position:absolute;

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

    box-shadow:

    0 0 20px #00e5ff;

}



.cursor-ring{

    width:45px;

    height:45px;

    border:1px solid #00e5ff;

    border-radius:50%;

    position:absolute;

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

    box-shadow:

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

    transition:.2s;

}



/* Hover */

.cursor-hover .cursor-ring{

    width:70px;

    height:70px;

    border-color:#8a2be2;

    box-shadow:

    0 0 35px #8a2be2;

}


.cursor-hover .cursor-dot{

    background:#8a2be2;

}



/* CLICK EFFECT */


.click-effect{

    position:fixed;

    width:20px;

    height:20px;

    border-radius:50%;

    border:2px solid #00e5ff;

    pointer-events:none;

    opacity:0;

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

    z-index:99998;

}



.click-effect.active{


    animation:

    clickPulse .5s ease;


}



@keyframes clickPulse{


    0%{

        width:20px;

        height:20px;

        opacity:1;

    }


    100%{

        width:120px;

        height:120px;

        opacity:0;

    }


}
/*================================
        BUTTON CURSOR MODE
================================*/


.cursor-button .cursor-ring{

    width:75px;

    height:75px;


    border-color:#8a2be2;


    box-shadow:

    0 0 40px #8a2be2;

}



.cursor-button .cursor-dot{


    width:14px;

    height:14px;


    background:#8a2be2;


    box-shadow:

    0 0 30px #8a2be2;


}


/* Target Lines */


.cursor-button .cursor-ring::before{


    content:"";


    position:absolute;


    width:100%;

    height:1px;


    background:#00e5ff;


    top:50%;

    left:0;


}



.cursor-button .cursor-ring::after{


    content:"";


    position:absolute;


    height:100%;

    width:1px;


    background:#00e5ff;


    left:50%;

    top:0;


}