نظام التصميم العام
قواعد الحركة
تحوّلات لطيفة عند التمرير، احترام تقليل الحركة، وميزانية الحركة.
مكتمل
دقيقة، هادفة، واعية بـ reduced-motion. الانضباط التحريري ينطبق على الحركة أيضاً — إذا لم تكسب الحركة ميزانيتها، تُحذف.
أنماط الحركة المعتمدة
- تمرير الكرت: translateY(-1px) + tint للحدّ
- transition 150ms ease. tint بنفسجي للحدّ بـ 40% opacity. ظلّ بنفسجي ناعم اختياري 6-12px.
- تقدّم سهم CTA: الـ gap يتحرّك عند hover
- أيقونة السهم تتقدّم بـ ~0.25rem عند hover. 150ms ease. إشارة اتجاهية لطيفة.
- نقطة الإشارة الحيّة: نبضة
- `.deadline-pulse` و `.live-tick` يستخدمان نبضة 1.5-2s. محجوز للمواعيد النشطة والإشارات الحيّة.
- شريط تكر: تمرير خطي
- شريط Signal-board يمرّر أفقياً بمعدل ثابت. اقتصاد GPU (background-position فقط).
- مسح خلفية متحرّك
- `.cal-signal-board__scan` يُجري خط مسح خفيفاً بـ 6s عبر hero Signal Board. يتوقّف عند عدم نشاط المستخدم.
قواعد عامة
- كل حركة يجب أن تحترم `prefers-reduced-motion: reduce`. تحوّلات الـ hover تتعطّل، النبضات تتجمّد.
- لا ميزانية حركة فوق 6s لأي حلقة واحدة (أطول حلقة حيّة = `.cal-signal-board__scan` عند 6s).
- لا حركة على أجهزة اللمس لتحوّلات hover (مُعطَّلة تلقائياً عبر `@media (hover: none)`).
- خصائص GPU فقط: `transform`, `opacity`, `background-position`. تجنّب تحريك `width`, `height`, `top`, `left`.
