/* ══════════════════════════════════════════════════════════════════ طبقة الحياة — حركة تخدم النفس لا الاستعراض (البند 9). ثلاثة قيود لا تُكسر: 1) transform و opacity فقط (GPU) — لا حركة على مقاس أو لون أو ظل. 2) لا شيء يبدأ مخفياً إلا إذا كان JavaScript حاضراً (الفئة .js على )، فالمحتوى يظهر كاملاً لمن لا يصله السكربت. 3) prefers-reduced-motion يطفئ كل شيء دفعة واحدة في نهاية الملف. ══════════════════════════════════════════════════════════════════ */ /* ── الخلفية المحيطية: توهّجان ينجرفان ببطء وشبكة نقاط باهتة ────── */ .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .ambient__glow { position: absolute; inline-size: 62vmax; block-size: 62vmax; border-radius: var(--r-pill); filter: blur(90px); opacity: .5; will-change: transform; } .ambient__glow--a { background: radial-gradient(circle, var(--c-glow-mid), transparent 68%); inset-block-start: -18vmax; inset-inline-end: -14vmax; animation: drift-a var(--mo-ambient) var(--mo-ease) infinite alternate; } .ambient__glow--b { background: radial-gradient(circle, var(--c-glow-soft), transparent 70%); inset-block-end: -22vmax; inset-inline-start: -16vmax; animation: drift-b calc(var(--mo-ambient) * 1.4) var(--mo-ease) infinite alternate; } .ambient__grid { position: absolute; inset: 0; background-image: radial-gradient(var(--c-border-subtle) 1px, transparent 1px); background-size: 44px 44px; opacity: .55; mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 72%); } @keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6%, 8%, 0) scale(1.12); } } @keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(7%, -6%, 0) scale(1); } } /* ── ضوء يتبع المؤشر: «تمشي في المكان بضوئك» ──────────────────── */ .js .ambient::after { content: ""; position: absolute; inset: 0; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--c-glow-soft), transparent 62%); opacity: 0; transition: opacity var(--mo-slow) var(--mo-ease); } .js.has-pointer .ambient::after { opacity: 1; } /* ── شريط تقدّم القراءة ────────────────────────────────────────── */ .progress { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: 2px; z-index: var(--z-modal); pointer-events: none; } .progress__bar { display: block; block-size: 100%; background: var(--c-primary); transform: scaleX(var(--p, 0)); transform-origin: inline-start; will-change: transform; } /* ── نطق العنوان كلمةً كلمة ────────────────────────────────────── */ .js .hero__title .w, .js .phead__title .w { display: inline-block; opacity: 0; transform: translate3d(0, 0.5em, 0); animation: word-in var(--mo-slow) var(--mo-ease) forwards; animation-delay: calc(var(--i) * 55ms + 80ms); } @keyframes word-in { to { opacity: 1; transform: translate3d(0, 0, 0); } } /* ── دخول يستقر: عناصر تحطّ بلطف حين تدخل إطار النظر ───────────── */ .js .reveal > * { opacity: 0; transform: translate3d(0, var(--sp-4), 0); transition: opacity var(--mo-slow) var(--mo-ease), transform var(--mo-slow) var(--mo-ease); transition-delay: calc(var(--i, 0) * 70ms); } .js .reveal.is-in > * { opacity: 1; transform: translate3d(0, 0, 0); } /* ── سجل العمليات: السطور تُكتب واحداً بعد الآخر، والنبضة تدور ──── */ .oplog__dot { inline-size: 8px; block-size: 8px; border-radius: var(--r-pill); background: var(--c-primary); box-shadow: var(--sh-ring); animation: beat var(--mo-pulse) var(--mo-ease) infinite; } @keyframes beat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } } .js .oplog__line { opacity: 0; transform: translate3d(0, var(--sp-2), 0); animation: line-in var(--mo-slow) var(--mo-ease) forwards; animation-delay: calc(var(--i) * 420ms + 500ms); } @keyframes line-in { to { opacity: 1; transform: translate3d(0, 0, 0); } } .oplog__wait { position: relative; } .oplog__wait::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-pill); border: 1px solid var(--c-primary); animation: ping calc(var(--mo-pulse) * 1.2) var(--mo-ease) infinite; } @keyframes ping { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } /* ── الحلقة اليومية: نبضة تدور على المدار بلا توقّف ─────────────── */ .loop__pulse { animation: orbit calc(var(--mo-ambient) * 0.75) linear infinite; } @keyframes orbit { to { transform: rotate(360deg); } } .loop__core { animation: breathe calc(var(--mo-pulse) * 1.6) var(--mo-ease) infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } } /* ── علامة النجاح في صفحة الشكر ────────────────────────────────── */ .js .done__ring { animation: pop var(--mo-slow) var(--mo-spring) forwards; transform: scale(.6); opacity: 0; } .js .done__tick { animation: pop var(--mo-slow) var(--mo-spring) 160ms forwards; transform: scale(.4); opacity: 0; } @keyframes pop { to { transform: scale(1); opacity: 1; } } /* ── تفاعل يترك أثراً: البطاقات ترتفع قليلاً تحت المؤشر ─────────── */ .card, .dept, .svc, .gate, .plan, .post-card, .pillar, .jstep { transition: transform var(--mo-base) var(--mo-spring), border-color var(--mo-base) var(--mo-ease), background-color var(--mo-base) var(--mo-ease); } .card:hover, .dept:hover, .svc:hover, .gate:hover, .post-card:hover, .pillar:hover { transform: translate3d(0, -4px, 0); } /* ══════════════════════════════════════════════════════════════════ مفتاح الإطفاء الواحد — من يطلب حركة أقل، يحصل على موقع ساكن تماماً. ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js .hero__title .w, .js .phead__title .w, .js .oplog__line, .js .reveal > *, .js .done__ring, .js .done__tick { opacity: 1 !important; transform: none !important; } .js .ambient::after { display: none; } }