/* =============================================
   S4C – Netlify Compatibility Fixes
   يُحل مشاكل:
   1. اختفاء الشفافية من الخلفيات
   2. التداخل بين النصوص والصور
   3. عدم توافق backdrop-filter مع Safari/iOS
   4. مشاكل z-index stacking context
   ============================================= */

/* ─── 1. إصلاح backdrop-filter لجميع المتصفحات ─── */
#navbar,
.mobile-menu {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.btn-ghost {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.modal-close-btn {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.founder-tag {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ─── 2. إصلاح مشكلة Stacking Context (z-index) ─── */
/* تأكد من أن الـ hero sections لا تُخفي المحتوى */
#hero {
  isolation: isolate;
}

/* إصلاح مشكلة التداخل في project-hero-overlay */
.project-hero {
  isolation: isolate;
}

.project-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* تأكد من أن الـ gradient يظهر بشكل صحيح */
  background: linear-gradient(
    to top,
    rgba(8,8,8,1) 0%,
    rgba(8,8,8,0.5) 40%,
    rgba(8,8,8,0.1) 100%
  );
}

.project-hero img {
  position: relative;
  z-index: 1;
}

.project-hero-content {
  position: relative;
  z-index: 3;
}

/* ─── 3. إصلاح الـ hero-bg (الصفحة الرئيسية) ─── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  /* تأكد من أن الصورة لا تتداخل مع النص */
  z-index: 0;
}

/* ─── 4. إصلاح background-attachment: fixed لباقي الصفحات ─── */
/* بعض المتصفحات (Safari iOS) لا تدعم fixed attachment */
/* نستبدل بـ scroll + will-change للأداء */
#founder-section {
  background-attachment: scroll !important;
}

/* ─── 5. إصلاح مشكلة opacity + background على Netlify ─── */
/* تأكد من أن الألوان الشفافة تظهر بشكل صحيح */
.hero-bg::after,
.founder-bg-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8,8,8,0.3) 0%,
    rgba(8,8,8,0.5) 50%,
    rgba(8,8,8,0.95) 100%
  );
  z-index: 1;
  /* هذا يضمن ظهور الـ gradient فوق الصورة */
  pointer-events: none;
}

/* ─── 6. إصلاح hero-container z-index ─── */
.hero-container {
  position: relative;
  z-index: 3;
}

.hero-badge,
.hero-title,
.hero-tagline,
.hero-quote,
.hero-actions,
.hero-stats-left {
  position: relative;
  z-index: 3;
}

/* ─── 7. إصلاح الـ page-section stacking ─── */
/* تأكد من أن الصفحات لا تتداخل مع بعض */
.page-section {
  position: relative;
  /* عزل stacking context */
  isolation: isolate;
}

/* ─── 8. إصلاح مشكلة الصور PNG الشفافة ─── */
/* بعض المتصفحات تُطبق alpha channel بشكل مختلف */
.hero-blob-frame img,
.founder-blob-frame img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* منع التشويه في iOS */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─── 9. إصلاح مشكلة gradient-text على Safari ─── */
.gradient-text,
.hero-title .line2,
#hero .hero-title .line2 {
  background: linear-gradient(135deg, var(--yellow) 0%, #e8a800 50%, var(--red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* إصلاح Safari */
  color: transparent;
}

/* ─── 10. إصلاح مشكلة animation على Netlify ─── */
/* بعض الأجهزة تُوقف الـ animations */
@media (prefers-reduced-motion: no-preference) {
  .hero-blob-bg,
  .hero-blob-frame,
  .founder-blob-bg,
  .founder-blob-frame,
  .about-logo-bg,
  .about-logo-frame {
    animation-play-state: running;
  }
}

/* ─── 11. إصلاح مشكلة inset property على المتصفحات القديمة ─── */
/* بديل لـ inset لمتصفحات قديمة قد تستضيفها Netlify */
.hero-bg,
.hero-bg::after,
.founder-bg-container::after,
.project-hero-overlay,
.vr-room-art .overlay,
.art-lounge-art .overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ─── 12. إصلاح مشكلة الـ font-face على Netlify ─── */
/* تأكد من أن الـ font يُحمّل بشكل صحيح */
.nav-logo-text span:first-child,
.nav-logo-text span:last-child,
.footer-brand .logo-wrap span,
.splash-title,
.hero-title {
  /* بديل آمن إذا فشل تحميل الـ custom font */
  font-family: 'Montserrat-BoldItalic', 'Georgia', 'Times New Roman', serif;
}

/* ─── 13. إصلاح مشكلة will-change للأداء ─── */
.hero-blob-bg,
.hero-blob-frame,
.hero-blob-outline,
.founder-blob-bg,
.founder-blob-frame,
.founder-blob-outline {
  will-change: border-radius;
}

/* ─── 14. تحسين الـ CTA Banner شفافية ─── */
/* تأكد من ظهور الـ gradient بشكل صحيح */
[style*="linear-gradient(135deg,rgba(245,200,0,0.07)"] {
  background: linear-gradient(
    135deg,
    rgba(245,200,0,0.07) 0%,
    rgba(232,64,64,0.05) 100%
  ) !important;
}