/* ================================================================ 04 — الحركة (Motion) مبدآن يحكمان هذا الملف: 1) لا نحرّك إلا `transform` و`opacity` — الخاصيتان الوحيدتان اللتان يركّبهما المتصفح على كرت الرسوم دون إعادة تخطيط. الاستثناء الوحيد: عرض شريط التقدّم (يعمل مرة واحدة). 2) الحركة تخدم الفهم لا الاستعراض: 140–340 مللي ثانية، لأن المستخدم يفتح هذه الصفحات عشرات المرات يومياً. ================================================================ */ /* ================================================================ إطارات الحركة ================================================================ */ @keyframes ih-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes ih-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ih-slide-start { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } } @keyframes ih-toast-in { from { opacity: 0; transform: translateX(-100%) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes ih-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-100%) scale(0.98); } } @keyframes ih-pop { 0% { transform: scale(0.9); opacity: 0; } 60% { transform: scale(1.02); } 100% { transform: scale(1); opacity: 1; } } /* ================================================================ دخول الصفحة المحتوى الرئيسي يظهر مرة واحدة عند التحميل. لا يعتمد على JavaScript إطلاقاً، فلا خطر من إخفاء المحتوى. ================================================================ */ main.container > * { animation: ih-rise var(--dur-slow) var(--ease-out) both; } /* تدرّج زمني للأقسام الأولى فقط — ما بعدها يظهر فوراً */ main.container > *:nth-child(1) { animation-delay: 0ms; } main.container > *:nth-child(2) { animation-delay: 50ms; } main.container > *:nth-child(3) { animation-delay: 100ms; } main.container > *:nth-child(4) { animation-delay: 150ms; } main.container > *:nth-child(5) { animation-delay: 200ms; } main.container > *:nth-child(n+6) { animation-delay: 240ms; } /* الشريط العلوي ينزلق من الأعلى */ .navbar-brand-custom { animation: ih-fade var(--dur-base) var(--ease-out) both; } /* ================================================================ الكشف المتدرّج للعناصر المتكرّرة ملاحظة سلامة حاسمة: الإخفاء الأولي مشروط بوجود الصنف `.js-on` على ، وهذا الصنف يضيفه main.js. فإن تعطّل JavaScript لأي سبب بقي كل المحتوى ظاهراً بشكل طبيعي. ================================================================ */ .js-on .js-reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .js-on .js-reveal.is-visible { opacity: 1; transform: none; } /* التدرّج الزمني — يتوقف بعد ثمانية عناصر حتى لا ينتظر المستخدم */ .js-on .js-reveal:nth-child(1) { transition-delay: 0ms; } .js-on .js-reveal:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); } .js-on .js-reveal:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); } .js-on .js-reveal:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); } .js-on .js-reveal:nth-child(5) { transition-delay: calc(var(--stagger-step) * 4); } .js-on .js-reveal:nth-child(6) { transition-delay: calc(var(--stagger-step) * 5); } .js-on .js-reveal:nth-child(7) { transition-delay: calc(var(--stagger-step) * 6); } .js-on .js-reveal:nth-child(8) { transition-delay: calc(var(--stagger-step) * 7); } .js-on .js-reveal:nth-child(n+9) { transition-delay: calc(var(--stagger-step) * 8); } /* ================================================================ صفوف الجدول ================================================================ */ .js-on .table tbody tr { animation: ih-fade var(--dur-base) var(--ease-out) both; } .js-on .table tbody tr:nth-child(1) { animation-delay: 0ms; } .js-on .table tbody tr:nth-child(2) { animation-delay: 25ms; } .js-on .table tbody tr:nth-child(3) { animation-delay: 50ms; } .js-on .table tbody tr:nth-child(4) { animation-delay: 75ms; } .js-on .table tbody tr:nth-child(5) { animation-delay: 100ms; } .js-on .table tbody tr:nth-child(6) { animation-delay: 125ms; } .js-on .table tbody tr:nth-child(7) { animation-delay: 150ms; } .js-on .table tbody tr:nth-child(8) { animation-delay: 175ms; } .js-on .table tbody tr:nth-child(9) { animation-delay: 200ms; } .js-on .table tbody tr:nth-child(10) { animation-delay: 225ms; } .js-on .table tbody tr:nth-child(11) { animation-delay: 250ms; } .js-on .table tbody tr:nth-child(n+12) { animation-delay: 275ms; } /* ================================================================ الإشعارات ================================================================ */ .toast-item { animation: ih-toast-in var(--dur-slow) var(--ease-out); } .toast-item.toast-hiding { animation: ih-toast-out var(--dur-base) var(--ease-in) forwards; } /* ================================================================ لمسات دقيقة ================================================================ */ /* بطاقة لاعب الشهر تدخل بنبضة خفيفة — العنصر الوحيد المستحق */ .honor-card { animation: ih-pop var(--dur-slow) var(--ease-out) both; animation-delay: 120ms; } /* أيقونة البطاقة الإحصائية تكبر قليلاً عند المرور على البطاقة */ .stat-tile__icon { transition: transform var(--dur-base) var(--ease-out); } .stat-tile:hover .stat-tile__icon { transform: scale(1.08); } /* أيقونة رأس الصفحة تميل قليلاً — تفصيلة تُحسّ ولا تُلاحظ */ .page-head__title > i { transition: transform var(--dur-slow) var(--ease-out); } .page-head:hover .page-head__title > i { transform: rotate(-6deg) scale(1.06); } /* رابط القائمة يبرز خطاً نعناعياً عند المرور */ .navbar-brand-custom .nav-link { position: relative; } .navbar-brand-custom .nav-link::after { content: ''; position: absolute; inset-inline: 0.9rem; bottom: 0.15rem; height: 2px; background: var(--mint); border-radius: var(--r-full); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); } .navbar-brand-custom .nav-link:hover::after { transform: scaleX(1); } .navbar-brand-custom .nav-link.active::after { display: none; } /* صف الجدول يزحف قليلاً في اتجاه القراءة عند المرور */ .table-hover tbody tr { transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .table-hover tbody tr:hover { transform: translateX(-2px); } /* ================================================================ احترام تفضيل تقليل الحركة بعض المستخدمين يعانون دواراً حركياً. هذه الكتلة إلزامية، وكانت غائبة تماماً عن التصميم السابق. ================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* الأهم: لا يبقى أي عنصر مخفياً بانتظار حركة لن تحدث */ .js-on .js-reveal { opacity: 1 !important; transform: none !important; } main.container > *, .table tbody tr, .honor-card { animation: none !important; opacity: 1 !important; transform: none !important; } /* الاستجابة تبقى — لكن كتغيّر لون لا كحركة */ .card--interactive:hover, .season-card:hover, .table-hover tbody tr:hover, .btn:active { transform: none !important; } } /* ================================================================ الطباعة — لا حركة ولا عناصر مخفية ================================================================ */ @media print { *, *::before, *::after { animation: none !important; transition: none !important; } .js-on .js-reveal { opacity: 1 !important; transform: none !important; } } /* ================================================================ انتقال الوضعين فاتح/ليلي — «جميل وبسيط» بنصّ طلب المالك الصنف يُركَّب من main.js لحظةَ النقر ويُنزع بعد 400ms: تحويلةُ ألوانٍ واحدة قصيرة، لا transition دائم يُبطئ كل تفاعلات الصفحة. ================================================================ */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color var(--dur-slow) var(--ease-in-out), border-color var(--dur-slow) var(--ease-in-out), color var(--dur-slow) var(--ease-in-out), box-shadow var(--dur-slow) var(--ease-in-out) !important; } @media (prefers-reduced-motion: reduce) { html.theme-switching, html.theme-switching * { transition: none !important; } }