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

   **ودفءُ الأقمشة الذي يطلبه الموسم لا يُخترَع هنا**: الغَسلةُ باردة، والدفءُ
   يأتي من صورة البطل نفسها تحتها (مصابيحُ الغرفة وأقمشتُها) لأن المشهد يُركَّب
   جمعًا فلا يحجب. فالموسمُ يبرّد الجوّ ويترك البيتَ دافئًا — وهي الصورةُ
   المقصودة تمامًا: بردٌ في الخارج ودفءٌ في الداخل. */

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

/* بلّوراتٌ سداسية باهتة كزجاجٍ مثلَّج على الحواف — لا شبكةَ مربّعات */
:root[data-theme="winter"] .theme-stage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(60deg, transparent 0 28px, rgba(127, 195, 232, 0.10) 28px 29px),
    repeating-linear-gradient(-60deg, transparent 0 28px, rgba(127, 195, 232, 0.10) 28px 29px),
    repeating-linear-gradient(0deg, transparent 0 48px, rgba(127, 195, 232, 0.06) 48px 49px);
  -webkit-mask-image: radial-gradient(112% 108% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.85) 100%);
  mask-image: radial-gradient(112% 108% at 50% 50%, transparent 38%, rgba(0, 0, 0, 0.85) 100%);
}

/* الغَسلةُ: أزرقٌ عميق يعلو، وضبابٌ فاتح يتجمّع في الأسفل */
:root[data-theme="winter"] .theme-stage-hero .stage-fallback {
  background-image:
    radial-gradient(76% 46% at 50% 104%, rgba(127, 195, 232, 0.20), transparent 72%),
    linear-gradient(to bottom, rgba(10, 20, 30, 0.62) 0%, rgba(14, 26, 38, 0.30) 46%, rgba(44, 66, 87, 0.50) 100%);
}

/* حبّاتُ ثلجٍ ساكنة — بديلٌ يكفي وحده بلا جافاسكربت */
:root[data-theme="winter"] .theme-stage-hero .stage-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 3px at 18% 22%, rgba(243, 247, 251, 0.92), transparent 64%),
    radial-gradient(circle 2px at 36% 44%, rgba(243, 247, 251, 0.72), transparent 64%),
    radial-gradient(circle 4px at 58% 16%, rgba(243, 247, 251, 0.85), transparent 64%),
    radial-gradient(circle 2px at 72% 58%, rgba(243, 247, 251, 0.60), transparent 64%),
    radial-gradient(circle 3px at 86% 30%, rgba(243, 247, 251, 0.70), transparent 64%),
    radial-gradient(circle 2px at 26% 70%, rgba(243, 247, 251, 0.52), transparent 64%),
    radial-gradient(circle 3px at 48% 80%, rgba(243, 247, 251, 0.46), transparent 64%);
  mix-blend-mode: screen;
  animation: winter-drift 23s linear infinite;
  will-change: transform;
}

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

/* شريطُ ضبابٍ رقيق يمرّ في وسط المشهد ويتنفّس */
:root[data-theme="winter"] .theme-stage-hero .stage-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, transparent 38%, rgba(190, 216, 236, 0.16) 52%, transparent 68%);
  mix-blend-mode: screen;
  animation: winter-fog 14s ease-in-out infinite alternate;
}

/* شريطُ رأس صفحات التصفّح — زجاجٌ مثلَّج ساكن على أرضيةٍ فاتحة */
:root[data-theme="winter"] .theme-stage-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(60deg, transparent 0 22px, rgba(15, 92, 134, 0.09) 22px 23px),
    repeating-linear-gradient(-60deg, transparent 0 22px, rgba(15, 92, 134, 0.09) 22px 23px),
    radial-gradient(70% 100% at 72% 0%, rgba(127, 195, 232, 0.22), transparent 72%);
  -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 winter-drift {
  from { transform: translate3d(0, -3%, 0); }
  to { transform: translate3d(2.4%, 3%, 0); }
}
@keyframes winter-fog {
  from { opacity: 0.55; transform: translate3d(-1.6%, 0, 0); }
  to { opacity: 1; transform: translate3d(1.6%, 0, 0); }
}

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

:root[data-theme="winter"] .season-badge {
  background-image: linear-gradient(135deg, rgba(14, 26, 38, 0.97), rgba(24, 62, 90, 0.97));
  border-color: rgba(127, 195, 232, 0.56);
  color: #CFE6F5;
  box-shadow: inset 0 1px 0 rgba(243, 247, 251, 0.16), 0 2px 10px rgba(14, 26, 38, 0.22);
}

/* فاصلُ الأقسام: خيطٌ ثلجيّ يسطع في وسطه */
:root[data-theme="winter"] .eyebrow-rule {
  background-image: linear-gradient(90deg, rgba(127, 195, 232, 0) 0%, #3E9FD4 20%, rgba(243, 247, 251, 0.98) 50%, #3E9FD4 80%, rgba(127, 195, 232, 0) 100%);
  box-shadow: 0 0 10px rgba(62, 159, 212, 0.45);
}

:root[data-theme="winter"] .product-card {
  box-shadow: inset 0 0 0 1px rgba(62, 159, 212, 0.26), 0 1px 2px rgba(14, 26, 38, 0.06);
  transition: box-shadow 260ms ease, transform 260ms ease;
}
:root[data-theme="winter"] .product-card:hover {
  box-shadow: inset 0 0 0 1px rgba(62, 159, 212, 0.66), 0 14px 32px rgba(14, 26, 38, 0.18);
}

/* لوحُ البطل: أرضيةٌ تدفع ثمنَ الضوء الجمعيّ — 0.83 تُبقي 17% والطمسَ الزجاجيّ */
:root[data-theme="winter"] .hero-panel {
  background-color: rgba(10, 20, 30, 0.83);
  border-color: rgba(127, 195, 232, 0.32);
  box-shadow: inset 0 1px 0 rgba(243, 247, 251, 0.18), 0 30px 80px rgba(10, 20, 30, 0.58);
}

:root[data-theme="winter"] .site-banner {
  background-image: linear-gradient(90deg, #0E1A26 0%, #1B4E72 52%, #0E1A26 100%);
  border-bottom-color: rgba(127, 195, 232, 0.46);
  color: #D9EDF9;
}

:root[data-theme="winter"] .site-header { box-shadow: 0 1px 0 rgba(62, 159, 212, 0.38), 0 6px 18px rgba(14, 26, 38, 0.10); }
:root[data-theme="winter"] .site-footer {
  background-image:
    repeating-linear-gradient(60deg, transparent 0 24px, rgba(127, 195, 232, 0.06) 24px 25px),
    repeating-linear-gradient(-60deg, transparent 0 24px, rgba(127, 195, 232, 0.06) 24px 25px);
}

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