/* ============================================================
   Power Bot — FX2: طبقة الأنميشن السينمائية الكاملة
   تُضاف فوق fx.js/fx.css و effects.js دون التعارض معها
   ============================================================ */

/* ---------- ستارة الدخول (page intro) ---------- */
#fx2-curtain{position:fixed;inset:0;z-index:99999;background:#04060b;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .55s cubic-bezier(.4,0,.2,1),visibility .55s}
#fx2-curtain::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(143,111,255,.14),transparent 60%)}
#fx2-curtain .fx2-mark{position:relative;width:54px;height:54px;border-radius:14px;
  background:radial-gradient(circle at 30% 25%,#d6ccff,#8f6fff 45%,#4a3a70);
  box-shadow:0 0 30px rgba(143,111,255,.55);animation:fx2Pulse 1.1s ease-in-out infinite}
@keyframes fx2Pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.65}}
#fx2-curtain.fx2-out{opacity:0;visibility:hidden}
body.fx2-loading{overflow:hidden}

/* ---------- خلفية الشبكة الحية (mesh canvas) ---------- */
#fx2-mesh{position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.85}

/* ---------- حلقة تتبع الماوس (spotlight ring) ---------- */
#fx2-ring{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1.5px solid rgba(214,204,255,.55);pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,background .25s;
  mix-blend-mode:screen}
#fx2-ring.fx2-hover{width:52px;height:52px;background:rgba(143,111,255,.1);border-color:rgba(214,204,255,.85)}
#fx2-dot{position:fixed;top:0;left:0;width:5px;height:5px;border-radius:50%;background:#d6ccff;
  pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 8px rgba(214,204,255,.8)}

/* ---------- خطوط فاصلة تنسدل بين الأقسام ---------- */
.fx2-divider{position:relative;height:1px;margin:0 auto;max-width:1180px;
  background:linear-gradient(90deg,transparent,rgba(143,111,255,.35) 50%,transparent);
  transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.fx2-divider.on{transform:scaleX(1)}

/* ---------- تفاعل أقوى على الكروت/البطاقات ---------- */
.fx2-pop{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s}
.fx2-pop:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 20px 46px rgba(0,0,0,.45),0 0 0 1px rgba(143,111,255,.28)}

/* ---------- تسطير متحرك لروابط النافبار ---------- */
.v5-nav a.lnk{position:relative}
.v5-nav a.lnk::after{content:'';position:absolute;right:13px;left:13px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#d6ccff,#8f6fff);transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.v5-nav a.lnk:hover::after{transform:scaleX(1)}

/* ---------- توهج نبض على الـCTA الرئيسي بالهيرو ---------- */
.v5-btn.gold{position:relative}
.v5-btn.gold::before{content:'';position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(135deg,#d6ccff,#8f6fff,#4a3a70,#8f6fff,#d6ccff);background-size:300% 300%;
  opacity:0;filter:blur(10px);transition:opacity .4s;animation:fx2Sheen 5s linear infinite}
.v5-btn.gold:hover::before{opacity:.85}
@keyframes fx2Sheen{0%{background-position:0% 50%}100%{background-position:300% 50%}}

/* ---------- عناصر تدخل من الجانبين ---------- */
.fx2-l{opacity:0;transform:translateX(50px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s}
.fx2-l.on{opacity:1;transform:none;filter:blur(0)}
.fx2-r{opacity:0;transform:translateX(-50px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s}
.fx2-r.on{opacity:1;transform:none;filter:blur(0)}

/* ---------- انتقال مغادرة الصفحة ---------- */
#fx2-leave{position:fixed;inset:0;z-index:99998;background:#04060b;opacity:0;pointer-events:none;
  transition:opacity .4s cubic-bezier(.4,0,.2,1)}
#fx2-leave.fx2-show{opacity:1}

/* ---------- شارة رقمية تلمع عند التحديث ---------- */
.fx2-flash{animation:fx2Flash .6s ease}
@keyframes fx2Flash{0%{text-shadow:0 0 0 transparent}30%{text-shadow:0 0 18px rgba(214,204,255,.9)}100%{text-shadow:0 0 0 transparent}}

/* ---------- احترام تقليل الحركة وتعطيل الثقيل على اللمس ---------- */
@media(hover:none),(pointer:coarse){
  #fx2-ring,#fx2-dot{display:none}
  #fx2-mesh{opacity:.5}
}
@media(prefers-reduced-motion: reduce){
  #fx2-curtain{display:none}
  #fx2-mesh{display:none}
  #fx2-ring,#fx2-dot{display:none}
  .fx2-divider,.fx2-l,.fx2-r{opacity:1;transform:none;filter:none;transition:none}
  .fx2-pop:hover{transform:none}
  .v5-btn.gold::before{display:none}
}