/**
 * MKM Bix - Animations
 * Animation keyframes and classes
 * @package MKM_Bix
 */

/* ==================== KEYFRAMES ==================== */

/* Fade */
@keyframes mkm-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mkm-fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes mkm-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mkm-fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mkm-fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes mkm-fadeInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide */
@keyframes mkm-slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes mkm-slideInDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes mkm-slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes mkm-slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Scale */
@keyframes mkm-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes mkm-scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Bounce */
@keyframes mkm-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

/* Pulse */
@keyframes mkm-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Shake */
@keyframes mkm-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* Spin */
@keyframes mkm-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Float */
@keyframes mkm-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Heartbeat */
@keyframes mkm-heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.1);
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.1);
    }
    70% {
        transform: scale(1);
    }
}

/* ==================== ANIMATION CLASSES ==================== */
.animate-fadeIn { animation: mkm-fadeIn 0.5s ease; }
.animate-fadeOut { animation: mkm-fadeOut 0.5s ease; }
.animate-fadeInUp { animation: mkm-fadeInUp 0.5s ease; }
.animate-fadeInDown { animation: mkm-fadeInDown 0.5s ease; }
.animate-fadeInLeft { animation: mkm-fadeInLeft 0.5s ease; }
.animate-fadeInRight { animation: mkm-fadeInRight 0.5s ease; }

.animate-slideInUp { animation: mkm-slideInUp 0.5s ease; }
.animate-slideInDown { animation: mkm-slideInDown 0.5s ease; }
.animate-slideInLeft { animation: mkm-slideInLeft 0.5s ease; }
.animate-slideInRight { animation: mkm-slideInRight 0.5s ease; }

.animate-scaleIn { animation: mkm-scaleIn 0.3s ease; }
.animate-scaleOut { animation: mkm-scaleOut 0.3s ease; }

.animate-bounce { animation: mkm-bounce 1s ease infinite; }
.animate-pulse { animation: mkm-pulse 2s ease infinite; }
.animate-shake { animation: mkm-shake 0.5s ease; }
.animate-spin { animation: mkm-spin 1s linear infinite; }
.animate-float { animation: mkm-float 3s ease-in-out infinite; }
.animate-heartbeat { animation: mkm-heartbeat 1.5s ease-in-out infinite; }

/* ==================== ANIMATION DELAYS ==================== */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-500 { animation-delay: 500ms; }
.delay-700 { animation-delay: 700ms; }
.delay-1000 { animation-delay: 1000ms; }

/* ==================== ANIMATION DURATIONS ==================== */
.duration-100 { animation-duration: 100ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }

/* ==================== TRANSITION CLASSES ==================== */
.transition-none { transition: none !important; }
.transition-all { transition: all var(--mkm-transition); }
.transition-colors { transition: color var(--mkm-transition), background-color var(--mkm-transition), border-color var(--mkm-transition); }
.transition-opacity { transition: opacity var(--mkm-transition); }
.transition-transform { transition: transform var(--mkm-transition); }

/* ==================== HOVER ANIMATIONS ==================== */
.hover-lift {
    transition: transform var(--mkm-transition);
}
.hover-lift:hover {
    transform: translateY(-5px);
}

.hover-scale {
    transition: transform var(--mkm-transition);
}
.hover-scale:hover {
    transform: scale(1.05);
}

.hover-rotate {
    transition: transform var(--mkm-transition);
}
.hover-rotate:hover {
    transform: rotate(5deg);
}