/* ══════════════════════════════════════════════════════════════
   EGYGULF — UI ENHANCEMENT LAYER  (أضواء خلفية + أنيميشن رهيبة)
   Drop-in: لا يعدّل أي كود موجود. حطّه بعد styles.css
   ══════════════════════════════════════════════════════════════ */

:root{
  --fx-gold: #ffb607;
  --fx-blue: #3D5FC0;
  --fx-purple: #5B4FCF;
  --fx-cyan: #38e1ff;
}

/* ─────────────────────────────────────────────
   1) SITE-WIDE AMBIENT LIGHT FIELD (fixed, behind everything)
   طبقة أضواء ثابتة ورا كل الموقع
   ───────────────────────────────────────────── */
#fx-lights, #fx-rays, #fx-spot, #fx-vignette{
  position: fixed !important;
  inset: 0;
  margin: 0;
  pointer-events: none;
  /* يمنع الطبقة من دفع المحتوى لتحت */
  height: 100vh;
  width: 100vw;
}
#fx-lights{
  z-index: 0;            /* ورا المحتوى، فوق خلفية الـ body */
  overflow: hidden;
}
body{ position: relative; }
/* نتأكد إن المحتوى فوق الأضواء — من غير ما نلمس nav/loader (fixed أصلاً) */
section, footer, .ticker{
  position: relative;
  z-index: 2;
}
#nav{ z-index: 50; }
#pmodal, #bmodal, #img-lightbox, #loader{ z-index: 100; }

/* بقع ضوئية متحركة (color blobs) */
.fx-blob{
  position:absolute;
  border-radius:50%;
  filter: blur(70px);
  opacity:.55;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.fx-blob.b1{
  width:46vw;height:46vw;left:-8vw;top:-6vw;
  background: radial-gradient(circle at 30% 30%, var(--fx-gold), transparent 65%);
  opacity:.38;
  animation: fxDrift1 22s ease-in-out infinite;
}
.fx-blob.b2{
  width:52vw;height:52vw;right:-12vw;top:8vh;
  background: radial-gradient(circle at 60% 40%, var(--fx-blue), transparent 62%);
  animation: fxDrift2 26s ease-in-out infinite;
}
.fx-blob.b3{
  width:40vw;height:40vw;left:20vw;bottom:-14vw;
  background: radial-gradient(circle at 50% 50%, var(--fx-purple), transparent 60%);
  animation: fxDrift3 30s ease-in-out infinite;
}
.fx-blob.b4{
  width:30vw;height:30vw;right:14vw;bottom:6vh;
  background: radial-gradient(circle at 50% 50%, var(--fx-cyan), transparent 60%);
  opacity:.22;
  animation: fxDrift2 34s ease-in-out infinite reverse;
}

@keyframes fxDrift1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(8vw,6vh) scale(1.15)}
  66%{transform:translate(-4vw,10vh) scale(.92)}
}
@keyframes fxDrift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-10vw,8vh) scale(1.2)}
}
@keyframes fxDrift3{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(10vw,-8vh) scale(1.1)}
  70%{transform:translate(-6vw,-4vh) scale(.95)}
}

/* ─────────────────────────────────────────────
   2) GOD RAYS / أشعة ضوئية نازلة من فوق
   ───────────────────────────────────────────── */
#fx-rays{
  z-index:0; overflow:hidden; mix-blend-mode: screen; opacity:.5;
}
.fx-ray{
  position:absolute; top:-30%; left:50%;
  width:14vw; height:150vh;
  background: linear-gradient(to bottom, rgba(255,182,7,.16), transparent 70%);
  filter: blur(24px);
  transform-origin: top center;
  animation: fxRay 12s ease-in-out infinite;
}
.fx-ray.r1{ left:22%; transform:rotate(14deg); animation-delay:-2s; }
.fx-ray.r2{ left:48%; transform:rotate(-8deg);
  background: linear-gradient(to bottom, rgba(61,95,192,.18), transparent 70%);
  animation-delay:-5s; }
.fx-ray.r3{ left:74%; transform:rotate(20deg); animation-delay:-8s; }
@keyframes fxRay{
  0%,100%{ opacity:.35; }
  50%{ opacity:.75; }
}

/* ─────────────────────────────────────────────
   3) SPOTLIGHT يتبع الماوس (interactive)
   ───────────────────────────────────────────── */
#fx-spot{
  z-index:1;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
              rgba(255,182,7,.10), transparent 60%);
  transition: background .12s linear;
  mix-blend-mode: screen;
}

/* طبقة حبيبات/فينيت فوق كله عشان العمق */
#fx-vignette{
  z-index:1;
  background: radial-gradient(ellipse at 50% 35%, transparent 55%, rgba(0,0,0,.35) 100%);
}

/* ─────────────────────────────────────────────
   4) PREMIUM GLOW BOOSTS على العناصر الموجودة
   ───────────────────────────────────────────── */

/* عنوان الهيرو — وهج ذهبي نابض */
.gold-t{
  text-shadow: 0 0 32px rgba(255,182,7,.45), 0 0 4px rgba(255,182,7,.3);
  animation: fxTitleGlow 4s ease-in-out infinite;
}
@keyframes fxTitleGlow{
  0%,100%{ text-shadow:0 0 28px rgba(255,182,7,.35), 0 0 4px rgba(255,182,7,.25); }
  50%{ text-shadow:0 0 46px rgba(255,182,7,.7), 0 0 10px rgba(255,182,7,.4); }
}

/* أزرار primary — glow + شيمر يمشي */
.btn-primary, .pm-btn-primary{
  position:relative; overflow:hidden;
  box-shadow: 0 6px 24px rgba(255,182,7,.28), 0 0 0 rgba(255,182,7,0);
  transition: box-shadow .35s var(--ease-out,ease), transform .35s var(--ease-spring,ease);
}
.btn-primary:hover, .pm-btn-primary:hover{
  box-shadow: 0 10px 40px rgba(255,182,7,.55), 0 0 60px rgba(255,182,7,.25);
  transform: translateY(-2px);
}
.btn-primary::after, .pm-btn-primary::after{
  content:''; position:absolute; top:0; left:-120%;
  width:60%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: fxShimmer 3.5s ease-in-out infinite;
}
@keyframes fxShimmer{
  0%{ left:-120%; } 55%{ left:130%; } 100%{ left:130%; }
}

/* كروت المنتجات — halo عند الهوفر */
.p-card{
  transition: transform .4s var(--ease-spring,ease), box-shadow .4s var(--ease-out,ease);
}
.p-card::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  padding:1px; pointer-events:none; opacity:0;
  background: linear-gradient(135deg, var(--fx-gold), transparent 40%, var(--fx-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: opacity .4s ease;
  z-index:3;
}
.p-card:hover::before{ opacity:.9; }
.p-card:hover{
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 50px rgba(255,182,7,.18);
}

/* بادچات الشهادات + الإحصائيات — وهج خفيف */
.ab-card, .hst{
  transition: box-shadow .4s ease, transform .4s var(--ease-spring,ease);
}
.ab-card:hover{
  box-shadow: 0 0 40px rgba(61,95,192,.25);
  transform: translateY(-4px);
}

/* ─────────────────────────────────────────────
   5) SCROLL-REVEAL إضافي ناعم (يشتغل مع اللي موجود)
   ───────────────────────────────────────────── */
.fx-up{ opacity:0; transform: translateY(40px); }
.fx-up.fx-in{
  opacity:1; transform:none;
  transition: opacity .9s var(--ease-out,ease), transform .9s var(--ease-spring,ease);
}

/* ─────────────────────────────────────────────
   6) نبض ناعم على الـ ticker separators
   ───────────────────────────────────────────── */
.tick-sep{ box-shadow: 0 0 12px rgba(255,182,7,.6); }

/* ─────────────────────────────────────────────
   PERFORMANCE / ACCESSIBILITY
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .fx-blob, .fx-ray, #fx-spot, .gold-t,
  .btn-primary::after, .pm-btn-primary::after{
    animation: none !important;
  }
}
@media (max-width: 720px){
  #fx-rays{ opacity:.3; }
  .fx-blob{ filter: blur(50px); }
  .fx-blob.b4{ display:none; }
}