/* =======================================================
   Portfolio Engine
   animations.css
======================================================= */

/* ===========================
   GLOBAL TRANSITIONS
=========================== */

*{

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

/* ===========================
   FADE UP
=========================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ===========================
   FLOAT
=========================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.hero-section{

    animation:fadeUp .8s ease;

}

.hero-image img{

    animation:floating 5s ease-in-out infinite;

}

/* ===========================
   BUTTONS
=========================== */

.btn{

    transition:.25s;

}

.btn:hover{

    transform:translateY(-4px);

}

.btn-outline:hover{

    transform:translateY(-4px);

}

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

.project-card{

    animation:fadeUp .6s ease;

}

.project-card:hover{

    transform:
        translateY(-8px);

}

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

.stat-card{

    animation:fadeUp .7s ease;

}

.stat-card:hover{

    transform:translateY(-8px);

}

/* ===========================
   TECH STACK
=========================== */

.tech-stack span{

    transition:.2s;

}

.tech-stack span:hover{

    transform:translateY(-3px);

}

/* ===========================
   NAVBAR LINKS
=========================== */

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

    width:100%;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar-thumb{

    transition:.25s;

}

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

#backToTop{

    transition:.3s;

}

#backToTop:hover{

    transform:
        translateY(-5px)
        scale(1.08);

}

/* ===========================
   FADE CLASS
=========================== */

.fade-in{

    animation:fadeIn .7s ease;

}

.fade-up{

    animation:fadeUp .7s ease;

}