/* =====================================================================
   motion.css — طبقة الحركة (1.79.0). تُحمَّل بعد dark.css وقبل print.css.

   مبادئ ثابتة في كل ما يلي:
   • لا يُحرَّك إلا transform وopacity (وclip-path لتبديل المظهر): تُنفَّذ على
     معالج الرسوميات فلا تُعيد حساب التخطيط — وهذا شرط الجوال لا تحسين له.
   • **لا حركة دخول تبدأ من الإخفاء** (1.82.1). لا opacity:0 في أوّل إطار لأي محتوى:
     قيس أن الحركة تتجمّد على إطارها الأوّل حين لا تُرسَم الصفحة (تبويب في الخلفية،
     متصفّح داخل تطبيق مُبطَّأ، أدوات المعاينة) — فبقيت الأزرار الخمسة **opacity 0
     عند 1.4 ثانية** على الجوال. الدخول الآن **انزلاقٌ وحده** والمحتوى مرئيّ منذ أوّل
     إطار، فإن تجمّدت الحركة بقي الزرّ ظاهرًا مُزاحًا بضع بكسلات لا مخفيًّا.
   • ولا شيء يتوقّف ظهوره على التمرير: التمرير يُطلق زينةً فقط (حركة الأيقونات).
   • prefers-reduced-motion يُطفئ كل شيء في آخر الملف.
   • التحويم (hover) في @media (hover:hover) وحده: على اللمس «يعلق» التحويم بعد
     النقر فتبقى البطاقة مرفوعة. للّمس ضغطةٌ (:active) بدلًا منه.
   ===================================================================== */

:root{
  --sf-ease-out:cubic-bezier(.22,1,.36,1);        /* خروجٌ ناعم — للدخول */
  --sf-ease-spring:cubic-bezier(.34,1.56,.64,1);  /* تجاوزٌ خفيف — للأيقونات */
}

/* ---------------------------------------------------------------------
   ١. تبديل المظهر — دائرة تتّسع من الزرّ (theme.js يضبط المركز ونصف القطر)
   --------------------------------------------------------------------- */
::view-transition-old(root),
::view-transition-new(root){animation:none;mix-blend-mode:normal;}
html.sf-vt::view-transition-new(root){
  animation:sf-vt-reveal .6s var(--sf-ease-out) both;
}
@keyframes sf-vt-reveal{
  from{clip-path:circle(0 at var(--sf-vt-x,50%) var(--sf-vt-y,50%));}
  to{clip-path:circle(var(--sf-vt-r,150vmax) at var(--sf-vt-x,50%) var(--sf-vt-y,50%));}
}
/* الأيقونة تدور نصف دورة مع كل تبديل */
.sf-theme-toggle .sf-theme-toggle__icon{transition:transform .5s var(--sf-ease-spring);}
.sf-theme-toggle[aria-pressed="true"] .sf-theme-toggle__icon{transform:rotate(180deg);}

/* ---------------------------------------------------------------------
   ٢. استجابة اللمس والتحويم (مشتركة بين الصفحات)
   --------------------------------------------------------------------- */
.sf-btn,.sf-chip,.sf-orow,.sf-theme-toggle{-webkit-tap-highlight-color:transparent;}
.sf-btn:active,.sf-chip:active,.sf-theme-toggle:active{transform:scale(.96);}
.sf-orow:not(.is-answered):active{transform:scale(.985);}
.sf-btn,.sf-chip,.sf-orow{transition-property:filter,background,border-color,color,transform,box-shadow;transition-duration:.15s;}
@media (hover:hover){
  .sf-orow:not(.is-answered):hover{border-color:var(--sf-gold-2);}
  .sf-btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(168,116,26,.42);}
}

/* ---------------------------------------------------------------------
   ٣. دخول الشاشات في التدريب والتقييم — يُضاف .sf-enter عند تغيّر الشاشة أو
      السؤال فقط (لا مع كل render). على حاوية التدريب شفافيّةٌ وحدها: فيها
      عناصر position:fixed (الأوراق السفلية) وtransform على أبيها يُفسد تموضعها.
   --------------------------------------------------------------------- */
@keyframes sf-fade-in{from{opacity:.55;}to{opacity:1;}}  /* لا من الصفر — التدريب لا يحتمل transform (أوراق fixed) */
@keyframes sf-rise-in{from{transform:translateY(12px);}to{transform:none;}}
#sf-app .sf-enter{animation:sf-fade-in .32s ease backwards;}
#sf-assessment .sf-enter{animation:sf-rise-in .42s var(--sf-ease-out) backwards;}

/* ---------------------------------------------------------------------
   ٤. صفحة الهبوط
   --------------------------------------------------------------------- */

/* ٤أ. دخول أوّل الصفحة (الشريط · العنوان · الزرّان) — على التحميل */
#sf-landing.sf-anim .sf-topbar{animation:sf-drop-in .6s var(--sf-ease-out) backwards;}
#sf-landing.sf-anim .sf-hero h1{animation:sf-rise-in .8s var(--sf-ease-out) .12s backwards;}
/* الدخول بـbackwards لا both: الحالة الأولى تسري أثناء التأخير، ثمّ **تُحرَّر** الخاصيّة
   بعد الانتهاء. مع both تبقى transform:none من آخر إطار مثبّتةً فوق :hover و:active
   (الحركة تغلب التصريح العاديّ) فيموت رفع الزرّ وضغطته بعد الدخول. */
@keyframes sf-drop-in{from{transform:translateY(-14px);}to{transform:none;}}

/* «خطوة بخطوة»: لمعة ذهبية تعبر الكلمتين مرّتين بعد الدخول ثمّ تستقرّ.
   التدرّج بين gold وgold-2 لا gold-3: الأخيرة تُفقد التباين على الخلفية الكريمية.

   padding-block (1.97.11) — نقاط التاء المربوطة كانت مقصوصة. background-clip:text مع
   لونٍ شفّاف لا يرسم من الحرف إلّا ما يقع فوق خلفيّة العنصر، وخلفيّة العنصر السطريّ
   لا تتجاوز صندوق الخطّ (صاعد+نازل = 1em بالضبط في Tajawal)، بينما حبر العربيّة
   بوزن 900 يعلوه — فيضيع ما فوقه. قيس: 4px من أعلى الحبر على الجوال و7.3px على
   المكتب، أي 4.5% من الحبر، وهي النقاط. وتعديل line-height في 1.95.2 لم يكن ليمسّه:
   السطر لا يغيّر صندوق الخطّ.
   الحشوة الرأسيّة في العنصر السطريّ تمدّ خلفيّته **بلا أثرٍ في التخطيط** (ارتفاع
   السطر من line-height وحده). و.4em تغطّي الهمزة فوق الألف (حتى .28em) بضعف هامش
   هذا العنوان؛ ولا حشوة أفقيّة: الحبر داخل عرض الكلمتين (قيس). */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #sf-landing.sf-anim .sf-hero h1 span{
    background:linear-gradient(100deg,var(--sf-gold) 35%,var(--sf-gold-2) 50%,var(--sf-gold) 65%);
    background-size:250% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    padding-block:.4em;
    animation:sf-shimmer 2.4s ease-in-out 1s 2 both;
  }
}
@keyframes sf-shimmer{from{background-position:100% 0;}to{background-position:0 0;}}

/* ٤ب. هالة ذهبية تنجرف ببطء خلف العنوان — طبقة زخرفية لا تُلتقط بالنقر */
#sf-landing .sf-hero--simple{position:relative;isolation:isolate;}
#sf-landing .sf-hero--simple::before,
#sf-landing .sf-hero--simple::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;
  filter:blur(60px);opacity:.55;will-change:transform;
}
#sf-landing .sf-hero--simple::before{
  width:420px;height:420px;top:-40px;inset-inline-start:calc(50% - 460px);
  background:radial-gradient(circle,rgba(201,154,46,.45),transparent 70%);
  animation:sf-drift-a 16s ease-in-out infinite alternate;
}
#sf-landing .sf-hero--simple::after{
  width:360px;height:360px;bottom:-60px;inset-inline-end:calc(50% - 420px);
  background:radial-gradient(circle,rgba(232,196,95,.35),transparent 70%);
  animation:sf-drift-b 19s ease-in-out infinite alternate;
}
html[data-sf-theme="dark"] #sf-landing .sf-hero--simple::before,
html[data-sf-theme="dark"] #sf-landing .sf-hero--simple::after{opacity:.32;}
@keyframes sf-drift-a{from{transform:translate(0,0) scale(1);}to{transform:translate(80px,40px) scale(1.15);}}
@keyframes sf-drift-b{from{transform:translate(0,0) scale(1.1);}to{transform:translate(-70px,-30px) scale(.95);}}

/* ٤ج. دخول الأزرار الخمسة — **مؤقَّتٌ بالتحميل، لا بالتمرير** (1.82.1)
   كانت الأزرار تبدأ بـopacity:0 ولا تظهر إلا حين يُبلغ IntersectionObserver
   بدخولها الشاشة. النتيجة التي بلّغ عنها المستخدم: «يظهر زرّ التدريب فقط
   وبعدها بوقت تظهر باقي الأزرار». وقيس: الخمسة **مخفيّة** عند 200 و800
   و1600ms، ثمّ «التدريب» وحده عند 2.6s. وما تحت الطيّة يبقى فراغًا حتى
   يُمرَّر إليه. أزرار التنقّل الأساسية لا يجوز أن يحجبها موضع التمرير.
   الآن: انزلاق CSS يبدأ مع أوّل رسم، بتتابع 70ms، وينتهي عند ~0.9s **مهما كان
   موضع الزرّ** — والزرّ مرئيّ طوال الانزلاق (لا opacity في الإطارات). fill-mode = backwards: الحالة الأولى أثناء التأخير فقط، ثمّ
   تُحرَّر الخاصيّة فتعمل رفعة التحويم وضغطة اللمس بلا قواعد تخصيص إضافية. */
#sf-landing.sf-anim .sf-feat{animation:sf-feat-in .55s var(--sf-ease-out) backwards;}
#sf-landing.sf-anim .sf-feat:nth-child(1){animation-delay:.10s;}
#sf-landing.sf-anim .sf-feat:nth-child(2){animation-delay:.17s;}
#sf-landing.sf-anim .sf-feat:nth-child(3){animation-delay:.24s;}
#sf-landing.sf-anim .sf-feat:nth-child(4){animation-delay:.31s;}
#sf-landing.sf-anim .sf-feat:nth-child(5){animation-delay:.38s;}
/* انزلاقٌ واحد لجميع البطاقات بعد توحيد المحاذاة (1.86.0) — كان جانبيًّا متعاكسًا */
@keyframes sf-feat-in{from{transform:translateY(16px);}to{transform:none;}}

/* ٤د. الأيقونات: لا حالة خفيّة. حركة كل رمز **زينةٌ** تُشغَّل حين يدخل الزرّ الشاشة
   (.is-in من المراقب) — إن لم يُطلَق المراقب بقيت الأيقونة ثابتةً ظاهرةً فحسب. */
#sf-landing .sf-feat svg [class^="i-"]{transform-box:fill-box;transform-origin:center;}

#sf-landing .sf-feat.is-in .i-cap{animation:sf-cap .9s var(--sf-ease-spring) .5s both;}
#sf-landing .sf-feat.is-in .i-pencil{animation:sf-pencil .9s ease-in-out .5s both;transform-origin:30% 90%;}
#sf-landing .sf-feat.is-in .i-leaves{animation:sf-sway 1.4s ease-in-out .5s both;transform-origin:10% 100%;}
#sf-landing .sf-feat.is-in .i-heart{animation:sf-beat 1s ease-in-out .6s both;}
#sf-landing .sf-feat.is-in .i-play{animation:sf-beat .9s ease-in-out .5s both;}
#sf-landing .sf-feat.is-in .i-arrow{animation:sf-nudge .8s var(--sf-ease-spring) .5s both;}
#sf-landing .sf-feat.is-in .i-globe{animation:sf-tilt 1.2s ease-in-out .5s both;}
/* نقطة البثّ تنبض دائمًا: هي معنى «مباشر»، لا زينة */
#sf-landing .i-live{animation:sf-live 1.8s ease-out infinite;}

/* إعادة الحركة عند التحويم: المتصفّح لا يُعيد تشغيل حركةٍ تغيّر تأخيرها فقط —
   يُعيدها حين يتغيّر **اسمها**. فللتحويم توائم بلاحقة -h (مطابقة المحتوى). */
@media (hover:hover){
  #sf-landing .sf-feat:hover .i-cap{animation:sf-cap-h .9s var(--sf-ease-spring) both;}
  #sf-landing .sf-feat:hover .i-pencil{animation:sf-pencil-h .9s ease-in-out both;}
  #sf-landing .sf-feat:hover .i-leaves{animation:sf-sway-h 1.4s ease-in-out both;}
  #sf-landing .sf-feat:hover .i-heart{animation:sf-beat-h 1s ease-in-out both;}
  #sf-landing .sf-feat:hover .i-play{animation:sf-beat-h .9s ease-in-out both;}
  #sf-landing .sf-feat:hover .i-arrow{animation:sf-nudge-h .8s var(--sf-ease-spring) both;}
  #sf-landing .sf-feat:hover .i-globe{animation:sf-tilt-h 1.2s ease-in-out both;}
  #sf-landing .sf-feat .sf-feat__art{transition:transform .35s var(--sf-ease-spring);}
  #sf-landing .sf-feat:hover .sf-feat__art{transform:scale(1.06) rotate(-3deg);}
}
/* اللمس: ضغطة تُحسّ — البطاقة كلّها رابط */
@media (hover:none){
  #sf-landing .sf-feat:active{transform:scale(.98);transition:transform .1s ease;}
  #sf-landing .sf-feat:active .sf-feat__bar{width:76px;}
}

@keyframes sf-cap{0%{transform:translateY(0) rotate(0);}35%{transform:translateY(-9px) rotate(-8deg);}
  70%{transform:translateY(1px) rotate(3deg);}100%{transform:none;}}
@keyframes sf-pencil{0%,100%{transform:rotate(0);}25%{transform:rotate(-12deg);}50%{transform:rotate(8deg);}75%{transform:rotate(-5deg);}}
@keyframes sf-sway{0%,100%{transform:rotate(0);}30%{transform:rotate(-10deg);}65%{transform:rotate(6deg);}}
@keyframes sf-beat{0%,100%{transform:scale(1);}30%{transform:scale(1.25);}55%{transform:scale(.94);}75%{transform:scale(1.08);}}
@keyframes sf-nudge{0%,100%{transform:none;}45%{transform:translate(4px,-4px);}}
@keyframes sf-tilt{0%,100%{transform:rotate(0);}40%{transform:rotate(-14deg);}75%{transform:rotate(6deg);}}
@keyframes sf-live{0%{transform:scale(1);opacity:1;}60%{transform:scale(1.18);opacity:.75;}100%{transform:scale(1);opacity:1;}}
@keyframes sf-cap-h{0%{transform:translateY(0) rotate(0);}35%{transform:translateY(-9px) rotate(-8deg);}
  70%{transform:translateY(1px) rotate(3deg);}100%{transform:none;}}
@keyframes sf-pencil-h{0%,100%{transform:rotate(0);}25%{transform:rotate(-12deg);}50%{transform:rotate(8deg);}75%{transform:rotate(-5deg);}}
@keyframes sf-sway-h{0%,100%{transform:rotate(0);}30%{transform:rotate(-10deg);}65%{transform:rotate(6deg);}}
@keyframes sf-beat-h{0%,100%{transform:scale(1);}30%{transform:scale(1.25);}55%{transform:scale(.94);}75%{transform:scale(1.08);}}
@keyframes sf-nudge-h{0%,100%{transform:none;}45%{transform:translate(4px,-4px);}}
@keyframes sf-tilt-h{0%,100%{transform:rotate(0);}40%{transform:rotate(-14deg);}75%{transform:rotate(6deg);}}

/* ---------------------------------------------------------------------
   ٥. الجوال — مسافات أقصر، وانزلاق رأسيّ بدل الجانبيّ، وهالة أصغر.
      الانزلاق الجانبي على 375px يُلامس حافّة الشاشة ويبدو ارتجاجًا لا حركة.
   --------------------------------------------------------------------- */
@media (max-width:640px){
  #sf-landing .sf-hero--simple::before{width:260px;height:260px;inset-inline-start:-60px;top:-20px;filter:blur(44px);}
  #sf-landing .sf-hero--simple::after{width:220px;height:220px;inset-inline-end:-50px;bottom:-30px;filter:blur(44px);}
  @keyframes sf-drift-a{from{transform:translate(0,0);}to{transform:translate(30px,20px);}}
  @keyframes sf-drift-b{from{transform:translate(0,0);}to{transform:translate(-26px,-16px);}}
}

/* ---------------------------------------------------------------------
   ٦. تقليل الحركة — يُطفئ كل ما سبق، ويُبقي المحتوى في حالته النهائية
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important;}
  ::view-transition-new(root),::view-transition-old(root){animation:none!important;}
}
@media print{
  #sf-landing .sf-feat{animation:none!important;}
  #sf-landing .sf-hero--simple::before,#sf-landing .sf-hero--simple::after{display:none;}
}