/*
=========================================================
MAHEDI ALTAYS — شريط الترحيب والإرشاد
=========================================================

شريط واحد تحت البار العلوي مباشرةً — وداخل عنصره، فيلصق
معه ويبقى ظاهرًا مهما نزل الزائر.

جملة كاملة تُقرأ، تتبدّل كل ستّ ثوانٍ: الخارجة تصعد وتتلاشى،
والداخلة تطلع من تحت. حركة واحدة في اتجاه واحد — كسطر يُطوى
عن سطر، لا كوميض.

والأسطر متراكبة في المكان نفسه لا متتالية، والظاهر منها
واحد. ولهذا ارتفاع ثابت: لو تُرك للمحتوى لقفزت الصفحة كلما
تبدّلت الجملة — وهي قفزة تُزعج القارئ وتخصم من تقييم جوجل.
=========================================================
*/

.guide-strip{
  position:relative;

  border-block-start:1px solid rgba(var(--brand-bronze-rgb), .14);
  background:linear-gradient(180deg, rgba(var(--brand-bronze-rgb), .07), transparent);
}

.guide-strip__inner{
  display:flex;
  align-items:center;
  gap:18px;

  min-height:52px;
}

/*
المسرح: الأسطر كلّها فيه، متراكبة، والظاهر واحد.
والأول في التدفّق العادي كي يعطي المسرحَ ارتفاعَه، والبقية
مطلقة فوقه.
*/
.guide-strip__stage{
  position:relative;
  flex:1;
  min-width:0;
}

.guide-line{
  display:flex;
  align-items:center;
  gap:11px;

  margin:0;
  color:var(--brand-muted);
  text-decoration:none;

  font-size:14px;
  line-height:1.6;

  /*
  الحالة الافتراضية: منتظِرة تحت السطر، غير مرئية.
  فالداخلة تطلع من هنا، وهو ما يجعل الحركة تُقرأ اتجاهًا
  لا وميضًا.
  */
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);

  transition:
    opacity var(--motion-slow) var(--motion-emphasis),
    transform var(--motion-slow) var(--motion-emphasis),
    color var(--motion-base) ease;
}

/*
الخارجة تصعد. وهذا هو الفرق بين حركة مقصودة وتلاشٍ:
العين تتبع اتجاهًا واحدًا فتفهم أن سطرًا حلّ محلّ سطر.
*/
.guide-line.is-leaving{
  opacity:0;
  visibility:visible;
  transform:translateY(-8px);
}

.guide-line + .guide-line{
  position:absolute;
  inset-block-start:50%;
  inset-inline:0;
  transform:translateY(-50%);
}

.guide-line.is-current{
  opacity:1;
  visibility:visible;
  transform:none;
}

.guide-line i{
  flex:0 0 auto;
  color:var(--brand-bronze);
  font-size:13px;

  /*
  الأيقونة تتأخّر عن النصّ جزءًا من الثانية. تفصيل لا يُلاحَظ
  وحده، لكنه يجعل السطر يصل «مرتّبًا» لا دفعةً واحدة.
  */
  transform:scale(.7);
  transition:transform var(--motion-slower) var(--motion-emphasis) .08s;
}

.guide-line.is-current i{
  transform:none;
}

.guide-line span{
  min-width:0;
}

a.guide-line:hover,
a.guide-line:focus-visible{
  color:var(--brand-text);
}

/*
السهم فارغ في الوثيقة ويُكتب هنا، فيتبع اتجاه الصفحة. ولا
يوضع أصلًا على السطر الذي لا وجهة له — والتحية لا تُنقر.
*/
.guide-line__arrow{
  flex:0 0 auto;
  color:var(--brand-bronze);
  font-weight:400;
}

.guide-line__arrow::before{
  content:"\2192";
}

html[dir="rtl"] .guide-line__arrow::before{
  content:"\2190";
}

/*
السهم يتقدّم خطوةً عند المرور — في اتجاه القراءة لا ضدّه.
*/
.guide-line__arrow{
  transition:transform var(--motion-base) var(--motion-emphasis), color var(--motion-base) ease;
}

a.guide-line:hover .guide-line__arrow,
a.guide-line:focus-visible .guide-line__arrow{
  color:var(--brand-text);
  transform:translateX(3px);
}

html[dir="rtl"] a.guide-line:hover .guide-line__arrow,
html[dir="rtl"] a.guide-line:focus-visible .guide-line__arrow{
  transform:translateX(-3px);
}


/* =========================================================
   خيط التقدّم
   =========================================================

   خيط برونزي رفيع يمشي على عرض الشريط في ست ثوانٍ، فيقول
   للزائر إن ثمّة سطرًا قادمًا — ومتى. وبلا هذا يبدو التبدّل
   مفاجأةً؛ ومعه يصير موعدًا.

   ويقف مع الشريط عند مرور الفأرة، فالوعد يجب أن يصدق.
   ========================================================= */

.guide-strip__progress{
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;

  height:1px;
  width:0;

  background:linear-gradient(90deg, transparent, var(--brand-bronze));
}

.guide-strip__progress.is-running{
  animation:guide-progress 6s linear forwards;
}

.guide-strip.is-paused .guide-strip__progress{
  animation-play-state:paused;
}

@keyframes guide-progress{
  from{ width:0; }
  to{ width:100%; }
}


/* =========================================================
   النقاط
   =========================================================

   الزرّ نفسه هو مساحة اللمس، والنقطة رسمٌ داخله. ولو صُغّر
   الزرّ إلى حجم النقطة لتزاحمت المساحات على الهاتف وسرق كلٌّ
   لمسةَ جاره — وهي علّة وقعت في شريط المشاريع من قبل.
   ========================================================= */

.guide-strip__dots{
  display:inline-flex;
  flex:0 0 auto;
  gap:6px;
}

.guide-strip__dot{
  display:grid;
  place-items:center;

  width:22px;
  height:22px;
  padding:0;

  border:0;
  background:transparent;

  cursor:pointer;
}

.guide-strip__dot::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--brand-line);
  transition:background var(--motion-base) ease, transform var(--motion-slow) var(--motion-emphasis);
}

.guide-strip__dot.is-current::before{
  background:var(--brand-bronze);
  transform:scale(1.5);
}

.guide-strip__dot:hover::before{
  background:var(--brand-bronze);
}


@media (max-width:640px){

  /*
  الشريط لاصق، فكل بكسل فيه يُقتطع من الشاشة طول الزيارة.
  قِيس المجموع على هاتف 390×844: الهيدر والشريط معًا 142
  بكسلًا، أي سُبع الشاشة. فيُشدّ هنا إلى 46 ويبقى مقروءًا.
  */
  .guide-strip__inner{
    gap:8px;
    min-height:46px;
  }

  .guide-line{
    font-size:12.5px;
    line-height:1.5;
  }

  /*
  الأيقونة تُحذف على الضيّق: الجملة أولى بالمساحة منها.
  */
  .guide-line i{
    display:none;
  }

  .guide-strip__dot{
    width:18px;
    height:18px;
  }
}

/*
تحت 420 بكسل تُحذف النقاط: الجملة أولى بالمساحة من مؤشّر
موضعها. والشريط يدور وحده على كل حال.
*/
@media (max-width:420px){

  .guide-strip__dots{
    display:none;
  }
}


/*
من طلب تقليل الحركة لا يُبدَّل عليه شيء — والجافاسكربت لا
يشغّل المؤقّت أصلًا حينها. وهذا احتياط ثانٍ.
*/
@media (prefers-reduced-motion:reduce){

  .guide-line,
  .guide-line i,
  .guide-line__arrow,
  .guide-strip__dot::before{
    transition:none;
    transform:none;
  }

  .guide-line.is-current i{
    transform:none;
  }

  /*
  الخيط يختفي كلّه: خيطٌ يمشي ستّ ثوانٍ هو بالضبط ما طلب
  هذا المستخدم ألّا يراه.
  */
  .guide-strip__progress{
    display:none;
    animation:none;
  }
}