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

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

@keyframes slideUp {

    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

@keyframes slideLeft {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

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

@keyframes slideRight {

    from {

        opacity: 0;

        transform: translateX(-60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* ==========================================
   SCALE IN
========================================== */

@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(.8);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* ==========================================
   MODAL POP
========================================== */

@keyframes modalPop {

    from {

        opacity: 0;

        transform: scale(.85);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* ==========================================
   FLOATING
========================================== */

@keyframes floating {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0px);

    }

}

/* ==========================================
   SPIN
========================================== */

@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

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

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.05);

    }

    100% {

        transform: scale(1);

    }

}

/* ==========================================
   SHIMMER
========================================== */

@keyframes skeletonLoading {

    0% {

        opacity: .4;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: .4;

    }

}

/* ==========================================
   TOAST
========================================== */

@keyframes toastIn {

    from {

        transform: translateY(100px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}

@keyframes toastOut {

    from {

        transform: translateY(0);

        opacity: 1;

    }

    to {

        transform: translateY(100px);

        opacity: 0;

    }

}

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

@keyframes gradientMove {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

}

/* ==========================================
   BOUNCE
========================================== */

@keyframes bounce {

    0% {

        transform: translateY(0);

    }

    25% {

        transform: translateY(-8px);

    }

    50% {

        transform: translateY(0);

    }

    75% {

        transform: translateY(-4px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================
   ANIMATION CLASSES
========================================== */

.fade-in {

    animation: fadeIn .8s ease forwards;

}

.slide-up {

    animation: slideUp .8s ease forwards;

}

.slide-left {

    animation: slideLeft .8s ease forwards;

}

.slide-right {

    animation: slideRight .8s ease forwards;

}

.scale-in {

    animation: scaleIn .6s ease forwards;

}

.floating {

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

}

.pulse {

    animation: pulse 2s infinite;

}

.gradient-bg {

    background-size: 200% 200%;

    animation: gradientMove 8s ease infinite;

}

.bounce {

    animation: bounce 1s infinite;

}

/* ==========================================
   CARD HOVER
========================================== */

.prompt-card {

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.prompt-card:hover {

    transform:

        translateY(-10px)

        scale(1.02);

}

/* ==========================================
   BUTTON HOVER
========================================== */

button {

    transition:

        .3s ease;

}

button:hover {

    transform: translateY(-2px);

}

/* ==========================================
   ICON HOVER
========================================== */

.footer-icons i,

.icon-btn,

.bookmark-btn {

    transition: .3s;

}

.footer-icons i:hover,

.icon-btn:hover,

.bookmark-btn:hover {

    transform: scale(1.1);

}

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

.hero-badge {

    animation:

        floating 4s ease-in-out infinite;

}

.hero h1 {

    animation:

        fadeIn .8s ease;

}

.hero p {

    animation:

        fadeIn 1s ease;

}

.hero-search {

    animation:

        slideUp 1s ease;

}

/* ==========================================
   STATS
========================================== */

.stat-card {

    animation:

        fadeIn 1s ease;

}

/* ==========================================
   MODAL
========================================== */

.modal.active .modal-content {

    animation:

        modalPop .35s ease;

}

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

.reveal {

    opacity: 0;

    transform: translateY(50px);

    transition: all .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

/* ==========================================
   TOAST
========================================== */

#toast.show {

    animation:

        toastIn .4s ease;

}

#toast.hide {

    animation:

        toastOut .4s ease;

}