/* ═══ قسم About us — اللوحة الخلفية والإطار ═══
   القسم يلي المشهد المثبّت في تدفّق الصفحة، فيصل إليه السكرول طبيعياً
   بعد اكتمال الأنيميشن، ويقصده رابط الشريط #about مباشرةً. */

/* خطّا العنوان — ملفّان محلّيان من مجلّد fonts على سطح المكتب.
   ../../ ضرورية: المسار يُحسب من موضع هذا الملفّ (css/sections/). */
@font-face{
  font-family:'Gragio';
  src:url('../../assets/fonts/gragio.otf') format('opentype');
  font-weight:normal;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'RuthClair';
  src:url('../../assets/fonts/ruthclair.ttf') format('truetype');
  font-weight:normal;font-style:normal;font-display:swap;
}
/* خطّ متغيّر الوزن (100–900) — لفقرات القسم بطلب المستخدم */
@font-face{
  font-family:'Montserrat';
  src:url('../../assets/fonts/montserrat-var.ttf') format('truetype');
  font-weight:100 900;font-style:normal;font-display:swap;
}

.sec-about{
  /* فوق الـ pin (z-index:1) وتحت شريط التنقّل (z-index:7) */
  position:relative;
  z-index:2;
  background:#000;
  width:100%;
  /* نسبة صورة الخلفية نفسها (1920×3426 منذ 2026-08-08 — الخلفية النظيفة
     بلا نصوص مطبوعة) فتظهر اللوحة كاملة بلا قصّ على الشاشات العريضة.
     وعلى الشاشات الطولية جداً (هواتف) يتكفّل min-height بملء الشاشة
     على الأقلّ، وcover تحت يقصّ الفائض الأفقي البسيط بالتساوي. */
  aspect-ratio:1920/3426;
  min-height:100vh;
  overflow:hidden;
}

/* الخلفية صورة <img> لا background-image عمداً: loading="lazy" يؤجّل
   تنزيل 2.2MB حتى يقترب القسم من الشاشة، فلا تُبطئ فتح الصفحة. */
.sec-about__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* إطار العناصر — كلّ ما يُضاف للقسم يوضع هنا فيركب فوق الخلفية.
   يغطّي القسم كاملاً، فإحداثيات العناصر تُحسب من حدود اللوحة نفسها. */
.sec-about__inner{
  position:absolute;
  inset:0;
  z-index:1;
}

/* ── نصّ FRAMEline الأحمر ──
   الملفّ assets/frameline-text.png مقصوص على حدود النصّ تماماً
   (‏1369×518، من reference/frameline text.png)، فالنِّسَب هنا تحكم النصّ
   المرئي نفسه بلا هوامش خفيّة:
     width ← حجم النصّ (نسبة من عرض القسم، مع حدّين للهواتف والشاشات الضخمة)
     top   ← ارتفاعه داخل القسم
   الموضع بنسبٍ من مقاس القسم فيبقى ملازماً للّوحة على كلّ الشاشات. */
.sec-about__brand{
  position:absolute;
  /* المقاس والموضع مقيسان من reference/Final Design.jpg بالبكسل لا
     بالتقدير: التصميم يضع الشعار بمقاس 1:1 على لوحة عرضها 1920 —
     قلب النصّ الأحمر 1288px أي ‎67.1%‎ من العرض، وقلب الملفّ المقصوص
     ‎94.4%‎ من عرضه، فالعرض المطلوب ‎67.1 ÷ 0.944 = 71%‎.
     التوسيط بالهوامش لا بـtranslateX(-50%)‎: الهوامش تُحسب في التخطيط
     فتُثبَّت على بكسل صحيح والصورة تبقى حادّة — وright:‎.8%‎ يزيح
     المركز إلى ‎49.6%‎ لأنّ الضفيرة تميل بالملفّ قليلاً عن مركز نصّه. */
  left:0;
  right:.8%;
  margin:0 auto;
  /* نفس بكسلات التصميم — النسبة على ارتفاع اللوحة الجديدة 3426 */
  top:3.89%;
  width:max(240px, 71%);
  height:auto;
  pointer-events:none;
  user-select:none;
}

/* ── الظهور الموحّد لعناصر القسم ──
   كلّ عنصر عليه js-reveal: يبدأ أخفض قليلاً وشفّافاً، وحين يضيف
   js/about.js الصنف is-in (مرّة واحدة، لا يُنزَع) يصعد ويكتمل.
   المدّتان أبطأ من إيقاع الشريط بطلب المستخدم — ظهور مهيب لا خاطف.
   نهاية الحركة transform:none لا translateY(0)‎: «لا تحويل» يعيد العنصر
   لمسار الرسم العادي فيُرسَم نصّه حادّاً على شبكة البكسل. */
.sec-about .js-reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1.9s cubic-bezier(.16,.72,.24,1),
             transform 2.3s cubic-bezier(.16,.72,.24,1);
}
.sec-about .js-reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .sec-about .js-reveal{transition-duration:.01ms}
  .sec-about__copy p{transition-duration:.01ms;transition-delay:0s}
}

/* ── فقرات «We don't just create…» ──
   نصّ Gragio بلون أخضر مقيس من التصميم (#018c74). المقاسات من
   reference/Final Design.jpg: بداية الكتلة x=118 ⇒ ‎6.15%‎، حجم الخطّ
   مشتقّ من عرض الأسطر الأربعة المقيسة ‎(≈26.3px على 1920 ⇒ 1.37vw)‎،
   وتباعد الأسطر 37.5px ⇒ ‎1.43‎، وفاصل الفقرات سطر فارغ كامل.
   فواصل الأسطر <br> صريحة لتطابق التصميم حرفياً. */
.sec-about__copy{
  position:absolute;
  /* أسلوب التصميم نفسه: كتلة يسارية بمحاذاة يسار عند حافّة التصميم
     (‏x=118 ⇒ ‎6.15%‎)، منزولة قليلاً عن موضع التصميم بطلب المستخدم،
     والخطّ باقٍ GC EpicPro. الحجم ‎1.05vw‎: أكبر من مقاس المطابقة
     الحرفية (‏.91vw‎) ليَبين، وأطول سطر يقف عند ‎≈55%‎ فلا يعتلي
     الجزء المضاء من الوجه. */
  /* مواضع الخلفية الجديدة (1920×3293): الكتلة تبدأ عند x=100 وقمّة
     حبرها عند y=1418، والفقرات الثلاث تتوزّع بهوامش تُنزل كلّ كتلة
     على موضعها المقيس فتقع الفواصل المرسومة في الخلفية بين الكتل. */
  left:5.21%;
  top:41.23%;
  width:max-content;
  direction:ltr;
  text-align:left;
  /* Gragio ← GC EpicPro ← Montserrat (2026-08-08 بطلب المستخدم):
     الخطّ الهندسي نفسه المستعمل في فقرات التصميم، بأحرفه الصغيرة */
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif;
  font-weight:500;
  font-size:1.18vw;
  line-height:1.28;
  letter-spacing:0;
  /* لون فقرات التصميم الأصلي نفسه — معيّن من قلب حروف
     reference/Final Design.jpg (أنصع ربع بكسلات المقطع الثاني) */
  color:#00937a;
  white-space:nowrap;
  /* ظلّ خفيف يفصل النصّ عن صورة البورتريه فيبقى مقروءاً فوقها */
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 4px rgba(0,0,0,.45);
}
/* هوامش بالقياس: قمّة الكتلة الثانية بعد 159px من الأولى، والثالثة بعد
   427px — مطروحاً منها ارتفاع ما قبلها بأسطرنا نحن (29px للسطر) */
.sec-about__copy p{position:relative}
/* الفقرة الوسطى موسَّطة رأسياً بين الخطّين بالتساوي (بطلب المستخدم):
   نزلت ‎+23px‎ (‏1.02em) وهامش الثالثة نقص بمثلها فبقي كلّ ما عداها
   في مكانه، وإزاحة الخطّ الأوّل عُوّضت في قاعدته تحت. */
.sec-about__copy p:nth-child(2){margin-top:5.48em}
.sec-about__copy p:nth-child(3){margin-top:5.7em}

/* ── ظهور الفقرات المتمهّل عند النزول إليها ──
   الحاوية نفسها تُحيَّد عن أنماط js-reveal العامّة (القاعدة تلي العامّة
   في الملفّ فترجحها)، والظهور على الفقرات الثلاث نفسها: كلّ كتلة تصعد
   وتكتمل ببطء بعد سابقتها، ومعها خطّها الفاصل لأنّه مربوط بها. */
.sec-about .sec-about__copy{
  opacity:1;
  transform:none;
  transition:none;
}
.sec-about__copy p{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 2.4s cubic-bezier(.16,.72,.24,1),
             transform 2.6s cubic-bezier(.16,.72,.24,1);
}
.sec-about__copy p:nth-child(2){transition-delay:.5s}
.sec-about__copy p:nth-child(3){transition-delay:1s}
.sec-about .sec-about__copy.is-in p{
  opacity:1;
  transform:none;
}

/* الخطّان الرفيعان بين الكتل — بمقاسات التصميم (y=1522 و1782 على
   لوحة 1920، عرض 596px = 31vw). أُزيلا بطلب المستخدم ثمّ أُعيدا بطلبه. */
.sec-about__copy p:nth-child(2)::before,
.sec-about__copy p:nth-child(3)::before{
  content:"";
  position:absolute;
  left:0;
  width:31vw;
  height:1px;
  background:rgba(255,255,255,.3);
}
.sec-about__copy p:nth-child(2)::before{top:-3.18em}
.sec-about__copy p:nth-child(3)::before{top:-2.52em}

/* ── السطور الثلاثة أسفل القسم ──
   GC EpicPro صغير بلون رمادي فاتح، كلّ عبارة في موضعها المقيس من
   التصميم (المواضع يسار كلّ عنقود نصّي على لوحة 1920). */
.sec-about__taglines{
  position:absolute;
  left:0;
  right:0;
  /* قمّة أحرف السطور عند y≈2435 على لوحة 3426 */
  top:70.99%;
  height:1em;
  direction:ltr;
  font-family:'GC EpicPro','Segoe UI',system-ui,sans-serif;
  font-weight:normal;
  font-size:.74vw;
  letter-spacing:.13em;
  color:#b9b9bc;
}
/* الشفافية 70% على العبارات نفسها لا على الحاوية: حركة الظهور تملك
   شفافية الحاوية (0→1) فلا تتعارضان، والحاصل النهائي 70% */
.sec-about__taglines span{position:absolute;top:0;white-space:nowrap;opacity:.7}
.sec-about__taglines span:nth-child(1){left:19.17%}
.sec-about__taglines span:nth-child(2){left:45.42%}
.sec-about__taglines span:nth-child(3){left:67.86%}

/* ── شبكة الموك-أب: شريطان دائران يتأثّران بالسكرول ──
   مقاسة من التصميم: الصفّ الأوّل عند y=2512 بارتفاع 360px، فجوة 16px،
   الصفّ الثاني 369px — كنسب من لوحة 1920×3426. الحركة كلّها من محرّك
   js/about.js: انزلاق زمنيّ دائم (الصفّ الأوّل يميناً والثاني يساراً،
   data-marquee-dir في index.html) — مستقلّ عن السكرول تماماً: يزحف
   بسرعة ثابتة من لحظة تحميل الصفحة ولا يتسارع بالتمرير.
   السرعة قابلة للضبط من الكونسول: __mockups.drift */
.sec-about__mockups{
  position:absolute;
  left:0;
  right:0;
  /* هامش تنفّس (~2vw) عن حافّة المنطقة العلوية، ومثله يبقى تحت
     الصفّين قبل قاع القسم — بطلب المستخدم: لا تلتصق الصور بالحوافّ */
  top:74.44%;
}
/* الحاوية نفسها ثابتة — تبطل عليها أنماط js-reveal العامّة (الأولوية
   بالترتيب: هذه القاعدة تلي قاعدة ‎.sec-about .js-reveal‎ في الملفّ)،
   وis-in عليها يُشغّل المحرّك (يقرأه js/about.js). */
.sec-about .sec-about__mockups{
  opacity:1;
  transform:none;
  transition:none;
}
/* الصفّان يملآن منطقة الشبكة مع هامش رقيق فوقهما وتحتهما:
   المنطقة ≈ ‎47.6vw‎ − هامشا ‎1vw‎ ⇒ ‎45.55vw‎ للصفّين والفجوة */
.sec-about__mockups-row{
  overflow:hidden;
  width:100%;
  height:21.3vw;
  /* direction:ltr ضرورية: الصفحة RTL فيرصف flex الشريطَ من اليمين
     ويتدلّى خارج الحاوية يساراً — ومحرّك الإزاحة في js/about.js يفترض
     شريطاً مرسوّاً على اليسار؛ بدونها يختفي الصفّ الثاني بالكامل. */
  direction:ltr;
}
.sec-about__mockups-row--bot{
  height:21.45vw;
  margin-top:.85vw;
}
/* الشريط: مجموعتان متطابقتان — المحرّك يلفّ الإزاحة على عرض مجموعة
   واحدة فلا تظهر وصلة. الفجوة عند الوصلة من padding-inline-end على
   المجموعة (لا gap على الشريط) كي يكون عرض الشريط ضعف عرض المجموعة
   تماماً. */
.sec-about__mockups-track{
  display:flex;
  width:max-content;
  height:100%;
  will-change:transform;
  /* لا وضع ابتدائيّ خارج الشاشة: الشريطان ظاهران ممتلئين من البداية
     (أُزيلت مرحلة الدخول بطلب المستخدم) والمحرّك يحرّكهما عند الوصول */
}
.sec-about__mockups-group{
  display:flex;
  gap:.83vw;
  padding-inline-end:.83vw;
  height:100%;
}
/* نسبة كلّ صورة من width/height في وسمها فيأخذ الكولاج مقاسه الصحيح
   قبل تنزيل الصور المؤجَّلة */
.sec-about__mockups-group img{
  height:100%;
  width:auto;
  display:block;
  border-radius:clamp(6px, .52vw, 12px);
  user-select:none;
  object-fit:cover;
}

/* ── العنوان: FRAMELINE was BUILT, FRAME by FRAME. ──
   المقاسات والمواضع مقيسة من reference/Final Design.jpg على لوحة 1920:
   الأبيض GC EpicPro بحجم ‎61.5px ≈ 3.2vw، و«was» بـGragio أكبر منه
   (‏1.42em)، و«by» بـRuthClair حرف زخرفي ضخم (4.3em) راكب على السطرين.
   الألوان معيّنة من بكسل التصميم نفسه. */
.sec-about__built{
  position:absolute;
  /* التوسيط بالهوامش (left:0 + right:2% ⇒ المركز على 49%) بدل
     translateX(-50%)‎ — الهوامش تُثبَّت على بكسل صحيح فيبقى النصّ
     حادّاً، وتحويل الظهور ينتهي على none تحت للسبب نفسه. */
  left:0;
  right:2%;
  margin:0 auto;
  /* نفس بكسلات التصميم على اللوحة الأطول (1008.9px ÷ 3426) */
  top:29.45%;
  width:max-content;
  text-align:center;
  direction:ltr;
  font-family:'GC EpicPro','Segoe UI',system-ui,sans-serif;
  font-weight:normal;
  font-size:3.2vw;
  letter-spacing:.06em;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}
.sec-about__built-l1,
.sec-about__built-l2{display:block}
.sec-about__built-l2{margin-top:.025em}
.sec-about__built-was{
  font-family:'Gragio','GC EpicPro',serif;
  font-style:normal;
  font-size:1.42em;
  /* line-height:0 كي لا يرفع الحرفُ الأكبر ارتفاعَ السطر الأبيض */
  line-height:0;
  letter-spacing:0;
  text-transform:lowercase;
  color:#cb190a;
}
/* «by»: line-height:0 كي لا يوسّع الحرفُ الضخم سطرَه — يرسم فوق السطرين
   ويفيض عنهما كما في التصميم. vertical-align يضبط قاعدته تحت قاعدة
   السطر الثاني. */
.sec-about__built-by{
  font-family:'RuthClair','GC EpicPro',cursive;
  font-style:normal;
  font-size:4.3em;
  line-height:0;
  letter-spacing:0;
  text-transform:lowercase;
  color:#016b59;
  vertical-align:-.23em;
  margin:0 .05em 0 .07em;
}
@media (prefers-reduced-motion:reduce){
  .sec-about__built{transition-duration:.01ms}
}


/* ═══ الهواتف واللوحيّات: نسخة طبق الأصل من سطح المكتب ═══
   كلّ عناصر القسم مقيسة بنسبٍ من عرض اللوحة (مواضع %‎ ومقاسات vw)،
   فهي تتصاغر متناسبةً مع الشاشة وحدها — التركيب نفسه تماماً.
   الشيء الوحيد الذي كان يكسر المطابقة: min-height:100vh يمطّ القسم
   أطولَ من نسبة اللوحة على الشاشات الطولية، فتنزاح العناصر (المرصوفة
   بنسبٍ من الارتفاع) عن مواضعها المصمَّمة وتُقصّ الخلفية بcover.
   بإلغائه تبقى النسبة 1920:3426 محفوظة فيطابق الهاتف سطحَ المكتب. */
@media (max-width:1024px){
  .sec-about{min-height:0}
}