/* animations.css - ملف الحركات والأنيميشن (النسخة النظيفة) */

/* تعريف الحركات الأساسية */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInUpHero {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* أنيميشن الزر الأحمر (الخاص بهوية نتفلكس) */
@keyframes pulse {
    0% {
        transform: scale(1);
        /* تم التغيير من بنفسجي إلى أحمر نتفلكس */
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0.7); 
    }
    70% {
        transform: scale(1.05);
        /* تم التغيير من بنفسجي إلى أحمر نتفلكس */
        box-shadow: 0 0 0 10px rgba(229, 9, 20, 0);
    }
    100% {
        transform: scale(1);
        /* تم التغيير من بنفسجي إلى أحمر نتفلكس */
        box-shadow: 0 0 0 0 rgba(229, 9, 20, 0);
    }
}

/* أنيميشن زر الواتساب (يبقى أخضر) */
@keyframes whatsappPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


/* الأنيميشن الخاص بشريط الشعارات المتحرك (الشركاء) */
@keyframes scroll {
  /* يبدأ من الوضع الطبيعي */
  0% {
    transform: translateX(0);
  }
  /* ينتهي بعد تحريك نسخة كاملة من الشعارات 
    (بما أن لدينا نسختين، نحرك 50% من العرض الكلي) 
  */
  100% {
    transform: translateX(-50%);
  }
}


/* فئات الأنيميشن */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}
.slide-up {
    animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.slide-in-up-hero {
    animation: slideInUpHero 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.pulse-animation {
    animation: pulse 2s infinite;
}
.whatsapp-float.pulse-animation {
    animation: whatsappPulse 1.8s infinite ease-in-out;
}

/* إعدادات الأنيميشن عند التمرير (Scroll) */
.animate-on-scroll {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.animate-on-scroll.is-visible.slide-up {
    animation: slideInUp 0.7s ease-out forwards;
}
.animate-on-scroll.is-visible.fade-in {
    animation: fadeIn 1s ease-out forwards;
}