/* ==========================================
   Developer Productivity Suite Animations
========================================== */

/* Fade In */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

/* Fade Up */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* Fade Down */

@keyframes fadeDown {

    from {

        opacity: 0;

        transform: translateY(-40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* Fade Left */

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(-40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* Fade Right */

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(40px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* Zoom In */

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* Floating Effect */

@keyframes floating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0);

    }

}

/* Pulse */

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}

/* Rotate */

@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/* Glow */

@keyframes glow {

    0% {

        box-shadow: 0 0 0 rgba(99,102,241,.4);

    }

    50% {

        box-shadow: 0 0 25px rgba(99,102,241,.7);

    }

    100% {

        box-shadow: 0 0 0 rgba(99,102,241,.4);

    }

}

/* Gradient Animation */

@keyframes gradientMove {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}


/* ==========================================
   Animation Utility Classes
========================================== */

.fade-in{

    animation:fadeIn .8s ease forwards;

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom-in{

    animation:zoomIn .6s ease forwards;

}

.float{

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

}

.pulse{

    animation:pulse 2s infinite;

}

.rotate{

    animation:rotate 8s linear infinite;

}

.glow{

    animation:glow 2.5s infinite;

}

.gradient{

    background-size:200% 200%;

    animation:gradientMove 6s ease infinite;

}


/* ==========================================
   Hover Effects
========================================== */

.card{

    transition:.35s ease;

}

.card:hover{

    transform:translateY(-8px);

}

.primary-btn{

    transition:.3s ease;

}

.primary-btn:hover{

    transform:translateY(-3px);

}

.tool-card{

    transition:.35s ease;

}

.tool-card:hover{

    transform:translateY(-10px);

}

.logo{

    transition:.3s;

}

.logo:hover{

    transform:scale(1.03);

}

img{

    transition:.35s ease;

}

img:hover{

    transform:scale(1.02);

}


html{

    scroll-behavior:smooth;

}

body{

    animation:fadeIn .7s ease;

}