/* ==========================================================
   Dusanglobal Design System
   Animations
   ========================================================== */

@layer animations {

    * {
        transition:
            color var(--transition),
            background-color var(--transition),
            border-color var(--transition),
            box-shadow var(--transition),
            transform var(--transition);
    }

    .hover-lift:hover {
        transform: translateY(-2px);
    }

    .fade-in {
        animation: fadeIn .5s ease forwards;
    }

    @keyframes fadeIn {

        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }

    }

    .slide-up {
        animation: slideUp .5s ease forwards;
    }

    @keyframes slideUp {

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

        to {
            opacity: 1;
            transform: translateY(0);
        }

    }
}