/* =========================================
   MD MARUF AL HOSSAIN PORTFOLIO
   ANIMATION SYSTEM
   ANIMATIONS.CSS PART 1/2
========================================= */



/* =========================
   GRADIENT ANIMATION
========================= */


.gradient-background {


    animation:

        gradientMove 12s
        ease-in-out
        infinite
        alternate;



}





@keyframes gradientMove {


    0% {


        transform:

            translate(
                0,
                0
            )
            scale(1);



    }



    50% {


        transform:

            translate(
                -80px,
                50px
            )
            scale(1.15);



    }



    100% {


        transform:

            translate(
                80px,
                -40px
            )
            scale(1);



    }


}








/* =========================
   HERO ENTRANCE
========================= */



.hero-content {


    animation:

        heroFade
        1.2s
        ease
        forwards;



}





.hero-image {


    animation:

        heroImageEnter
        1.5s
        ease
        forwards;



}







@keyframes heroFade {


    from {


        opacity:0;


        transform:

            translateY(60px);



    }



    to {


        opacity:1;


        transform:

            translateY(0);



    }


}





@keyframes heroImageEnter {


    from {


        opacity:0;


        transform:

            translateX(80px)
            scale(.8);



    }



    to {


        opacity:1;


        transform:

            translateX(0)
            scale(1);



    }


}








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



.hero h1 span {


    animation:

        textGlow
        4s
        ease
        infinite;



}




@keyframes textGlow {


    0% {


        filter:

            drop-shadow(
                0 0 0px
                transparent
            );


    }



    50% {


        filter:

            drop-shadow(
                0 0 25px
                rgba(
                    0,
                    168,
                    255,
                    .6
                )
            );


    }



    100% {


        filter:

            drop-shadow(
                0 0 0px
                transparent
            );


    }


}








/* =========================
   BUTTON MAGNETIC EFFECT
========================= */



.btn {


    isolation:

        isolate;



}





.btn:hover {


    animation:

        buttonBounce
        .5s
        ease;



}





@keyframes buttonBounce {


    0% {


        transform:

            translateY(0);



    }



    40% {


        transform:

            translateY(-8px);



    }



    70% {


        transform:

            translateY(3px);



    }



    100% {


        transform:

            translateY(0);



    }


}








/* =========================
   CARD 3D HOVER
========================= */



.project-card,
.service-card,
.tech-item,
.skill-category {


    transform-style:

        preserve-3d;



    perspective:

        1000px;



}






.project-card:hover {


    animation:

        cardFloat
        .8s
        ease
        forwards;



}







@keyframes cardFloat {


    from {


        transform:

            translateY(0)
            rotateX(0);



    }



    to {


        transform:

            translateY(-15px)
            rotateX(4deg);



    }


}








/* =========================
   ICON ROTATION
========================= */



.tech-item:hover i {


    animation:

        iconRotate
        .8s
        ease;



}





@keyframes iconRotate {


    0% {


        transform:

            rotate(0deg)
            scale(1);



    }



    50% {


        transform:

            rotate(180deg)
            scale(1.25);



    }



    100% {


        transform:

            rotate(360deg)
            scale(1.15);



    }


}








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


.reveal {


    animation-fill-mode:

        both;



}





.reveal:nth-child(1) {


    transition-delay:

        .1s;



}



.reveal:nth-child(2) {


    transition-delay:

        .2s;



}



.reveal:nth-child(3) {


    transition-delay:

        .3s;



}



.reveal:nth-child(4) {


    transition-delay:

        .4s;



}








/* =========================
   IMAGE FLOATING LIGHT
========================= */


.hero-image::before {


    content:"";


    position:absolute;


    width:100%;


    height:100%;



    border-radius:50%;



    background:

        radial-gradient(
            circle,
            rgba(
                139,
                92,
                246,
                .3
            ),
            transparent 60%
        );



    animation:

        lightPulse
        5s
        infinite;



}






@keyframes lightPulse {


    0%,
    100% {


        opacity:.5;


        transform:

            scale(1);



    }



    50% {


        opacity:1;


        transform:

            scale(1.15);



    }


}
/* =========================================
   ANIMATIONS.CSS PART 2/2
   FINAL MOTION POLISH
========================================= */





/* =========================
   CUSTOM CURSOR ANIMATION
========================= */


.cursor {


    animation:

        cursorPulse
        2s
        infinite;



}





@keyframes cursorPulse {


    0%,
    100% {


        box-shadow:

        0 0 10px
        rgba(
            0,
            168,
            255,
            .5
        );



    }



    50% {


        box-shadow:

        0 0 35px
        rgba(
            139,
            92,
            246,
            .9
        );



    }


}








.cursor-follower {


    transition:

        transform
        .15s
        ease;



}









/* =========================
   NAVBAR MOTION
========================= */


.navbar {


    animation:

        navbarDrop
        1s
        ease;



}





@keyframes navbarDrop {


    from {


        opacity:0;


        transform:

        translate(
            -50%,
            -40px
        );



    }



    to {


        opacity:1;


        transform:

        translate(
            -50%,
            0
        );



    }


}









/* =========================
   LINK HOVER EFFECT
========================= */


.nav-links a {


    position:relative;



}





.nav-links a::after {


    content:"";


    position:absolute;


    bottom:-8px;


    left:0;



    width:0;


    height:2px;



    background:

        var(--gradient);



    transition:

        .4s ease;



}





.nav-links a:hover::after {


    width:100%;



}









/* =========================
   GLASS LIGHT SWEEP
========================= */



.glass,
.project-card,
.service-card,
.tech-item {


    overflow:hidden;


    position:relative;



}





.glass::before,
.project-card::before,
.service-card::before,
.tech-item::before {


    content:"";


    position:absolute;



    top:0;


    left:-120%;



    width:80%;


    height:100%;



    background:

        linear-gradient(
            120deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .15
            ),
            transparent
        );



    transition:

        .8s ease;



}





.glass:hover::before,
.project-card:hover::before,
.service-card:hover::before,
.tech-item:hover::before {


    left:140%;



}








/* =========================
   SECTION TRANSITION
========================= */


section {


    animation:

        sectionFade
        .8s
        ease
        both;



}





@keyframes sectionFade {


    from {


        opacity:.7;


    }



    to {


        opacity:1;


    }


}








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


#particles {


    animation:

        particleMove
        30s
        linear
        infinite;



}





@keyframes particleMove {


    from {


        transform:

            rotate(0deg)
            scale(1);



    }



    to {


        transform:

            rotate(360deg)
            scale(1.1);



    }


}








/* =========================
   CONTACT INPUT ANIMATION
========================= */


.contact-form input,
.contact-form textarea {


    animation:

        inputAppear
        .8s
        ease
        both;



}




.contact-form input:nth-child(2) {


    animation-delay:

        .15s;



}




.contact-form textarea {


    animation-delay:

        .3s;



}





@keyframes inputAppear {


    from {


        opacity:0;


        transform:

            translateY(20px);



    }



    to {


        opacity:1;


        transform:

            translateY(0);



    }


}








/* =========================
   BUTTON SHINE
========================= */


.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 ease;



}





.primary-btn:hover::before {


    left:100%;



}








/* =========================
   MOBILE TOUCH FEEDBACK
========================= */


@media(max-width:768px){



    .project-card:active,
    .service-card:active,
    .tech-item:active {


        transform:

            scale(.96);



    }



}








/* =========================
   REDUCED MOTION
========================= */


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



    *,
    *::before,
    *::after {


        animation:none!important;


        transition:none!important;



    }



}