/* =====================================
   AURORA ANIMATION
===================================== */


.aurora {

    animation:
    auroraMove 12s infinite alternate ease-in-out;

}



@keyframes auroraMove {


    0% {

        transform:
        translate(0,0)
        scale(1);

    }


    50% {

        transform:
        translate(-120px,80px)
        scale(1.2);

    }


    100% {

        transform:
        translate(80px,-50px)
        scale(1);

    }


}







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


.hero-text {


    animation:

    slideLeft 1s ease forwards;

}



.hero-image {


    animation:

    slideRight 1s ease forwards;

}





@keyframes slideLeft {


    from {

        opacity:0;

        transform:
        translateX(-80px);

    }


    to {

        opacity:1;

        transform:
        translateX(0);

    }


}





@keyframes slideRight {


    from {

        opacity:0;

        transform:
        translateX(80px);

    }


    to {

        opacity:1;

        transform:
        translateX(0);

    }


}







/* =====================================
   PROFILE IMAGE FLOAT
===================================== */


.profile-card {


    animation:

    floating 5s ease-in-out infinite;

}




@keyframes floating {


    0% {


        transform:
        translateY(0);

    }


    50% {


        transform:
        translateY(-20px);

    }


    100% {


        transform:
        translateY(0);

    }


}







/* =====================================
   PROFILE GLOW
===================================== */


.profile-card::before {


    content:"";


    position:absolute;


    inset:-10px;


    border-radius:50%;


    background:

    linear-gradient(
        45deg,
        #00d9ff,
        #0077ff,
        transparent
    );


    filter:blur(30px);


    z-index:-1;


    animation:

    rotateGlow 6s linear infinite;


}



@keyframes rotateGlow {


    from {

        transform:
        rotate(0deg);

    }


    to {

        transform:
        rotate(360deg);

    }


}







/* =====================================
   CARD HOVER EFFECTS
===================================== */


.skill-card,
.project-card,
.timeline-item,
.github-card,
.contact-info,
.contact-form {


    transition:

    transform .4s ease,
    box-shadow .4s ease;


}



.skill-card:hover,
.project-card:hover {


    box-shadow:

    0 20px 50px
    rgba(0,217,255,.15);


}








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


.section {


    opacity:0;


    transform:

    translateY(40px);


    animation:

    revealSection .8s forwards;


}




@keyframes revealSection {


    to {


        opacity:1;


        transform:

        translateY(0);


    }


}








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


.primary-btn {


    position:relative;

    overflow:hidden;


}



.primary-btn::before {


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.4),

        transparent

    );


    transition:.6s;


}



.primary-btn:hover::before {


    left:100%;


}








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


.social-links a,
.contact-social a {


    transition:.3s;


}



.social-links a:hover,
.contact-social a:hover {


    transform:

    translateY(-8px)
    rotate(8deg);


}







/* =====================================
   TIMELINE ANIMATION
===================================== */


.timeline-item {


    animation:

    timelineFade 1s ease forwards;


}



@keyframes timelineFade {


    from {


        opacity:0;


        transform:

        translateX(-50px);


    }


    to {


        opacity:1;


        transform:

        translateX(0);


    }


}







/* =====================================
   TYPING CURSOR
===================================== */


#typing::after {


    content:"|";


    margin-left:5px;


    color:var(--accent);


    animation:

    blink 1s infinite;


}



@keyframes blink {


    50% {


        opacity:0;


    }


}







/* =====================================
   IMAGE HOVER
===================================== */


.project-image img {


    transition:

    transform .6s ease;


}



.project-card:hover .project-image img {


    transform:

    scale(1.1);


}







/* =====================================
   BACK TO TOP
===================================== */


#back-to-top {


    animation:

    pulse 2s infinite;


}




@keyframes pulse {


    0% {


        box-shadow:

        0 0 0 0
        rgba(0,217,255,.6);


    }



    70% {


        box-shadow:

        0 0 0 20px
        rgba(0,217,255,0);


    }



    100% {


        box-shadow:

        0 0 0 0
        rgba(0,217,255,0);


    }


}