/* حركة الموقع الخفيفة (P1-30) — القطعة المشتركة مع assets/motion.js. transform وopacity بس، بلا قفزة تخطيط.
   ملف لحالو (مش بـstyle.css) لأن الحرّاس ما بيسمحوا style.css يكبر (tests/guards.check.js)، ولأن قواعدو لازم
   توصل قبل أول رسم: علامة الاستفهام و«وقّف الحركات» ما بيستنوا الجافاسكربت. */

/* 1) العدّ: الرقم وهو عم يعدّ بعرض مقفول على الرقم النهائي (motion.js بيحطّو) فالجملة حواليه ما تتهزّ.
   عنصر باسم خاص (مش span) حتى قواعد الأدوات متل `.stat span` ما تصغّرو. بلا tabular-nums عمداً: بتوسّع الخانات
   فبتغيّر مكان كسر السطر عن الصفحة بلا حركة */
mo-n { display: inline-block; text-align: start; white-space: nowrap; font: inherit; color: inherit; }

/* 2) النبضة: هالة ذهبية فوق كرت الجواب بتطلع وبتروح مرة وحدة. الظل ثابت والحركة على opacity وscale بس */
.stage .result { position: relative; }
.stage .result::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  border: 1px solid rgba(245, 181, 50, .8);
  box-shadow: 0 0 0 5px rgba(245, 181, 50, .16), 0 18px 48px -12px rgba(245, 181, 50, .6);
}
.stage .result:empty::after { display: none; }
@keyframes mo-halo { 0% { opacity: 0; transform: scale(.985); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.03); } }
.stage .result.mo-pop::after { animation: mo-halo .9s var(--ease) both; }

/* 4) لمسة الأزرار: الزر الذهبي بينضغط تحت الإصبع وبيرجع بنبضة صغيرة بعد الكبسة (motion.js بيحط mo-tap) */
.stage :where(button[data-enter], button#go, button[data-glow]) { transition: transform .12s var(--ease), filter .15s; }
.stage :where(button[data-enter], button#go, button[data-glow], .share button):active { transform: scale(.965); }
/* الكبسة العامة `button:active { transform }` القديمة انشالت من style.css: كانت تمسح transform تبع أزرار الأدوات
   المثبّتة بمكانها (زر العين بكلمة السر translateY(-50%)، قفل اللون translateX(-50%)) فتنطّ 20 بكسل تحت الإصبع.
   هون الكبسة للزر الأساسي وأزرار المشاركة بس (ما إلهن transform خاص) */
@keyframes mo-tap { 0% { transform: scale(.965); } 55% { transform: scale(1.025); } 100% { transform: none; } }
.stage button.mo-tap { animation: mo-tap .32s var(--ease); }

/* 5) علامة الاستفهام الذهبية بتنزل وبتستقر بأول الصفحة. <head> بيحط data-motion=off قبل أول رسم لمن وقّف الحركات، فما تبدأ وتنقطع */
@keyframes mo-qm { 0% { opacity: 0; transform: translateY(-.3em) rotate(-6deg); } 60% { opacity: 1; transform: translateY(.04em) rotate(2deg); } 100% { opacity: 1; transform: none; } }
html:not([data-motion=off]) .q-title .qm { display: inline-block; animation: mo-qm .5s var(--ease) .1s both; }

/* زر «الحركات» بأسفل الصفحة: شكل رابط متل جيرانو */
footer.site .links .mo-toggle { margin: 0; padding: 0 4px; min-height: 44px; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; }
footer.site .links .mo-toggle[disabled] { cursor: default; opacity: .7; text-decoration: none; }

/* «وقّف الحركات»: نفس أثر «تقليل الحركة» بالجهاز (style.css) */
html[data-motion=off] *, html[data-motion=off] *::before, html[data-motion=off] *::after { animation: none !important; transition: none !important; }
html[data-motion=off] { scroll-behavior: auto; }