/* ============================================================
   fx.css — طبقة الحركة المشتركة لصفحات الأكاديمية
   (الرئيسية، والاستشارات، وصفحة البيع، والويبينار)
   - كل الحركات بتتلغي لو الزائر مفعّل «تقليل الحركة» في جهازه.
   - المحتوى بيفضل ظاهر لو الجافاسكربت ما اشتغلش (الإخفاء بيحصل بس لما html.fx يتحط).
   ============================================================ */

/* ---------- ظهور العناصر مع السكرول ---------- */
html.fx [data-rv]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
html.fx [data-rv="zoom"]{transform:scale(.94)}
html.fx [data-rv="side"]{transform:translate3d(-34px,0,0)}
html.fx [data-rv="side-r"]{transform:translate3d(34px,0,0)}
html.fx [data-rv].in{opacity:1;transform:none}

/* ---------- شريط تقدّم القراءة ---------- */
.fx-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;z-index:50;pointer-events:none;transform-origin:100% 50%;transform:scaleX(var(--p,0));background:linear-gradient(270deg,#07D9D9,#1ED9C6 60%,#023373)}

/* ---------- الهيدر بعد السكرول ---------- */
header.top{transition:box-shadow .3s ease,background-color .3s ease}
header.top.fx-scrolled{box-shadow:0 8px 24px -14px rgba(1,17,38,.35)}

/* ---------- الأزرار ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,filter .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(1,17,38,.45)}
.btn:active{transform:translateY(0) scale(.98)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s ease}
.btn:hover::after{transform:translateX(-120%)}
/* لمعة دورية على زرار الواتساب الرئيسي */
.btn.wa,.fab{animation:fx-ring 2.8s ease-out infinite}
.btn.wa:hover{animation:none}
@keyframes fx-ring{0%{box-shadow:0 0 0 0 rgba(37,194,106,.5)}70%,100%{box-shadow:0 0 0 14px rgba(37,194,106,0)}}

/* ---------- الكروت ---------- */
.path,.vcard,.review,.card,.bookcard,.who>div{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .25s ease}
.vcard:hover,.review:hover,.card:hover,.bookcard:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(2,51,115,.45)}
.path:hover{transform:translateY(-6px)!important;box-shadow:0 22px 40px -24px rgba(2,51,115,.55)}

/* صور الفيديو: زوم خفيف وزرار تشغيل بينبض */
.vplay img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vplay:hover img{transform:scale(1.06)}
.vplay .pb{transition:transform .3s ease,background-color .3s ease}
.vplay:hover .pb{transform:translate(-50%,-50%) scale(1.1);background:rgba(2,51,115,.85)}
.vplay .pb::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #07D9D9;animation:fx-play 2.2s ease-out infinite}
@keyframes fx-play{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* ---------- الأسئلة الشائعة: فتح ناعم ---------- */
details summary{transition:color .2s ease}
details summary:hover{color:#023373}
details[open] > :not(summary){animation:fx-open .45s cubic-bezier(.2,.7,.2,1)}
@keyframes fx-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  html.fx [data-rv]{opacity:1!important;transform:none!important;transition:none!important}
  .fx-progress{display:none}
  .btn.wa,.fab,.vplay .pb::after{animation:none!important}
  .btn::after{display:none}
  .btn:hover,.path:hover,.vcard:hover,.review:hover,.card:hover,.bookcard:hover{transform:none!important}
}