/* ==========================================
   تأثيرات حركية وديناميكية - متجر سلطان العود
   متوافق مع ثيم رائد (Salla Raed Theme)
   ========================================== */

/* 1. تأثير الارتفاع المرن والظل الذهبي لبطاقات المنتجات عند مرور الماوس */
.s-product-card, .product-card, .product-box, .s-product-card-entry {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}
.s-product-card:hover, .product-card:hover, .product-box:hover, .s-product-card-entry:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 24px rgba(212, 175, 55, 0.15) !important; /* ظل ذهبي ملكي ناعم يناسب هوية العود */
}

/* 2. تأثير الزووم الانسيابي الذكي لـ بنرات التصنيفات (تم التحديث لـ خلفيات ثيم رائد) */
.banner-entry {
    overflow: hidden !important; /* يمنع الصورة من الخروج عن حدود المربع عند التكبير */
    border-radius: 8px !important; /* الحفاظ على انحناء الزوايا الفخم للبنر */
}
.banner-entry .lazy__bg, .s-category-card img, .category-item img, .category-card img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.banner-entry:hover .lazy__bg, .s-category-card:hover img, .category-item:hover img, .category-card:hover img {
    transform: scale(1.25) !important; /* زووم داخلي ناعم ومتزن بنسبة 6% */
}

/* 3. حركة النبض الفخم لزيادة معدل التحويل (CRO) على أزرار الإضافة للسلة */
.s-product-card-add-button, .btn-add-to-cart, .buy-btn, .s-add-to-cart-button, .s-product-card-content-sub-button {
    animation: luxury-pulse 3.5s infinite ease-in-out !important;
    transition: all 0.3s ease !important;
}
@keyframes luxury-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); } /* نبض ناعم جداً وغير مزعج */
    100% { transform: scale(1); }
}
.s-product-card-add-button:hover, .btn-add-to-cart:hover, .buy-btn:hover, .s-add-to-cart-button:hover, .s-product-card-content-sub-button:hover {
    filter: brightness(1.1) !important;
    transform: scale(1.04) !important;
}

/* 4. تأثير اللمعة الترويجية المتحركة للشريط الإعلاني العلوي لجذب الانتباه */
.s-announcement-bar, .top-ads-bar, .announcement-bar {
    position: relative !important;
    overflow: hidden !important;
}
.s-announcement-bar::after, .top-ads-bar::after, .announcement-bar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; 
    left: -50% !important;
    width: 30% !important; 
    height: 100% !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%) !important;
    transform: skewX(-25deg) !important;
    animation: shimmer 5s infinite ease-in-out !important;
}
@keyframes shimmer {
    0% { left: -50%; }
    25% { left: 150%; }
    100% { left: 150%; }
}