/*
======================================================
 ANIMAÇÕES
 PORTFÓLIO PROFISSIONAL
======================================================
*/



/* =====================================================
                FADE IN
===================================================== */


.fade-in {


    animation:

    fadeIn .8s ease forwards;


}





@keyframes fadeIn {


    from {


        opacity:

        0;


        transform:

        translateY(30px);


    }


    to {


        opacity:

        1;


        transform:

        translateY(0);


    }


}






/* =====================================================
                SLIDE
===================================================== */


.slide-left {


    animation:

    slideLeft .8s ease forwards;


}




@keyframes slideLeft {


    from {


        opacity:

        0;


        transform:

        translateX(-50px);


    }



    to {


        opacity:

        1;


        transform:

        translateX(0);


    }



}






.slide-right {


    animation:

    slideRight .8s ease forwards;


}





@keyframes slideRight {


    from {


        opacity:

        0;


        transform:

        translateX(50px);


    }



    to {


        opacity:

        1;


        transform:

        translateX(0);


    }



}






/* =====================================================
                FOTO PERFIL
===================================================== */


.photo-border {


    animation:

    profileFloat 5s ease-in-out infinite;


}




@keyframes profileFloat {


    0%,100%{


        transform:

        translateY(0);


    }



    50%{


        transform:

        translateY(-12px);


    }


}







/* =====================================================
                BOTÕES
===================================================== */


.btn {


    position:

    relative;


    overflow:

    hidden;


}




.btn::before {


    content:"";


    position:

    absolute;


    top:

    0;


    left:

    -100%;


    width:

    100%;


    height:

    100%;


    background:

    rgba(255,255,255,.2);


    transition:

    .4s;


}




.btn:hover::before {


    left:

    100%;


}






/* =====================================================
                CARDS
===================================================== */


.service-card,


.project-card,


.article-card,


.technology-item,


.resume-section {


    animation:

    cardAnimation .7s ease;


}





@keyframes cardAnimation {


    from {


        opacity:

        0;


        transform:

        translateY(20px);


    }



    to {


        opacity:

        1;


        transform:

        translateY(0);


    }



}







/* =====================================================
                HOVER PREMIUM
===================================================== */



.project-card:hover,


.service-card:hover,


.technology-item:hover {


    box-shadow:

    0 20px 40px rgba(0,0,0,.12);


}





.technology-item img {


    transition:

    .3s;


}




.technology-item:hover img {


    transform:

    scale(1.1);


}






/* =====================================================
                TAGS
===================================================== */


.timeline-tags span,


.resume-tags span,


.technology-tags span,


.article-tags span {


    transition:

    .3s;


}




.timeline-tags span:hover,


.resume-tags span:hover,


.technology-tags span:hover,


.article-tags span:hover {


    transform:

    translateY(-3px);


}





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


.reveal {


    opacity:

    0;


    transform:

    translateY(40px);


    transition:

    all .8s ease;


}





.reveal.active {


    opacity:

    1;


    transform:

    translateY(0);


}







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


.loader {


    position:

    fixed;


    top:

    0;


    left:

    0;


    width:

    100%;


    height:

    100%;


    background:

    white;


    z-index:

    9999;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


}





.loader-circle {


    width:

    60px;


    height:

    60px;


    border-radius:

    50%;


    border:

    5px solid #e5e7eb;


    border-top-color:

    var(--primary);


    animation:

    rotateLoader 1s linear infinite;


}





@keyframes rotateLoader {


    from {


        transform:

        rotate(0);


    }



    to {


        transform:

        rotate(360deg);


    }


}





.loader.hide {


    opacity:

    0;


    visibility:

    hidden;


    transition:

    .5s;


}







/* =====================================================
                SCROLL TOP
===================================================== */


#scrollTop {


    position:

    fixed;


    right:

    25px;


    bottom:

    25px;


    width:

    45px;


    height:

    45px;


    border-radius:

    50%;


    background:

    var(--primary);


    color:

    white;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    cursor:

    pointer;


    opacity:

    0;


    visibility:

    hidden;


    transition:

    .3s;


}




#scrollTop.active {


    opacity:

    1;


    visibility:

    visible;


}





#scrollTop:hover {


    transform:

    translateY(-5px);


}

/* =====================================================
                DELAYS
===================================================== */


.delay-1{


    transition-delay:

    .1s;


}



.delay-2{


    transition-delay:

    .2s;


}



.delay-3{


    transition-delay:

    .3s;


}



.delay-4{


    transition-delay:

    .4s;


}

.project-card{


    opacity:

    1;


    transform:

    translateY(0);


    transition:

    all .3s ease;


}