/* =========================================================================
   نظام الحركة - العلامة السابعة
   منقول عن دليل الهوية، فصل 29 «مبادئ الحركة» (Motion principles).
   هذا الملف هو المرجع المحفوظ للدراسات الاثنتين والعشرين، وأسماء
   الإطارات المفتاحية كما وردت في الدليل حرفيًا (sb*)، كي يبقى الموقع
   والمطبوعات على نظام واحد.

   الثوابت الأربعة:
     المحور     32° دائمًا - لا رأسيًا ولا من الجانب
     المُدد     180 · 420 · 900 مللي، ولا شيء غيرها
     التيسير    cubic-bezier(.2,.8,.2,1) - يصل ويثبت بلا ارتداد
     التتابع    60 مللي بين عناصر المجموعة

   والمبادئ الأربعة:
     01 الدخول على المحور        02 الوصول والتثبيت
     03 عنصر واحد يتحرّك          04 الحركة تحمل معنى
   ========================================================================= */

:root{
  --mo-ease:cubic-bezier(.2,.8,.2,1);
  --mo-fast:180ms;
  --mo-base:420ms;
  --mo-long:900ms;
  --mo-stagger:60ms;
}

/* =========================================================================
   الإطارات المفتاحية - نصّ الدليل
   ========================================================================= */

/* 01 · بناء الشعار - سبعة مستويات تنزلق وتثبت */
@keyframes sbSlide{0%{transform:translate(-120%,62%);}46%,100%{transform:translate(0,0);}}

/* 02 · مسحة المستوى - تحلّ محلّ كل تلاشٍ متقاطع */
@keyframes sbWipe{
  0%{clip-path:polygon(0 0, 0 0, -34% 100%, 0 100%);}
  50%,100%{clip-path:polygon(0 0, 134% 0, 100% 100%, 0 100%);}
}

/* 03 · تتبّع الحروف - العنوان يدخل تتبّعًا لا تلاشيًا */
@keyframes sbTrack{
  0%{letter-spacing:.4em;opacity:0;}
  34%{opacity:1;}
  74%,100%{letter-spacing:-.04em;opacity:1;}
}

/* 04 · صعود البيانات - الأعمدة تنمو من خطّ الأساس */
@keyframes sbRise{0%{transform:scaleY(0);}58%,100%{transform:scaleY(1);}}

/* 05 · دحرجة الأرقام - عمود واحد بلا قلب */
@keyframes sbCount{0%,10%{transform:translateY(0);}64%,100%{transform:translateY(-83.333%);}}

/* 06 · المصراع - المشهد يخرج كما دخل */
@keyframes sbShutter{
  0%{transform:translateY(-102%);}
  34%,62%{transform:translateY(0);}
  96%,100%{transform:translateY(102%);}
}

/* 07 · حالة البلاطة - تنضغط ولا تدور */
@keyframes sbTileFlip{0%{transform:scaleX(1);}44%,46%{transform:scaleX(.04);}90%,100%{transform:scaleX(1);}}
@keyframes sbTileSwap{0%,45%{transform:scaleX(0);}46%,100%{transform:scaleX(1);}}

/* 08 · الخطّ تحت العبارة - يحلّ محلّ كل إبراز أو توهّج */
@keyframes sbUnderline{0%{transform:scaleX(0);}52%,100%{transform:scaleX(1);}}

/* 09 · انجراف الحقل - على شاشات LED بين الجلسات */
@keyframes sbFieldDrift{0%{transform:translateX(0);}100%{transform:translateX(-3.4cqw);}}

/* 10 · رسم المسار - المسار يُكشف لا الخريطة */
@keyframes sbMask{0%{clip-path:inset(0 100% 0 0);}56%,100%{clip-path:inset(0 0 0 0);}}

/* 11 · خطوة المرحلة - خطوات منفصلة لا انزلاق ناعم */
@keyframes sbStep{
  0%,8%{transform:translate(0,0);}
  30%,38%{transform:translate(100%,-26%);}
  60%,68%{transform:translate(200%,-52%);}
  90%,100%{transform:translate(300%,-78%);}
}

/* 12 · الحالة الحيّة - وميض مربّع بالبرتقالي وحده */
@keyframes sbPulse{0%,72%{transform:scale(1);}82%{transform:scale(0);}92%,100%{transform:scale(1);}}

/* 13 · ستارة الصورة - الصور تصل من الأعلى للأسفل، لا تُكبَّر */
@keyframes sbCurtain{
  0%{clip-path:polygon(0 0,100% 0,100% 0,0 0);}
  54%,100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
}

/* 14 · الانفلاق - مستويان يفترقان على خطّ المنتصف */
@keyframes sbSplit{0%{transform:translateY(0);}46%,100%{transform:translateY(-102%);}}
@keyframes sbSplitDn{0%{transform:translateY(0);}46%,100%{transform:translateY(102%);}}

/* 15 · كشف الشرائح - سبع شرائح بالتتابع، السبعة مُحرَّكة */
@keyframes sbSlats{0%{transform:scaleY(0);}54%,100%{transform:scaleY(1);}}

/* 16 · صعود الحروف - تصعد من قناع صلب، لا تتلاشى */
@keyframes sbTypeRise{0%{transform:translateY(112%);}50%,100%{transform:translateY(0);}}

/* 17 · مسح الرقم - يمتلئ من خطّ الأساس */
@keyframes sbCounterWipe{0%{clip-path:inset(0 0 100% 0);}52%,100%{clip-path:inset(0 0 0 0);}}

/* 18 · الشريط الإخباري - البيانات تمرّ لا الصفحة */
@keyframes sbTicker{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* 19 · مسحة الضوء - مرّة واحدة على انحراف 32° */
@keyframes sbSweep{
  0%{transform:translateX(-120%) skewX(-32deg);}
  100%{transform:translateX(220%) skewX(-32deg);}
}

/* 20 · التحميل - شريط محدَّد لا دوّامة */
@keyframes sbLoad{0%{transform:scaleX(0);}88%,100%{transform:scaleX(1);}}

/* 21 · استقرار الطبقات - الألواح تستقرّ في الكومة */
@keyframes sbStack3{0%{transform:translate(-14%,34%);}40%,100%{transform:translate(0,0);}}

/* =========================================================================
   الأدوات - تُطبَّق بإضافة الفئة، وتشتغل عند وصول العنصر بفئة is-mo
   يضيفها السكربت. فبدون جافاسكربت لا يُخفى شيء.
   ========================================================================= */

/* ---------- 03 · العنوان يدخل تتبّعًا ---------- */
html.js .mo-track{opacity:0;}
html.js .mo-track.is-mo{
  animation:sbTrack var(--mo-base) var(--mo-ease) forwards;
}
/* العربية لا تُتبّع - التتبّع يفكّ اتّصال الحروف. تصعد من قناع بدلًا عنه،
   وهي دراسة 22 «صعود عربي» بالتوقيت نفسه. */
html[dir="rtl"].js .mo-track{animation:none !important;opacity:1;}
html[dir="rtl"].js .mo-track > span{display:inline-block;}

/* ---------- 16 و22 · صعود الحروف من قناع ---------- */
/* القناع يحتاج فسحة رأسية: النصّ العربي أطول من صندوق السطر بسبب
   النزلات (ج ح خ ع غ م) والهمزات. بلا هذه الفسحة يقصّها overflow:hidden
   قصًّا دائمًا. الحشوة تُوسّع منطقة القصّ والهامش السالب يعيد التخطيط
   كما كان، فلا يتغيّر موضع العنوان. */
.mo-mask{
  display:block;
  overflow:hidden;
  padding-block:.2em;
  margin-block:-.2em;
}
html.js .mo-mask > *{transform:translateY(112%);}
html.js .mo-mask.is-mo > *{
  animation:sbTypeRise var(--mo-base) var(--mo-ease) forwards;
  animation-delay:calc(var(--i,0) * var(--mo-stagger));
}

/* ---------- 08 · الخطّ تحت العنوان ---------- */
.mo-rule{
  display:block;
  block-size:2px;
  background:var(--graphite);
  transform:scaleX(0);
  transform-origin:left center;
}
html[dir="rtl"] .mo-rule{transform-origin:right center;}
html.js .mo-rule.is-mo{animation:sbUnderline var(--mo-base) var(--mo-ease) forwards;}
html:not(.js) .mo-rule{transform:scaleX(1);}

/* ---------- 13 · ستارة الصورة ---------- */
html.js .mo-curtain{clip-path:polygon(0 0,100% 0,100% 0,0 0);}
html.js .mo-curtain.is-mo{animation:sbCurtain var(--mo-base) var(--mo-ease) forwards;}

/* ---------- 17 · مسح الرقم من خطّ الأساس ---------- */
html.js .mo-numeral{clip-path:inset(0 0 100% 0);}
html.js .mo-numeral.is-mo{
  animation:sbCounterWipe var(--mo-long) var(--mo-ease) forwards;
  animation-delay:calc(var(--i,0) * var(--mo-stagger));
}

/* ---------- 21 · استقرار الطبقات ---------- */
html.js .mo-stack > *{opacity:0;transform:translate(-14%,34%);}
html.js .mo-stack.is-mo > *{
  animation:sbStack3 var(--mo-base) var(--mo-ease) forwards;
  animation-delay:calc(var(--i,0) * var(--mo-stagger));
  opacity:1;
}
/* في العربية يأتي اللوح من جهة بداية القراءة */
html[dir="rtl"].js .mo-stack > *{transform:translate(14%,34%);}

/* ---------- 19 · مسحة الضوء ---------- */
.mo-sweep{position:relative;overflow:hidden;}
.mo-sweep::after{
  content:"";
  position:absolute;
  inset-block:-25%;
  inset-inline-start:-40%;
  inline-size:34%;
  background:var(--plane);
  opacity:.5;
  transform:translateX(-120%) skewX(-32deg);
  pointer-events:none;
}
html.js .mo-sweep.is-mo::after{
  animation:sbSweep var(--mo-long) var(--mo-ease) forwards;
}

/* ---------- 02 · مسحة المستوى ---------- */
html.js .mo-wipe{clip-path:polygon(0 0, 0 0, -34% 100%, 0 100%);}
html.js .mo-wipe.is-mo{animation:sbWipe var(--mo-base) var(--mo-ease) forwards;}
html[dir="rtl"].js .mo-wipe{clip-path:polygon(100% 0, 100% 0, 100% 100%, 134% 100%);}
html[dir="rtl"].js .mo-wipe.is-mo{animation-name:sbWipeRtl;}
@keyframes sbWipeRtl{
  0%{clip-path:polygon(100% 0, 100% 0, 100% 100%, 134% 100%);}
  50%,100%{clip-path:polygon(-34% 0, 100% 0, 100% 100%, 0 100%);}
}

/* ---------- 32 · أيقونات السطر ترسم نفسها ----------
   قاعدة الرسم في main.css معلّقة على .sv.is-in، أي بطاقات الخدمات وحدها،
   بينما الإخفاء المبدئي عامّ على كل .svc-ico path. فأي أيقونة خارج تلك
   البطاقات تبقى مخفيّة للأبد. هذه الأداة تمنح أي مجموعة أيقونات السلوك
   نفسه: تُرسم عند وصولها، وتبقى مرسومة. */
html.js .mo-draw .svc-ico .i-a{animation:svDraw 620ms var(--mo-ease) forwards;animation-play-state:paused;}
html.js .mo-draw .svc-ico .i-b{animation:svDraw 620ms var(--mo-ease) 140ms forwards;animation-play-state:paused;}
html.js .mo-draw .svc-ico .i-c{animation:svDraw 620ms var(--mo-ease) 280ms forwards;animation-play-state:paused;}
html.js .mo-draw.is-mo .svc-ico path{animation-play-state:running;}

/* =========================================================================
   الشعار - دراسة 02 «مسحة المستوى»
   دراسة 01 «بناء الشعار» تفترض سبعة مستويات منفصلة تنزلق كلٌّ على حدة،
   وشعار الموقع مسار واحد يُقدَّم صورةً، فلا شيء يُفصل ليتتابع. فطُبّقت
   المسحة بدلها: المستوى نفسه، والمحور نفسه، والمدّة نفسها.
   تعمل مرّة عند التحميل بلا سكربت، فلا تتكرّر مع التمرير.
   ========================================================================= */
html.js .site-nav > .logo .lockup{
  animation:sbWipeRtl var(--mo-base) var(--mo-ease) forwards;
}
html[dir="ltr"].js .site-nav > .logo .lockup{animation-name:sbWipe;}

/* =========================================================================
   تقليل الحركة: كل شيء في حالته النهائية فورًا
   ========================================================================= */
@media(prefers-reduced-motion:reduce){
  html.js .mo-track,
  html.js .mo-mask > *,
  html.js .mo-curtain,
  html.js .mo-numeral,
  html.js .mo-stack > *,
  html.js .mo-wipe{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
  html.js .mo-rule{transform:scaleX(1);animation:none !important;}
  .mo-sweep::after{display:none;}
  html.js .mo-draw .svc-ico path{stroke-dashoffset:0;animation:none !important;}
  html.js .site-nav > .logo .lockup{animation:none !important;clip-path:none !important;}
}