/* Add custom CSS styles below */ 
:root {
    --main-color: #a358e4;
    --second-color:#4cc8eb ;
    --third-color: white;
    --fourth-color: white;
    --body:#020b32;
  
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ==========================================
   1. التنسيق الذكي والموزون لعناوين الأقسام (الموبايل أولاً)
   ========================================== */
.s-block__title h2, 
.s-angel--divider.xl-title h2,
.s-slider-block__title h2:where([dir=rtl],[dir=rtl] *),
.s-slider-block__title h2 {
    display: block !important;
    position: relative !important;
    min-height: auto !important;
    color: #ffffff !important; 
    
    /* حجم خط متناسق جداً وموزون لشاشات الجوال */
    font-size: 1.1rem !important; 
    line-height: 1.4 !important; /* مسافة مريحة بين السطور إذا نزلت الجملة لسطرين */
    font-weight: 800 !important;
    text-align: center !important;
    
    /* السماح بالتفاف النص بشكل مرن داخل حدود الشاشة دون أن يختفي */
    white-space: normal !important; 
    word-break: keep-all !important; /* يمنع قطع الكلمة الواحدة ويقسم الجملة من بين الكلمات */
    
    /* مسافة أمان جانبية لحماية النص من الالتصاق بحواف الجوال */
    padding: 0 15px !important; 
    margin: 0 auto !important;
    max-width: 100% !important;
    
    /* التدرج اللوني النيوني الفخم الخاص بـ MARLY */
    background: linear-gradient(135deg, #a628e3 0%, #ffffff 50%, #3467c6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    
    /* تأثير توهج الليزر البنفسجي */
    filter: drop-shadow(0px 2px 6px rgba(166, 40, 227, 0.4)) !important;
    
    animation: titleFadeInUp 0.6s ease-out forwards !important;
}

/* ==========================================
   2. الخط الديكوري المضيء (موزون للموبايل)
   ========================================== */
.s-block__title h2::after,
.s-slider-block__title h2:where([dir=rtl],[dir=rtl] *)::after {
    content: '';
    display: block;
    width: 35px; /* حجم خط ديكوري ناعم ومتناسق */
    height: 3px;
    background: linear-gradient(90deg, #3467c6, #a628e3);
    margin: 8px auto 0 auto;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ==========================================
   3. الشاشات الكبيرة (Desktop) - يرجع لحجمه الطبيعي
   ========================================== */
@media (min-width: 768px) {
    .s-block__title h2,
    .s-slider-block__title h2:where([dir=rtl],[dir=rtl] *) {
        font-size: 1.75rem !important;
        line-height: 1.5 !important;
        padding: 0 !important;
    }
    
    .s-angel--divider.xl-title h2 {
        font-size: 2.1rem !important;
    }
    
    .s-block__title h2::after,
    .s-slider-block__title h2:where([dir=rtl],[dir=rtl] *)::after {
        width: 55px;
    }

    .s-block__title:hover h2::after,
    .s-slider-block__title:hover h2:where([dir=rtl],[dir=rtl] *)::after {
        width: 80px; 
    }
}

/* ==========================================
   4. أنيميشن الصعود
   ========================================== */
@keyframes titleFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
---------------------------
.s-block__display-all, .s-slider-block__display-all {
    border-radius: .375rem;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    font-size: .875rem;
    gap: .25rem;
    line-height: 1.25rem;
    padding-bottom: .5rem;
    padding-top: .5rem;
    width: -moz-max-content;
    width: max-content;
    color: #a02ce1;
}

.mm-spn.mm-spn--navbar.mm-spn--main {
    cursor: default;
    color: #fff;
}
.rtl\:ml-2:where([dir=rtl],[dir=rtl] *)
Specificity: (0,1,0)
 {
    margin-left: .5rem;
    color: #50d2f1;
}
.rtl\:ml-2:where([dir="rtl"], [dir="rtl"] *) {
    margin-left: 0.5rem;
    color: #ffffff;
}
p, .font-regular {
    font-weight: 400 !important;
    color: #2cbbec;
}
.relative {
    position: relative;
    color: #2cbbec;
}
*, ::after, ::before {
    font-weight: inherit !important;
    color: #15aaec;
}
---------------------------
/* ==========================================
   تنسيقات سيكشن مميزات المتجر (المحدث والمصغر)
   ========================================== */
.store-features-section {
    background-color: #020b32; /* لون خلفية متجرك الأساسي */
    padding: 40px 15px; /* تقليل البادينج الإجمالي */
    overflow: hidden;
    width: 100%;
}

.features-container {
    max-width: 1000px; /* تصغير حجم الحاوية الكلية */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* تصغير عرض العمود */
    gap: 20px; /* تقليل الفجوات بين البطاقات */
    perspective: 1000px;
}

/* تصميم الكروت النيونية المدمجة */
.feature-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(52, 103, 198, 0.02) 100%);
    border: 1.5px solid rgba(166, 40, 227, 0.3); /* حافة نيون بنفسجية رفيعة */
    border-radius: 15px; /* تصغير زوايا الكرت */
    padding: 25px 20px; /* تقليل البادينج الداخلي */
    text-align: center;
    position: relative;
    backdrop-filter: blur(12px); /* تأثير زجاجي أعمق */
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    cursor: pointer;
    overflow: hidden;
}

/* التوهج الداخلي المتفجر مع حركة الماوس */
.card-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* يبدأ باللون الأزرق النيوني عند الـ Hover */
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(52, 103, 198, 0.25) 0%, transparent 70%);
    border-radius: 15px;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.feature-card:hover .card-glow {
    opacity: 1;
}

/* تأثير الكمبيوتر عند مرور الماوس (توهج وحركة) */
@media (min-width: 768px) {
    .feature-card:hover {
        border-color: #3467c6; /* الحافة تتحول للأزرق */
        /* توهج نيوني خارجي وداخلي متفجر */
        box-shadow: 0 0 20px rgba(166, 40, 227, 0.5), 0 0 10px rgba(52, 103, 198, 0.3), inset 0 0 10px rgba(166, 40, 227, 0.1);
    }
}

/* الأيقونات الـ SVG بتوهج نيوني مزدوج */
.feature-icon {
    margin-bottom: 15px;
    transition: transform 0.3s ease;
    transform: translateZ(40px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon svg {
    width: 35px; /* تصغير الأيقونة */
    height: 35px;
    /* دمج لون نيون قوي مع توهج مزدوج */
    stroke: #a628e3; /* استخدام البنفسجي كلون أساسي للأيقونة */
    filter: drop-shadow(0 0 10px rgba(166, 40, 227, 0.9)) drop-shadow(0 0 5px rgba(52, 103, 198, 0.6));
    transition: stroke 0.3s ease, filter 0.3s ease;
}

/* عندما يمر الماوس، تتحول الأيقونة للأزرق وتصبح أكثر لمعاناً */
.feature-card:hover .feature-icon svg {
    stroke: #3467c6;
    filter: drop-shadow(0 0 15px rgba(52, 103, 198, 0.9)) drop-shadow(0 0 8px rgba(166, 40, 227, 0.6));
    transform: translateZ(60px) scale(1.15); /* زيادة طفيفة في العمق والبروز */
}

/* النصوص داخل الكروت (أصغر وأكثر أناقة) */
.feature-card h3 {
    /* تدرج لوني فخم بين الأبيض البارد وألوانك */
    background: linear-gradient(135deg, #ffffff 0%, #3467c6 50%, #a628e3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.15rem; /* تصغير العنوان */
    font-weight: 800; /* زيادة السمك للفخامة */
    margin-bottom: 10px;
    transform: translateZ(25px);
    letter-spacing: -0.5px;
}

.feature-card p {
    color: rgba(255, 255, 255, 0.65); /* توضيح لون النص قليلاً */
    font-size: 0.85rem; /* تصغير حجم النص */
    line-height: 1.5;
    margin: 0;
    transform: translateZ(15px);
    padding: 0 5px;
}

/* توافق الجوال والأنيميشن التلقائي */
@media (max-width: 767px) {
    .features-container {
        gap: 15px; /* تقليل الفجوة على الجوال */
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* تصغير عرض العمود على الجوال */
    }
    
    .feature-card {
        padding: 20px 15px; /* تصغير إضافي على الجوال */
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUpCard 0.6s ease-out forwards;
    }
    
    .feature-card:nth-child(1) { animation-delay: 0.15s; }
    .feature-card:nth-child(2) { animation-delay: 0.3s; }
    .feature-card:nth-child(3) { animation-delay: 0.45s; }
}

@keyframes fadeInUpCard {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==========================================
   تأثير النيون الإجباري لصور ألعاب السيارات
   ========================================== */

/* الحالة الطبيعية للصورة (ستايل غامق وفخم) */
.neon-racing-ready img {
    filter: brightness(0.85) contrast(1.1) !important;
}

/* التفاعل المتفجر عند مرور الماوس (Hover) على الكمبيوتر */
.product-card:hover .neon-racing-ready,
.s-product-card:hover .neon-racing-ready,
.neon-racing-ready:hover {
    /* إطار ليد مضيء يدمج الأزرق والبنفسجي بقوة خلف الصورة */
    box-shadow: 0 0 25px rgba(166, 40, 227, 0.75), 0 0 10px rgba(52, 103, 198, 0.5) !important;
    transform: scale(1.02) !important;
}

.product-card:hover .neon-racing-ready img,
.s-product-card:hover .neon-racing-ready img,
.neon-racing-ready:hover img {
    /* تأثير الـ Nitro السريع: زووم ناعم للصورة */
    transform: scale(1.08) !important;
    /* تفتيح الصورة وإبراز تفاصيل اللعبة */
    filter: brightness(1.2) contrast(1.25) saturate(1.2) !important;
}

/* ==========================================
   تأثير حركي تلقائي منور وممتاز للجوال (بدون ماوس)
   ========================================== */
@media (max-width: 767px) {
    .neon-racing-ready {
        /* جعل الصور تنبض بضوء خفيف لوحدها على الجوال عشان تلفت الانتباه */
        animation: mobileNitroGlow 2.5s ease-in-out infinite alternate !important;
    }
}

@keyframes mobileNitroGlow {
    0% {
        box-shadow: 0 0 5px rgba(52, 103, 198, 0.2) !important;
        filter: brightness(0.9);
    }
    100% {
        box-shadow: 0 0 15px rgba(166, 40, 227, 0.5) !important;
        filter: brightness(1.05);
    }
}

/* ==========================================
   تنسيق زر النيترو المتفجر للشراء وإضافة للسلة
   ========================================== */
.s-product-card-content-footer salla-add-product-button .s-button-outline {
    /* صبغة نيون متدرجة مستوحاة من ثيم الالعاب والسرعة */
    background: linear-gradient(90deg, #3467c6 0%, #a628e3 100%) !important;
    color: #ffffff !important;
    
    /* إلغاء الحدود الرمادية الافتراضية المطفية */
    border: none !important;
    border-radius: 25px !important; /* حواف دائرية انسيابية ممتازة */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* توهج نيون ليزر أولي حول الزر */
    box-shadow: 0 4px 15px rgba(166, 40, 227, 0.4), 0 2px 5px rgba(52, 103, 198, 0.3) !important;
    
    /* انسيابية فائقة في الحركة والتفاعل */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    position: relative;
    overflow: hidden;
}

/* إضافة لمعة زجاجية متحركة داخل الزر (Glossy Swipe) */
.s-product-card-content-footer salla-add-product-button .s-button-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-25deg);
    transition: none;
}

/* ==========================================
   التأثير الجذاب جداً عند مرور الماوس (Hover)
   ========================================== */
.s-product-card-content-footer salla-add-product-button .s-button-outline:hover {
    /* تكبير الزر بحركة ديناميكية (Pop Effect) كأنه يندفع للأمام */
    transform: translateY(-3px) scale(1.05) !important;
    
    /* انفجار التوهج الضوئي حول الزر ليلفت العين بقوة */
    box-shadow: 0 8px 25px rgba(166, 40, 227, 0.7), 0 4px 15px rgba(52, 103, 198, 0.5) !important;
    
    /* زيادة سطوع الألوان */
    filter: brightness(1.15) !important;
}

/* تفعيل اللمعة السريعة المسرعة عند الـ Hover */
.s-product-card-content-footer salla-add-product-button .s-button-outline:hover::before {
    left: 200%;
    transition: left 0.6s ease-in-out;
}

/* تأثير الضغط (Active) - يعطي إيحاء واقعي بالضغط على زر حقيقي */
.s-product-card-content-footer salla-add-product-button .s-button-outline:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 10px rgba(166, 40, 227, 0.5) !important;
}

/* ==========================================
   أنيميشن النبض التلقائي المخصص للجوال (بدون هوفر)
   ========================================== */
@media (max-width: 767px) {
    .s-product-card-content-footer salla-add-product-button .s-button-outline {
        /* أنيميشن نبض النيترو التلقائي لجذب المشتري على الموبايل */
        animation: mobileButtonPulse 2s infinite alternate ease-in-out !important;
    }
}

@keyframes mobileButtonPulse {
    0% {
        box-shadow: 0 4px 12px rgba(166, 40, 227, 0.4) !important;
        transform: scale(1);
    }
    100% {
        box-shadow: 0 6px 20px rgba(52, 103, 198, 0.65), 0 0 10px rgba(166, 40, 227, 0.5) !important;
        transform: scale(1.02); /* يتمدد وينبض برقة */
    }
}
/* ==========================================
   تنسيق فوتر الحقوق باللون والستايل النيوني
   ========================================== */
.developer-signature-wrap {
    width: 100%;
    text-align: center !important;
    padding: 20px 0 !important;
    
    /* لون الخلفية المحدد */
    background-color: #020b32 !important; 
    
    /* خط فاصل علوي رفيع نيون بنفسجي ليعطي لمسة جمالية */
    border-top: 1px solid rgba(166, 40, 227, 0.15) !important; 
    
    /* تنسيق الكلمات العامة والسنة */
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* تنسيق رابط AL Zaiem 💻 */
.dev-signature-link {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
    display: inline-block !important;
    
    /* تدرج لوني فخم للبراند يدمج الأبيض والأزرق والبنفسجي */
    background: linear-gradient(45deg, #ffffff, #3467c6, #a628e3);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ==========================================
   تأثير الـ Hover عند مرور الماوس على الرابط
   ========================================== */
.dev-signature-link:hover {
    /* تأثير صعود وتوهج ليزر بنفسجي وأزرق متناسق */
    transform: translateY(-2px) !important;
    filter: drop-shadow(0 0 8px #a628e3) brightness(1.2) !important;
}

/* موازنة الأبعاد على شاشات الجوال */
@media (max-width: 767px) {
    .developer-signature-wrap {
        padding: 15px 0 25px 0 !important; /* مساحة أمان سفلية مريحة للموبايل */
        font-size: 0.8rem !important; /* حجم أنعم للشاشات الصغيرة */
    }
}

/* ==========================================
   تنسيق اللوجو بأنيميشن النبض والحركة النشطة
   ========================================== */
.store-footer .footer-container .logo-footer .foo,
.store-footer .footer-container .logo-footer img {
    margin-bottom: 0.75rem;
    width: auto;
    display: inline-block !important;
    
    /* تهيئة الأبعاد والانتقال السلس */
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: all 0.4s ease-in-out !important;
}

/* ==========================================
   تفعيل الحركة والنبض التلقائي على الجوال (Mobile)
   ========================================== */
@media (max-width: 767px) {
    .store-footer .footer-container .logo-footer .foo,
    .store-footer .footer-container .logo-footer img {
        max-height: 85px; /* حجم مكبر وممتاز للموبايل */
        margin-bottom: 1.2rem;
        
        /* تشغيل أنيميشن النبض الحركي المطور للموبايل */
        animation: mobileLogoNitroPulse 3s ease-in-out infinite !important;
    }
}

/* ==========================================
   حركة وتفاعل الشاشات الكبيرة (Desktop) عند مرور الماوس
   ========================================== */
@media (min-width: 768px) {
    .store-footer .footer-container .logo-footer .foo,
    .store-footer .footer-container .logo-footer img {
        max-height: 115px; /* حجم كبير وواضح للكمبيوتر */
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) !important;
        
        /* جعل اللوجو ينبض ببطء شديد على الكمبيوتر وهو ثابت */
        animation: desktopLogoGentlyPulse 4s ease-in-out infinite alternate !important;
    }

    /* تأثير الانفجار الضوئي والالتفاف عند وقوف الماوس */
    .store-footer .footer-container .logo-footer .foo:hover,
    .store-footer .footer-container .logo-footer img:hover {
        animation-play-state: paused !important; /* إيقاف النبض مؤقتاً أثناء التفاعل */
        transform: translateY(-8px) scale(1.15) rotateY(18deg) !important;
        filter: drop-shadow(0 0 20px #a628e3) 
                drop-shadow(0 0 30px #3467c6) brightness(1.4) !important;
    }
}

/* ==========================================
   أنيميشن النبض والحركة المركبة للموبايل (Pulse + Motion)
   ========================================== */
@keyframes mobileLogoNitroPulse {
    0% {
        /* نقطة البداية: حجم طبيعي وثابت */
        transform: translateY(0) scale(1) rotateY(0deg);
        filter: drop-shadow(0 2px 6px rgba(166, 40, 227, 0.4)) brightness(1) !important;
    }
    30% {
        /* صعود خفيف للأعلى مع نبضة تكبير مفاجئة وتوهج أزرق */
        transform: translateY(-4px) scale(1.06) rotateY(4deg);
        filter: drop-shadow(0 0 14px #3467c6) brightness(1.2) !important;
    }
    50% {
        /* انكماش بسيط (النبضة الثانية العكسية) مع ميلان ناعم */
        transform: translateY(-6px) scale(1.02) rotateY(-4deg);
        filter: drop-shadow(0 0 18px #a628e3) brightness(1.25) !important;
    }
    75% {
        /* النزول التدريجي مع الحفاظ على ومضة ضوئية */
        transform: translateY(-2px) scale(1.04) rotateY(2deg);
        filter: drop-shadow(0 0 12px #3467c6) brightness(1.15) !important;
    }
    100% {
        /* العودة لوضع الاستعداد لتبدأ الدورة النبضية من جديد */
        transform: translateY(0) scale(1) rotateY(0deg);
        filter: drop-shadow(0 2px 6px rgba(166, 40, 227, 0.4)) brightness(1) !important;
    }
}

/* نبض هادئ جداً للكمبيوتر في الحالة الطبيعية */
@keyframes desktopLogoGentlyPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
    }
    100% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 12px rgba(52, 103, 198, 0.4));
    }
}
/* ==========================================
   تأثير ومضة الضوء الزجاجية السريعة عند اكتمال الصور
   ========================================== */
img.lazy.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    
    /* تنعيم ظهور الصورة الأصلي */
    transition: opacity 0.6s ease-in-out !important;
    
    /* قناع ضوئي متحرك يمر كالفلاش مرة واحدة عند التحميل */
    background: linear-gradient(
        90deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.03) 20%, 
        rgba(255,255,255,0.25) 50%, 
        rgba(255,255,255,0.03) 80%, 
        rgba(255,255,255,0) 100%
    );
    background-size: 200% 100% !important;
    background-position: 150% 0 !important;
    
  /* ==========================================
   تأثير ومضة الليزر الخاطفة فوق الصور فور تحميلها
   ========================================== */
img.lazy.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    
    /* تنعيم حركة ظهور الصورة والوميض */
    transition: opacity 0.5s ease-in-out !important;
    
    /* تشغيل ومضة الضوء فوراً ولمرة واحدة فقط عند اكتمال الصورة */
    animation: glossyLightSwipe 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* ==========================================
   أنيميشن الوميض الضوئي السينمائي الخاطف
   ========================================== */
@keyframes glossyLightSwipe {
    0% {
        /* الصورة تبدأ بشكلها الطبيعي */
        filter: brightness(1) contrast(1) saturate(1);
    }
    30% {
        /* ومضة ليزر بيضاء سريعة تضرب الصورة لتعطي إيحاء بمرور الضوء */
        filter: brightness(1.4) contrast(1.1) saturate(1.1);
    }
    60% {
        /* انخفاض تدريجي وسريع للوميض */
        filter: brightness(1.08) contrast(1.02);
    }
    100% {
        /* العودة التامة لشكل الصورة الأصلي والثابت */
        filter: brightness(1) contrast(1) saturate(1);
    }
}
  /* ==========================================
   تأثير مسحة الليزر الزجاجية الفخمة فوق الصور
   ========================================== */
img.lazy.loaded {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative;
    
    /* تنعيم ظهور الصورة الأصلي */
    transition: opacity 0.6s ease-in-out !important;

    /* تفعيل القناع المتدرج اللي هيتحرك فوق الصورة */
    -webkit-mask-image: linear-gradient(
        120deg, 
        #000 40%, 
        rgba(255, 255, 255, 0.7) 50%, 
        #000 60%
    ) !important;
    mask-image: linear-gradient(
        120deg, 
        #000 40%, 
        rgba(255, 255, 255, 0.7) 50%, 
        #000 60%
    ) !important;
    
    /* تكبير حجم القناع عشان يختفي برة حدود الصورة ويتحرك براحته */
    -webkit-mask-size: 300% 100% !important;
    mask-size: 300% 100% !important;
    
    /* تشغيل أنيميشن ومضة الضوء بشكل دوري مستمر (كل 4 ثوانٍ) */
    animation: premiumCyberShimmer 4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

/* ==========================================
   حركة خط الضوء المائل من اليسار إلى اليمين
   ========================================== */
@keyframes premiumCyberShimmer {
    0% {
        /* خط الضوء يبدأ مخفي تماماً في جهة اليمين */
        -webkit-mask-position: 150% 0;
        mask-position: 150% 0;
    }
    25% {
        /* يمر خط الضوء بسرعة وسلاسة فائقة فوق الصورة لجهة اليسار */
        -webkit-mask-position: -50% 0;
        mask-position: -50% 0;
    }
    100% {
        /* يثبت القناع مخفي لباقي الـ 4 ثوانٍ ليعطي راحة تامة لعين العميل قبل الومضة التالية */
        -webkit-mask-position: -50% 0;
        mask-position: -50% 0;
    }
}
  /* ==========================================
   تأثير النيون الإجباري لصور ألعاب السيارات
   ========================================== */

/* الحالة الطبيعية للصورة (ستايل غامق وفخم) */
.neon-racing-ready img {
    filter: brightness(0.85) contrast(1.1) !important;
}

/* التفاعل المتفجر عند مرور الماوس (Hover) على الكمبيوتر */
.product-card:hover .neon-racing-ready,
.s-product-card:hover .neon-racing-ready,
.neon-racing-ready:hover {
    /* إطار ليد مضيء يدمج الأزرق والبنفسجي بقوة خلف الصورة */
    box-shadow: 0 0 25px rgba(166, 40, 227, 0.75), 0 0 10px rgba(52, 103, 198, 0.5) !important;
    transform: scale(1.02) !important;
}

.product-card:hover .neon-racing-ready img,
.s-product-card:hover .neon-racing-ready img,
.neon-racing-ready:hover img {
    /* تأثير الـ Nitro السريع: زووم ناعم للصورة */
    transform: scale(1.08) !important;
    /* تفتيح الصورة وإبراز تفاصيل اللعبة */
    filter: brightness(1.2) contrast(1.25) saturate(1.2) !important;
}

/* ==========================================
   تأثير حركي تلقائي منور وممتاز للجوال (بدون ماوس)
   ========================================== */
@media (max-width: 767px) {
    .neon-racing-ready {
        /* جعل الصور تنبض بضوء خفيف لوحدها على الجوال عشان تلفت الانتباه */
        animation: mobileNitroGlow 2.5s ease-in-out infinite alternate !important;
    }
}

@keyframes mobileNitroGlow {
    0% {
        box-shadow: 0 0 5px rgba(52, 103, 198, 0.2) !important;
        filter: brightness(0.9);
    }
    100% {
        box-shadow: 0 0 15px rgba(166, 40, 227, 0.5) !important;
        filter: brightness(1.05);
    }
}