/* ════════════════════════════════════════════════════════════════════════════ * 🟣 [PERF-STUDENT 2026-06-10] 21-performance.css — مرآة طبقة الأداء للواجهة * ──────────────────────────────────────────────────────────────────────────── * إضافية بالكامل — تُحمَّل آخر ملف CSS في landing.html. التراجع بحذف سطر واحد. * * ملاحظة تكامل: 91-mobile-perf.css تغطي ≤768px أصلاً (إيقاف الحركات + الـ blur). * هذه الطبقة تكمّل الفجوات: أجهزة لمس أعرض من 768px (تابلت أفقي)، حصر * transition:all، أهداف اللمس، خلفية fixed، وperf-lite للأجهزة الضعيفة. * ════════════════════════════════════════════════════════════════════════════ */ /* §0 عام */ body { touch-action: manipulation; } a, button, .lp-btn-primary, .lp-btn-ghost, .lp-nav-link, .lp-logo { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } /* §1+§2 أي جهاز لمس (يشمل تابلت > 768px الذي لا تغطيه 91): إيقاف الحركات المستمرة الزخرفية + الـ blur — نفس فلسفة 91-mobile-perf حرفياً */ @media (hover: none) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; } .lp-orb, .lp-particles { display: none !important; } [class*="lp-"], .cine-cosmos, .cine-stars, .cine-aurora { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .lp-nav { background: color-mix(in oklab, var(--bg-page) 92%, transparent) !important; } /* الخلفية الكونية الثابتة: scroll بدل fixed (إعادة رسم كاملة كل سكرول) */ .cine-cosmos, body { background-attachment: scroll !important; } /* ملمس ضغطة فوري (92-tap-feedback موجودة — هذه تثبيت احتياطي) */ .lp-btn-primary:active, .lp-btn-ghost:active, .lp-nav-link:active, .lp-session-pill:active { transform: scale(0.97) !important; transition: transform 0.06s ease !important; } } /* §5 حصر transition:all في الواجهة (موضع واحد حي: .lp-nav-link) */ .lp-nav-link { transition-property: background-color, color, border-color, opacity, transform !important; transition-duration: 0.15s !important; } /* §6 أهداف لمس + مدخلات (الواجهة بلا مدخلات لكن نثبت القاعدة) */ @media (pointer: coarse) { .lp-nav-link, .lp-session-pill { min-height: 44px; } input, select, textarea { font-size: max(16px, 1rem) !important; } } /* §8 perf-lite (جهاز ضعيف حتى لو ديسكتوب) — يفعّله سكربت inline في */ html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.perf-lite .lp-orb, html.perf-lite .lp-particles { display: none !important; } html.perf-lite [class*="lp-"], html.perf-lite [class*="lp-"]::before, html.perf-lite [class*="lp-"]::after, html.perf-lite .cine-cosmos, html.perf-lite .cine-stars, html.perf-lite .cine-stars::after, html.perf-lite .cine-aurora, html.perf-lite .cine-aurora::before, html.perf-lite .cine-aurora::after { animation: none !important; } html.perf-lite .lp-nav { background: color-mix(in oklab, var(--bg-page) 92%, transparent) !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }