AUTOBARQ / أوتوبرق - الحركة والتفاعل V1
المصدر البصري: إعادة البناء المتجهية V4.

ابدأ هنا
فك ضغط الحزمة وافتح index.html. تعمل المعاينة محليًا دون إنترنت.
يمكنك إعادة التشغيل، الإيقاف والاستئناف، اختيار نسخة ثابتة، تشغيل نبضة تفاعل،
وتحريك مؤشر الزمن لمراجعة أي لحظة. الخلفية الداكنة والفاتحة متاحتان.

التسلسل المنفذ
0-300 ms      Connect: نقطة الاتصال الأصلية ونقطتان مساعدتان مؤقتتان.
300-1000 ms   Draw: رسم المدار الخلفي والأمامي تدريجيًا.
1000-1460 ms  Pulse: ظهور الحروف وعبور شريط طاقة داخلها.
1460-1780 ms  Strike: ظهور الصاعقة الذهبية واستقرارها.
1780-2800 ms  Reveal: الاسم الإنجليزي ثم العربي والخطوط الجانبية.
بعد 2800 ms   Idle: نبض خافت حول النقطة ومرور ضوء على المدار؛ الحروف ثابتة.
بعض الانتقالات تتداخل قليلًا للحفاظ على انسياب الحركة.
الدورة الخاملة 6 ثوانٍ. التفاعل عند المرور أو اللمس أو Enter/Space: 600 ms.

الاستخدامات السبعة في المعاينة
intro: التسلسل الكامل ثم الحركة الخفيفة.
splash: التسلسل داخل إطار شاشة بداية.
loading: الرمز فقط، مع دورة حركة أقصر 1.8 ثانية.
hover: الشعار كامل وثابت؛ نبضة واحدة عند التفاعل.
hero: الشعار مع عبارة تعريفية، ثم حركة خفيفة.
onboarding: ظهور مرة واحدة ثم استقرار دون دورة خاملة.
dashboard: رمز صغير بدورة هادئة 7.5 ثانية.
هذه أمثلة لاستخدام الحركة؛ ليست شاشات منتج متصلة بخدمات فعلية.

الملفات
index.html: المعاينة مع التحكم والاستخدامات السبعة.
embed.html: مكوّن حركة صغير قابل للتضمين، دون واجهة التحكم الكبيرة.
assets/autobarq-motion.js: المشغّل القابل لإعادة الاستخدام، دون مكتبات خارجية.
autobarq-motion-dark.svg / autobarq-motion-light.svg: نسختان شفافتان تعملان تلقائيًا في متصفح داعم لحركة SVG/CSS.
  تعرضان المراحل الست؛ الحركة الخاملة فيهما نبض حول النقطة.
  التحكم التفاعلي والضوء المتنقل على المدار موجودان في نسخة HTML/JavaScript.
assets/logo-static-dark.svg / logo-static-light.svg: المصدر الثابت V4 محفوظ دون تعديل.
assets/poster-dark.png: بديل ثابت شفاف.
video/AUTOBARQ-Motion-Preview.mp4: فيديو صامت 1280x720، بمعدل 30 إطارًا/ثانية، وطول 8.8 ثانية.
video/AUTOBARQ-Motion-Poster.png: لقطة ثابتة من مشهد الفيديو.
storyboard.html / STORYBOARD.png: لقطات فعلية للمراحل الست.
motion-spec.json: وصف التوقيت والسلوك.
VERIFICATION.json: نتائج فحوص التشغيل.

تضمين سريع داخل موقع
انقل الحزمة إلى مجلد brand-motion في الموقع، ثم استخدم مثلًا:

<iframe
  src="/brand-motion/embed.html?preset=hero&theme=dark"
  title="شعار أوتوبرق المتحرك"
  style="width:100%;height:520px;border:0"
  loading="lazy">
</iframe>

خيارات الرابط
preset=intro | splash | loading | hover | hero | onboarding | dashboard
theme=dark | light
background=transparent  يجعل خلفية إطار التضمين شفافة.
اختر theme حسب خلفية الموقع عند استخدام الشفافية.
ملف embed يغير سلوك الحركة وحجم الرمز؛ الإطارات والنصوص التوضيحية في index للمعاينة فقط.

التحكم من داخل embed.html
window.autobarq.replay()        إعادة التسلسل.
window.autobarq.pause()         إيقاف عند الإطار الحالي.
window.autobarq.play()          استئناف من الإطار نفسه.
window.autobarq.still()         الوصول إلى الشعار الثابت وإيقاف الحركة.
window.autobarq.setIdle(false)  تعطيل الدورة الخاملة.
window.autobarq.ready()         شعار ثابت جاهز للتفاعل.
window.autobarq.pulse()         نبضة واحدة عندما يكون التفاعل متاحًا.
window.autobarq.seek(1460)      مراجعة لحظة محددة مع إيقاف التشغيل.
window.autobarq.destroy()       فصل المشغل ومستمعي الأحداث عند إزالة المكوّن.

للتضمين المباشر دون iframe، استخدم SVG المضمن في embed مع المشغّل.
لكل نسخة ضمن الصفحة معرفات SVG مستقلة؛ لا تنسخ معرفات التدرجات والأقنعة نفسها عدة مرات.
إنشاء كائن المشغّل: new AutoBarqMotion(element, { autoplay:true, idle:true }).

تقليل الحركة والظهور
عند prefers-reduced-motion: reduce يظهر الشعار كاملًا دون حركة، بما فيها التفاعل.
نسخة HTML توقف الزمن عند إخفاء الصفحة أو خروج المكوّن من الشاشة، وتستأنف دون قفزة زمنية.
زر الإيقاف يوقف أيضًا التفاعل التلقائي؛ زر نبضة التفاعل أمر مستقل وصريح.
لا توجد اتصالات شبكة أو خطوط خارجية أو صوت.

الحالة والاعتماد
الحركة منفذة على ملفات V4؛ نهاية التسلسل تطابق ملف V4 الثابت في اختبار المتصفح.
هذا لا يعني تطابق V4 الكامل مع كل تفاصيل الإضاءة في الصورة المرجعية الأصلية.
اعتماد الرسم بصريًا والتحقق من حقوق العلامة يظلان كما وردا في حزمة الهوية.
لا يتضمن هذا الإصدار ملف Lottie؛ التسليم SVG/CSS/JavaScript مع MP4.
Tajawal مستخدم في واجهة المعاينة فقط، وترخيصه SIL OFL مرفق داخل assets.
