/**
 * ETM Mobile Bar - Animations
 * کتابخانه انیمیشن‌ها
 *
 * @package ETM_MobileBar
 * @version 2.0.0
 */

/* ═══════════════════════════════════════════════════
   🎬 Keyframes عمومی
   ═══════════════════════════════════════════════════ */

/* ─── Fade ─── */
@keyframes etm-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes etm-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes etm-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes etm-fade-in-down {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes etm-fade-in-left {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes etm-fade-in-right {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ─── Slide ─── */
@keyframes etm-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes etm-slide-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes etm-slide-right {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes etm-slide-left {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* ─── Scale ─── */
@keyframes etm-scale-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes etm-scale-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.8); }
}

@keyframes etm-pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    60% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* ─── Bounce ─── */
@keyframes etm-bounce-in {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes etm-bounce-up {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

/* ─── Rotate ─── */
@keyframes etm-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes etm-spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes etm-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

/* ═══════════════════════════════════════════════════
   🎯 انیمیشن‌های FAB
   ═══════════════════════════════════════════════════ */

@keyframes etm-fab-pulse {
    0%, 100% {
        box-shadow:
            0 10px 30px rgba(124, 58, 237, 0.4),
            0 0 0 0 rgba(124, 58, 237, 0.7);
    }
    50% {
        box-shadow:
            0 10px 30px rgba(124, 58, 237, 0.4),
            0 0 0 15px rgba(124, 58, 237, 0);
    }
}

@keyframes etm-fab-glow {
    0%, 100% {
        box-shadow:
            0 10px 30px rgba(124, 58, 237, 0.5),
            0 0 20px rgba(124, 58, 237, 0.3);
    }
    50% {
        box-shadow:
            0 15px 40px rgba(124, 58, 237, 0.7),
            0 0 30px rgba(124, 58, 237, 0.5);
    }
}

@keyframes etm-fab-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
}

@keyframes etm-fab-wiggle {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════
   💫 انیمیشن‌های Badge
   ═══════════════════════════════════════════════════ */

@keyframes etm-badge-blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

@keyframes etm-badge-ping {
    0% { transform: scale(1); opacity: 1; }
    75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes etm-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ═══════════════════════════════════════════════════
   📊 انیمیشن‌های Loading
   ═══════════════════════════════════════════════════ */

@keyframes etm-loading-dots {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

@keyframes etm-loading-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes etm-shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

/* ═══════════════════════════════════════════════════
   💬 انیمیشن‌های Chat
   ═══════════════════════════════════════════════════ */

@keyframes etm-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-6px); opacity: 1; }
}

@keyframes etm-message-in {
    from {
        opacity: 0;
        transform: translateY(15px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes etm-message-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

/* ═══════════════════════════════════════════════════
   🎨 انیمیشن‌های UI
   ═══════════════════════════════════════════════════ */

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

@keyframes etm-ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes etm-tooltip-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes etm-slide-in-badge {
    from {
        opacity: 0;
        transform: scale(0.3) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* ═══════════════════════════════════════════════════
   ✨ Utility Classes
   ═══════════════════════════════════════════════════ */

.etm-animate-fade {
    animation: etm-fade-in 0.3s ease;
}

.etm-animate-fade-up {
    animation: etm-fade-in-up 0.3s ease;
}

.etm-animate-fade-down {
    animation: etm-fade-in-down 0.3s ease;
}

.etm-animate-slide-up {
    animation: etm-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.etm-animate-slide-right {
    animation: etm-slide-right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.etm-animate-slide-left {
    animation: etm-slide-left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.etm-animate-scale {
    animation: etm-scale-in 0.3s ease;
}

.etm-animate-pop {
    animation: etm-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.etm-animate-bounce {
    animation: etm-bounce-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.etm-animate-spin {
    animation: etm-spin 0.8s linear infinite;
}

.etm-animate-pulse {
    animation: etm-pulse 2s ease-in-out infinite;
}

.etm-animate-shake {
    animation: etm-shake 0.6s ease-in-out;
}

/* ═══════════════════════════════════════════════════
   🎭 Transition Classes
   ═══════════════════════════════════════════════════ */

.etm-transition-fast {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.etm-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.etm-transition-slow {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.etm-transition-bounce {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════
   ♿ Accessibility - کاهش انیمیشن
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ═══════════════════════════════════════════════════
   📱 Responsive - حفظ انیمیشن‌ها
   ═══════════════════════════════════════════════════ */

@media (hover: hover) and (pointer: fine) {
    /* فقط دسکتاپ */
    .etm-hover-lift:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .etm-hover-scale:hover {
        transform: scale(1.05);
    }

    .etm-hover-rotate:hover {
        transform: rotate(8deg);
    }
}