/* Add custom CSS styles below */ 
/* إعدادات الحركة الأساسية - ضفها في ملف الـ CSS الرئيسي */

:root {
    /* هذا التوقيت هو سر الحركة "المخملية" التي تراها في مواقع البراندات العالمية */
    --luxury-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* الكلاس المبدئي للعناصر المخفية */
.reveal-on-scroll {
    opacity: 0;
    /* نستخدم transform لأنه لا يعيد حساب الـ Layout (أخف على الجهاز) */
    transform: translateY(30px) scale(0.98); 
    transition: 
        opacity 1.2s var(--luxury-ease), 
        transform 1.2s var(--luxury-ease);
    
    /* أمر للمتصفح بتجهيز كرت الشاشة لهذه الطبقة */
    will-change: opacity, transform; 
}

/* الكلاس الذي سيضيفه الجافاسكريبت عند الظهور */
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* تأثير إضافي لصور المنتجات عند مرور الماوس (Hover) */
.product-card-img {
    transition: transform 0.6s var(--luxury-ease);
    will-change: transform;
}

.product-card-img:hover {
    /* تكبير بسيط جداً وأنيق */
    transform: scale(1.03); 
}