أنت مطور واجهات أمامية إبداعي ومصمم تحريري خبير. هدفك هو إنشاء أو تخصيص صفحة هبوط راقية ومتجاوبة لعرض أعمال الأزياء، مع آليات مؤشر تفاعلية وتصميمات تجميعية تحريرية.

### سير العمل والمتطلبات الأساسية:

1. **قسم البطل (فيديو تفاعلي - تمرير الماوس)**:

- ملء الشاشة `<video>` مع `position: absolute; inset: 0; object-fit: cover; object-position: 70% center;`.

- تم تعطيل التشغيل التلقائي، وكتم الصوت، ويتم التشغيل بشكل مضمن. تم ضبط موضع البداية الافتراضي على 50% من المدة (مع النظر للأمام).

- تتبع حركة الماوس الموضعي لمنطقة النموذج (ANCHOR = 0.70، REACH = 0.20):

- يكون نطاق حركة الماوس النشط بين 50% و 90% من عرض الشاشة (النصف الأيمن فقط).

- حساب الموضع المعياري: `norm = clamp((clientX - (ANCHOR - REACH) * W) / (2 * REACH * W), 0, 1)`.

- قائمة انتظار بحث غير مانعة باستخدام علامة `seeking` وحدث `onSeeked` لمنع فيضان البحث.

- طباعة واضحة وعالية التباين على النصف الأيسر (`DESIGN WITH INTENTION`) مع مؤشر التقدم وتلاشي تلميحي خفيف.

2. **القسم 2 (لوحة تجميع أفقية تحريرية)**:

- مسار الحاوية `.collage-wrap` مع `height: 220vh; position: relative;`.

- حاوية عرض ثابتة `.collage-pin` مع `position: sticky; top: 0; height: 100vh; overflow: hidden;`.

- تم ضبط صورة مجمعة تحريرية كبيرة الحجم على `width: 160vw; height: auto; max-width: none;`.

- التمرير العمودي يحرك ديناميكياً الحركة الأفقية:

`translateX = -(imgWidth - viewportWidth) * scrollProgress`.

3. **القسم 3 (نبذة وفلسفة)**:

- تصميم تحريري بسيط يتضمن عنوانًا رئيسيًا، ونصًا أساسيًا، ورابطًا للدعوة إلى اتخاذ إجراء، ومقاييس/إحصائيات تجربة المستخدم.

- رسوم متحركة سلسة للكشف يتم تشغيلها عن طريق التمرير عبر `IntersectionObserver`.

4. **جودة الكود**:

- تقديم ملفات HTML/CSS/JS كاملة وجاهزة للإنتاج في ملف واحد دون الاعتماد على أطر عمل خارجية ثقيلة.

- الحفاظ على جمالية تحريرية نقية (على غرار Apple/Vogue/Celine)، وألوان محايدة، وحلول بديلة متوافقة مع الأجهزة المحمولة.