/* ==========================================
   ANIMATION KEYFRAMES
========================================== */


/* Floating Animation */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0px);

    }

}



/* Rotation */

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* Fade In */

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/* Fade Up */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* Fade Down */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-50px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* Slide Left */

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-80px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}



/* Slide Right */

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(80px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}



/* Zoom Animation */

@keyframes zoom{

    from{

        opacity:0;

        transform:scale(.7);

    }


    to{

        opacity:1;

        transform:scale(1);

    }

}



/* Pulse Glow */

@keyframes pulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(0,198,255,.5);

    }


    70%{

        box-shadow:
        0 0 0 25px rgba(0,198,255,0);

    }


    100%{

        box-shadow:
        0 0 0 0 rgba(0,198,255,0);

    }

}



/* Spinner */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



/* Gradient Moving Background */

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }


    50%{

        background-position:100% 50%;

    }


    100%{

        background-position:0% 50%;

    }

}



/* ==========================================
   INITIAL PAGE ANIMATIONS
========================================== */


.hero-left{

    animation:slideLeft 1s ease forwards;

}


.hero-right{

    animation:slideRight 1s ease forwards;

}


.navbar{

    animation:fadeDown .8s ease forwards;

}



/* ==========================================
   SCROLL REVEAL CLASSES
========================================== */


.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

}



/* ==========================================
   CARD ANIMATION
========================================== */


.skill-card,
.project-card,
.stat,
.timeline-item{

    animation:fadeUp .8s ease forwards;

}



/* ==========================================
   PROFILE EFFECT
========================================== */


.profile-card{

    animation:

    float 5s ease-in-out infinite,

    pulse 3s infinite;

}



/* ==========================================
   BUTTON ANIMATION
========================================== */


.btn{

    position:relative;

    overflow:hidden;

}



.btn::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    background:rgba(255,255,255,.3);

    border-radius:50%;

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

    transition:.5s;

}



.btn:hover::before{

    width:300px;

    height:300px;

}



/* ==========================================
   TEXT GLOW
========================================== */


.hero h1{

    animation:fadeUp 1s ease;

}



.hero h2{

    animation:fadeUp 1.3s ease;

}



/* ==========================================
   SOCIAL ICON ANIMATION
========================================== */


.social-icons a{

    animation:zoom .7s ease;

}



.social-icons a:nth-child(2){

    animation-delay:.1s;

}



.social-icons a:nth-child(3){

    animation-delay:.2s;

}



.social-icons a:nth-child(4){

    animation-delay:.3s;

}



/* ==========================================
   LOADING ANIMATION
========================================== */


.loader span{

    animation:spin 1s linear infinite;

}



/* ==========================================
   CURSOR EFFECT SUPPORT
========================================== */


.cursor{

    width:20px;

    height:20px;

    position:fixed;

    border-radius:50%;

    background:var(--primary);

    pointer-events:none;

    mix-blend-mode:difference;

    z-index:99999;

    transition:.15s;

}



/* ==========================================
   MOBILE ANIMATION REDUCTION
========================================== */


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

    *{

        animation-duration:0.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:0.01ms!important;

    }

}