/* الـ Intro (المرحلة 2)
   كل التواقيت بالثواني عند --intro-scale: 1 (المدة الكلية 8.8 ثانية)، وكلها تُضرب بـ --intro-scale.
   غيّر المدة من هنا فقط: 0.625 = 5.5 ثانية تقريباً. js/intro.js يقرأ نفس القيمة.
   التسلسل المعتمد: 0-0.6 هدوء (التخطي عند 0.5) | 0.6-2.0 شبكة النجمة | 2.0-3.6 الترس والتروس |
   3.6-5.0 المسارات والعقد | 5.0-6.0 الجملة كلمة كلمة | 6.0-6.9 الجملة ثابتة | 6.9-7.3 الرسم والجملة يختفيان |
   7.3-7.7 الشعار يظهر | 7.7-8.4 الشعار ثابت | 8.4-8.8 انزلاق الطبقة.
   الحركة على transform وopacity وstroke-dashoffset فقط، وclip-path للانزلاق الأخير. */
:root { --intro-scale: 1; }

html.intro-on { overflow: hidden; }

.intro {
  --S: var(--intro-scale);
  --off: 0s;                       /* الوقت اللي مضى قبل ما يشتغل js/intro.js (يضبطه السكربت) */
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-ivory);
  /* 8.4 → 8.8: الطبقة تنزلق للأعلى وتكشف الصفحة.
     هذه الحركة تبدأ لحظة إنشاء الطبقة (الثانية 0)، فما تُطرح منها --off مثل باقي العناصر */
  animation: bm-intro-out calc(0.4s * var(--S)) cubic-bezier(0.6, 0, 0.8, 0.4) calc(8.4s * var(--S)) both;
}
.intro.is-skipping { animation: bm-intro-skip 0.35s cubic-bezier(0.6, 0, 0.8, 0.4) both; }

/* توقيت عام: كل عنصر يحمل --d (البداية) و--len (المدة) */
.intro [style*="--d"] {
  animation-duration: calc(var(--len) * var(--S) * 1s);
  animation-delay: calc(var(--d) * var(--S) * 1s - var(--off));
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.intro__stage {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 3vh, 2rem);
  inline-size: 100%;
  padding-inline: var(--gutter);
  /* 6.9 → 7.3: الرسم والجملة يختفون معاً بالكامل قبل ما يظهر الشعار (بدون تراكب) */
  animation: bm-fade-out calc(0.4s * var(--S)) ease-in calc(6.9s * var(--S) - var(--off)) both;
}

.intro__svg {
  inline-size: min(78vw, 62vh);  /* سطح المكتب: الحد 62% من ارتفاع الشاشة؛ الجوال يحدّه العرض 78vw */
  block-size: auto;
  overflow: visible;
  fill: none;
  stroke: var(--color-ivory);
  stroke-width: 1;
}

/* 0.6 → 2.0: رسم الشبكة من المركز للخارج */
.i-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation-name: bm-draw; }
.i-grid { stroke-opacity: 0.5; }

/* 2.0 → 2.9: الشبكة تنكمش نحو حافة الترس وتختفي */
.i-grid {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: bm-shrink calc(0.9s * var(--S)) cubic-bezier(0.5, 0, 0.3, 1) calc(2.0s * var(--S) - var(--off)) both;
}
.i-gear { stroke-opacity: 0.9; stroke-width: 1.2; }

/* التروس الثلاثة تدور من نفس اللحظة (2.0) حتى يبقى طور التعشيق المحسوب صحيحاً.
   مدة الدورة --spin (ثوانٍ) ومركز الدوران محسوبان بـ build-intro-svg.mjs:
   السرعة معكوسة بنسبة عدد الأسنان، والاتجاه يتعاكس بين كل ترسين متجاورين. */
.i-small { stroke-opacity: 0.8; animation-name: bm-fade-in; }
.i-spin {
  transform-box: view-box;         /* transform-origin مكتوب على العنصر بإحداثيات الرسم */
  animation: bm-spin calc(var(--spin) * var(--S) * 1s) linear calc(2.0s * var(--S) - var(--off)) infinite;
}
.i-spin--ccw { animation-direction: reverse; }

/* نقطة آجر كعقرب ساعة: دورة كاملة 2.15 → 3.6 */
.i-hand {
  transform-box: view-box;
  transform-origin: 200px 200px;
  stroke-opacity: 0.5;
  animation-name: bm-hand;
}
.i-dot { fill: var(--color-accent-on-dark); stroke: none; }

/* 3.6 → 5.0: مسارات PCB تنتهي بعقد، وثلاث عقد تنبض مرة بالآجر */
.i-traces { stroke-opacity: 0.75; }
.i-node {
  fill: var(--color-ink);
  transform-box: fill-box;
  transform-origin: center;
  animation-name: bm-pop;
}
.i-pulse {
  fill: var(--color-accent-on-dark);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation-name: bm-pulse;
}

/* 5.0 → 6.0: الجملة كلمة كلمة (الكلمات فقط، الحروف ما تنفصل)، ثم ثابتة كاملة 6.0 → 6.9 */
/* المساحة محجوزة من البداية: الكلمات موجودة بشفافية صفر، والحركة transform فقط، فما يتحرك أي سطر */
.intro__line {
  /* العرض بـ em مو ch: وحدة ch تتغير لما يتبدّل الخط (البديل ← Readex) فينقسم السطر بشكل ثاني
     ويتحرك الرسم كله (CLS). em تعتمد على حجم الخط فقط. 15em تعطي الإنجليزي سطرين متوازنين. */
  max-inline-size: 15em;
  min-block-size: 2lh;             /* ارتفاع سطرين محجوز دائماً، فعدد الأسطر ما يحرّك الرسم */
  margin: 0;
  text-align: center;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  text-wrap: balance;
}
.intro__line:lang(ar) { font-family: var(--font-ar); font-weight: var(--weight-light); line-height: 1.6; }
.intro__line:lang(en) { font-family: var(--font-latin); font-weight: var(--weight-regular); line-height: 1.35; }
.intro__word { display: inline-block; animation-name: bm-word; }

/* 7.3 → 7.7: يظهر الشعار الأفقي وحده، ثم يبقى ثابتاً 7.7 → 8.4 */
.intro__logo {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: min(72vw, 340px);
  block-size: auto;
  animation: bm-settle calc(0.4s * var(--S)) cubic-bezier(0.2, 0.7, 0.2, 1) calc(7.3s * var(--S) - var(--off)) both;
}

/* زر التخطي: الزاوية العلوية جهة النهاية (يسار بالعربي، يمين بالإنجليزي) */
.intro__skip {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 1;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: var(--space-4);
  font-size: var(--step--1);
  animation: bm-fade-in calc(0.25s * var(--S)) ease-out calc(0.5s * var(--S) - var(--off)) both;
}

@keyframes bm-draw    { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bm-shrink  { from { transform: scale(1); opacity: 1; } to { transform: scale(0.42); opacity: 0; } }
@keyframes bm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bm-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bm-spin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes bm-hand    { 0% { opacity: 0; transform: rotate(0deg); } 12% { opacity: 1; } 100% { opacity: 1; transform: rotate(360deg); } }
@keyframes bm-pop     { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes bm-pulse   { 0% { opacity: 0; transform: scale(1); } 30% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(3); } }
@keyframes bm-word    { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bm-settle  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes bm-intro-out  { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes bm-intro-skip { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }

/* حماية إضافية: مع تقليل الحركة ما تظهر الطبقة أبداً (السكربت أصلاً ما ينشئها) */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
  html.intro-on { overflow: auto; }
}

/* وضع التباين العالي: خطوط الرسم والنقاط بلون نص النظام (stroke ما يتغير تلقائياً) */
@media (forced-colors: active) {
  .intro__svg { stroke: CanvasText; }
  .i-dot, .i-node, .i-pulse { fill: CanvasText; }
}