/* «آخر قيم» — motion.css · نظام الحركة المعتمد
   يُحمَّل بعد tokens.css. القسم الأول: الحركات والكلاسات العامة.
   القسم الثاني «الجسر»: يربط حركات الهوية بالكلاسات اللي يستخدمها home.js حالياً،
   فتشتغل الحركة الجديدة بدون تعديل الـ JS. */

/* ============ 1) الحركات ============ */
/* دخول/خروج: للأمام = يسار */
@keyframes akhir-enter{from{transform:translateX(var(--d-md));opacity:0}to{transform:none;opacity:1}}
@keyframes akhir-exit{from{transform:none;opacity:1}to{transform:translateX(calc(-1 * var(--d-md)));opacity:0}}
@keyframes akhir-enter-up{from{transform:translateY(var(--d-sm));opacity:0}to{transform:none;opacity:1}}
@keyframes akhir-modal-in{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes akhir-modal-out{from{transform:none;opacity:1}to{transform:scale(.96);opacity:0}}
@keyframes akhir-fade{from{opacity:0}to{opacity:1}}
/* جمرة */
@keyframes akhir-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes akhir-face{from{opacity:0}to{opacity:1}}
@keyframes akhir-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
@keyframes akhir-breath{0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,90,54,.3))}50%{transform:scale(1.04);filter:drop-shadow(0 0 20px rgba(255,90,54,.8))}}
@keyframes akhir-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-8px)}}
@keyframes akhir-z{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(-12px,-26px);opacity:0}}
/* التغذية الراجعة */
@keyframes akhir-pulse{0%,100%{opacity:.22}50%{opacity:1}}
@keyframes akhir-plus{0%{transform:translateY(0) scale(.6);opacity:0}25%{transform:translateY(-14px) scale(1.12);opacity:1}55%{transform:translateY(-22px) scale(1);opacity:1}100%{transform:translateY(-36px) scale(1);opacity:0}}
@keyframes akhir-pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes akhir-drop{from{transform:scale(.96);opacity:.6}to{transform:none;opacity:1}}
@keyframes akhir-shimmer{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes akhir-live{0%{box-shadow:0 0 0 0 rgba(255,90,54,.55)}70%{box-shadow:0 0 0 8px rgba(255,90,54,0)}100%{box-shadow:0 0 0 0 rgba(255,90,54,0)}}
@keyframes akhir-marquee{to{transform:translateX(-50%)}}
@keyframes akhir-glow{0%,100%{opacity:.14}50%{opacity:.26}}

/* ============ الكلاسات العامة ============ */
.anim-enter{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.anim-enter-up{animation:akhir-enter-up var(--t-intiqal) var(--e-jamr) both}
.anim-exit{animation:akhir-exit var(--t-intiqal) var(--e-rahil) both}
.anim-fade{animation:akhir-fade var(--t-intiqal) linear both}
.anim-modal{animation:akhir-modal-in var(--t-dukhul) var(--e-jamr) both}
.anim-modal.is-leaving{animation:akhir-modal-out var(--t-intiqal) var(--e-rahil) both}
.anim-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:akhir-draw var(--t-dukhul) var(--e-jamr) forwards}
.anim-face{opacity:0;animation:akhir-face var(--t-lamsa) linear var(--t-dukhul) forwards}
.anim-blink{transform-box:fill-box;transform-origin:center;animation:akhir-blink var(--t-lamsa) linear}
.anim-breath{animation:akhir-breath var(--t-nafas) var(--e-nafas) infinite;transform-origin:center}
.anim-hop{animation:akhir-hop var(--t-ihtifal) var(--e-nabda)}
.anim-plus{animation:akhir-plus var(--t-ihtifal) var(--e-nabda) forwards}
.anim-pop{animation:akhir-pop var(--t-lamsa) var(--e-jamr)}
.anim-drop{animation:akhir-drop var(--t-intiqal) var(--e-jamr)}
/* تتابع القوائم: 40ms لكل عنصر (حتى 12 عناصر) */
.stagger>*{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.stagger>*:nth-child(2){animation-delay:40ms}.stagger>*:nth-child(3){animation-delay:80ms}.stagger>*:nth-child(4){animation-delay:120ms}
.stagger>*:nth-child(5){animation-delay:160ms}.stagger>*:nth-child(6){animation-delay:200ms}.stagger>*:nth-child(7){animation-delay:240ms}
.stagger>*:nth-child(8){animation-delay:280ms}.stagger>*:nth-child(9){animation-delay:320ms}.stagger>*:nth-child(10){animation-delay:360ms}
.stagger>*:nth-child(11){animation-delay:400ms}.stagger>*:nth-child(12){animation-delay:440ms}
/* الظهور عند التمرير: العنصر يبدأ مخفياً ويظهر بـ .is-in (jamra.js يضيفها) */
.reveal{opacity:0;transform:translateX(var(--d-md))}
.reveal.is-in{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.reveal-group.is-in>*{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.reveal-group.is-in>*:nth-child(2){animation-delay:40ms}.reveal-group.is-in>*:nth-child(3){animation-delay:80ms}.reveal-group.is-in>*:nth-child(4){animation-delay:120ms}.reveal-group.is-in>*:nth-child(5){animation-delay:160ms}.reveal-group.is-in>*:nth-child(6){animation-delay:200ms}
/* التحميل: ثلاث أقواس تنبض (ممنوع أي دائرة تدور) */
.loader{display:inline-flex;direction:ltr;vertical-align:middle}
.loader svg{margin-left:-14px;animation:akhir-pulse 1s var(--e-nafas) infinite}
.loader svg:first-child{margin-left:0}.loader svg:nth-child(2){animation-delay:120ms}.loader svg:nth-child(3){animation-delay:240ms}
/* الهيكل */
.skeleton{background:linear-gradient(90deg,var(--layl-2) 0%,var(--hudud) 38%,rgba(var(--jamr-rgb),.4) 50%,var(--hudud) 62%,var(--layl-2) 100%);background-size:200% 100%;animation:akhir-shimmer 1.6s linear infinite;border-radius:var(--r-sm)}
/* النقطة الحيّة */
.live-dot{background:var(--jamr);animation:akhir-live var(--t-nafas) var(--e-nafas) infinite}
/* الشريط المتحرك: يمشي يسار، ويقف عند التحويم */
.marquee-track{animation:akhir-marquee 34s linear infinite}
.marquee-track:hover{animation-play-state:paused}
/* الانتقالات الصغيرة الافتراضية */
a,button,.button,.chip,.tab,input,select,textarea{transition:color var(--t-lamsa) var(--e-jamr),background-color var(--t-lamsa) var(--e-jamr),border-color var(--t-lamsa) var(--e-jamr),box-shadow var(--t-lamsa) var(--e-jamr),transform var(--t-lamsa) var(--e-jamr)}
.button:active,.chip:active{transform:scale(.97)}
.button .chev{transition:transform var(--t-lamsa) var(--e-jamr)}
.button:hover .chev{transform:translateX(-5px)}
/* قوس القائمة: الدوران الوحيد المسموح */
.chev-toggle{transition:transform var(--t-intiqal) var(--e-jamr)}
.is-open>.chev-toggle,[aria-expanded="true"]>.chev-toggle{transform:rotate(180deg)}
/* التبويبات: خط جمر ينزلق */
.tabs{position:relative}
.tabs .tab-ink{position:absolute;bottom:-1.5px;height:3px;border-radius:99px;background:var(--jamr);transition:transform var(--t-intiqal) var(--e-jamr),width var(--t-intiqal) var(--e-jamr)}

/* ============ 2) الجسر مع home.js / home.css الحالي ============ */
/* الهيرو: النص والمنتج يدخلون بالتتابع */
.top .hero-copy{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.top .hero-product{animation:akhir-enter var(--t-dukhul) var(--e-jamr) 160ms both}
/* كلمات العنوان: بدون blur، تدخل من اليمين بتتابع 40ms */
.hero h1 .w{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both!important;filter:none!important}
.hero h1 .w:nth-child(2){animation-delay:40ms}.hero h1 .w:nth-child(3){animation-delay:80ms}.hero h1 .w:nth-child(4){animation-delay:120ms}.hero h1 .w:nth-child(5){animation-delay:160ms}.hero h1 .w:nth-child(6){animation-delay:200ms}
.hero h1>span,.hero h1>span .w{animation-name:akhir-enter!important;background:none!important;-webkit-text-fill-color:currentColor!important}
/* خلفية الهيرو: توهّج جمر واحد يتنفّس ببطء، بدون انجراف ولا شبكة ولا ضجيج */
.glow-a,.glow-b{animation:akhir-glow calc(var(--t-nafas) * 3) var(--e-nafas) infinite!important;transform:none!important;background:radial-gradient(closest-side,rgba(255,90,54,.35),transparent)!important}
.glow-b{animation-delay:calc(var(--t-nafas) * -1.5)}
.backdrop-grid,.backdrop-noise{display:none!important}
/* المؤشر في نافذة الفكرة: يومض برمشة (jamra.js يستبدله بجمرة واقفة إن وجد #prompt-text) */
.prompt-caret{animation:akhir-pulse 1s var(--e-nafas) infinite!important;background:var(--jamr)}
/* توليد التصميم: بدل «الماسح» → هيكل يلمع ثم الصورة تدخل */
.main-design.is-scanning::after{animation:none!important;background:linear-gradient(90deg,transparent 0%,rgba(255,90,54,.18) 50%,transparent 100%)!important;background-size:200% 100%!important;animation:akhir-shimmer 1.6s linear infinite!important}
.main-design.is-loading img,.main-design.is-loading .design-image{opacity:.35;transition:opacity var(--t-dukhul) var(--e-jamr)}
/* سحب المهام: الإسقاط نقرة واحدة */
.task.is-dropped{animation:akhir-drop var(--t-intiqal) var(--e-jamr)!important}
.task.is-dragging{transform:scale(1.02);box-shadow:var(--glow);transition:transform var(--t-lamsa) var(--e-jamr)}
.column.is-over,.col.is-over{outline:1.5px solid var(--jamr);outline-offset:-1.5px}
/* الحاسبة: الرقم ينبض لمسة */
.calc-result.is-bump b{animation:akhir-pop var(--t-lamsa) var(--e-jamr)!important;display:inline-block}
/* لوحة الأوامر: نافذة */
.palette-box{animation:akhir-modal-in var(--t-dukhul) var(--e-jamr) both!important}
/* الظهور عند التمرير (home.js يضيف .is-in) */
.reveal:not(.is-in){opacity:0}
/* مقارنة النسخ */
.is-swapping{transition:opacity var(--t-intiqal) var(--e-rahil),transform var(--t-intiqal) var(--e-rahil);opacity:0;transform:translateX(calc(-1 * var(--d-sm)))}
/* الهيدر عند التمرير */
.header{transition:background-color var(--t-intiqal) var(--e-jamr),box-shadow var(--t-intiqal) var(--e-jamr),padding var(--t-intiqal) var(--e-jamr)}
/* الأزرار المغناطيسية وحلقة المؤشر: ملغاة — الحركة الوحيدة على الزر هي ضغطة + تقدّم القوس */
.magnetic{transform:none!important}
.cursor-ring{display:none!important}

/* ============ 3) prefers-reduced-motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal:not(.is-in),.hero h1 .w{opacity:1!important;transform:none!important}
  /* الجسر يثبّت مدة كلمات العنوان ولوحة الأوامر بـ!important وبخصوصية أعلى من *؛ هنا تُلغى صراحة. */
  .hero h1 .w,.top .hero-copy,.top .hero-product,.palette-box{animation-duration:.01ms!important;animation-delay:0s!important}
  .anim-draw{stroke-dashoffset:0}
  .loader svg,.skeleton,.live-dot,.marquee-track,.glow-a,.glow-b{animation:none!important}
}