/* هيكلُ طبقة المشهد (الدفعة W5) — **هندسةٌ بلا موسم**.
   ════════════════════════════════════════════════════════════════════════════
   هذه الورقةُ لا تعرف مفتاح ثيمٍ واحد (يقيس ذلك `ui/themeAssets.test.ts`): هنا
   المواضعُ والأحجام والطبقات، وفي `stages/<key>.css` الطلاءُ وحده. فالفصلُ ليس
   ذوقًا: ورقةُ الموسم ممنوعةٌ بشاهدٍ من إعلان أي خاصيةِ تخطيط خارج طبقة المشهد،
   وهو ما يُبقي القاعدةَ المعلنة «الثيم يلوّن ويزخرف ولا يغيّر التخطيط» **مقيسة**.

   تُحمَّل مع ورقة الموسم وحدها — فزائرُ الثيم الأساسيّ لا يجلب منها بايتًا.

   ولا شيءَ هنا يبتلع نقرةً أو يدخل شجرةَ الوصول: الحاوية `aria-hidden` في
   القالب، و`pointer-events: none` هنا. */

/* ── الطبقة ──────────────────────────────────────────────────────────────
   نسختان: `hero` داخل بطل الرئيسية (تحت النصّ وفوق الصورة)، و`band` شريطٌ خلف
   رأس صفحات التصفّح — وهي طفلُ `<body>` لا `<main>` كي لا تنالها قاعدةُ
   التوسيط `main > *`، وبـ`z-index: -1` كي تبقى خلف كل محتوى الصفحة. */
.theme-stage {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.theme-stage-hero { inset: 0; z-index: 2; }
.theme-stage-band {
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 380px;
  z-index: -1;
}

/* البديلُ الثابت — يرسمه CSS بحتًا في ورقة الموسم، ويبقى وحده بلا جافاسكربت
   أو خلف بوّابةٍ مغلقة. فلا صفحةَ بلا مشهدٍ بحال. */
.stage-fallback {
  position: absolute;
  inset: 0;
  display: block;
}

/* القماشُ ينشئه `js/stage.js` بعد نجاح السياق — فلا مربّعَ فارغ حيث لا رسم.
   ويدخل بتلاشٍ هادئ كي لا يقفز المشهد فجأةً فوق الصورة. */
.stage-canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  animation: stage-enter 1400ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes stage-enter { from { opacity: 0; } to { opacity: 1; } }

/* ── شارةُ الموسم في الرأس ───────────────────────────────────────────────
   هندستُها هنا وطلاؤها في ورقة الموسم. ومخفيّةٌ دون 1024 بقياسٍ لا بتقدير:
   الرأسُ عند 768 يحمل الشعارَ وأربعةَ روابط وزرَّ السلة في 736 بكسلًا صافية،
   ولا يتّسع لشارةٍ بلا قصِّ نصٍّ أو التفافِ سطر. والموسمُ يبلغ زائرَ الجوال
   بألوانه وبزخرفة بطله وبنصّه — لا بهذه الشارة وحدها. */
.season-badge {
  display: none;
  align-items: center;
  min-block-size: 30px;
  padding-block: 4px;
  padding-inline: 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .season-badge { display: inline-flex; }
}

/* ── تقليلُ الحركة: لا شيءَ يتحرّك ───────────────────────────────────────
   المشهدُ الحيّ لا يُنزَّل أصلًا في هذه الحالة (بوّابةُ `js/themes/gate.js`)،
   وهذه الكتلةُ تُطفئ حركةَ **البديل الثابت** وتلاشيَ القماش معًا — فالتفضيل
   محترَمٌ في المسارين لا في واحد. */
@media (prefers-reduced-motion: reduce) {
  .stage-canvas { animation: none; opacity: 1; }
  .theme-stage .stage-fallback,
  .theme-stage .stage-fallback::before,
  .theme-stage .stage-fallback::after {
    animation: none !important;
    transition: none !important;
  }
}