/* TASK-MIRFAD-028 — حركةُ الرئيسيّة: الواجهة، بطاقات الخدمات، الخطّ الزمنيّ.
   CSS خالص بلا مكتبة؛ كلُّ شيءٍ يتوقّف عند prefers-reduced-motion. */

/* ١. الواجهة — توهّجٌ برونزيٌّ ينجرف ببطء، وعنوانٌ ينكشف باتجاه القراءة */
.mf-hero-glow{animation:mfGlowDrift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes mfGlowDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-6%,4%,0) scale(1.08)}
  100%{transform:translate3d(4%,-3%,0) scale(.96)}
}
.mf-hero-title{
  -webkit-mask-image:linear-gradient(90deg,#000 0 40%,transparent 60%);
          mask-image:linear-gradient(90deg,#000 0 40%,transparent 60%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;
  animation:mfTitleLtr 1.4s .2s cubic-bezier(.45,0,.25,1) both;
}
[dir=rtl] .mf-hero-title{
  -webkit-mask-image:linear-gradient(270deg,#000 0 40%,transparent 60%);
          mask-image:linear-gradient(270deg,#000 0 40%,transparent 60%);
  animation-name:mfTitleRtl;
}
@keyframes mfTitleLtr{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes mfTitleRtl{from{-webkit-mask-position:0 0;mask-position:0 0}to{-webkit-mask-position:100% 0;mask-position:100% 0}}

/* ٢. بطاقات الخدمات — بقعةُ ضوءٍ تتبع المؤشّر ورفعةٌ خفيفة (أجهزةُ المؤشّر فقط) */
.mf-svc-card{position:relative;isolation:isolate}
.mf-svc-card>*{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  .mf-svc-card:before{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(177,120,74,.16),transparent 70%);
    transition:opacity .35s ease;
  }
  .mf-svc-card:hover:before{opacity:1}
  .mf-svc-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(15,27,45,.12);z-index:2}
}

/* ٣. المنهج والرحلة — خطٌّ برونزيٌّ يرتسم مع التمرير، خطوةً بعد خطوة.
   --mf-p (0..1) يضعه mf-motion.js على الشبكة، و--i/--n على كل خطوة.
   كلُّه تحت .mf-motion-js (على <html>، خارج اللقطة المسبقة) كي لا يرى زائرٌ بلا JS خطًّا فارغًا. */
.mf-motion-js .mf-timeline>.mf-step{position:relative}
.mf-motion-js .mf-timeline>.mf-step:after{
  content:"";position:absolute;inset-inline:0;top:-3px;height:3px;pointer-events:none;
  background:#B1784A;transform-origin:0 50%;
  transform:scaleX(clamp(0,calc(var(--mf-p,1) * var(--n,1) - var(--i,0)),1));
  transition:transform .25s linear;
}
[dir=rtl].mf-motion-js .mf-timeline>.mf-step:after{transform-origin:100% 50%}
/* الرحلة: يصير الحدُّ العلويّ الأصليّ مسارًا باهتًا يمتلئ فوقه الخطّ */
.mf-motion-js .mf-journey>.mf-step{border-top-color:rgba(177,120,74,.18)!important}
/* المنهج: أزرارُ المراحل بلا حدٍّ برونزيّ؛ الخطّ يجلس على حافّتها العليا */
.mf-motion-js .mf-method>.mf-step:after{top:0;height:2px}

@media (prefers-reduced-motion:reduce){
  .mf-hero-glow,.mf-hero-title{animation:none!important}
  .mf-hero-title{-webkit-mask-image:none;mask-image:none}
  .mf-svc-card:hover{transform:none!important}
  .mf-timeline>.mf-step:after{transform:none!important;transition:none!important}
  .mf-journey>.mf-step{border-top-color:#B1784A!important}
}