/* طلاءُ موسم رمضان (الدفعة W5) — ليلٌ زمرّديّ · ذهبٌ هادئ · أرابيسك شفيف.
   ════════════════════════════════════════════════════════════════════════════
   كلُّ قاعدةٍ هنا تحت `:root[data-theme="ramadan"]` — فلا يبلغ هذا الموسمُ موسمًا
   آخرَ ولا الأساسيَّ بحال. وخارجَ طبقة المشهد لا تُعلَن إلا **خصائصُ الطلاء**
   (خلفية · حدّ · ظلّ · لون · قناع · حركة): يقيس ذلك `ui/themeAssets.test.ts`
   بندًا بندًا، فلا يستطيع موسمٌ أن يزيح عنصرًا يملكه التخطيط ولو أراد.

   وما في هذه الورقة **يعمل بلا جافاسكربت كاملًا**: البديلُ الثابت أدناه مشهدٌ
   قائمٌ بذاته (وهجُ الأفق · هالةُ الهلال · الفوانيس · شبكةُ الأرابيسك)، والمشهدُ
   الحيّ في `js/themes/ramadan.js` يضيف فوقه العمقَ والحركة حين تسمح البوّابة. */

/* ══ ١) طبقةُ المشهد ══════════════════════════════════════════════════════ */

/* شبكةُ الأرابيسك: معيّناتٌ ومربّعاتٌ متشابكة من خطوطٍ ذهبية شفيفة، تظهر في
   أسفل المشهد وتذوب صاعدةً — زخرفةُ أرضيةٍ لا ستارةٌ فوق الصورة.

   **وهي على عنصرٍ زائف لا على الحاوية**: `mask-image` يقصّ العنصر **ونسلَه
   كلَّه**. فوضعُ قناع الشبكة على `.theme-stage-hero` كان يقصّ معها الغَسلةَ
   والهلالَ والقماشَ الحيّ — فاختفى نصفُ المشهد العلويّ كلُّه. (عطبٌ مقيس:
   أوّلُ نسخةٍ رسمت الهلال ولم يظهر، والفوانيسُ لم تُرَ إلا أسفل الإطار.)
   والقاعدةُ المستخلَصة صارت شاهدًا: لا قناعَ إلا على عنصرٍ زائفٍ لا نسلَ له. */
:root[data-theme="ramadan"] .theme-stage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 21px, rgba(205, 163, 73, 0.15) 21px 22px),
    repeating-linear-gradient(-45deg, transparent 0 21px, rgba(205, 163, 73, 0.15) 21px 22px),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(205, 163, 73, 0.07) 30px 31px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(205, 163, 73, 0.07) 30px 31px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 56%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 56%);
}

/* الغَسلةُ الليلية — تصبغ صورةَ البطل نحو ليلٍ زمرّديّ ولا تحجبها.
   والطبقةُ الأولى **سماءُ الهلال**: تعتيمٌ ناعم في الزاوية العليا يضمن للهلال
   أرضيةً داكنة مهما كانت صورةُ البطل. بلا هذه الطبقة يقع الهلالُ أحيانًا على
   ستارةٍ فاتحة فيختفي: مزجُ `screen` يُضيء ولا يُعتّم أبدًا، فالتباينُ يُصنع
   هنا لا يُرجى من الصورة. (وهذا عطبٌ مقيس كذلك.) */
:root[data-theme="ramadan"] .theme-stage-hero .stage-fallback {
  background-image:
    radial-gradient(circle 190px at 15% 21%, rgba(214, 176, 96, 0.22), transparent 74%),
    radial-gradient(36% 32% at 15% 21%, rgba(5, 15, 13, 0.60), transparent 74%),
    radial-gradient(64% 48% at 74% 92%, rgba(30, 156, 128, 0.26), transparent 72%),
    linear-gradient(to bottom, rgba(6, 18, 16, 0.62) 0%, rgba(10, 22, 20, 0.28) 46%, rgba(12, 35, 31, 0.60) 100%);
}

/* الفوانيسُ الثابتة — أربعُ هالاتٍ دافئة تتنفّس وتتمايل ببطء */
:root[data-theme="ramadan"] .theme-stage-hero .stage-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 76px at 16% 34%, rgba(232, 196, 122, 0.42), transparent 66%),
    radial-gradient(circle 52px at 34% 60%, rgba(224, 180, 96, 0.34), transparent 64%),
    radial-gradient(circle 40px at 8% 72%, rgba(216, 170, 88, 0.26), transparent 62%),
    radial-gradient(circle 30px at 44% 26%, rgba(240, 208, 140, 0.24), transparent 60%);
  mix-blend-mode: screen;
  animation: ramadan-drift 19s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* وحين يعمل المشهدُ الحيّ تخفت **هالاتُ الفوانيس الثابتة وحدها** فلا تتراكم مع
   فوانيسه المتحرّكة — والهلالُ والشبكةُ يبقيان بكامل قوّتهما لأن الحيّ لا يرسمهما. */
:root[data-theme="ramadan"] .theme-stage[data-stage-on] .stage-fallback::before { opacity: 0.30; transition: opacity 1200ms ease; }

/* الهلالُ الرفيع — قرصٌ عاجيّ يقصّه قناعُ قرصٍ ثانٍ مزاح. والقناعُ هنا آمنٌ
   لأن العنصر الزائف لا نسلَ له يُقصّ معه. وهالتُه في الطبقة الأولى من الغَسلة
   لا هنا: القناعُ يقصّ كلَّ خلفيات عنصره، فهالةٌ معه كانت تُثقَب في قلبها. */
:root[data-theme="ramadan"] .theme-stage-hero .stage-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle 38px at 15% 21%, rgba(250, 240, 214, 0.97) 0 96%, transparent 98%);
  -webkit-mask-image: radial-gradient(circle 35px at calc(15% - 13px) calc(21% - 10px), transparent 0 99%, rgba(0, 0, 0, 1) 100%);
  mask-image: radial-gradient(circle 35px at calc(15% - 13px) calc(21% - 10px), transparent 0 99%, rgba(0, 0, 0, 1) 100%);
  mix-blend-mode: screen;
  animation: ramadan-breathe 9s ease-in-out infinite alternate;
}

/* شريطُ رأس صفحات التصفّح — زخرفةٌ ساكنة على أرضيةٍ فاتحة، بلا مشهدٍ حيّ.
   وعلى عنصرٍ زائف كذلك، للسبب نفسه: القناعُ يبقى في ورقةٍ لا نسلَ لها. */
:root[data-theme="ramadan"] .theme-stage-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 17px, rgba(12, 91, 74, 0.10) 17px 18px),
    repeating-linear-gradient(-45deg, transparent 0 17px, rgba(12, 91, 74, 0.10) 17px 18px),
    radial-gradient(70% 100% at 78% 0%, rgba(205, 163, 73, 0.18), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 92%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, transparent 92%);
}

@keyframes ramadan-drift {
  from { transform: translate3d(0, 2.2%, 0) scale(1); opacity: 0.86; }
  to { transform: translate3d(1.6%, -3.4%, 0) scale(1.06); opacity: 1; }
}
@keyframes ramadan-breathe {
  from { opacity: 0.74; }
  to { opacity: 1; }
}

/* ══ ٢) الزخرفة في الصفحة — طلاءٌ لا غير ═════════════════════════════════ */

/* شارةُ الموسم: ذهبٌ على زمرّدٍ عميق، بحدٍّ ذهبيّ رفيع */
:root[data-theme="ramadan"] .season-badge {
  background-image: linear-gradient(135deg, rgba(10, 22, 20, 0.96), rgba(18, 55, 46, 0.96));
  border-color: rgba(205, 163, 73, 0.55);
  color: #E8CB86;
  box-shadow: inset 0 1px 0 rgba(246, 234, 202, 0.14), 0 2px 10px rgba(10, 22, 20, 0.22);
}

/* فاصلُ الأقسام: القضيبُ الذهبيّ الصغير يصير عقدةَ أرابيسك (معيَّنٌ بين خطّين) */
:root[data-theme="ramadan"] .eyebrow-rule {
  background-image: linear-gradient(90deg, rgba(205, 163, 73, 0) 0%, #CDA349 22%, rgba(246, 234, 202, 0.95) 50%, #CDA349 78%, rgba(205, 163, 73, 0) 100%);
  box-shadow: 0 0 10px rgba(205, 163, 73, 0.45);
}

/* حبّاتُ المنتجات: حافةٌ ذهبية رقيقة تزداد عند التحويم — بلا إزاحةِ بكسلٍ واحد */
:root[data-theme="ramadan"] .product-card {
  box-shadow: inset 0 0 0 1px rgba(205, 163, 73, 0.30), 0 1px 2px rgba(10, 22, 20, 0.06);
  transition: box-shadow 260ms ease, transform 260ms ease;
}
:root[data-theme="ramadan"] .product-card:hover {
  box-shadow: inset 0 0 0 1px rgba(205, 163, 73, 0.72), 0 14px 32px rgba(10, 22, 20, 0.18);
}

/* لوحُ البطل الزجاجيّ: حدٌّ ذهبيّ، و**أرضيةٌ أعتم تدفع ثمنَ الضوء الذي يضيفه
   الموسم**. المشهدُ يُركَّب جمعًا، فأشدُّ حالاته يرفع ما خلف اللوح نحو الأبيض؛
   وعند أرضية `main.css` (شفافية 0.62 فوق 1024) يهبط تباينُ سطر الشعار إلى
   2.74:1 وعينِ العنوان إلى 2.70:1 على أرضيةٍ بيضاء — وهي حالةٌ **يبلغها**
   المشهد. فالموسم الذي يضيء هو الذي يعتّم لوحَه: 0.85 تُبقي 15% من الخلفية
   والطمسَ الزجاجيّ وراءه، وترفع الأضعف إلى 5.2:1. يقيس ذلك
   `colorContrastDec121.test.ts` (كتلة الموقع) على **أسوأ أرضيةٍ ممكنة**. */
:root[data-theme="ramadan"] .hero-panel {
  background-color: rgba(6, 18, 16, 0.85);
  border-color: rgba(205, 163, 73, 0.34);
  box-shadow: inset 0 1px 0 rgba(246, 234, 202, 0.18), 0 30px 80px rgba(6, 18, 16, 0.58);
}

/* اللافتةُ حين يشعلها المالك: زمرّدٌ عميق وحبرٌ ذهبيّ */
:root[data-theme="ramadan"] .site-banner {
  background-image: linear-gradient(90deg, #0A1614 0%, #12372E 50%, #0A1614 100%);
  border-bottom-color: rgba(205, 163, 73, 0.45);
  color: #F0DCA8;
}

/* خيطٌ ذهبيّ أسفل الرأس، وشبكةُ أرابيسك شفيفة في الفوتر */
:root[data-theme="ramadan"] .site-header { box-shadow: 0 1px 0 rgba(205, 163, 73, 0.40), 0 6px 18px rgba(10, 22, 20, 0.10); }
:root[data-theme="ramadan"] .site-footer {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 19px, rgba(205, 163, 73, 0.07) 19px 20px),
    repeating-linear-gradient(-45deg, transparent 0 19px, rgba(205, 163, 73, 0.07) 19px 20px);
}

/* ── تقليلُ الحركة: يبقى المشهدُ كاملًا بلا حركةٍ واحدة ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="ramadan"] .theme-stage-hero .stage-fallback::before,
  :root[data-theme="ramadan"] .theme-stage-hero .stage-fallback::after { animation: none; opacity: 1; }
  :root[data-theme="ramadan"] .product-card { transition: none; }
}