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

   وزخرفتُه **حبيباتٌ ترابية** (نقاطٌ متفاوتة لا خطوط) — ثامنُ معجمٍ زخرفيّ في
   ثمانية مواسم: معيّناتٌ · أشعّة · ثمانيات · هالاتٌ صرف · سداسيات · أقواسٌ
   نباتية · خيوطُ نسيج · وحبيبات. فلا موسمين يتشابهان في نسيجهما. */

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

/* حبيباتٌ ترابية خفيفة — نسيجُ ورقٍ خشن لا شبكةَ خطوط */
:root[data-theme="autumn"] .theme-stage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 12% 18%, rgba(231, 154, 91, 0.30), transparent 60%),
    radial-gradient(circle 1.5px at 38% 62%, rgba(231, 154, 91, 0.24), transparent 60%),
    radial-gradient(circle 1.5px at 64% 28%, rgba(231, 154, 91, 0.26), transparent 60%),
    radial-gradient(circle 1.5px at 86% 74%, rgba(231, 154, 91, 0.20), transparent 60%),
    radial-gradient(circle 1.5px at 24% 88%, rgba(231, 154, 91, 0.22), transparent 60%);
  background-size: 130px 130px, 96px 96px, 152px 152px, 112px 112px, 174px 174px;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 70%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, transparent 70%);
}

/* الغَسلةُ: ضوءٌ نحاسيّ مائل من اليمين الأعلى، وترابٌ في الأسفل */
:root[data-theme="autumn"] .theme-stage-hero .stage-fallback {
  background-image:
    radial-gradient(46% 46% at 78% 22%, rgba(231, 154, 91, 0.24), transparent 72%),
    radial-gradient(72% 48% at 44% 106%, rgba(210, 106, 42, 0.26), transparent 72%),
    linear-gradient(to bottom, rgba(24, 15, 8, 0.60) 0%, rgba(32, 20, 8, 0.28) 46%, rgba(62, 45, 24, 0.50) 100%);
}

/* أوراقٌ ساكنة معلّقة — بديلٌ يكفي وحده بلا جافاسكربت */
:root[data-theme="autumn"] .theme-stage-hero .stage-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(7px 14px at 22% 28%, rgba(231, 154, 91, 0.82), transparent 68%),
    radial-gradient(6px 12px at 42% 54%, rgba(210, 106, 42, 0.70), transparent 68%),
    radial-gradient(9px 17px at 62% 34%, rgba(231, 154, 91, 0.66), transparent 68%),
    radial-gradient(5px 10px at 16% 66%, rgba(210, 106, 42, 0.52), transparent 68%),
    radial-gradient(7px 13px at 82% 60%, rgba(231, 154, 91, 0.48), transparent 68%),
    radial-gradient(5px 11px at 50% 80%, rgba(210, 106, 42, 0.40), transparent 68%);
  mix-blend-mode: screen;
  animation: autumn-tumble 26s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

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

/* شعاعٌ نحاسيّ مائل يتنفّس — شمسُ العصر في الخريف */
:root[data-theme="autumn"] .theme-stage-hero .stage-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(112deg, transparent 46%, rgba(255, 216, 170, 0.18) 60%, transparent 74%);
  mix-blend-mode: screen;
  animation: autumn-glow 13s ease-in-out infinite alternate;
}

/* شريطُ رأس صفحات التصفّح — حبيباتٌ ساكنة على أرضيةٍ فاتحة */
:root[data-theme="autumn"] .theme-stage-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 20% 30%, rgba(138, 61, 18, 0.22), transparent 60%),
    radial-gradient(circle 1.5px at 66% 70%, rgba(138, 61, 18, 0.18), transparent 60%),
    radial-gradient(70% 100% at 76% 0%, rgba(231, 154, 91, 0.24), transparent 72%);
  background-size: 104px 104px, 138px 138px, auto;
  -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 autumn-tumble {
  from { transform: translate3d(-1.6%, -2.2%, 0) rotate(-1.2deg); opacity: 0.80; }
  to { transform: translate3d(1.8%, 2.8%, 0) rotate(1.6deg); opacity: 1; }
}
@keyframes autumn-glow {
  from { opacity: 0.66; }
  to { opacity: 1; }
}

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

:root[data-theme="autumn"] .season-badge {
  background-image: linear-gradient(135deg, rgba(32, 20, 8, 0.97), rgba(86, 44, 14, 0.97));
  border-color: rgba(231, 154, 91, 0.56);
  color: #F3C79C;
  box-shadow: inset 0 1px 0 rgba(250, 244, 236, 0.16), 0 2px 10px rgba(32, 20, 8, 0.22);
}

/* فاصلُ الأقسام: خيطٌ نحاسيّ يسطع في وسطه */
:root[data-theme="autumn"] .eyebrow-rule {
  background-image: linear-gradient(90deg, rgba(231, 154, 91, 0) 0%, #D26A2A 20%, rgba(250, 244, 236, 0.96) 50%, #D26A2A 80%, rgba(231, 154, 91, 0) 100%);
  box-shadow: 0 0 10px rgba(210, 106, 42, 0.45);
}

:root[data-theme="autumn"] .product-card {
  box-shadow: inset 0 0 0 1px rgba(210, 106, 42, 0.28), 0 1px 2px rgba(32, 20, 8, 0.06);
  transition: box-shadow 260ms ease, transform 260ms ease;
}
:root[data-theme="autumn"] .product-card:hover {
  box-shadow: inset 0 0 0 1px rgba(210, 106, 42, 0.70), 0 14px 32px rgba(32, 20, 8, 0.18);
}

/* لوحُ البطل: أرضيةٌ تدفع ثمنَ الضوء الجمعيّ — 0.86 تُبقي 14% والطمسَ الزجاجيّ.
   وهذا أعلى المواسم لأن `--accent-on-dark` فيه أفتحُ من نظائره، فيحتاج أعتمَ لوح. */
:root[data-theme="autumn"] .hero-panel {
  background-color: rgba(24, 15, 8, 0.86);
  border-color: rgba(231, 154, 91, 0.32);
  box-shadow: inset 0 1px 0 rgba(250, 244, 236, 0.18), 0 30px 80px rgba(24, 15, 8, 0.58);
}

:root[data-theme="autumn"] .site-banner {
  background-image: linear-gradient(90deg, #201408 0%, #8A3D12 52%, #201408 100%);
  border-bottom-color: rgba(231, 154, 91, 0.46);
  color: #FAE0C6;
}

:root[data-theme="autumn"] .site-header { box-shadow: 0 1px 0 rgba(210, 106, 42, 0.40), 0 6px 18px rgba(32, 20, 8, 0.10); }
:root[data-theme="autumn"] .site-footer {
  background-image:
    radial-gradient(circle 1.5px at 18% 26%, rgba(231, 154, 91, 0.16), transparent 60%),
    radial-gradient(circle 1.5px at 62% 68%, rgba(231, 154, 91, 0.12), transparent 60%);
  background-size: 118px 118px, 152px 152px;
}

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