/* إشراقة fx: نظام الحركة الموحّد لكل صفحات الموقع (يُحمَّل مع fx.js). يحترم «تقليل الحركة». */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
.fx-bar{position:fixed;top:0;inset-inline:0;height:3px;z-index:999;pointer-events:none;background:linear-gradient(90deg,#FFB547,#F07A4A,#8E3A8C);transform-origin:right;transform:scaleX(var(--fxp,0))}
/* عناوين تظهر كلمة كلمة */
.fx-w{display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(4px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s;transition-delay:calc(var(--w,0)*55ms)}
.fx-in .fx-w{opacity:1;transform:none;filter:none}
/* صور تنكشف كالستارة */
.fx-img{clip-path:inset(0 0 100% 0 round 18px);transform:scale(1.06);transition:clip-path 1.1s cubic-bezier(.65,0,.25,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.fx-img.fx-in{clip-path:inset(0 0 0 0 round 18px);transform:none}
/* بطاقات تميل مع المؤشر */
.fx-tilt{transform-style:preserve-3d;transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.fx-tilt.fx-hot{transition:opacity .8s,transform .08s linear,box-shadow .3s;box-shadow:0 22px 50px rgba(42,27,94,.16)}
.fx-tilt:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,181,71,.16),transparent 45%)}
.fx-tilt.fx-hot:after{opacity:1}
/* أزرار تنجذب نحو المؤشر */
.fx-mag{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
/* كلمات بارزة يُرسم تحتها خط مضيء */
.fx-mark{background-image:linear-gradient(90deg,rgba(255,181,71,.55),rgba(240,122,74,.45));background-repeat:no-repeat;background-position:100% 88%;background-size:0% .32em;transition:background-size 1s cubic-bezier(.65,0,.25,1) .2s}
.fx-mark.fx-in{background-size:100% .32em}
@media (prefers-reduced-motion:reduce){.fx-w,.fx-img,.fx-mark{opacity:1;transform:none;filter:none;clip-path:none;transition:none;background-size:100% .32em}
.fx-tilt,.fx-mag{transform:none!important;transition:none}.fx-bar{display:none}::view-transition-old(root),::view-transition-new(root){animation:none}}
/* نافذة التحميل: «حمّل التطبيق» يفتح المتاجر الثلاثة */
dialog.fx-get{border:0;padding:30px 26px 26px;border-radius:28px;width:min(440px,92vw);background:var(--card,#fff);color:var(--ink,#2A1B5E);text-align:center;box-shadow:0 40px 100px rgba(14,10,28,.45)}
dialog.fx-get::backdrop{background:rgba(14,10,28,.55);backdrop-filter:blur(6px)}
dialog.fx-get[open]{animation:fxgin .4s cubic-bezier(.2,.8,.2,1)}
@keyframes fxgin{from{opacity:0;transform:translateY(20px) scale(.96)}}
.fx-get img{width:64px;height:64px;border-radius:18px;box-shadow:0 12px 30px rgba(240,122,74,.35)}
.fx-get h3{margin:14px 0 18px;font-size:22px}
.fx-get .gs{display:flex;justify-content:center;gap:14px}
.fx-get .gs a{width:78px;height:78px;border-radius:22px;display:grid;place-items:center;background:#000;transition:transform .2s,box-shadow .2s}
.fx-get .gs a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.3)}
.fx-get .gs svg{width:36px;height:36px}
.fx-get .msg{min-height:1.6em;margin:16px 0 0;font-size:14.5px;font-weight:700;color:#F07A4A;opacity:0;transition:opacity .25s}
.fx-get .msg.on{opacity:1}
.fx-get .x{position:absolute;top:14px;inset-inline-end:14px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(127,127,127,.15);color:inherit;font-size:20px;cursor:pointer}
@media (prefers-reduced-motion:reduce){dialog.fx-get[open]{animation:none}}
