/* ==========================================================================
   static/pages/css/base/perf-lite.css
   «الفخامة الهادئة» — تخفيف استهلاك الـ GPU والبطارية مع الحفاظ على الهوية الملكية.

   يُحمَّل آخر ملف CSS في index.html، فيتغلّب على mobile.css / desktop-royal.css / الثيمات
   دون المساس بها. للتراجع عن أي بند احذف مقطعه فقط، أو احذف سطر <link> كاملاً.

   المبدأ: الحركة المستمرة هي ما يُبقي الـ GPU مستيقظاً ويستهلك البطارية، لا الشكل الثابت.
   لذلك:
     ✓ نُبقي: التدرّجات الذهبية، الحواف، الظلال الثابتة، حركات الدخول (مرة واحدة)،
              رفع البطاقات عند التمرير، لمعة عابرة عند اللمس/المرور.
     ✗ نزيل:  الغبار الذهبي المتطاير، ضوء المؤشر على البطاقات، اللمعان اللانهائي للنصوص،
              تحريك صور البطاقات (Ken Burns)، الهالات النابضة، الحلقات الدوّارة،
              النبض والسهم المتحرك الدائمان، وتوهّج الأزرار الصارخ عند اللمس.
   ========================================================================== */

/* لمعة عابرة واحدة (تُستعمل عند المرور/التفعيل فقط بدل الحلقة اللانهائية) — translate فقط (تركيب GPU خفيف) */
@keyframes lite-sweep {
    from { translate: 0 0; }
    to   { translate: var(--shine-x, 500%) 0; }
}
/* هيكل التحميل: نبض شفافية بدل تحريك الخلفية (لا إعادة رسم) */
@keyframes lite-skel {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* ==========================================================================
   1) الغبار الذهبي المتطاير («الشرارات») — إزالة كاملة
      كان طبقة بارتفاع الشاشة + 900px تتحرك بلا توقف خلف كل المحتوى.
   ========================================================================== */
html body.emp-home .bg-overlay::after,
html body.emp-mobile .bg-overlay::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* ==========================================================================
   2) لمعان النصوص اللانهائي (background-position على نص مقصوص) — يصير ثابتاً
      تحريك خلفية نص مقصوص يُعيد رسم النص كل إطار؛ نُبقي التدرّج المعدني ثابتاً
      ممتدّاً على كامل النص فيبقى شكله ذهبياً/فضياً/ألماسياً فخماً بلا تكلفة.
   ========================================================================== */
html body .logo h1,
html body .exchange-rate,
html body .hero .sub,
html body .hero h2,
html body .expanded-title {
    background-size: 100% auto !important;
    background-position: 50% 50% !important;
}
html body .logo h1,
html body .exchange-rate,
html body .hero .sub {
    animation: none !important;
}
/* العناوين تحتفظ بظهورها السينمائي (مرة واحدة) وتتوقف عن اللمعان الدائم */
html body.emp-mobile .hero h2        { animation: m-title-in 1.7s var(--m-ease) both !important; }
html body.emp-mobile .expanded-title { animation: m-wipe-r 1s var(--m-ease) both !important; }
@media (min-width: 769px) {
    html body.emp-home .hero h2        { animation: d-title-in 1.7s var(--d-ease) both !important; }
    html body.emp-home .expanded-title { animation: d-wipe-r 1s var(--d-ease) both !important; }
}

/* ==========================================================================
   3) الهالات النابضة والحلقات الدوّارة والنبض — ثابتة بنفس الشكل
   ========================================================================== */
html body.emp-home .navbar-logo::before,
html body.emp-home .hero::before {
    animation: none !important;
    opacity: .85;
}
@media (max-width: 768px) {
    html body.emp-mobile .navbar-logo::before,
    html body.emp-mobile .hero::before {
        animation: none !important;
        opacity: .85;
    }
    /* هالة شعار الجوال كانت تتمركز عبر keyframes فقط؛ نثبّت التمركز صراحةً
       (داخل media الجوال حتى لا تتأثر هالة الكمبيوتر التي تتمركز بالهوامش) */
    html body.emp-mobile .navbar-logo::before { transform: translate(-50%, -50%); }
}

/* حلقة الدولة المختارة + حلقة الختم: ذهبية ثابتة (بدون دوران) */
html body.emp-home .main-countries-bar .country-btn .cb-flag::before,
html body.emp-mobile .main-countries-bar .country-btn .cb-flag::before,
html body.emp-mobile .m-seal .ms-ring {
    animation: none !important;
}
/* موجة النبض حول الختم العائم — تُحذف (كانت دائمة على الجوال) */
html body.emp-mobile .m-seal::after {
    animation: none !important;
    display: none !important;
}

/* ==========================================================================
   4) تحريك صور البطاقات (Ken Burns) + ضوء المؤشر على البطاقات
   ========================================================================== */
html body.emp-home .card::before   { animation: none !important; transform: scale(1.04); }
@media (max-width: 768px) {
    html body.emp-mobile .card::before { animation: none !important; transform: scale(1.06); }
}

@media (min-width: 769px) {
    /* ضوء المؤشر (الإضاءة الضبابية التابعة للماوس): نُبقي طبقتَي التعتيم فقط */
    html body.emp-home .card::after {
        background:
            linear-gradient(180deg, rgba(5, 3, 12, .12) 0%, rgba(5, 3, 12, .5) 46%, rgba(5, 3, 12, .96) 100%),
            linear-gradient(90deg, rgba(212, 175, 55, .1), transparent 45%);
    }
    html body.emp-home .realestate-item-card::before,
    html body.emp-home .realestate-item-card.featured-card::before {
        display: none !important;
    }
    /* التكبير البطيء عند المرور يبقى (scale فقط)، بدون فلتر تشبّع/سطوع على صورة كبيرة */
    html body.emp-home .card:hover::before { scale: 1.08; filter: none; }

    /* لا نُحرّك الظلال الكبيرة (تُعيد رسم البطاقة كل إطار): الرفع + لون الحافة فقط */
    html body.emp-home .card {
        transition: transform .6s var(--d-ease), border-color .4s ease;
    }
    html body.emp-home .card:hover,
    html body.emp-home.budget-mid .card:hover,
    html body.emp-home.budget-low .card:hover {
        box-shadow: 0 0 0 1px rgba(212, 175, 55, .3), 0 28px 56px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 243, 196, .4);
    }
    html body.emp-home .realestate-item-card,
    html body.emp-home .card-item {
        transition: transform .55s var(--d-ease), border-color .35s ease;
    }
    html body.emp-home .realestate-item-card:hover,
    html body.emp-home .card-item:hover,
    html body.emp-home.budget-mid .card-item:hover {
        box-shadow: 0 0 0 1px rgba(212, 175, 55, .3), 0 28px 50px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 243, 196, .3);
    }
}

/* ==========================================================================
   5) اللمعات المعدنية: من حلقة لانهائية ← لمعة واحدة عند المرور / التفعيل
   ========================================================================== */
@media (min-width: 769px) {
    html body.emp-home .btn-add-offer-green::after,
    html body.emp-home .btn-profile-gold::after,
    html body.emp-home .class-btn::after,
    html body.emp-home .realestate-item-card .btn-detail::after {
        animation: none !important;
    }
    html body.emp-home .btn-add-offer-green:hover::after,
    html body.emp-home .btn-profile-gold:hover::after {
        animation: lite-sweep .9s ease-out 1 both !important;
    }
    html body.emp-home .class-btn.active::after {
        animation: lite-sweep 1.2s ease-out 1 both !important;
    }
    html body.emp-home .realestate-item-card:hover .btn-detail::after,
    html body.emp-home .realestate-item-card .btn-detail:focus-visible::after {
        animation: lite-sweep 1s ease-out 1 both !important;
    }
}
html body.emp-mobile .class-btn::after { animation: none !important; }
html body.emp-mobile .class-btn.active::after { animation: lite-sweep 1.2s ease-out 1 both !important; }
html body.emp-mobile .realestate-item-card .btn-detail::after { animation: none !important; }
html body.emp-mobile .realestate-item-card .btn-detail:active::after { animation: lite-sweep 1s ease-out 1 both !important; }

/* ==========================================================================
   6) سهم زر الدخول: لا نبض دائم — يتحرّك فقط عند المرور (desktop)
   ========================================================================== */
html body.emp-home .card .btn-emp i,
html body.emp-mobile .card .btn-emp i {
    animation: none !important;
}
@media (min-width: 769px) {
    html body.emp-home .card .btn-emp i { transition: translate .4s var(--d-ease); }
    html body.emp-home .card:hover .btn-emp i { translate: -6px 0; }
}

/* ==========================================================================
   7) الهالة الذهبية الصارخة حول الأزرار والأوسمة — أصغر وأهدأ (الفخامة بالحافة لا بالتوهج)
   ========================================================================== */
/* قرص الدخول على البطاقات */
@media (min-width: 769px) {
    html body.emp-home .card .btn-emp,
    html body.emp-home .card .btn-emp:hover,
    html body.emp-home.budget-mid .card .btn-emp,
    html body.emp-home.budget-mid .card .btn-emp:hover,
    html body.emp-home.budget-low .card .btn-emp,
    html body.emp-home.budget-low .card .btn-emp:hover,
    html body.emp-home .card:hover .btn-emp {
        box-shadow: 0 0 0 5px rgba(212, 175, 55, .13), 0 8px 18px rgba(0, 0, 0, .45);
        transition: scale .5s var(--d-ease);
    }
    /* الفئة المختارة */
    html body.emp-home .class-btn.active,
    html body.emp-home .class-btn.active:hover {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 14px var(--d-cglow, rgba(212, 175, 55, .6)), 0 12px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
    }
    /* الدولة المختارة */
    html body.emp-home .main-countries-bar .country-btn.active .cb-flag {
        box-shadow: inset 0 0 0 1px rgba(255, 243, 196, .5), 0 0 0 6px rgba(212, 175, 55, .1), 0 0 16px rgba(212, 175, 55, .35), 0 12px 22px rgba(0, 0, 0, .55);
    }
    /* مدينة مختارة / زر التفاصيل */
    html body.emp-home .city-btn.active,
    html body.emp-home .city-btn.active:hover,
    html body.emp-home.budget-mid .city-btn.active,
    html body.emp-home.budget-low .city-btn.active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    }
    html body.emp-home .realestate-item-card .btn-detail,
    html body.emp-home .realestate-item-card .btn-detail:hover {
        box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
        filter: none;
    }
    /* الشارات: ظل داكن بدل هالة */
    html body.emp-home .realestate-item-card .price {
        box-shadow: 0 0 0 5px rgba(9, 6, 18, .95), 0 8px 16px rgba(0, 0, 0, .5);
    }
}

@media (max-width: 768px) {
    html body.emp-mobile .card .btn-emp,
    html body.emp-mobile .card .btn-emp:hover {
        box-shadow: 0 0 0 4px rgba(212, 175, 55, .13), 0 6px 14px rgba(0, 0, 0, .45);
    }
    html body.emp-mobile .class-btn.active {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 12px var(--m-glow, rgba(212, 175, 55, .6)), 0 10px 16px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
    }
    html body.emp-mobile .main-countries-bar .country-btn.active .cb-flag {
        box-shadow: inset 0 0 0 1px rgba(255, 243, 196, .5), 0 0 0 5px rgba(212, 175, 55, .1), 0 0 14px rgba(212, 175, 55, .35), 0 10px 20px rgba(0, 0, 0, .55);
    }
    html body.emp-mobile .city-btn.active,
    html body.emp-mobile .city-btn.active:hover,
    html body.emp-mobile .rent-sale-btn.active,
    html body.emp-mobile .rent-sale-btn.active:hover {
        box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
    }
    html body.emp-mobile .realestate-item-card .btn-detail,
    html body.emp-mobile .realestate-item-card .btn-detail:hover {
        box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
    }
    html body.emp-mobile .detail-actions .contact-btn,
    html body.emp-mobile .detail-actions .contact-btn:hover {
        box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
    }
    html body.emp-mobile .m-seal .ms-core {
        box-shadow: inset 0 0 12px rgba(212, 175, 55, .3), 0 8px 18px rgba(0, 0, 0, .65);
    }

    /* ----- ردود اللمس (:active): خفيفة وراقية بدل الذهب الصارخ ----- */
    html body.emp-mobile .filters-panel .btn-all:active,
    html body.emp-mobile .filters-panel .btn-extra:active,
    html body.emp-mobile .filter-btn:active {
        background: rgba(212, 175, 55, .16);
        color: var(--m-gold-hi);
    }
    html body.emp-mobile .back-btn:active          { scale: .96; background: rgba(212, 175, 55, .16); }
    html body.emp-mobile .currency-dropdown li:active { background: rgba(212, 175, 55, .1); }
    html body.emp-mobile .card:active              { scale: .99; border-color: rgba(212, 175, 55, .55); }
    html body.emp-mobile .class-btn:active         { scale: .97; }
    html body.emp-mobile .realestate-item-card .btn-detail:active { scale: .98; }
}

/* أجهزة اللمس الأكبر (تابلت) التي تطبّق قواعد الكمبيوتر: لا hover عالق بعد النقر */
@media (min-width: 769px) and (hover: none) {
    html body.emp-home .card:hover,
    html body.emp-home.budget-mid .card:hover,
    html body.emp-home.budget-low .card:hover,
    html body.emp-home .realestate-item-card:hover,
    html body.emp-home .card-item:hover,
    html body.emp-home .class-btn:hover,
    html body.emp-home .city-btn:hover,
    html body.emp-home .realestate-category-card:hover {
        transform: none;
    }
}

/* ==========================================================================
   8) الشارة المميّزة (Featured): توهّج نابض دائم ← ظل ثابت ناعم
   ========================================================================== */
.featured-badge::before {
    animation: none !important;
    opacity: .55;
}

/* ==========================================================================
   9) هياكل التحميل: نبض شفافية بدل تحريك الخلفية
   ========================================================================== */
.skeleton-image,
html body.emp-home .skeleton-image,
html body.emp-mobile .skeleton-image {
    animation: lite-skel 1.6s ease-in-out infinite !important;
    background-size: auto !important;
}
html body.emp-home .skeleton-image,
html body.emp-mobile .skeleton-image {
    background: #231a3a !important;
}

/* ==========================================================================
   9-b) شارات الموثوقية على بطاقات العروض: تدرّج ثابت
        (كانت تُحرّك background-position لعدة ثوانٍ على كل شارة في كل بطاقة تُرسم)
   ========================================================================== */
.bg-red-gradient,
.bg-orange-gradient,
.bg-green-gradient,
.bg-blue-gradient,
.bg-instagram {
    animation: none !important;
}

/* ==========================================================================
   10) احترام تفضيل النظام: «تقليل الحركة» ← لا حركات زخرفية إطلاقاً
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html body.emp-home *,
    html body.emp-home *::before,
    html body.emp-home *::after,
    html body.emp-mobile *,
    html body.emp-mobile *::before,
    html body.emp-mobile *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}