/* ════════════════════════════════════════════════════════════════════════════ * atheer-orb.css — كرة «الذكاء يعمل». * * تظهر في **كلّ** توليدٍ صوتيّ أو تفريغٍ نصّيّ: تلخيص مكالمة، تفريغ تسجيل، * تفريغ بريدٍ صوتيّ، تفريغ رسالةٍ صوتيّة في صندوق السوشال. * * 🔴 القيم من مرجع المالك (`lersent001.github.io/orb` — طقم * `orb-glass-liquid / siri / thinking`) **حرفيًّا**، بما فيها طقم ألوان * السكون. والمرجع WebGL بمُظلِّل سائل؛ وهذه CSS خالصة — فما نُقل هو ما * تُحسنه CSS: الطيف، والزجاج، والهالة، والفارق بين الحالتين. وما لا * تُحسنه (تشويه السائل، الانزياح اللونيّ في الحافّة، الجزيئات) **غير * منقول** — ولا أُدّعي نقله. * * ولماذا CSS لا WebGL: الكرة تُصيَّر داخل WebView على iOS وبلا إنترنت، * وسكربتٌ بعيدٌ هناك صندوقٌ فارغ يوم يسقط المضيف. (الحجّة من المرجع نفسه.) * * ── الطيف (من الرابط) ─────────────────────────────────────────────────────── * عمل : #FFD86B ذهبيّ · #82F4FF سماويّ · #FF7BD5 وردّيّ · #8E6CFF بنفسجيّ * سكون: #B5A674 · #5E8794 · #9A648A · #635B8A ← طقمٌ ثانٍ لا خفوت * قشرة: #FFFFFF → #9BF4FF → #C5A9FF أرض: #030409 هالة: #956CFF/#6C688F * * ── الحالتان فارقُهما ثلاثة أشياء لا شيءٌ واحد ───────────────────────────── * لون : طقمٌ كامل مقابل طقم (colorA… ↔ idleColorA…) * سطوع : ‎١ مقابل ٠٫٦٨ (exposure 2 ↔ 1.36) * إيقاع: ‎١ مقابل ٣٫٣٣ أبطأ (speed .82 ↔ idleSpeed .246) * وهي **تبطئ ولا تتجمّد** — كما في المرجع: كرةٌ متجمّدة تُقرأ عطلًا، والبطيئة * تُقرأ «حيّةٌ لا تعمل». * ════════════════════════════════════════════════════════════════════════════ */ .at-orb { --orb-size: 44px; /* طقم العمل */ --orb-a: #ffd86b; --orb-b: #82f4ff; --orb-c: #ff7bd5; --orb-d: #8e6cff; --orb-hl: #ffffff; --orb-glow: #956cff; --orb-exposure: 1; --orb-tempo: 1; /* ثوابت الزجاج والقشرة — لا تتغيّر بالحالة */ --orb-canvas: #030409; --orb-shell-inner: #ffffff; --orb-shell-mid: #9bf4ff; --orb-shell-edge: #c5a9ff; --orb-sheen: #eaf4ff; position: relative; inline-size: var(--orb-size); block-size: var(--orb-size); flex: none; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 50% 45%, #0b1024 0%, var(--orb-canvas) 72%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--orb-shell-mid) 18%, transparent), 0 0 26px -6px color-mix(in srgb, var(--orb-glow) 62%, transparent), 0 0 60px -18px color-mix(in srgb, var(--orb-glow) 45%, transparent); } /* ── الشريط الموجيّ ───────────────────────────────────────────────────────── * 🔴 البناء الأوّل كان أربع كتلٍ منفصلة بمزج `screen`، وقيسَ أنّها تتراكم * فتُبيّض المركز: كرةٌ شاحبة لا تشبه المرجع في شيء. والمرجع ليس كتلًا أصلًا — * إنّه **شريطٌ أفقيّ** بانفصالٍ لونيّ عبر ارتفاعه (سماويّ فوق النواة البيضاء، * ووردّيّ ثمّ ذهبيّ تحتها) داخل كرةٍ داكنة. * * فالبناء: تدرّجٌ خطّيّ يحمل الطيف عموديًّا، وقناعٌ بيضويّ يقصّه عدسةً، وضبابٌ * خفيف يذيب الحواف. طبقتان بإزاحةٍ زمنيّة تعطيان عمقًا وتموّجًا لا يتكرّر. */ .at-orb__band { position: absolute; inset: 0; mix-blend-mode: screen; opacity: calc(0.95 * var(--orb-exposure)); background: linear-gradient(180deg, transparent 33%, color-mix(in srgb, var(--orb-b) 90%, transparent) 42%, var(--orb-hl) 50%, color-mix(in srgb, var(--orb-c) 94%, transparent) 55%, color-mix(in srgb, var(--orb-a) 96%, transparent) 60%, transparent 69%); /* ⚠️ عرضُ القناع هو الفارق بين **عدسةٍ** و**شريطٍ يقطعه محيط الكرة**. * ٨٦٪ يبلغ الحافّة فيُقرأ شريطًا؛ و٦٠٪ يخبو قبلها فيُقرأ عدسةً مدبَّبة * الطرفين. والارتفاع ١٦٪ لا ٣٠٪: الشريط في المرجع رقيق. */ -webkit-mask-image: radial-gradient(ellipse 60% 16% at 50% 51%, #000 18%, rgba(0, 0, 0, 0.62) 46%, transparent 84%); mask-image: radial-gradient(ellipse 60% 16% at 50% 51%, #000 18%, rgba(0, 0, 0, 0.62) 46%, transparent 84%); filter: blur(5px); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: at-orb-band; animation-duration: calc(5.1s * var(--orb-tempo)); } /* الطبقة الثانية أضيق وأبطأ وبإزاحةٍ سالبة: تصنع التموّج الذي يمنع الشريط من * أن يُقرأ خطًّا مرسومًا. ودورتاهما **غير متضاعفتين** فلا يُرى التكرار. */ .at-orb__band--b { opacity: calc(0.42 * var(--orb-exposure)); filter: blur(11px); -webkit-mask-image: radial-gradient(ellipse 74% 22% at 50% 51%, #000 14%, rgba(0, 0, 0, 0.4) 48%, transparent 88%); mask-image: radial-gradient(ellipse 74% 22% at 50% 51%, #000 14%, rgba(0, 0, 0, 0.4) 48%, transparent 88%); animation-duration: calc(6.7s * var(--orb-tempo)); animation-delay: -2.2s; } /* نواةٌ بيضاء حادّة على خطّ الوسط — هي ما يجعل الشريط يبدو **ساخنًا** لا * ملوّنًا فقط. (في المُظلِّل `whiteCore`.) */ .at-orb__core { position: absolute; inset: 0; mix-blend-mode: screen; opacity: calc(0.9 * var(--orb-exposure)); background: radial-gradient(ellipse 44% 2.2% at 50% 50%, var(--orb-hl) 0%, color-mix(in srgb, var(--orb-hl) 45%, transparent) 42%, transparent 78%); filter: blur(2px); animation: at-orb-core calc(5.1s * var(--orb-tempo)) ease-in-out infinite; } @keyframes at-orb-band { 0%, 100% { transform: translateY(-3%) scaleY(1); } 50% { transform: translateY(3%) scaleY(1.18); } } @keyframes at-orb-core { 0%, 100% { transform: translateY(-2%) scaleX(1); } 50% { transform: translateY(2%) scaleX(0.88); } } /* ── الزجاج ───────────────────────────────────────────────────────────────── * `glass=1 · glassOpacity=.44 · gloss=.24 · shade=.12` من الرابط: تاجٌ ساطع * أعلاها، وظلٌّ أسفلها يجعلها كرةً لا قرصًا. */ .at-orb__sheen { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 6%, color-mix(in srgb, var(--orb-hl) 30%, transparent) 0%, transparent 17%), linear-gradient(180deg, color-mix(in srgb, var(--orb-sheen) 12%, transparent) 0%, transparent 26%), radial-gradient(circle at 50% 118%, rgba(0, 0, 0, 0.34) 0%, transparent 46%); pointer-events: none; } /* ── القشرة ───────────────────────────────────────────────────────────────── * حافّةٌ لونيّة بألوان الرابط الثلاثة، وشفافيّتها `shellMidAlpha=.18`. */ .at-orb__shell { position: absolute; inset: 0; border-radius: 50%; padding: 1px; background: conic-gradient(from 210deg, var(--orb-shell-inner) 0deg, var(--orb-shell-mid) 90deg, var(--orb-shell-edge) 200deg, var(--orb-shell-mid) 300deg, var(--orb-shell-inner) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.58; animation: at-orb-shell calc(9s * var(--orb-tempo)) linear infinite; pointer-events: none; } @keyframes at-orb-shell { to { transform: rotate(1turn); } } /* ── حالة السكون ──────────────────────────────────────────────────────────── * طقمُ ألوان الرابط للسكون، وسطوعُه، وإيقاعُه. تبديلُ رموزٍ فقط: لا قاعدةَ * مكوّنٍ واحدة تُعاد كتابتها هنا — فما يُضاف من طبقاتٍ لاحقًا يسكن معها. */ .at-orb[data-state="idle"] { --orb-a: #b5a674; --orb-b: #5e8794; --orb-c: #9a648a; --orb-d: #635b8a; --orb-hl: #b6c4d2; --orb-glow: #6c688f; --orb-exposure: 0.68; --orb-tempo: 3.33; } /* ── مقاسات ──────────────────────────────────────────────────────────────── */ .at-orb--sm { --orb-size: 28px; } .at-orb--lg { --orb-size: 72px; } /* ── سطر «جارٍ التفكير…» ──────────────────────────────────────────────────── * الكرة تقول «شيءٌ يحدث» ولا تقول **ماذا**. والنصّ بجوارها يقوله. */ .at-orb-row { display: inline-flex; align-items: center; gap: 12px; } .at-orb-row__label { display: grid; gap: 2px; line-height: 1.45; } .at-orb-row__title { font-size: 13px; font-weight: 600; } .at-orb-row__sub { font-size: 12px; color: var(--text-muted, #6b6f80); letter-spacing: 0.01em; } /* النقاط تتحرّك: دليلٌ ثانٍ على الحياة لمن لا يرى الكرة — حركةٌ معطَّلة أو * قارئ شاشة يقرأ النصّ وحده. */ .at-orb-row__sub::after { content: ""; animation: at-orb-dots 1.4s steps(4, end) infinite; } @keyframes at-orb-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } 100% { content: ""; } } /* ── احترام تعطيل الحركة ──────────────────────────────────────────────────── * الحركة هي المقصود هنا، فحين تكون غير مرغوبة تبقى الكرة بألوانها وتتوقّف — * فالتدرّج الساكن يبقى يقرأ «مشغول»، وإخفاؤها يترك اللوحة تبدو منتهية. */ @media (prefers-reduced-motion: reduce) { .at-orb__band, .at-orb__core, .at-orb__shell, .at-orb-row__sub::after { animation: none; } .at-orb-row__sub::after { content: "…"; } } /* ── لوحة WebGPU ──────────────────────────────────────────────────────────── * حين يعمل مُظلِّل المالك تحلّ هذه اللوحة محلّ طبقات CSS داخل الحاوية نفسها، * فلا يتغيّر شيءٌ في التخطيط: المقاس والحدّ الدائريّ والهالة كلّها على `.at-orb`. * ولا هالة CSS تحتها: المُظلِّل يرسم حافّته بنفسه، فتراكبُهما يُثخّن الحدّ. */ /* الصنف `at-orb--gpu` يُضاف **بعد** أن ترسم اللوحة فعلًا، لا بمجرّد وجودها: * `:has()` كانت تُطفئ طبقات CSS لحظة إدراج اللوحة، فإن أخفق الجهاز ظهرت * فجوةٌ فارغة. والآن تبقى الطبقات تحتها وتُخفى بعد النجاح وحده. */ .at-orb--gpu { background: none; box-shadow: none; } .at-orb--gpu .at-orb__band, .at-orb--gpu .at-orb__core, .at-orb--gpu .at-orb__sheen, .at-orb--gpu .at-orb__shell { display: none; } .at-orb__gpu { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; border-radius: 50%; z-index: 1; } /* ── علامة «يتولّاها الذكاء» — لشاشات المراقبة ────────────────────────────── * ساكنةٌ عمدًا. الطابور يُمسح تحت ضغط، وحركةٌ في صفّ جدولٍ تنافس الرقم الذي * يبحث عنه المشرف. الطيف من الكرة فتُقرأ من العائلة؛ والسكون قرارٌ لا نقص. */ .at-ai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7; color: var(--text, #1c1f2a); background: color-mix(in srgb, #8e6cff 12%, var(--surface-1, #fff)); border: 1px solid color-mix(in srgb, #8e6cff 28%, transparent); white-space: nowrap; } .at-ai-chip__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; flex: none; background: conic-gradient(from 210deg, #ffd86b, #82f4ff, #ff7bd5, #8e6cff, #ffd86b); }