/* ===================================================================== motion.css — حالات مساعدة لنظام الحركة (GSAP) — يُحمَّل بعد base.css --------------------------------------------------------------------- لا يغيّر أي ألوان أو تخطيط. يحتوي فقط على: 1) وضع GSAP: تعطيل حركة CSS القديمة لعناصر [data-reveal] والقائمة (GSAP يتولى opacity/transform من JS) — يُفعَّل بـ html.gsap 2) will-change محدود بفترة الحركة فقط (.is-animating) 3) تفاصيل CSS خفيفة: ضغطة الزر الأساسي + لمعة عند المرور، نبضة الزر العائم 4) .no-motion + طباعة + تقليل الحركة ===================================================================== */ /* ===== 1) وضع GSAP ================================================= */ /* base.css يخفي [data-reveal] بـ opacity + translate (مسار بدون GSAP). مع GSAP: نلغي translate والانتقالات، ونترك opacity:0 حتى يضبطها gsap.set في نفس الإطار (لا وميض)، وتُمسح بعد اكتمال الظهور (.is-visible). */ html.gsap [data-reveal] { translate: none; transition: none; will-change: auto; } /* بعد الظهور: نعيد انتقالات hover المعتادة للبطاقات (transform/box-shadow ...) */ html.gsap [data-reveal].is-visible { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease); } /* قبل تشغيل GSAP: السكربت المضمّن في يضيف html.motion-pending (فقط عندما ستعمل الحركة: لا ?nomotion ولا data-motion="off" ولا تقليل حركة) فتبقى قطع الهيرو مخفية حتى تنفَّذ السكربتات المؤجلة وتخفيها بـ gsap.set — بلا وميض. motion.js يزيلها عند الجاهزية، وسكربت يزيلها بعد 4 ثوانٍ احتياطًا (لو لم يصل motion.js)، فلا يبقى شيء مخفيًا أبدًا بدون JS يُظهره. */ html.motion-pending .hero :is(.hero__crumb, .hero__eyebrow, .hero__title, .hero__rule, .hero__lead, .hero__actions, .hero__meta) { opacity: 0; } /* القائمة الجانبية: GSAP يتولى الانزلاق والشفافية (site.js يبقي aria/التركيز) */ html.gsap .drawer, html.gsap .drawer__backdrop { transition: none; } html.gsap .drawer { transform: none; } /* ===== 2) will-change أثناء الحركة فقط ============================== */ .is-animating { will-change: transform, opacity; } /* سطور العنوان المقسّمة (SplitText) */ .m-line, .m-word { will-change: transform, opacity; } /* ===== 3) لمسات CSS خفيفة ========================================== */ /* الزر الأساسي: ضغطة أخف (scale .98) فوق إزاحة base.css */ .btn--primary:active { transform: translateY(1px) scale(.98); } @media (prefers-reduced-motion: no-preference) and (hover: hover) { /* لمعة تعبر الزر مرة واحدة عند المرور (transform/opacity فقط) */ .btn--primary { overflow: clip; overflow-clip-margin: 1px; } .btn--primary::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 45%; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-140%) skewX(-16deg); } [dir="rtl"] .btn--primary::after { transform: translateX(140%) skewX(16deg); } .btn--primary:hover::after { animation: alhal-sheen .8s var(--ease) both; } [dir="rtl"] .btn--primary:hover::after { animation-name: alhal-sheen-rtl; } .btn--primary[aria-disabled="true"]::after, .btn--primary[disabled]::after { animation: none; } @keyframes alhal-sheen { from { transform: translateX(-140%) skewX(-16deg); opacity: 1; } to { transform: translateX(360%) skewX(-16deg); opacity: 1; } } @keyframes alhal-sheen-rtl { from { transform: translateX(140%) skewX(16deg); opacity: 1; } to { transform: translateX(-360%) skewX(16deg); opacity: 1; } } } @media (prefers-reduced-motion: no-preference) { /* الزر العائم: حلقة تنبض بهدوء كل 6 ثوانٍ (transform/opacity)، تتوقف عند المرور */ .fab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 2px var(--orange); opacity: 0; animation: alhal-fab-ring 6s var(--ease) 3s infinite; } .fab:hover::after, .fab:focus-visible::after { animation-play-state: paused; visibility: hidden; } @keyframes alhal-fab-ring { 0% { transform: scale(1); opacity: .75; } 22% { transform: scale(1.55); opacity: 0; } 100% { transform: scale(1.55); opacity: 0; } } } /* ===== 4) إيقاف الحركة ============================================= */ /* html.no-motion يضعها motion.js عند تقليل الحركة (وتصلح للاستخدام اليدوي) */ html.no-motion .fab::after, html.no-motion .btn--primary::after { animation: none !important; } html.no-motion .is-animating, html.no-motion .m-line, html.no-motion .m-word { will-change: auto; } @media print { [data-reveal], .m-line, .m-word { opacity: 1 !important; transform: none !important; visibility: visible !important; } .header { transform: none !important; opacity: 1 !important; } }