/* تأثيرات الانتقال المحسنة للبطاقات */
.card-body {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.main-stat {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

.entity-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
}

/* تأثيرات الأنيميشن المتقدمة */
@keyframes cardPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes numberBounce {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(0.95); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* كلاسات التأثيرات */
.card-transitioning {
    animation: cardPulse 0.6s ease-in-out;
    filter: blur(0.5px);
    transform: translateZ(0);
}

.card-rotating {
    animation: rotateIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-fade-in {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.number-change {
    animation: numberBounce 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: numberBounce 0.4s ease, shimmer 1s ease-in-out;
}

.rotating-number {
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.3), transparent);
    background-size: 200% 100%;
    animation: slideInRight 0.4s ease, shimmer 0.8s ease-in-out;
}

/* تحسينات الأداء */
.new-card-design {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    perspective: 1000px;
}

.new-card-design * {
    will-change: auto;
}

.new-card-design.card-transitioning * {
    will-change: transform, opacity;
}

/* تأثيرات التمويه أثناء التبديل */
.card-transitioning .card-body {
    filter: blur(0.5px);
    transition: filter 0.2s ease;
}

.card-transitioning .main-stat,
.card-transitioning .entity-item {
    filter: blur(0.3px);
    transition: filter 0.2s ease;
}

/* تحسينات للشاشات الصغيرة */
@media (max-width: 768px) {
    .card-body {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .main-stat {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .entity-item {
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    @keyframes cardPulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.01); }
        100% { transform: scale(1); }
    }
    
    .card-transitioning {
        filter: blur(0.3px);
    }
}

/* تأثيرات إضافية للتفاعل */
.new-card-design:hover .card-body {
    transform: translateY(-2px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-card-design:hover .main-stat {
    transform: scale(1.02);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.new-card-design:hover .entity-item {
    transform: translateY(-1px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}