/* ═══ الأساس: المتغيّرات، التصفير، المسرح، الكانفس، اللودر، المؤشّر ═══
   مُستخرَج حرفياً من index.html بلا أي تعديل. */

/* ═══════════════════════════════════════════════════════════════════
   نسخة الكود (Version 2) — أنيميشن ثلاثي الأبعاد حقيقي مبني بالكامل
   بالكود (Three.js/WebGL). لا فيديو، لا صور — كل خيط جسم 3D حي.
   ───────────────────────────────────────────────────────────────────
   ▸ يتحرك مع السكرول (180vh) — عدّل --scrub-length.
   ▸ حي دائماً: الخيوط تتمايل والتوهج يتنفس حتى بدون سكرول.
   ▸ الألوان والخلفية قابلة للتغيير: عدّل window.ANIM_CONFIG تحت
     (أو نادِ window.__anim.setConfig({...}) وقت التشغيل).
   ───────────────────────────────────────────────────────────────────
   ▸ الخلفية (اللوحة): طبقة DOM مستقلة خلف الكانفس. الصور تُركَّب فوق
     بعضها كشريط واحد متصل يملأ الشاشة ويصعد مع السكرول. الضفيرة مثبّتة
     على اللوحة وتصعد معها 1:1، فتبقى ماشية على المسار المرسوم عليها.
     الإعدادات: window.BG_CONFIG تحت.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --scrub-length: 240vh;   /* ← مسافة السكرول التي يكتمل خلالها الأنيميشن
                                (كانت 180vh؛ زِيدت ليأخذ الانفجار والقفل
                                 مساحتهما دون تسريع الزحف والانفراد) */
  --gold: #F5C132;
  --nav: #ee4b28;          /* برتقالي‑أحمر شريط التنقّل، مأخوذ من المرجع */
  --nav-top: clamp(28px, 6.5vh, 64px);
                           /* بُعد الشريط عن أعلى الشاشة — غيّره من هنا
                              وحده لرفعه أو خفضه، بلا لمس بقيّة القواعد */
  --nav-hover: #166534;    /* أخضر غامق عند التمرير (كان #1f8f45) */
  --page-bg: #000;
}

*{margin:0;padding:0;box-sizing:border-box}
/* الانزلاق لروابط الشريط يتولّاه js/nav.js (scrollIntoView) لا CSS:
   قاعدة html{scroll-behavior:smooth} كانت تجعل فتح رابط فيه #about
   يشغّل الأنيميشن كاملاً ذاتياً عند التحميل في بعض المتصفّحات. */
body{background:var(--page-bg);font-family:'Segoe UI',system-ui,sans-serif;overflow-x:hidden}
.stage{height:calc(100vh + var(--scrub-length));position:relative}
/* isolation: يحصر خلط الكانفس داخل الـ pin فقط */
.pin{position:sticky;top:0;height:100vh;overflow:hidden;z-index:1;isolation:isolate;background:#000}

/* ── الكانفس: خلفية المشهد أصبحت أسود صافياً (ANIM_CONFIG تحت)، لذلك
      screen يجعل الأسود شفافاً تماماً ويُركِّب توهّج الخيوط فوق اللوحة —
      نفس طريقة الدمج في الـ compositing. الأنيميشن لم يتغيّر. ── */
canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:1;mix-blend-mode:screen;
}

.loader{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;background:var(--page-bg);
  z-index:5;transition:opacity .7s ease,visibility .7s;
}
.loader.done{opacity:0;visibility:hidden}
.loader .ring{
  width:56px;height:56px;border-radius:50%;
  border:3px solid rgba(255,255,255,.1);border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader .lbl{font-size:13px;letter-spacing:.2em;color:#888}

.hint{
  position:absolute;bottom:34px;right:50%;transform:translateX(50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:#7a7a7a;font-size:12px;letter-spacing:.28em;z-index:4;
  transition:opacity .6s ease;pointer-events:none;
}
.hint.gone{opacity:0}
.hint .wheel{width:22px;height:36px;border:2px solid #8f8f8f;border-radius:12px;position:relative}
.hint .wheel::after{
  content:"";position:absolute;top:6px;right:50%;transform:translateX(50%);
  width:4px;height:8px;border-radius:4px;background:var(--gold);
  animation:wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{50%{transform:translate(50%,10px);opacity:.2}}

/* مؤشّر «مرّر للأسفل» — أُزيل بطلب المستخدم.
   يبقى العنصر في الصفحة ولا يُحذف: bundle.js يمسكه بالاسم ويضيف له صنفاً
   مع كل تمرير، فحذفه من الـDOM يجعل ذلك المستمع يرمي خطأ في كل سكرول.
   الإخفاء يعطي النتيجة نفسها بلا إعادة بناء. */
.hint{display:none!important}