/* ── hero-03 · كليب ملء الشاشة والنص **مركون بأسفله** ──
   🔄 تاريخ القسم بثلاث محطات — مهم عشان ما نرجع لورا بالغلط:
      ١. انولد «كليب لحاله بلا ولا حرف» لما انفصل النص لـ`intro-01`.
      ٢. أحمد شاف النتيجة على تلفونه (2026-09-12) وطلب: **«الكبستين
         تنلغي نهائياً، والكلام ينندمج مع قسم الفيديو على الجزء السفلي
         منه، وفي شيدز خفيف»** ⇒ رجع النص لهون، **بلا أزرار**.
      ٣. فـ`intro-01` صار **غير مستعمل بكانديفا** (باقي بالمكتبة لمشاريع
         بدها كتلة نص متوسّطة لحالها).

   🔑 ليش مش رجوع لـ`hero-02`: `hero-02` محطته **جانبية** (عمود نص بعرض
      `46vw` وتدرّج أفقي) وبتنقلب لأسفل الشاشة بس تحت 760px. هون النص
      **بأسفل الكادر بكل العروض** ومتوسّط — تخطيط مختلف لا نسخة.
   🔑 ما في `[dir=ltr]{scaleX(-1)}` هون بقصد: النص متوسّط فما بيتصادم مع
      موضوع الكادر بأي لغة (بعكس `hero-02` اللي نصّه بجهة).

   🔑 `calc(100svh - var(--nav-h))` لا `100svh`: الهيدر عنا **بالتدفّق** وبياخد
      من فوق، فبـ`100svh` وحدها القسم بينزل تحت الطيّة. (نفس التصحيح المقيس
      اللي انعمل بـ`hero-02` — منقول عمداً مش منسوخ سهواً.)
   🔑 `svh` لا `vh`: `vh` بتتجاهل شريط رابط المتصفح على الموبايل (≈١٥٪). */
.hero03{position:relative;height:calc(100svh - var(--nav-h));
        overflow:hidden;background:var(--bg-2)}
.hero03 video,
.hero03 img{position:absolute;inset:0;width:100%;height:100%;
            object-fit:cover;display:block}

/* ── مؤشّر «نزّل» ──
   🔴 بيبلّش **مخفي** وبيظهر لما يخلص الكليب (`.is-done` بتنحط بالـJS) —
      🔄 **انقلب المنطق (2026-09-12، طلب أحمد «لازم يشتغل مع التنزيل»):**
      كان بيبين **بعد** ما يخلص الكليب لأن الكليب كان بيمشي لحاله. هلأ
      الكليب **ساكن لحد ما تنزّل** ⇒ المؤشّر لازم يبين **من أول لحظة**،
      هو الدعوة الوحيدة اللي بتقول «نزّل عشان يتحرّك». وبيروح أول ما
      يبلّش السحب (`.is-scrubbing` على القسم) لأنه بيكون خلّص شغله.
   🔑 الافتراضي **باين**: بلا JS أو بتقليل الحركة الكليب ما بينسحب ⇒
      لو الظهور معلّق على JS بيضل المؤشّر مخفي للأبد. نفس قاعدة `intro-01`.
   🔑 `left` فيزيائية بقصد: `inset-inline-start:50%` مع `translateX(-50%)`
      بتزيح العنصر عن المركز بالـRTL. نفس الاستثناء المسجَّل بـ`hero-01/02`. */
/* 🔄 نزل من `--s-4` لـ`--s-2` لما إجت كتلة النص فوقه (2026-09-12): الاتنين
   بنفس العمود المتوسّط، فكل بكسل بيبعّدهم بيمنع تلامس على شاشة قصيرة. */
.hero03 .cue{position:absolute;left:50%;bottom:var(--s-2);z-index:6;
             transform:translateX(-50%);display:flex;flex-direction:column;
             align-items:center;gap:8px;font-family:var(--lat);font-size:12px;
             letter-spacing:.16em;color:var(--on-scrim);
             opacity:.92;transition:opacity .5s ease}
.hero03.is-scrubbing .cue{opacity:0}
/* 🔴 تعتيم أسفل القسم كله — **إلزامي لا تجميلي**: نص `--on-scrim` (فاتح)
   واقف على كليب بيتغيّر مع الوقت، فما في بقعة ثابتة نراهن على تباينها.
   وكادر كانديفا **فاتح جداً** (كتان بيج + شمع كريمي) ⇒ الأبيض عليه بلا
   تعتيم ≈1.1:1. فـ«الشيدز الخفيف» اللي طلبه أحمد سقفه من فوق: الأخفّ
   اللي **بيوصل 4.5:1**، لا الأخفّ اللي بيعجب العين.
   ⚠️ **نسختان سابقتان سقطتا بالقياس، لا بالرأي:**
      ١. هالو دائري بـ`var(--scrim)` (٤٦٪) — باهت فوق كادر بيج فاتح.
      ٢. تدرّج خطّي بسيط `.62 ← شفاف`: التدرّج الخطّي بيوصل ذروته **بآخر
         بكسل**، والمؤشّر واقف على ارتفاع ≈٦٪ من القسم ⇒ نصيبه ≈٣٣٪ بس.
         (مقيس بقصّ شريط من لقطة ١٤٤٠: «SCROLL» ما انقرا.)
   ✅ الحل: **محطات صريحة** بدل التدرّج الخطّي.
   🔄 **كبر من 34% لـ74% لما نزل النص جوّا القسم (2026-09-12):** 34% كانت
      مفصّلة على المؤشّر لوحده (≈٦٪ من القسم). كتلة النص بتوصل لـ≈٤٢٪ من
      ارتفاع القسم على الديسكتوب، وبـ34% كان **أعلى سطر** (الـeyebrow)
      بيقع فوق التدرّج كلياً.
      الحساب اللي اختار المحطات (أبيض فوق كادر كتان ≈(205,198,190)):
      شفافية .46 ⇒ ≈4.5:1 · .52 ⇒ ≈5.5:1 · .60 ⇒ ≈6.4:1.
      ⇒ أعلى النص بيقع عند ≈.52 باللغتين وبالمقاسين، وأسفله أغمق.
   🔑 على القسم لا على النص: عشان يضل التعتيم ثابتاً مهما تغيّر محتواه. */
.hero03::after{content:"";position:absolute;inset-inline:0;bottom:0;
  height:74%;z-index:4;pointer-events:none;
  background:linear-gradient(to top,
             rgb(var(--scrim-rgb)/.74) 0%,
             rgb(var(--scrim-rgb)/.70) 22%,
             rgb(var(--scrim-rgb)/.60) 45%,
             rgb(var(--scrim-rgb)/.46) 65%,
             rgb(var(--scrim-rgb)/.18) 85%,
             transparent 100%)}

/* ── كتلة النص: مركونة بأسفل الكادر ──
   🔑 `position:absolute` ⇒ **ما بتزيد ولا بكسل على ارتفاع القسم**، وهاد
      شرط: القسم مثبَّت بـScrollTrigger (`pin`)، وأي تغيير بطوله بعد
      التحميل بيبعثر حسابات كل المحرّكات اللي بعده. [[rules-scrolltrigger-pins]]
   🔑 الحشوة السفلية بتترك مكان المؤشّر تحت النص — الاتنين بنفس العمود
      المتوسّط فلازم ما يتلامسوا. */
.hero03 .h3-copy{position:absolute;z-index:5;inset-inline:0;bottom:0;
                 text-align:center;padding-inline:var(--s-4);
                 padding-block-end:92px;
                 color:var(--on-scrim)}
.hero03 .h3-copy>*{max-width:34ch;margin-inline:auto}

/* الـeyebrow بالعادة `--accent` — **بينهار هون**: البنّي المحروق فوق تعتيم
   غامق = 1.8:1 (محسوب). فوق التعتيم اللون الوحيد الصالح هو `--on-scrim`. */
.hero03 .h3-copy .eyebrow{font-family:var(--lat);font-size:14px;font-weight:600;
                          letter-spacing:.18em;display:block;
                          margin-bottom:var(--s-2);
                          color:rgb(var(--on-scrim-rgb)/.92)}
.hero03 .h3-copy h1{font-size:clamp(28px,4.2vw,50px);line-height:1.18;
                    letter-spacing:-.02em;font-weight:800;
                    margin-bottom:var(--s-2);max-width:22ch;
                    text-wrap:balance}
/* مش `--muted`: هاد لون غامق مصمَّم لخلفية فاتحة. فوق التعتيم بنخفّف
   نفس الأبيض بدل ما نبدّل اللون — بيضل فوق 4.5:1. */
.hero03 .h3-copy .lede{font-size:clamp(15px,1.5vw,17.5px);line-height:1.65;
                       max-width:46ch;text-wrap:pretty;
                       color:rgb(var(--on-scrim-rgb)/.88)}

/* ── الظهور عند التحميل ──
   🔑 أنيميشن CSS خالص لا JS: هاد القسم **أول شاشة**، فما بستنى
      `IntersectionObserver` ولا مكتبة. و`both` بترجّع العنصر لحالته
      النهائية (باين) بلا ما حدا يناديها. الافتراضي هو الظهور. */
@keyframes h3Rise{from{opacity:0;transform:translateY(16px)}
                  to{opacity:1;transform:none}}
.hero03 .h3-copy .eyebrow{animation:h3Rise .8s ease .15s both}
.hero03 .h3-copy h1{animation:h3Rise .8s ease .27s both}
.hero03 .h3-copy .lede{animation:h3Rise .8s ease .39s both}
.hero03 .cue i{display:block;width:1px;height:38px;background:rgba(255,255,255,.42);
               position:relative;overflow:hidden}
.hero03 .cue i::after{content:"";position:absolute;inset-inline:0;top:-38px;
                      height:38px;background:var(--on-scrim);
                      animation:cueDrop 2.2s ease-in-out infinite}
@keyframes cueDrop{0%{transform:translateY(0)}60%,100%{transform:translateY(76px)}}

/* لمن طلب تقليل الحركة: الكليب لا بينسحب ولا بيشتغل (قرار بالـJS) ⇒
   المؤشّر بيضل باين وبلا حركة داخلية. */
/* ══ الديسكتوب: كتلة النص تنتقل لليمين وبنص الارتفاع (طلب أحمد 2026-09-15) ══
   «انقل الكتابة لليمين بالنص بالزبط بمكان ما الفيديو فاضي — بس بالديسكتوب».

   🔑 **`right` فيزيائية بقصد، لا `inset-inline-end`.** الفراغ بالكادر مش
      فراغ بالتخطيط — هو بقعة blur فاضية بالجهة اليمنى **من الفيديو نفسه**،
      و`hero-03` ما بيقلب الكادر باللغة (بعكس `hero-02` وقلبه `scaleX(-1)`).
      فلو استعملنا `inset-inline-end` كانت الكتلة بتقفز لليسار بالإنجليزي
      **فوق الشموع** بالضبط. الاتجاه هون خاصية الصورة لا خاصية اللغة.
   🔑 محاذاة النص بتضل `start` (يمين بالعربي · يسار بالإنجليزي) — الكتلة
      مركونة فيزيائياً بس القراءة جوّاها منطقية.
   🔑 الحدّ 900px لا 761px (نقطة قص الكليب): بين الاتنين الشاشة عريضة بس
      ضيّقة، وعمود بعرض 42vw بيطلع سطراً من كلمتين. تحت 900 النص بيضل بأسفله.
   🔑 `transform:translateY(-50%)` على الحاوية وحدها — أنيميشن `h3Rise`
      على **الأبناء**، فما في تصادم transform. */
@media(min-width:900px){
  .hero03 .h3-copy{inset-inline:auto;right:clamp(32px,6vw,110px);
                   top:50%;bottom:auto;transform:translateY(-50%);
                   width:min(40ch,42vw);text-align:start;
                   padding-inline:0;padding-block-end:0}
  /* الحدود القديمة (34ch/22ch/46ch) كانت لعمود متوسّط بعرض الشاشة — هون
     عرض الكتلة هو الحدّ، وبلا هالسطر بيتقصّر النص جوّا عمود أضيق منه. */
  .hero03 .h3-copy>*,
  .hero03 .h3-copy h1,
  .hero03 .h3-copy .lede{margin-inline:0;max-width:none}

  /* ── التعتيم انقلب من عمودي لأفقي ──
     النص راح على اليمين، والتدرّج السفلي (74%) بيغطي مكاناً فاضياً هلأ
     وبيسيب النص عارياً. 🔴 وهاد **إلزامي لا تجميلي**: الجهة اليمنى من
     الكادر فاتحة وبتفتح أكتر مع تقدّم الكشف.
     📐 المحطات مقيسة من الكليب نفسه بـ`pdf/hero-right-contrast.sh`
        (أفتح عيّنة بمنطقة النص عبر ٤ لحظات = rgb(205,189,181)):
        α=.42 ⇒ 4.16:1 🔴 · **α=.46 ⇒ 4.61:1 ✅** · .52 ⇒ 5.34 · .58 ⇒ 6.21.
        ⇒ حافة النص اليسرى (≈52% من العرض) لازم تلاقي **≥.48**، وهي القيمة
        المثبَّتة هناك بالضبط. الشمعتان (≥70% من اليسار) بتاخدوا ≤.20.
     🔑 طبقة تانية سفلية **للمؤشّر لحاله**: هو ضل بالوسط بالأسفل، وبلاها
        بياخد ≈.10 من التدرّج الأفقي. مقيس كمان (`… .sh cue`): أفتح عيّنة
        rgb(211,194,180) ⇒ 4.5:1 عند ≈.475 ⇒ ثبّتنا .52 بالقاع.
     🔑 `inset:0` و`height:auto` بتلغي الـ74% — التصريحان لازمان مع بعض،
        لأن `height` بالقاعدة الأصلية أخصّ من `inset`. */
  .hero03::after{inset:0;height:auto;
    background:
      linear-gradient(to left,
                 rgb(var(--scrim-rgb)/.62) 0%,
                 rgb(var(--scrim-rgb)/.56) 28%,
                 rgb(var(--scrim-rgb)/.48) 52%,
                 rgb(var(--scrim-rgb)/.20) 72%,
                 rgb(var(--scrim-rgb)/.06) 86%,
                 transparent 95%),
      linear-gradient(to top,
                 rgb(var(--scrim-rgb)/.52) 0%,
                 rgb(var(--scrim-rgb)/.50) 8%,
                 transparent 20%)}
}

@media(prefers-reduced-motion:reduce){
  /* 🔴 إلزامي: بلا هالسطر كتلة النص بتضل عالقة على `from` (شفافية صفر).
     انكشف بلقطة — الـ`lede` (أطول تأخير) **اختفت كلياً** والباقي بان.
     نفس فخّ «الإخفاء المعلّق على حدث ما بيجي». */
  .hero03 .h3-copy .eyebrow,
  .hero03 .h3-copy h1,
  .hero03 .h3-copy .lede{animation:none}
  .hero03 .cue{opacity:.92}
  .hero03.is-scrubbing .cue{opacity:.92}
  .hero03 .cue i::after{animation:none;top:0}
}