/* motion.css — proposal-v4: كل الحركات الجديدة في مكان واحد.
   • تعمل فقط إذا: (1) النظام بلا «تقليل الحركة» (كل الملف داخل no-preference)، و(2) اسم الحركة موجود في
     html[data-motion] اللي يضبطه motion.js من MOTION (MOTION.enabled=false يطفئها كلها).
   • transform / opacity فقط (ومعهما الخاصيتان المفردتان translate/scale وهما transform)، 180–420ms، بتخفيف هادئ.
   • لا تمسّ: «تشوفهم؟» · الأرقام/النتائج (#demo-result وبطاقات النتائج) · «افتح لوحة زد» (.dashboard-action) · «تم التطبيق» ([data-complete]). */
:root{--m-ease:cubic-bezier(.22,.75,.25,1);--m-ease-in:cubic-bezier(.4,0,.8,.3);--m-ease-pop:cubic-bezier(.3,1.35,.5,1)}

@media (prefers-reduced-motion:no-preference){

/* M1 card — الدليل: انتقال البطاقة بين الخطوات: خروج 180ms ثم دخول 360ms (انزلاق 14px + تلاشٍ) */
html[data-motion~=card] .flow-card.is-leaving{opacity:0;transform:translateX(calc(var(--flow-dir,1) * 12px));transition:opacity 180ms var(--m-ease-in),transform 180ms var(--m-ease-in)}
html[data-motion~=card] .flow-card.is-entering{animation:m-card-in 360ms var(--m-ease) both}
@keyframes m-card-in{from{opacity:0;transform:translateX(calc(var(--flow-dir,1) * -14px))}to{opacity:1;transform:none}}

/* M2 stagger — الدليل: عناصر البطاقة تدخل متتابعة (كل عنصر 300ms، تأخير ≤ 100ms؛ الأقصى ≤ 420ms).
   .task-primary-actions («افتح لوحة زد» و«تم التطبيق») مستثناة: تتحرك مع البطاقة نفسها فقط كما في v3. */
html[data-motion~=stagger] .flow-card.is-entering :is(.flow-panel,.flow-pending,.completion)>:not(.task-primary-actions),
html[data-motion~=stagger] .flow-card.is-entering .task-instructions>li,
html[data-motion~=stagger] .flow-card.is-entering .flow-pending-list>li{animation:m-rise 300ms var(--m-ease) both}
html[data-motion~=stagger] .flow-card.is-entering :is(.flow-panel,.flow-pending,.completion)>:nth-child(2){animation-delay:30ms}
html[data-motion~=stagger] .flow-card.is-entering :is(.flow-panel,.flow-pending,.completion)>:nth-child(n+3){animation-delay:90ms}
html[data-motion~=stagger] .flow-card.is-entering .task-instructions>li:nth-child(2),
html[data-motion~=stagger] .flow-card.is-entering .flow-pending-list>li:nth-child(2){animation-delay:60ms}
html[data-motion~=stagger] .flow-card.is-entering .task-instructions>li:nth-child(n+3),
html[data-motion~=stagger] .flow-card.is-entering .flow-pending-list>li:nth-child(n+3){animation-delay:100ms}
html[data-motion~=stagger] .flow-card.is-entering .task-instructions,
html[data-motion~=stagger] .flow-card.is-entering .flow-pending-list{animation:none}
@keyframes m-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* M3 meter — الدليل: امتلاء شريط التقدّم (scaleX) 420ms */
html[data-motion~=meter] .flow-meter i{transition:transform 420ms var(--m-ease)}

/* M4 stepPop — الدليل: عند «تم التطبيق» تنبض علامة الخطوة نبضة واحدة وتظهر ✓ بتكبير خفيف، مع حلقة ذهبية تتلاشى */
html[data-motion~=stepPop] .flow-step.just-done .flow-step-mark{animation:m-pop 380ms var(--m-ease-pop) both}
html[data-motion~=stepPop] .flow-step.just-done .flow-step-mark .icon{animation:m-check 320ms var(--m-ease) 80ms both}
html[data-motion~=stepPop] .flow-step.just-done .flow-step-mark::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #f9e683;pointer-events:none;animation:m-ring 420ms var(--m-ease) both}
@keyframes m-pop{0%{transform:scale(.82)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes m-check{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes m-ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.55)}}

/* M5 dialog — الدليل: نافذة الإكمال: الخلفية تتلاشى 240ms، النافذة تدخل 340ms (ورقة سفلية تنزلق على الجوال)، ثم ✓ تنبثق ونصوصها متتابعة */
html[data-motion~=dialog] .flow-dialog[open]{animation:m-dialog-in 340ms var(--m-ease) both}
html[data-motion~=dialog] .flow-dialog[open]::backdrop{animation:m-fade 240ms ease both}
html[data-motion~=dialog] .flow-dialog[open] .flow-dialog-mark{animation:m-pop 400ms var(--m-ease-pop) 120ms both}
html[data-motion~=dialog] .flow-dialog[open] .flow-dialog-mark .icon{animation:m-check 320ms var(--m-ease) 200ms both}
html[data-motion~=dialog] .flow-dialog[open] :is(.flow-dialog-lead,.flow-dialog-line2,.flow-dialog-actions){animation:m-rise 300ms var(--m-ease) both}
html[data-motion~=dialog] .flow-dialog[open] .flow-dialog-lead{animation-delay:90ms}
html[data-motion~=dialog] .flow-dialog[open] .flow-dialog-line2{animation-delay:120ms}
html[data-motion~=dialog] .flow-dialog[open] .flow-dialog-actions{animation-delay:120ms}
@keyframes m-dialog-in{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
@keyframes m-sheet-in{from{transform:translateY(100%)}to{transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@media(max-width:760px){html[data-motion~=dialog] .flow-dialog[open]{animation:m-sheet-in 380ms var(--m-ease) both}}

/* M6 demo — الرئيسية: المثال التفاعلي. تبويب جديد: الشرح والمعاينة يدخلان بانزلاق 8px (320ms)؛
   قبل/بعد: تلاشٍ متقاطع خفيف للمعاينة (260ms). #demo-result (الأرقام) مستثنى. */
html[data-motion~=demo] #demo-explanation.m-demo-in,html[data-motion~=demo] #demo-stage.m-demo-in>*{animation:m-rise 320ms var(--m-ease) both}
html[data-motion~=demo] #demo-stage.m-demo-in>*:nth-child(n+2){animation-delay:40ms}
html[data-motion~=demo] #demo-stage.m-demo-state>*{animation:m-soft 260ms ease both}
html[data-motion~=demo] #demo-change-summary.m-demo-fade{animation:m-soft 260ms ease both}
@keyframes m-soft{from{opacity:.35}to{opacity:1}}

}