/* ═══ شريط التنقّل — الخطّ، الألوان، الظهور، التمرير ═══
   مُستخرَج حرفياً من index.html بلا أي تعديل. */

/* خطّ شريط التنقّل — ملفّ محلّي داخل الموقع، بلا أيّ اعتماد على الإنترنت.
   swap: يُرسم النصّ بخطّ احتياطي فوراً ثمّ يُستبدل حين يجهز، فلا تختفي
   الكلمات لحظة التحميل (والملف 24KB فالتبديل شبه فوري). */
@font-face{
  font-family:'GC EpicPro';
  /* ../ ضرورية: المسارات داخل ملفّ أنماط خارجيّ تُحسب من موضع الملفّ
     نفسه (css/) لا من موضع الصفحة — بدونها يصير المسار css/assets/... */
  src:url('../assets/fonts/gc-epicpro.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

/* ═══════════ شريط التنقّل ═══════════
   لا يظهر إلا بعد أن يكتمل رسم الشعار بالغبار، ثمّ يهبط من أعلى الصفحة
   ببطء مع تدرّج في الشفافية. كل رابط يتأخّر قليلاً عن سابقه فيبدو
   الشريط متساقطاً لا ظاهراً دفعةً واحدة. يظهر مرّة واحدة ويبقى. */
.nav{
  /* حبّة زجاجية خلف الروابط بطلب المستخدم: الشريط صار بعرض محتواه،
     موسَّطاً بالهوامش (لا transform حفاظاً على حدّة النصّ)، خلفه طبقة
     ضبابية خفيفة بزوايا مدوّرة. مواضع الروابط نفسها لم تتحرّك بكسلاً:
     top = ‎var(--nav-top) - 14px‎ والحشوة العلوية 14px فيتعادلان. */
  position:fixed;top:calc(var(--nav-top) - 14px);left:0;right:0;z-index:7;
  margin:0 auto;width:max-content;
  /* لا يتجاوز الشريطُ الشاشةَ أبداً: الصفحة RTL فإذا فاض عن العرض
     رسا على الحافّة اليمنى وانقطع أوّله (كان Home يختفي على الهواتف).
     السقف يمنع الفيض، وwrap يلفّ الروابط سطرين لو ضاقت شاشة قزمة. */
  max-width:calc(100vw - 12px);
  display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;
  gap:clamp(16px,3.4vw,52px);
  padding:14px clamp(24px,3vw,46px) 16px;
  direction:ltr;                 /* ترتيب المرجع: HOME أوّلاً على اليسار */
  pointer-events:none;           /* لا يلتقط النقر قبل ظهوره */
  /* لا visibility:hidden هنا — كان سببَ اختفاء الكلمات على iOS:
     الروابط تَرِث الإخفاء (لا يُصرَّح عليها)، وكلٌّ منها طبقةُ رسمٍ
     مستقلّة، وWebKit يخزّن لكلّ طبقة علمَ «فيها محتوى مرئيّ» ولا
     يُنعشه دائماً حين ينقلب الإخفاء عن جدٍّ أعلى. وبما أنّ الكشف
     يحرّك opacity وtransform فقط (كلاهما على المُركِّب) لا يُجدوَل
     أيّ إعادة رسم، فتتحرّك طبقاتٌ فارغة حتى تُجبر لمسةٌ إعادةَ
     الحساب. الحبّة كانت تظهر لأنّ ::before تابعٌ لـ.nav نفسه —
     العنصر الوحيد الذي صُرِّح إخفاؤه عليه. الإخفاء البصريّ قائم
     أصلاً بالشفافية، والحجب عن لوحة المفاتيح وقارئات الشاشة انتقل
     إلى aria-hidden وtabindex في js/nav.js (بالتأخير 1.9s نفسه). */
}
.nav.is-in{pointer-events:auto}

/* ── الحبّة الزجاجية ──
   على طبقة ::before مستقلّة كي تذوب وتظهر مع حركة الشريط نفسها:
   شفافيتها تتبع is-in، فتتلاشى بالصعود مع خروج الروابط بدل أن تبقى
   معلّقة ثمّ تختفي فجأة. الضبابية نفسها ثابتة والتلاشي بالشفافية —
   أنعم وأرخص من تحريك backdrop-filter ذاته. */
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  /* ترتيب الرسم موجب لا سالب: على iOS Safari تُرسَم طبقةُ
     backdrop-filter ذات z-index السالب فوق نصّ الروابط فتحجبه — تظهر
     الحبّة فارغة حتى تُجبر لمسةٌ إعادةَ الرسم. بجعل الحبّة 0 والروابط
     1 يصير الترتيب صريحاً في كلّ المتصفّحات (والشكل نفسه لم يتغيّر). */
  z-index:0;
  border-radius:999px;
  background:rgba(8,8,8,.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity 1.1s cubic-bezier(.16,.72,.24,1);
}
.nav.is-in::before{opacity:1}
.nav__link{
  position:relative;
  z-index:1;                     /* فوق حبّة الضباب دائماً — انظر ::before */
  font-family:'GC EpicPro','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  /* الخطّ عريض بتصميمه أصلاً وفيه وزن واحد؛ لو طلبنا 800 يصنع المتصفّح
     تعريضاً صناعياً (faux bold) يُثخّن الحروف ويشوّه حوافها */
  font-weight:normal;
  font-size:clamp(11px,1.35vw,19px);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--nav);
  text-decoration:none;
  white-space:nowrap;
  /* حالة ما قبل الظهور — وهي نفسها حالة الخروج: أعلى قليلاً وشفّاف تماماً.
     التوقيت معرَّف هنا وحده، فيسري على الاتّجاهين معاً: النزول والصعود
     بنفس المدّة ونفس المنحنى تماماً — الحركة ذاتها معكوسة لا غير. */
  opacity:0;
  /* بلا will-change ولا translate3d عمداً: ترقيةُ كلّ كلمة إلى طبقةٍ
     دائمة كانت تُثبّت العطب لا تصلحه — الطبقة تُنشأ فارغة ثمّ تُحرَّك
     بخصائص المُركِّب وحدها فلا تُرسَم أبداً. والنصّ غير المرقّى يحتفظ
     كذلك بتنعيم الحواف الفرعيّ فيبقى أحدّ. */
  transform:translateY(-46px);
  transition:opacity 1.15s cubic-bezier(.16,.72,.24,1),
             transform 1.45s cubic-bezier(.16,.72,.24,1),
             color .35s ease;
}
/* التتابع أيضاً على القاعدة الأساسية لا على is-in، فيتساقط الشريط
   بالترتيب نفسه داخلاً وخارجاً. القيمة الثالثة صفر دائماً: التأخير
   للحركة وحدها، أمّا لون التمرير فيستجيب فوراً. */
.nav__link:nth-child(1){transition-delay:0s,0s,0s}
.nav__link:nth-child(2){transition-delay:.14s,.14s,0s}
.nav__link:nth-child(3){transition-delay:.28s,.28s,0s}
.nav__link:nth-child(4){transition-delay:.42s,.42s,0s}

.nav.is-in .nav__link{opacity:.92;transform:none}
.nav__link:focus-visible{outline:2px solid var(--nav);outline-offset:6px}
/* ── التمرير بالماوس ──
   لكلّ كلمة بلا استثناء: تخضرّ الكلمة، ويُرسم تحتها خطّ أبيض من المنتصف
   نحو الطرفين، ثمّ ينسحب بالطريقة نفسها فور إبعاد الماوس. لا خطّ ثابت
   تحت أي كلمة. */
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;
  background:#fff;
  transform:scaleX(0);transform-origin:50% 50%;
  transition:transform .42s cubic-bezier(.16,.72,.24,1);
}
.nav__link:hover,
.nav__link:focus-visible{color:var(--nav-hover)}
.nav__link:hover::after,
.nav__link:focus-visible::after{transform:scaleX(1)}
/* ═══ الهواتف: الشريط نفسه مصغَّراً، لا شكلٌ آخر ═══
   كان للهاتف تصميم مضغوط مستقلّ (تتبّع ‎.05em‎ وفجوة 10px وحشوة 13px
   ملتصقة بأعلى الشاشة) فبدا مختلفاً عن سطح المكتب. الآن تتقلّص كلّ
   المقاسات بنسبة العرض نفسها عبر ‎min(قيمة سطح المكتب, نسبة vw)‎:
   التتبّع ‎.13em‎ والموضع والفجوة ونسبة الحشوة تبقى كما هي تماماً،
   فالنتيجة نسخة متناسبة من شريط سطح المكتب تسع سطراً واحداً حتى
   عرض 320px. وعند 560px تتساوى القيم مع أرضيات clamp في قواعد سطح
   المكتب فوقها — فلا قفزة عند حدّ الميديا. */
@media (max-width:560px){
  .nav{
    gap:min(16px, 4.267vw);
    padding:14px min(24px, 6.4vw) 16px;
  }
  .nav__link{font-size:min(11px, 2.667vw)}
  /* مساحة اللمس تُوسَّع بطبقة شفّافة لا بحشوة: الحشوة كانت تزيد
     ارتفاع الشريط عن سطح المكتب، وهذه لا تغيّر شكله بكسلاً */
  .nav__link::before{
    content:"";
    position:absolute;
    inset:-14px -6px;
    z-index:-1;      /* خلف الحروف: العنصر الزائف الموضَّع يُرسم فوق نصّ أبيه */
  }
}
@media (prefers-reduced-motion:reduce){
  .nav__link,.nav__link.is-active::after,.nav::before{transition-duration:.01ms!important}
}