/* خلفية WebGL (ProfessionalShader) بدل page-bg */
html {
  background: transparent !important;
}

body {
  background: transparent !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.page-bg {
  display: none !important;
}

.shader-bg,
.shader-bg canvas {
  pointer-events: none !important;
}

.crew-root {
  position: relative;
  z-index: 10;
  min-height: 100svh;
}

/* الهيدر نسيج مع الشادر — بدون طبقة/خط فاصل */
.site-header {
  background: linear-gradient(
    180deg,
    rgba(7, 26, 12, 0.42) 0%,
    rgba(7, 26, 12, 0.14) 55%,
    rgba(7, 26, 12, 0) 100%
  ) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.site-header.is-eye-docked {
  box-shadow: none !important;
}

/* الهيرو شفاف بالكامل — الشادر هو الطبقة الوحيدة */
.hero {
  background: transparent !important;
}

/* طبقات ديكور ثقيلة بدون فايدة مع الشادر — نوقفها */
.hero__grid,
.hero__arcs,
.hero__line,
.hero__circuit,
.hero__scribble,
.eye-spell,
.eye-portal,
.eye__aura,
.eye__orb {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.featured,
.services,
.portfolio,
.blog,
.cta-band,
.site-close {
  background-color: rgba(5, 10, 10, 0.30);
}

/* عين أصغر وبمستوى الكلام تقريباً */
.eye:not(.is-docked) {
  --eye-w: min(15vw, 250px) !important;
  --eye-h: calc(var(--eye-w) / 2.15) !important;
}

.eye__lid {
  transition: transform 0.11s ease-in !important;
}

@media (min-width: 721px) {
  .hero__eye-anchor {
    position: absolute !important;
    left: max(5%, 1rem) !important;
    right: auto !important;
    top: 48% !important;
    bottom: auto !important;
    transform: translateY(-52%) !important;
    width: min(15vw, 250px) !important;
    margin: 0 !important;
  }
}

@media (max-width: 720px) {
  .eye:not(.is-docked) {
    --eye-w: min(52vw, 190px) !important;
    --eye-h: calc(var(--eye-w) / 2.15) !important;
  }

  .hero__eye-anchor {
    width: min(52vw, 190px) !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.1rem !important;
  }

  .hero__content {
    margin-top: -6vh !important;
  }
}

/*
 * حروف SAUDI TREND — زجاج شفاف لامع
 * أبيض/شفاف + لمسات ذهبية + توهج متناسق مع الشادر (أخضر/ذهب)
 * الترحيب العربي يبقى نصاً واحداً متصلاً
 */
.hero__title {
  --glass-white: rgba(255, 255, 255, 0.94);
  --glass-mint: rgba(215, 249, 224, 0.72);
  --glass-teal: rgba(178, 217, 187, 0.55);
  --glass-gold: rgba(212, 175, 55, 0.55);
  --glass-gold-bright: rgba(246, 144, 12, 0.38);
  --glass-green-glow: rgba(64, 162, 51, 0.42);
  --glass-gold-glow: rgba(212, 175, 55, 0.38);
  perspective: none;
  transform-style: flat;
}

.hero__eyebrow {
  /* ربط عربي صحيح — لا تقسيم حروف */
  unicode-bidi: plaintext;
  letter-spacing: normal !important;
  word-spacing: normal;
  white-space: nowrap;
  font-feature-settings: "liga" 1, "calt" 1;
}

.hero__title-char {
  display: inline-block;
  cursor: default;
  transform-style: flat !important;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  /* خامة زجاج: أبيض شفاف → نعناع → ذهب خفيف */
  background-image: linear-gradient(
    158deg,
    var(--glass-white) 0%,
    rgba(255, 255, 255, 0.78) 22%,
    var(--glass-mint) 42%,
    var(--glass-gold) 58%,
    var(--glass-teal) 76%,
    rgba(255, 255, 255, 0.88) 100%
  ) !important;
  background-size: 220% 220% !important;
  background-position: 28% 18% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  /* bloom: أبيض + أخضر براند + ذهب */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.35),
    0 0 18px var(--glass-green-glow),
    0 0 34px var(--glass-gold-glow),
    0 14px 32px rgba(4, 20, 12, 0.38) !important;
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.2))
    drop-shadow(0 0 22px rgba(64, 162, 51, 0.26));
}

.hero__title-char.is-settled {
  pointer-events: auto;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease,
    text-shadow 0.45s ease;
  /* بدون sheen مستمر — أخف على الأداء */
  animation: none;
}

.hero__title-char.is-settled:hover {
  filter:
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 26px rgba(64, 162, 51, 0.4))
    drop-shadow(0 0 38px rgba(212, 175, 55, 0.32));
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.5),
    0 0 22px var(--glass-green-glow),
    0 0 40px var(--glass-gold-glow),
    0 12px 28px rgba(4, 20, 12, 0.32) !important;
}

/* تقليب زجاجي: انكسار لوني + bloom أقوى */
.hero__title-char.is-spinning {
  animation: st-glass-refract 0.72s cubic-bezier(0.22, 0.7, 0.3, 1) !important;
  background-image: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.98) 0%,
    var(--glass-gold-bright) 18%,
    var(--glass-mint) 36%,
    rgba(255, 255, 255, 0.9) 52%,
    var(--glass-gold) 68%,
    var(--glass-teal) 84%,
    rgba(255, 255, 255, 0.95) 100%
  ) !important;
  background-size: 320% 320% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.65),
    0 0 24px rgba(212, 175, 55, 0.55),
    0 0 42px rgba(64, 162, 51, 0.4),
    0 10px 24px rgba(4, 20, 12, 0.28) !important;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.55))
    drop-shadow(0 0 28px rgba(212, 175, 55, 0.5))
    drop-shadow(0 0 44px rgba(64, 162, 51, 0.38))
    brightness(1.18)
    saturate(1.15);
}

@keyframes st-glass-refract {
  0% {
    background-position: 8% 40%;
    filter:
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.45))
      drop-shadow(0 0 24px rgba(212, 175, 55, 0.35))
      drop-shadow(0 0 36px rgba(64, 162, 51, 0.3))
      brightness(1.05)
      saturate(1.05);
  }
  35% {
    background-position: 55% 20%;
    filter:
      drop-shadow(0 0 16px rgba(255, 255, 255, 0.7))
      drop-shadow(0 0 32px rgba(246, 186, 12, 0.55))
      drop-shadow(0 0 48px rgba(64, 162, 51, 0.42))
      brightness(1.28)
      saturate(1.25);
  }
  65% {
    background-position: 88% 70%;
    filter:
      drop-shadow(0 0 14px rgba(215, 249, 224, 0.6))
      drop-shadow(0 0 30px rgba(212, 175, 55, 0.48))
      drop-shadow(0 0 46px rgba(54, 138, 43, 0.4))
      brightness(1.2)
      saturate(1.18);
  }
  100% {
    background-position: 30% 50%;
    filter:
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.28))
      drop-shadow(0 0 22px rgba(64, 162, 51, 0.3))
      drop-shadow(0 0 30px rgba(212, 175, 55, 0.22))
      brightness(1)
      saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__title-char,
  .hero__title-char.is-settled {
    animation: none !important;
    transition: none !important;
  }

  .hero__title-char.is-spinning {
    transform: none !important;
    animation: none !important;
  }
}

/* براويز الشركاء: أقرب شوية مع فصل واضح */
.partner-stage {
  --partner-radius: 460px;
  --partner-page-w: min(265px, 66vw);
  max-width: 1180px;
}

.partner-stage__scene {
  height: clamp(400px, 54vw, 540px);
  perspective: 1300px;
  perspective-origin: 50% 58%;
}

.partner-page {
  opacity: calc(0.12 + 0.88 * max(0, var(--facing))) !important;
}

.partner-page.is-front {
  opacity: 1 !important;
}

.partner-page.is-near {
  opacity: calc(0.62 + 0.32 * max(0, var(--facing))) !important;
}

.partner-stage .partner-page:hover,
.partner-stage .partner-page:focus-visible {
  transform:
    translate(-50%, -50%)
    rotateY(calc(var(--slot) * 1deg))
    translateZ(calc(var(--partner-radius) + 10px))
    rotateY(var(--bend));
}

@media (max-width: 979px) {
  .partner-stage {
    --partner-radius: 400px;
    --partner-page-w: min(230px, 62vw);
  }

  .partner-stage__scene {
    height: clamp(360px, 58vw, 480px);
  }
}

@media (max-width: 639px) {
  .partner-stage {
    --partner-radius: 320px;
    --partner-page-w: min(185px, 58vw);
  }

  .partner-stage__scene {
    height: clamp(320px, 72vw, 420px);
    perspective: 1100px;
  }

  .partner-stage__nav {
    width: 44px;
    height: 44px;
  }
}