/* ==========================================================================
   إعمار الموارد — طبقة التفاعل والحركة (Motion & Interaction Layer)
   ملف مستقل لا يمسّ التصميم الأصلي. يعتمد على متغيّرات styles.css.
   كل الحركات تحترم prefers-reduced-motion.
   ========================================================================== */

/* ---------- 0. أدوات عامة ---------- */
:root{ --fx-ease:cubic-bezier(.22,1,.36,1); }
html.fx-ready{scroll-behavior:smooth}
body.fx-lock{overflow:hidden}

/* ---------- 1. شاشة التحميل (Preloader) ---------- */
#fxLoader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 30%,var(--ink-2),var(--ink));
  transition:opacity .8s var(--fx-ease),visibility .8s}
#fxLoader.hide{opacity:0;visibility:hidden}
.fxL{display:flex;flex-direction:column;align-items:center;gap:26px}
.fxL__mark{position:relative;width:88px;height:88px}
.fxL__mark svg{width:100%;height:100%;overflow:visible}
.fxL__ring{fill:none;stroke:rgba(201,163,78,.18);stroke-width:2}
.fxL__arc{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:80 200;transform-origin:center;animation:fxSpin 1.15s linear infinite}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fxL__mono{position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Amiri',serif;font-weight:700;font-size:2rem;color:var(--gold);
  text-shadow:0 0 24px rgba(201,163,78,.5)}
.fxL__name{font-family:'Cairo',sans-serif;font-weight:900;font-size:1.05rem;color:#fff;letter-spacing:.02em;opacity:0;animation:fxFadeUp .8s .2s var(--fx-ease) forwards}
.fxL__tag{font-size:.72rem;letter-spacing:.34em;color:var(--gold-soft);text-transform:uppercase;opacity:0;animation:fxFadeUp .8s .35s var(--fx-ease) forwards}
.fxL__bar{width:180px;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;margin-top:6px}
.fxL__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--gold));border-radius:2px;transition:width .3s linear}
@keyframes fxFadeUp{to{opacity:1;transform:none}}
.fxL__name,.fxL__tag{transform:translateY(10px)}

/* ---------- 2. شريط تقدّم القراءة ---------- */
#fxProgress{position:fixed;top:0;right:0;left:0;height:3px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--gold),var(--brand-2),var(--gold));
  transform:scaleX(0);transform-origin:right;transition:transform .1s linear;
  box-shadow:0 0 14px rgba(201,163,78,.55)}

/* ---------- 3. ذرّات + طبقة بارالاكس في الواجهة ---------- */
.fx-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero .hero__bg img,.phero .phero__bg img{will-change:transform;transition:transform .2s linear}
.hero__inner,.phero__inner{will-change:transform}

/* ---------- 4. ظهور العنوان كلمةً كلمة ---------- */
.fx-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.fx-word__in{display:inline-block;transform:translateY(118%);transition:transform .95s var(--fx-ease)}
.fx-words-in .fx-word__in{transform:translateY(0)}

/* ---------- 5. مؤشّر مخصّص (هالة ناعمة) ---------- */
#fxGlow{position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:150;opacity:0;transition:opacity .5s;
  background:radial-gradient(circle,rgba(201,163,78,.10),transparent 60%);
  mix-blend-mode:screen}
#fxDot{position:fixed;top:0;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--gold);pointer-events:none;z-index:151;opacity:0;
  transition:opacity .4s,transform .18s var(--fx-ease);box-shadow:0 0 12px rgba(201,163,78,.9)}
#fxDot.grow{transform:scale(3.4);background:transparent;border:1.5px solid var(--gold)}
body.fx-cursor{cursor:none}
body.fx-cursor a,body.fx-cursor button,body.fx-cursor input,body.fx-cursor select,body.fx-cursor .svc,body.fx-cursor figure{cursor:none}

/* ---------- 6. الإمالة ثلاثية الأبعاد ---------- */
.fx-tilt{transform-style:preserve-3d;will-change:transform}
.fx-tilt .svc__ic,.fx-tilt .value__ic,.fx-tilt h3{transform:translateZ(24px)}

/* ---------- 7. Lightbox معرض الصور ---------- */
#fxLightbox{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  padding:5vh 5vw;background:rgba(12,9,8,.92);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--fx-ease),visibility .45s}
#fxLightbox.open{opacity:1;visibility:visible}
#fxLightbox img{max-width:100%;max-height:90vh;border-radius:16px;object-fit:contain;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);transform:scale(.94);transition:transform .5s var(--fx-ease);
  border:1px solid rgba(201,163,78,.25)}
#fxLightbox.open img{transform:scale(1)}
#fxLightbox .fx-close{position:absolute;top:24px;left:24px;width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;
  display:grid;place-items:center;transition:.3s var(--fx-ease)}
#fxLightbox .fx-close:hover{background:var(--brand);transform:rotate(90deg)}
.fx-zoomable{cursor:zoom-in}

/* ---------- 8. زر العودة للأعلى ---------- */
#fxTop{position:fixed;bottom:26px;left:26px;z-index:140;width:52px;height:52px;border-radius:50%;
  border:0;cursor:pointer;color:#fff;background:var(--brand);
  box-shadow:0 14px 34px -12px rgba(122,34,48,.75);display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.8);
  transition:.45s var(--fx-ease)}
#fxTop.show{opacity:1;visibility:visible;transform:none}
#fxTop:hover{background:var(--brand-2);transform:translateY(-3px)}
#fxTop svg{transition:transform .3s}
#fxTop:hover svg{transform:translateY(-2px)}

/* ---------- 9. تحسين الظهور: انزلاق اتّجاهي وطبقات ---------- */
.reveal.fx-left{transform:translateX(40px)}
.reveal.fx-right{transform:translateX(-40px)}
.reveal.fx-scale{transform:scale(.94)}
.reveal.in.fx-left,.reveal.in.fx-right,.reveal.in.fx-scale{transform:none}

/* ---------- 10. توهّج ذهبي عند مرور المؤشّر على البطاقات المضيئة ---------- */
.svc,.value,.spec-card,.statbox,.duo__card,.pillar{position:relative}
.svc::after,.value::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .4s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(201,163,78,.14),transparent 65%)}
.svc:hover::after,.value:hover::after{opacity:1}

/* ---------- 11. أنماط الأرقام أثناء العدّ ---------- */
.fx-counting{font-variant-numeric:tabular-nums}

/* ---------- 12. احترام إيقاف الحركة ---------- */
@media(prefers-reduced-motion:reduce){
  #fxLoader{display:none}
  .fx-canvas,#fxGlow,#fxDot{display:none!important}
  .fx-word__in{transform:none!important;transition:none}
  #fxProgress{display:none}
  body.fx-cursor,body.fx-cursor *{cursor:auto!important}
}
@media(hover:none){
  #fxGlow,#fxDot{display:none!important}
  body.fx-cursor,body.fx-cursor *{cursor:auto!important}
  .fx-tilt{transform:none!important}
}

/* ==========================================================================
   الموجة الثانية — تفاعلات إضافية
   ========================================================================== */

/* ---------- 13. أسهم تصفّح المعرض ---------- */
#fxLightbox .fx-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:.3s var(--fx-ease);z-index:2}
#fxLightbox .fx-nav:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
#fxLightbox .fx-prev{right:24px}
#fxLightbox .fx-next{left:24px}
#fxLightbox .fx-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:.9rem;letter-spacing:.1em;z-index:2}
@media(max-width:620px){#fxLightbox .fx-nav{width:44px;height:44px;font-size:1.5rem}}

/* ---------- 14. كشف الصور بستارة ---------- */
.fx-wipe{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(120deg,var(--ink),var(--brand-deep));
  transform:scaleX(1);transform-origin:right;transition:transform 1.05s var(--fx-ease)}
.fx-wiped .fx-wipe{transform:scaleX(0)}

/* ---------- 15. امتلاء الخط الزمني ---------- */
.fx-tlfill{position:absolute;top:0;right:23px;width:2px;height:0;z-index:1;border-radius:2px;
  background:linear-gradient(var(--gold),var(--brand));box-shadow:0 0 12px rgba(201,163,78,.5);
  transition:height .12s linear}

/* ---------- 16. تموّج الأزرار ---------- */
.btn{position:relative;overflow:hidden}
.fx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(0);pointer-events:none;animation:fxRipple .65s ease-out forwards}
.btn--gold .fx-ripple{background:rgba(20,16,14,.28)}
@keyframes fxRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ---------- 17. إخفاء/إظهار الشريط ---------- */
.nav.fx-hide{transform:translateY(-115%)}

/* ---------- 18. نسخ بيانات التواصل ---------- */
.fx-copy{cursor:pointer;position:relative;transition:color .3s}
.fx-copy:hover{color:var(--gold)}
.fx-copy::after{content:"نسخ";position:absolute;top:-8px;left:0;font-size:.62rem;font-weight:700;
  letter-spacing:.1em;color:var(--gold);opacity:0;transform:translateY(4px);transition:.3s;pointer-events:none}
.fx-copy:hover::after{opacity:.9;transform:translateY(0)}

/* ---------- 19. إشعارات (Toast) ---------- */
#fxToast{position:fixed;bottom:26px;right:26px;z-index:9997;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.fx-t{background:rgba(20,16,14,.92);color:#fff;border:1px solid rgba(201,163,78,.35);
  border-radius:12px;padding:13px 20px;font-size:.9rem;font-weight:600;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;gap:10px;backdrop-filter:blur(8px);
  transform:translateX(-120%);opacity:0;transition:.5s var(--fx-ease)}
.fx-t.show{transform:none;opacity:1}
.fx-t svg{color:var(--gold);flex:0 0 auto}

/* ---------- 20. انفجار ذهبي ---------- */
.fx-spark{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--gold);z-index:9996;
  pointer-events:none;box-shadow:0 0 8px rgba(201,163,78,.8)}

/* ---------- 21. رسم أيقونات SVG ---------- */
.fx-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.1s var(--fx-ease)}
.fx-drawn .fx-draw{stroke-dashoffset:0}

@media(prefers-reduced-motion:reduce){
  .fx-wipe{display:none}
  .fx-draw{stroke-dashoffset:0!important;transition:none}
  .fx-ripple,.fx-spark{display:none!important}
}

/* ==========================================================================
   تناسق الهاتف — تحسينات تخطيط للشاشات الصغيرة (لا تغيّر الهوية)
   ========================================================================== */
@media(max-width:640px){
  /* أزرار الواجهة: عرض كامل ومحاذاة موحّدة بدل عرضين مختلفين */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;justify-content:center}

  /* إحصائيات الواجهة: شبكة ٢×٢ منتظمة بدل التفاف متفاوت */
  .hero__stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 16px}
  .hero__stat .lbl{max-width:none}

  /* شريط الخدمات: توسيط وتنظيم العناصر في شبكة متساوية */
  .band__inner{flex-direction:column;text-align:center;gap:22px}
  .band__logo{justify-content:center;flex-direction:column}
  .band__logo .t{max-width:none}
  .band__items{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px;width:100%}
  .band__item{align-items:center;text-align:center}

  /* شارة الواجهة والعنوان: مساحة تنفّس أعلى الحروف حتى لا تُقصّ */
  .fx-word{padding-top:.08em;margin-top:-.08em}

  /* بطاقة المدينة الذهبية: زر الدعوة بعرض كامل */
  .flagship__intro .btn{width:100%;justify-content:center}

  /* تصغير زرّ العودة للأعلى وشريط التقدّم على الهاتف */
  #fxTop{width:46px;height:46px;bottom:18px;left:18px}
}