/* ── fil-01 · كاروسيل أفقي مثبَّت، والخيط بينرسم بين الشرائح ──
   المرجع: قسم `fil` بـ`hagitantebi.co.il/elvea` — النسخة الكاملة محفوظة
   بـ`outputs/elvea.html` و**كل رقم هون مقروء من كودهم**، لا مقدَّر بالعين.
   🔑 الفكرة مش «شرايح جنب بعض» — الفكرة **خيط واحد متواصل** بيكمّل من
      شريحة لشريحة.

   🔴 **الديسكتوب انطابق مع المرجع بالضبط** (طلب أحمد 2026-09-10، بلقطة منه).
      اللي انقلب: الارتفاع صار هو الثابت لا العرض · الوصلة صارت بطول الشريحة
      · الشريحة الأولى بتفتح بالنص · ظل عريض تحت الصور · الذيل صار صندوقاً.
   🟡 **الموبايل ما انلمس** — سلوكه (تثبيت وإزاحة مع النزول) قرار سابق لأحمد
      وبيختلف عن المرجع (عندهم سحب بالإصبع). كل إعدادات الموبايل بالـ
      `@media` تحت، وهي **بترجّع** التصميم المعتمد على العرض. */

/* 🔑 **أهم إعدادة بالمرجع: الارتفاع هو الثابت، والعرض بيطلع من نسبة الصورة.**
   نتيجتها تنتين:
     ١. كل الشرائح بنفس الارتفاع ⇒ الخيط بيمشي بمستوى واحد بلا تعرّج.
     ٢. كل صورة بتبين **كاملة بلا قصّ** — عرضها طبيعي مش مفروض عليها.
   عنا قبل هيك كان العكس (`--fil-w` ثابت + `aspect-ratio:4/5` + `cover`)
   ⇒ كنا نقصّ من جوانب الصور. الصور المربعة (1:1) بتصير مربعات كاملة. */
.fil01{position:relative;overflow-x:clip;
       --fil-h:min(56vh,540px)}

.fil01 .fil-head{max-width:740px;margin-inline:auto;text-align:center;
                 padding:clamp(56px,8vh,92px) var(--s-3) 0}
.fil01 .kicker{font-family:var(--lat);font-size:14px;font-weight:600;
               letter-spacing:.18em;color:var(--accent);margin-bottom:var(--s-2)}
/* `balance` بتوزّع الأسطر بالتساوي — بلاها «بينقطع.» بتنزل كلمة يتيمة لحالها */
.fil01 h2{font-size:clamp(26px,3.6vw,40px);line-height:1.25;font-weight:800;
          letter-spacing:-.02em;margin-bottom:var(--s-2);text-wrap:balance}
.fil01 h2 b{color:var(--accent);font-weight:800}
.fil01 .sub{font-size:clamp(15px,1.5vw,17.5px);color:var(--muted);
            line-height:1.8;margin-bottom:var(--s-2)}
/* 🔄 **انقلبت لتطابق المرجع (2026-09-12):** كانت بتبين على الديسكتوب وتنخفي
   على التلفون (أيام ما كان التلفون تثبيتاً ونزولاً). هلأ التلفون **سحب
   بالإصبع** ⇒ «اسحب» صارت تعليمة حقيقية، والديسكتوب ما بدّه إياها. */
.fil01 .fil-hint{display:none;font-size:13.5px;color:var(--accent);
                 letter-spacing:.02em}

/* 🔑 `overflow-x:clip` لا `hidden` (زي المرجع): `clip` **ما بتعمل حاوية
   سكرول** ⇒ الظل والتعليق تحت الصورة بيتنفّسوا برّا حدود المسرح، وبنفس
   الوقت الشريط المزاح ما بيسرّب سكرول أفقي للصفحة كلها. */
.fil01 .fil-stage{position:relative;margin-top:clamp(28px,4.5vh,48px);
                  padding-bottom:110px;overflow-x:clip}
/* 🔑 `padding-inline-start` بيفتح **الشريحة الأولى بالنص** بدل ما تكون
   ملزوقة بالحافة. بالمرجع الرقم ثابت (`50vw - 205px` = نص أعرض شريحة
   عندهم)؛ عنا الصور كلها 1:1 ⇒ نص الشريحة = نص الارتفاع.
   ⚠️ لو إجت صور أحمد بنسبة تانية، هالسطر بده يتظبّط معها. */
.fil01 .fil-track{display:flex;align-items:flex-start;gap:0;width:max-content;
                  padding-inline-start:max(6vw,calc(50vw - var(--fil-h)/2));
                  padding-inline-end:max(6vw,40px)}

/* ⚠️ **تحذير محفور من باغ 2026-09-10:** الشريحة `flex:0 0 auto` ⇒ عرضها
   = عرض **أعرض ابن** فيها. اليوم الصورة (≈٥٠٤px على شاشة ٩٠٠) أعرض من
   التعليق بكتير فما في مشكلة — **بس لو إجت صورة ضيقة (بورتريه طويل)
   والتعليق صار أعرض منها، الشريحة بتتوسّع على قياس النص والخيط بينفصل.**
   وقتها: قصّ التعليق بـ`max-width` مربوط بعرض الصورة. (المرجع بنفس القيد
   وناجٍ منه لنفس السبب: تعليقاتهم قصيرة وصورهم عريضة كفاية.) */
.fil01 .fil-panel{flex:0 0 auto;margin:0}
.fil01 .fil-panel img{display:block;height:var(--fil-h);width:auto;
                      border-radius:var(--r);box-shadow:var(--shadow-3)}
.fil01 .fil-panel figcaption{margin-top:var(--s-2);text-align:center}
/* 🔴 `direction:ltr` إلزامية على أي سطر لاتيني جوّا صفحة عربية:
   بلاها «01 · La Cire» بتنعرض «La Cire · 01» — الأرقام والمحارف المحايدة
   بتنساق مع اتجاه الفقرة. نفس عائلة باغ `@candiva` والنقطة الأخيرة. */
.fil01 .fil-panel .n{font-family:var(--lat);font-size:13px;font-weight:600;
                     letter-spacing:.14em;color:var(--accent);direction:ltr}
.fil01 .fil-panel .t{font-size:15px;color:var(--muted);line-height:1.65;
                     margin-top:4px}

/* ── الوصلة بين شريحتين ──
   🔑 **الـSVG بطول الشريحة كلها** (`height:var(--fil-h)`) + `viewBox` مربّع
   100×100 + `preserveAspectRatio:none`. ليش هيك بالمرجع؟ لأن الخيط عندهم
   **مرسوم جوّا الصور** وبيطلع من كل صورة على ارتفاع مختلف (50.3% · 61.7% ·
   71.5%) — فالوصلة لازم توصل نقطتين بأي ارتفاع، لا تقعد بالنص.
   عنا الصور ما فيها خيط مرسوم لهلق ⇒ كل الوصلات على `y=50`. لما تيجي صور
   أحمد الحقيقية، بيتظبّط الـ`y` بكل مسار وبس — البنية جاهزة.
   🔴 `vector-effect="non-scaling-stroke"` بالماركب **إلزامية** هون: بلاها
   التمطيط العمودي (٥٠٤ ÷ ١٠٠ ≈ ٥×) بيخلّي خط الـ2.4px يرسم ١٢px. */
.fil01 .fil-link{flex:0 0 auto;width:clamp(64px,8vw,130px);pointer-events:none}
.fil01 .fil-link svg{width:100%;height:var(--fil-h);display:block;
                     overflow:visible}
.fil01 .lien{fill:none;stroke:var(--accent);stroke-width:2.4;
             stroke-linecap:round}

/* ── ذيل النهاية + علامة الختام ──
   صندوق بطول الشريحة والعناصر متموضعة جوّاه (زي المرجع)، لا عناصر
   بـflex. بالمرجع الذيل على `top:59.2%` عشان يلاقي الخيط الطالع من آخر
   صورة؛ عنا `50%` لأن ما في خيط بالصور. */
.fil01 .fil-end{flex:0 0 auto;position:relative;
                width:clamp(120px,12vw,180px);height:var(--fil-h);
                pointer-events:none}
/* الجهات **منطقية** لا يمين/شمال: بالعربي `inline-start` = اليمين، وهي
   الجهة اللي فيها آخر شريحة؛ بالإنجليزي بتنقلب لحالها. المرجع عبري بس
   فكاتب `right/left` صريح — وهاد بيتكسر بصفحتنا الإنجليزية. */
.fil01 .fil-end .tail{position:absolute;top:calc(50% - 1.2px);
                      inset-inline-start:0;inset-inline-end:40%;height:2.4px;
                      background:var(--accent);border-radius:2px}
.fil01 .fil-end .mark{position:absolute;top:50%;inset-inline-end:0;width:38%;
                      transform:translateY(-50%);text-align:center;
                      font-family:var(--lat);font-size:12px;letter-spacing:.4em;
                      color:var(--accent);direction:ltr;line-height:1}

/* ══ الموبايل: **سحب بالإصبع + snap — نسخ لصق من المرجع** ══
   🔄 **انقلب كلياً (2026-09-12، قرار أحمد «نسخ لصق»).**
   قبله كان تثبيتاً وإزاحة مع النزول (طلب أحمد 2026-09-09، «زي `#hsec`
   بموقعي»)، وانبنى عليه تصميم **العرض-الثابت** بقصّ `4/5`.

   🔑 **ليش المرجع تخلّى عن الحركة هون عن قصد:** على شاشة صغيرة المحوران
      بيتعاركوا — تثبيت العرض بيفيض بالارتفاع وتثبيت الارتفاع بيفيض بالعرض،
      وكل إصلاح بيولّد التاني. (عنا صار حرفياً: ٤٢٠ على شاشة ٣٩٠ ⇒ صار
      `78vw` ⇒ الصورة بتنقص من تحت ⇒ صار `min()` ⇒ التعليق بينقص.)
      السحب بالإصبع بيفكّ العقدة: **العرض بيصير حراً** لأن الشاشة ما عادت
      تحدّه — فالصورة بتضل **كاملة بلا قصّ**، نفس نظام الديسكتوب بالضبط.

   🟢 اللي صار مشتركاً مع الديسكتوب بعد هالنسخة: الارتفاع هو الثابت ·
      الشريحة `flex:0 0 auto` · الوصلة بطول الشريحة · صندوق النهاية.
      فما ضل بهالبلوك إلا **أرقام** وإطفاء الحركة. */
@media(max-width:768px){
  /* 🔴 **`min(54vh,470px)` وحدها = رقم المرجع، وبتنكسر عنا** (بلاغ أحمد
     2026-09-12: «لا مش نفس الحجم ولا المنظر على الموبايل»).
     السبب **نسب الصور، لا الرقم**:
       · صورهم **طولية**: 768×1200 · 960×1200 · 960×1200 · 720×1200 · 728×1200
         ⇒ النسبة ٠٫٦٠–٠٫٨٠، وكلها بنفس الارتفاع ١٢٠٠ بالضبط.
       · صورنا **مربّعة**: 1200×1200 ⇒ النسبة ١٫٠٠.
     على تلفون ٣٩٠×٨٤٤: ارتفاع ٤٥٦ بيعطي عندهم عرض **٢٩٢–٣٦٤** (بتوقع
     بالشاشة والجارة بتطلّ)، وبيعطي عنا **٤٥٦** ⇒ أعرض من الشاشة ١١٧٪،
     فما بتشوف شريحة كاملة ولا بتحسّ إنه بينسحب.
     ⇒ **الارتفاع لازم يتقيّد بالعرض كمان**، والقيد بيتبع نسبة الصورة.
     🔑 `--fil-ar` = العرض ÷ الارتفاع للصورة. اليوم `1` (مربّعة). لما تيجي
        صور أحمد الطولية، **بدّل هالرقم وبس** والقيد بيرتخي لحاله. */
  .fil01{--fil-ar:1;
         --fil-h:min(54vh,470px,calc(78vw / var(--fil-ar)));
         --fil-h:min(54svh,470px,calc(78vw / var(--fil-ar)))}
  .fil01 .fil-head{padding-top:80px}
  .fil01 .fil-hint{display:block}
  .fil01 .fil-stage{margin-top:38px;padding-bottom:80px;
                    overflow-x:auto;-webkit-overflow-scrolling:touch;
                    scroll-snap-type:x mandatory;scrollbar-width:none}
  .fil01 .fil-stage::-webkit-scrollbar{display:none}
  .fil01 .fil-panel{scroll-snap-align:center}
  .fil01 .fil-link{width:52px}
  .fil01 .fil-track{padding-inline:6vw}

  /* ما في رسم مع السكرول على اللمس — الخيط **كامل دايماً**، وسماكته
     بتنزل شوي عشان تناسب شريحة أصغر. (نسخ حرفي من المرجع.) */
  .fil01 .fil-link .lien{stroke-dasharray:none!important;
                         stroke-dashoffset:0!important;stroke-width:2}
  .fil01 .fil-panel figcaption{opacity:1!important;transform:none!important}
  .fil01 .fil-end .tail{transform:none!important}
  .fil01 .fil-end .mark{opacity:1!important}
}
/* ⚠️ **سطر واحد ما نسختُه عمداً:** المرجع بينزّل الاستدارة من `14px`
   لـ`12px` على التلفون. استدارتنا `var(--r)` = **10px** أصلاً، فحرفية
   الـ12px كانت بتخلّي التلفون **أدور من الديسكتوب** — عكس نيّتهم.
   الاستدارة بتضل من الثيم. */

/* لمن طلب تقليل الحركة: بيرجع سكرول أفقي بالإصبع، وكل شي ظاهر.
   🔴 هون بس بينفتح `overflow-x` — لأن التايملاين ما بينبنى بهالحالة. */
@media(prefers-reduced-motion:reduce){
  /* التلميح بيبين هون كمان (زي المرجع): القسم صار شريطاً بينسحب بالإيد
     حتى على الديسكتوب، فبلا تلميح ما في إشي بيقول للزائر إنه بينسحب. */
  .fil01 .fil-hint{display:block}
  .fil01 .fil-stage{overflow-x:auto;scroll-snap-type:x mandatory;
                    -webkit-overflow-scrolling:touch}
  .fil01 .fil-stage::-webkit-scrollbar{display:none}
  .fil01 .fil-panel{scroll-snap-align:center}
  .fil01 .fil-panel figcaption{opacity:1 !important;transform:none !important}
  .fil01 .lien{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .fil01 .fil-end .tail{transform:none !important}
  .fil01 .fil-end .mark{opacity:1 !important}
}