/* ==========================================================
   TriSaar Consulting Design System
   Animations
========================================================== */

/* ==========================================================
   Fade Up
========================================================== */

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(24px);
    }

    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(-8px);
    }

    100% {
        transform: translateY(0);
    }

}

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

.animate-fade-up {

    animation: fadeUp .8s ease forwards;

}

.animate-fade {

    animation: fadeIn .8s ease forwards;

}

.animate-floating {

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

}

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

.hover-lift {

    transition: all var(--transition-normal);

}

.hover-lift:hover {

    transform: translateY(-6px);

}

/* ==========================================================
   Button Effects
========================================================== */

.btn {

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

}

/* ==========================================================
   Image Effects
========================================================== */

.image-hover {

    overflow: hidden;

    border-radius: var(--radius-lg);

}

.image-hover img {

    transition: transform .4s ease;

}

.image-hover:hover img {

    transform: scale(1.04);

}