/* ==========================================================================
   hero-photo.css — وضع الهيرو بصورة واقعية للرياض (حي الملك عبدالله المالي)
   --------------------------------------------------------------------------
   كل القواعد محصورة داخل \u200E.hero-mode-photo\u200E على <body>.
   إزالة ذلك الصنف وحده تُعيد الهيرو الرسومي الأصلي فوراً دون أي أثر.
   للتبديل:  node tools/hero.js photo | illustration
   ========================================================================== */

/* --- 1. إخفاء الطبقات الرسومية الأصلية (تبقى في HTML سليمة) --- */
.hero-mode-photo .sky,
.hero-mode-photo .stars,
.hero-mode-photo .sun,
.hero-mode-photo .haze,
.hero-mode-photo .skyline { display: none; }

/* --- 2. طبقة الصورة --- */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;          /* يقصّ حركة البارالاكس داخل الهيرو */
  background: #0E1B2A;       /* لون احتياطي قبل تحميل الصورة */
}

.hero-photo picture {
  display: block;
  position: absolute;
  inset: -4% 0;              /* هامش إضافي يمنع ظهور حواف أثناء الإزاحة */
}

/* في العربية النص على اليمين، والأبراج في الصورة الحالية على يمينها أيضاً،
   فيغطيها النص والحجاب. نعكس الصورة أفقياً في RTL فتنتقل الأبراج إلى الجهة
   الخالية من النص. نقطة التركيز تُطبَّق قبل العكس فيبقى القصّ نفسه.
   لو استُبدلت الصورة بأخرى أبراجها يسار الإطار، احذف هذه القاعدة.
   (js/hero-photo.js يعكس اتجاه الانزياح الأفقي هنا ليبقى معاكساً للمؤشّر) */
html[dir="rtl"] body.hero-mode-photo .hero-photo picture { transform: scaleX(-1); }

/* الحركة الوحيدة: انزياح لطيف يتبع مؤشّر الفأرة.
   لا تقريب ولا ابتعاد، ولا حركة تلقائية مستمرة.
   المتغيّران \u200E--mx/--my\u200E يضبطهما js/hero-photo.js. */
.hero-photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* نقطة التركيز تأتي من tools/hero.config.json عبر متغيّر مضمّن في الوسم */
  object-position: var(--hero-focal, 50% 62%);

  /* تكبير ثابت صغير: يوفّر مجالاً للانزياح دون كشف حواف الصورة.
     ثابت تماماً — ليس حركة تقريب. */
  transform: scale(1.06) translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}

/* ظهور أولي هادئ عند تحميل الصفحة */
.hero-photo { animation: heroPhotoIn 1.1s var(--ease, ease-out) both; }
@keyframes heroPhotoIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- 3. حجاب التباين ---
   الصورة سماؤها فاتحة، والنص أبيض. هذا التدرّج يضمن تباين النص
   فوق 4.5:1 وقد تم قياسه فعلياً على البكسل المرسوم. */
.hero-mode-photo .hero-scrim {
  background:
    linear-gradient(to bottom,
      rgba(10,16,26,.82) 0%,
      rgba(10,16,26,.55) 26%,
      rgba(10,16,26,.42) 62%,
      rgba(10,16,26,.72) 100%);
}

/* تعتيم إضافي من جهة النص فقط، مع احترام اتجاه الصفحة.

   انتبه للمحدِّد: السمة dir موضوعة على <html> والصنف على <body>،
   فلا يصح تركيبهما على عنصر واحد ([dir="rtl"].hero-mode-photo) —
   يجب أن يكونا سلفاً وخلفاً. القيم مضبوطة بالقياس عبر tools/hero-check.js */
html[dir="rtl"] body.hero-mode-photo .hero-scrim {
  background:
    linear-gradient(to left,
      rgba(10,16,26,.86) 0%, rgba(10,16,26,.62) 45%, rgba(10,16,26,.22) 78%, rgba(10,16,26,.10) 100%),
    linear-gradient(to bottom,
      rgba(10,16,26,.70) 0%, rgba(10,16,26,.34) 30%, rgba(10,16,26,.34) 66%, rgba(10,16,26,.70) 100%);
}
html[dir="ltr"] body.hero-mode-photo .hero-scrim {
  background:
    linear-gradient(to right,
      rgba(10,16,26,.86) 0%, rgba(10,16,26,.62) 45%, rgba(10,16,26,.22) 78%, rgba(10,16,26,.10) 100%),
    linear-gradient(to bottom,
      rgba(10,16,26,.70) 0%, rgba(10,16,26,.34) 30%, rgba(10,16,26,.34) 66%, rgba(10,16,26,.70) 100%);
}

/* على الشاشات الضيقة يمتد النص بعرض الشاشة كاملاً، فالتدرّج الجانبي
   لا يغطيه. نستبدله بتعتيم رأسي أقوى ومتجانس.
   ملاحظة: [dir] ضرورية لمساواة تخصيص القاعدتين أعلاه حتى تفوز هذه لاحقاً. */
@media (max-width: 780px) {
  html[dir] body.hero-mode-photo .hero-scrim {
    background: linear-gradient(to bottom,
      rgba(10,16,26,.80) 0%,
      rgba(10,16,26,.68) 26%,
      rgba(10,16,26,.68) 52%,
      rgba(10,16,26,.54) 76%,
      rgba(10,16,26,.78) 100%);
  }
}

/* توهّج أرضي بلون الهوية يربط الصورة ببقية الصفحة */
.hero-mode-photo .ground-glow {
  block-size: 34%;
  background: linear-gradient(0deg,
    rgba(186,88,62,.34) 0%, rgba(186,88,62,.10) 45%, rgba(186,88,62,0) 100%);
}

/* --- 4. احترام تفضيل تقليل الحركة ---
   الصورة تبقى ظاهرة كاملة، وتتوقف كل حركة. */
@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none !important; }
  .hero-photo img {
    transform: scale(1.02) !important;
    transition: none !important;
  }
}

/* أجهزة اللمس لا مؤشّر فيها — نلغي الانزياح ومجاله الاحتياطي */
@media (hover: none), (pointer: coarse) {
  .hero-photo img {
    transform: scale(1.02);
    transition: none;
  }
}

/* --- 5. الطباعة --- */
@media print {
  .hero-photo { display: none !important; }
}