/*!
* DPARADOX · MOTION — طبقة الحركة المشتركة
* ============================================================
* ملف واحد يعطي كل بطاقات الموقع نفس السلوك: إضاءة تتبع المؤشر،
* ميلة خفيفة، انضغاط وومضة عند اللمس، دخول متتابع، وستارة انتقال
* بين الصفحات.
*
* لا يُعدَّل أي HTML: الطبقة تلتقط الأصناف القائمة في نظام الهوية:
* .dp-tool بطاقة الأداة (الرئيسية · الأدوات · الفئة)
* .dp-plan بطاقة الباقة (الباقات · اشتراكاتي)
* .nx بطاقة الفئة (شبكة النوايا)
* .rt بطاقة الشريط
*
* الاستخدام في أي صفحة — سطران بعد dparadox-ds.css:
*
*
*
* الإطفاء الكامل: أضف data-motion="off" على .
* ويُطفأ تلقائياً لمن فعّل «تقليل الحركة» في نظامه.
*
* © جميع الحقوق محفوظة.
* ============================================================ */
/* ============================================================
١ · البطاقة: ميلة + ارتفاع + إضاءة تتبع المؤشر
------------------------------------------------------------
الميل والإضاءة يقودهما JS عبر متغيّرات، فإن لم يعمل JS تبقى
البطاقة كما هي بالضبط — بلا كسر ولا فراغ.
============================================================ */
.dp-tool, .dp-plan, .dp-credit, .pack, .tool-card, .nx, .rt{
position:relative; isolation:isolate;
transform:perspective(900px)
rotateX(var(--dpx-rx, 0deg))
rotateY(var(--dpx-ry, 0deg))
translateY(var(--dpx-ty, 0))
scale(var(--dpx-sc, 1));
transition:border-color var(--t, .18s), box-shadow var(--t, .18s), transform .18s ease-out;
}
.dp-tool:hover, .dp-plan:hover, .dp-credit:hover, .pack:hover,
.tool-card:hover, .nx:hover, .rt:hover{ --dpx-ty:-3px }
/* الغلاف لا يميل — لئلا يتضاعف الميل مع بطاقاته الداخلية */
.pack{ --dpx-rx:0deg !important; --dpx-ry:0deg !important }
/* الإضاءة — تحت المحتوى لا فوقه، فلا تعترض ضغطة ولا تغطّي نصاً */
.dp-tool::before, .dp-plan::before, .dp-credit::before, .pack::before,
.tool-card::before, .nx::before, .rt::before{
content:""; position:absolute; inset:0; z-index:-1;
border-radius:inherit; pointer-events:none;
opacity:0; transition:opacity .35s ease;
background:radial-gradient(340px circle at var(--dpx-mx, 50%) var(--dpx-my, 50%),
rgba(167,150,217,.13), transparent 62%);
}
.dp-tool:hover::before, .dp-plan:hover::before, .dp-credit:hover::before,
.pack:hover::before, .tool-card:hover::before,
.nx:hover::before, .rt:hover::before{ opacity:1 }
/* ============================================================
٢ · اللمس: انضغاط + ومضة من نقطة الإصبع
============================================================ */
.dpx-press{ --dpx-sc:.975; --dpx-ty:0; transition:transform .12s ease-out }
.dpx-ripple{
position:absolute; z-index:-1; pointer-events:none;
width:16px; height:16px; margin:-8px 0 0 -8px;
border-radius:50%; background:rgba(167,150,217,.30);
animation:dpxRipple .62s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes dpxRipple{
from{ transform:scale(0); opacity:.8 }
to { transform:scale(26); opacity:0 }
}
/* ★ لا ومضة على بطاقة الرصيد ولا غلاف الباقة.
الومضة معناها «ضغطتَ شيئاً فاستجاب»: بطاقة الأداة تُضغط فتفتح،
أما بطاقة الرصيد فعرض معلومة لا زرّ — رابطها الوحيد «استخدام
الأداة». فالومضة فيها تَعِد بما لا يقع.
ويبقى فيها الارتفاع عند المرور والإضاءة والدخول المتتابع.
ولا علاقة لهذا بشريط الاستهلاك ولا بألوانه ولا بحسابه. */
.dp-credit .dpx-ripple,
.pack .dpx-ripple{ display:none }
/* ============================================================
٣ · الأيقونة تنبض
============================================================ */
.dp-tool__icon, .rt__icon, .nx__icon{
transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .28s ease, box-shadow .28s ease;
}
.dp-tool:hover .dp-tool__icon,
.rt:hover .rt__icon,
.nx:hover .nx__icon{
transform:scale(1.08) rotate(-4deg);
background:var(--brand-400, #A796D9);
box-shadow:0 0 0 5px rgba(167,150,217,.14);
}
.dpx-press .dp-tool__icon,
.dpx-press .rt__icon,
.dpx-press .nx__icon{ animation:dpxIconPop .42s cubic-bezier(.34,1.56,.64,1) }
@keyframes dpxIconPop{
0%{ transform:scale(1) }
45%{ transform:scale(1.16) rotate(-5deg) }
100%{ transform:scale(1) }
}
/* ============================================================
٤ · الدخول المتتابع
------------------------------------------------------------
يُضاف الصنف من JS بعد رسم البطاقات — والشبكات المرسومة من
القاعدة تُلتقط أيضاً عبر مراقب DOM.
============================================================ */
.dpx-in{ animation:dpxRise .55s cubic-bezier(.22,1,.36,1) backwards }
@keyframes dpxRise{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1 } }
/* ============================================================
٤.٥ · الهيرو يدخل بتدرّج — **بلا إخفاء**
------------------------------------------------------------
كان جامداً: الصفحة تظهر دفعة واحدة فتبدو ثابتة ولو تحرّكت
بطاقاتها تحت. فأُعطي دخولاً متدرّجاً.
⚠️ العطب الذي كان فيه — والسبب مقيس:
كان يستعمل `dpxRise` وهي تبدأ من `opacity:0` بـ`backwards`.
ومعنى `backwards` أن العنصر يأخذ حالة البداية **من لحظة تحميل
الصفحة** لا من لحظة بدء الحركة. فيبقى `.dp-hero__mark` — وهو
**عنصر LCP نفسه** — شفّافاً طوال زمن حجب العرض (٢٨٣٠ مللي مقيسة
من ثلاثة ملفات CSS) ثم زمن التأخير والحركة.
وجوجل لا يحسب عنصراً شفّافاً «مرسوماً»، فيسجّل زمن **انتهاء
الحركة** لا زمن وصول الصورة. القياس: مجموع مراحل شبكة LCP ٨٠٠
مللي بينما المقياس ٦.٢ ثانية — تناقض ظهر في ثلاثة تقارير.
العلاج: الحركة تبقى، والشفافية تُنزع منها.
`dpxRiseIn` تحرّك الموضع وحده و`opacity` لا تُمسّ إطلاقاً —
فالعنصر **مرسوم من أول إطار** ويُحتسب فوراً، ويظلّ يدخل بانزلاق.
وقاعدة عامة تُحفظ: **عنصر LCP لا يُخفى ثم يُظهر.** أي حركة على
الهيرو تُبنى على `transform` لا على `opacity`.
============================================================ */
@keyframes dpxRiseIn{ from{ transform:translateY(22px) } to{ transform:none } }
.dp-hero__mark, .dp-hero__title, .dp-hero__desc, .dp-hero__cta, .dp-hero__media{
animation:dpxRiseIn .55s cubic-bezier(.22,1,.36,1) backwards;
}
.dp-hero__mark { animation-delay:.04s }
.dp-hero__title{ animation-delay:.12s }
.dp-hero__desc { animation-delay:.20s }
.dp-hero__cta { animation-delay:.28s }
.dp-hero__media{ animation-delay:.16s }
/* ============================================================
٥ · دخول الصفحة + ستارة الانتقال
============================================================ */
/* دخول الصفحة بالشفافية وحدها — بلا transform.
السبب: أي تحويل على يجعله المرجع لكل عنصر position:fixed،
فتهبط النوافذ والطبقات إلى أسفل الصفحة بدل أن تتوسّط الشاشة. */
.dpx-page-in{ animation:dpxPageIn .42s ease both }
@keyframes dpxPageIn{ from{ opacity:0 } to{ opacity:1 } }
.dpx-veil{
position:fixed; inset:0; z-index:1000; pointer-events:none;
display:grid; place-items:center;
background:var(--bg, #0A0A0D);
opacity:0; visibility:hidden;
transition:opacity .3s ease, visibility .3s;
}
.dpx-veil.is-on{ opacity:1; visibility:visible }
/* الستارة تعرض هوية النافبار نفسها: العلامة ثم الاسم — لا نصّاً صغيراً */
.dpx-veil__logo{
display:flex; align-items:center; gap:14px;
transform:translateY(10px); opacity:0;
}
.dpx-veil__logo img{
width:clamp(44px,7vw,64px); height:auto; display:block;
}
.dpx-veil__mark{
font-family:var(--font-display, "Orbitron", sans-serif); font-weight:800;
letter-spacing:.26em; font-size:clamp(22px,3.6vw,34px);
color:var(--text, #EFEDF5); line-height:1;
}
.dpx-veil.is-on .dpx-veil__logo{ animation:dpxMark .34s .06s cubic-bezier(.22,1,.36,1) forwards }
@keyframes dpxMark{ to{ opacity:1; transform:none } }
.dpx-veil__bar{
position:absolute; inset-inline:0; bottom:0; height:3px;
background:var(--brand-400, #A796D9); transform-origin:right; transform:scaleX(0);
}
.dpx-veil.is-on .dpx-veil__bar{ animation:dpxBar .5s linear forwards }
@keyframes dpxBar{ to{ transform:scaleX(1) } }
/* ============================================================
٦ · الإطفاء
------------------------------------------------------------
احترام إعداد النظام أولاً، ومفتاح يدوي على ثانياً.
============================================================ */
@media (prefers-reduced-motion:reduce){
.dp-tool, .dp-plan, .dp-credit, .pack, .tool-card, .nx, .rt{ transform:none !important }
.dp-tool::before, .dp-plan::before, .dp-credit::before, .pack::before,
.tool-card::before, .nx::before, .rt::before{ display:none }
.dpx-ripple{ display:none }
.dpx-in, .dpx-page-in,
.dp-hero__mark, .dp-hero__title, .dp-hero__desc, .dp-hero__cta, .dp-hero__media,
.dpx-press .dp-tool__icon, .dpx-press .rt__icon, .dpx-press .nx__icon, .dpx-press .tool-icon,
.dpx-veil.is-on .dpx-veil__logo, .dpx-veil.is-on .dpx-veil__bar{ animation:none !important }
}
html[data-motion="off"] .dp-tool,
html[data-motion="off"] .dp-plan,
html[data-motion="off"] .dp-credit,
html[data-motion="off"] .pack,
html[data-motion="off"] .tool-card,
html[data-motion="off"] .nx,
html[data-motion="off"] .rt{ transform:none !important }
html[data-motion="off"] .dp-tool::before,
html[data-motion="off"] .dp-plan::before,
html[data-motion="off"] .dp-credit::before,
html[data-motion="off"] .pack::before,
html[data-motion="off"] .tool-card::before,
html[data-motion="off"] .nx::before,
html[data-motion="off"] .rt::before{ display:none }
html[data-motion="off"] .dpx-in,
html[data-motion="off"] .dpx-page-in,
html[data-motion="off"] .dp-hero__mark,
html[data-motion="off"] .dp-hero__title,
html[data-motion="off"] .dp-hero__desc,
html[data-motion="off"] .dp-hero__cta,
html[data-motion="off"] .dp-hero__media{ animation:none !important }
html[data-motion="off"] .dpx-veil{ display:none }