/* 🎬 تحسينات الحركات والتأثيرات */

/* ===== حركات الشريط المتحرك ===== */
@keyframes scroll-rtl {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes scroll-ltr {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.ticker-items {
    animation: scroll-rtl 60s linear infinite !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
}

[dir="ltr"] .ticker-items {
    animation: scroll-ltr 60s linear infinite !important;
}

.ticker-items:hover {
    animation-play-state: paused !important;
}

/* ===== حركات بطاقات الخدمات ===== */
.service-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateY(0) !important;
    will-change: transform, box-shadow !important;
}

.service-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important;
}

.service-card .icon-container {
    transition: all 0.3s ease !important;
    will-change: transform !important;
}

.service-card:hover .icon-container {
    transform: scale(1.1) rotate(5deg) !important;
}

/* ===== حركات الأزرار ===== */
.btn,
.cta-btn,
.action-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, box-shadow !important;
}

.btn:hover,
.cta-btn:hover,
.action-button:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
}

.btn:active,
.cta-btn:active,
.action-button:active {
    transform: translateY(0) scale(0.98) !important;
}

/* ===== حركات الإحصائيات ===== */
.stat {
    transition: all 0.3s ease !important;
}

.stat:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

.stat strong {
    transition: all 0.3s ease !important;
    will-change: transform !important;
}

/* ===== حركات الظهور التدريجي ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* ===== تطبيق الحركات على العناصر ===== */
.section-title {
    animation: fadeInUp 0.6s ease-out !important;
}

.section-subtitle {
    animation: fadeInUp 0.6s ease-out 0.2s both !important;
}

.service-card:nth-child(odd) {
    animation: fadeInLeft 0.6s ease-out !important;
}

.service-card:nth-child(even) {
    animation: fadeInRight 0.6s ease-out !important;
}

.stat {
    animation: scaleIn 0.6s ease-out !important;
}

/* ===== حركات الصور ===== */
.hero-visual img {
    transition: opacity 0.3s ease !important;
}

.logo-image {
    transition: all 0.3s ease !important;
}

.logo-image:hover {
    transform: scale(1.05) rotate(2deg) !important;
}

/* ===== حركات النماذج ===== */
.lead-form input,
.lead-form select,
.lead-form textarea {
    transition: all 0.3s ease !important;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    transform: scale(1.02) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* ===== حركات التنقل ===== */
.nav-link {
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.nav-link::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 2px !important;
    background: currentColor !important;
    transition: width 0.3s ease !important;
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 100% !important;
}

/* ===== حركات البطاقات الشخصية ===== */
.testimonial-card {
    transition: all 0.3s ease !important;
}

.testimonial-card:hover {
    transform: translateY(-5px) rotate(1deg) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

/* ===== تحسينات الأداء ===== */
* {
    backface-visibility: hidden !important;
}

.service-card,
.stat,
.testimonial-card,
.btn,
.cta-btn,
.action-button {
    transform-style: preserve-3d !important;
}

/* ===== حركات للهاتف المحمول ===== */
@media (max-width: 768px) {
    
    /* تقليل شدة الحركات على الهاتف */
    .service-card:hover {
        transform: translateY(-4px) !important;
    }
    
    .btn:hover,
    .cta-btn:hover,
    .action-button:hover {
        transform: translateY(-1px) scale(1.01) !important;
    }
    
    .stat:hover {
        transform: translateY(-2px) !important;
    }
    
    /* تسريع الحركات على الهاتف */
    .ticker-items {
        animation-duration: 40s !important;
    }
    
    /* تقليل التأثيرات المعقدة */
    .service-card:hover .icon-container {
        transform: scale(1.05) !important;
    }
}

/* ===== حركات خاصة للعناصر المميزة ===== */
.hero-badge {
    animation: pulse 2s infinite !important;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.cta-btn {
    position: relative !important;
    overflow: hidden !important;
}

.cta-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: width 0.6s, height 0.6s !important;
}

.cta-btn:hover::after {
    width: 300px !important;
    height: 300px !important;
}

/* ===== إيقاف الحركات للمستخدمين الحساسين ===== */
@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;
    }
    
    .ticker-items {
        animation: none !important;
    }
}