/* سولفنا — طبقة «Premium» v0.1 — 2026-11-04 (معاينة، فرع feat/premium-polish-2026-11-04).
   حركة وتفاصيل فقط فوق الواجهة الحالية: لا ألوان جديدة ولا تخطيط ولا أيقونات. الألوان كلها من متغيرات الهوية.
   تُلغى كلها مع «تقليل الحركة» من الجهاز أو من المظهر (data-motion="reduce"). */
:root{--pm-ease:cubic-bezier(.2,.8,.2,1)}

/* 1) الشريط السفلي يختفي مع النزول ويرجع مع الصعود */
.nav{transition:transform 260ms var(--pm-ease)}
.nav[data-pm-hidden]{transform:translate(-50%,115%)}

/* 2) المنتج يطير إلى السلة، والسلة ترتدّ عند وصوله */
.pm-fly{position:fixed;z-index:60;margin:0;pointer-events:none;border-radius:14px;object-fit:cover;box-shadow:var(--shadow);will-change:transform,opacity}
.pm-bounce{animation:pm-bounce 520ms var(--pm-ease)}
@keyframes pm-bounce{0%{transform:translateX(-50%) scale(1)}30%{transform:translateX(-50%) scale(1.05,.92)}60%{transform:translateX(-50%) scale(.98,1.04)}100%{transform:translateX(-50%) scale(1)}}
.pm-ring{position:fixed;z-index:61;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;border-radius:50%;border:3px solid var(--brand-rose);animation:pm-ring 560ms var(--pm-ease) both}
@keyframes pm-ring{from{transform:scale(.3);opacity:.9}to{transform:scale(1.5);opacity:0}}

/* 3) علامة النجاح ترسم نفسها (الـ ✓ الموجودة في رسائل النجاح تقفز قفزة خفيفة) */
.okmsg::before{display:inline-block;animation:pm-tick 460ms var(--pm-ease) both}
@keyframes pm-tick{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.35) rotate(6deg)}100%{transform:none}}
.pm-check{width:72px;height:72px;display:block;margin:6px auto}
.pm-check circle{fill:none;stroke:var(--brand-rose);stroke-width:3;stroke-dasharray:176;stroke-dashoffset:176;animation:pm-draw 520ms var(--pm-ease) forwards}
.pm-check path{fill:none;stroke:var(--brand-rose);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;animation:pm-draw 360ms 320ms var(--pm-ease) forwards}
@keyframes pm-draw{to{stroke-dashoffset:0}}

/* 4) ظهور القوائم بالتتابع: أول ٨ عناصر فقط (الباقي يظهر فوراً حتى لا ينتظر عنصر رقم ٥٠) */
.pm-rise{animation:pm-rise 320ms var(--pm-ease) both;animation-delay:calc(var(--pm-i,0)*45ms)}
@keyframes pm-rise{from{transform:translateY(16px) scale(.985)}to{transform:none}} /* انزلاق فقط: بلا شفافية حتى لا ينقص التباين لحظة الدخول (مثل طبقة الحركة v0.1) */

/* 5) هيكل لامع بدل الانتظار الفارغ: يشبه شكل الصفحة نفسها ولا يقفز الشكل عند وصول البيانات */
.pm-skel{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.pm-skel-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.pm-sk{display:block;border-radius:8px;background:var(--line);position:relative;overflow:hidden}
.pm-sk::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,var(--surface) 50%,transparent 80%);opacity:.7;transform:translateX(-100%);animation:pm-shimmer 1.25s infinite}
[dir="rtl"] .pm-sk::after{animation-direction:reverse}
.pm-sk.c{width:44px;height:44px;border-radius:50%;flex:none}
.pm-sk.l1{height:13px;width:58%}
.pm-sk.l2{height:10px;width:36%;margin-top:8px}
.pm-skel-txt{flex:1;min-width:0}
@keyframes pm-shimmer{to{transform:translateX(100%)}}
.content>.loading:only-child:has(.pm-skel)::before{display:none}
.content>.loading:only-child:has(.pm-skel){padding:0}
.loading .pm-skel{text-align:initial}

/* 6) الصور: لمعة حتى تصل ثم تظهر بنعومة */
img.pm-img:not(.pm-ld){background:linear-gradient(100deg,var(--line) 30%,var(--surface) 50%,var(--line) 70%);background-size:220% 100%;animation:pm-bgshim 1.25s linear infinite}
@keyframes pm-bgshim{from{background-position:120% 0}to{background-position:-120% 0}}
img.pm-ld{animation:pm-imgin 240ms ease-out both}
@keyframes pm-imgin{from{opacity:0}to{opacity:1}}

/* 7) كشف الثيم بدائرة تتّسع من الزر (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

/* اهتزاز عند الخطأ: يُضاف pm-shake من premium.js على حقل الرمز/الحقول عند ظهور رسالة خطأ */
.pm-shake{animation:pm-shake 380ms cubic-bezier(.36,.07,.19,.97) both}
@keyframes pm-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}

@media (prefers-reduced-motion:reduce){
  .nav{transition:none}.pm-rise,.pm-bounce,.pm-ring,.okmsg::before,img.pm-ld,.pm-shake{animation:none}
  .pm-sk::after{animation:none;opacity:0}
  img.pm-img:not(.pm-ld){animation:none}
  .pm-check circle,.pm-check path{animation:none;stroke-dashoffset:0}
}
:root[data-motion="reduce"] .nav{transition:none}
:root[data-motion="reduce"] .pm-rise,:root[data-motion="reduce"] .pm-bounce,:root[data-motion="reduce"] .pm-ring,:root[data-motion="reduce"] .okmsg::before,:root[data-motion="reduce"] img.pm-ld,:root[data-motion="reduce"] .pm-shake{animation:none}
:root[data-motion="reduce"] .pm-sk::after{animation:none;opacity:0}
:root[data-motion="reduce"] img.pm-img:not(.pm-ld){animation:none}
:root[data-motion="reduce"] .pm-check circle,:root[data-motion="reduce"] .pm-check path{animation:none;stroke-dashoffset:0}