/* =====================================================
   BLUEOUTDESIGN
   ANIMATIONS
===================================================== */


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

@keyframes fadeIn {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform:
            translateX(-30px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


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

@keyframes fadeInRight {

    from {

        opacity: 0;

        transform:
            translateX(30px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


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

#hero > div {

    animation:
        fadeIn 0.8s ease forwards;

}


/* =====================================================
   NAVIGATION
===================================================== */

nav {

    animation:
        fadeIn 0.5s ease forwards;

}


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

main article {

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;

}

main article:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(22, 135, 237, 0.3);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.25);

}


/* =====================================================
   BUTTON PULSE
===================================================== */

button:active,
#hero a:active {

    transform:
        scale(0.97);

}


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

a {

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


/* =====================================================
   INPUT
===================================================== */

input,
textarea,
select {

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


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

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

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

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

    }

}