/* ============================================================
   سبرت — Luxe Effects 2026
   نجوم أنيقة، أشكال عائمة، تأثيرات نصوص وحركات فاخرة
   ملاحظة: كل التأثيرات الثقيلة مقيدة بـ body.device-rich
   ============================================================ */

/* ---------- 1) طبقة النجوم المتلألئة ---------- */
.luxe-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.luxe-star {
  position: absolute;
  background: radial-gradient(circle, #47a8e0 0%, rgba(71, 135, 171, 0.85) 45%, transparent 72%);
  border-radius: 50%;
  opacity: 0;
  animation: starTwinkle var(--star-dur, 4s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
  will-change: opacity, transform;
}

/* نجمة رباعية لامعة ✦ */
.luxe-star.star-cross {
  background: none;
  border-radius: 0;
}
.luxe-star.star-cross::before,
.luxe-star.star-cross::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: linear-gradient(180deg, transparent, rgba(71, 135, 171, 0.95), transparent);
  border-radius: 50%;
}
.luxe-star.star-cross::before {
  width: 14%;
  height: 100%;
}
.luxe-star.star-cross::after {
  width: 100%;
  height: 14%;
  background: linear-gradient(90deg, transparent, rgba(71, 135, 171, 0.95), transparent);
}

@keyframes starTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: var(--star-max, 0.9); transform: scale(1) rotate(45deg); }
}

/* شهاب يعبر الشاشة */
.luxe-shooting-star {
  position: absolute;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, rgba(71, 135, 171, 0.95), transparent);
  border-radius: 2px;
  opacity: 0;
  transform: rotate(-25deg);
  animation: shootingStar 9s linear infinite;
  animation-delay: var(--shoot-delay, 3s);
  filter: drop-shadow(0 0 6px rgba(71, 135, 171, 0.7));
}

@keyframes shootingStar {
  0%, 92% { opacity: 0; transform: translate(0, 0) rotate(-25deg); }
  93% { opacity: 1; }
  100% { opacity: 0; transform: translate(-55vw, 26vw) rotate(-25deg); }
}

/* ---------- 2) الأشكال الهندسية العائمة ---------- */
.luxe-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* التأكد أن محتوى القسم يبقى فوق طبقة الأشكال */
.sabarat-founder-hero > .container,
.sabarat-stats-strip > .container,
.sabarat-services-section > .container,
.sabarat-value-section > .container {
  position: relative;
  z-index: 2;
}

.luxe-shape {
  position: absolute;
  opacity: 0.45;
  will-change: transform;
  animation: shapeFloat var(--shape-dur, 18s) ease-in-out infinite;
  animation-delay: var(--shape-delay, 0s);
}

/* نجوم فاتحة داخل الأقسام الداكنة */
.luxe-star-onlight {
  background: radial-gradient(circle, #ffffff 0%, rgba(180, 220, 255, 0.95) 40%, transparent 72%);
}
.luxe-star-onlight.star-cross::before,
.luxe-star-onlight.star-cross::after {
  background: linear-gradient(180deg, transparent, rgba(220, 240, 255, 0.98), transparent);
}
.luxe-star-onlight.star-cross::after {
  background: linear-gradient(90deg, transparent, rgba(220, 240, 255, 0.98), transparent);
}

.luxe-shape.shape-ring {
  border: 2px solid #6ec1ea;
  border-radius: 50%;
}

.luxe-shape.shape-square {
  border: 2px solid #9b8cff;
  border-radius: 18%;
  transform: rotate(24deg);
}

.luxe-shape.shape-triangle {
  width: 0 !important;
  height: 0 !important;
  border-left: var(--tri, 26px) solid transparent;
  border-right: var(--tri, 26px) solid transparent;
  border-bottom: calc(var(--tri, 26px) * 1.7) solid rgba(110, 193, 234, 0.35);
  border-radius: 0;
}

.luxe-shape.shape-dot {
  background: radial-gradient(circle, rgba(110, 193, 234, 0.7), transparent 70%);
  border-radius: 50%;
}

.luxe-shape.shape-plus::before,
.luxe-shape.shape-plus::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: rgba(155, 140, 255, 0.55);
  border-radius: 4px;
}
.luxe-shape.shape-plus::before { width: 22%; height: 100%; }
.luxe-shape.shape-plus::after { width: 100%; height: 22%; }

@keyframes shapeFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  25% { transform: translate(22px, -30px) rotate(70deg) scale(1.06); }
  50% { transform: translate(-16px, -54px) rotate(150deg) scale(0.95); }
  75% { transform: translate(-30px, -20px) rotate(230deg) scale(1.03); }
}

/* أشكال فاتحة للأقسام ذات الخلفية الداكنة */
.luxe-shapes-light .luxe-shape { opacity: 0.35; }
.luxe-shapes-light .shape-ring { border-color: rgba(180, 220, 255, 0.85); }
.luxe-shapes-light .shape-square { border-color: rgba(200, 195, 255, 0.85); }
.luxe-shapes-light .shape-triangle { border-bottom-color: rgba(180, 220, 255, 0.6); }
.luxe-shapes-light .shape-dot {
  background: radial-gradient(circle, rgba(200, 230, 255, 0.9), transparent 70%);
}
.luxe-shapes-light .shape-plus::before,
.luxe-shapes-light .shape-plus::after {
  background: rgba(200, 195, 255, 0.8);
}

/* ---------- 3) تأثيرات النصوص ---------- */

/* عنوان بتوهج نيون نابض */
.device-rich .founder-hero-name,
.device-rich .hero-title {
  animation: neonPulse 3.2s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(110, 193, 234, 0.25)); }
  50% { filter: drop-shadow(0 0 16px rgba(110, 193, 234, 0.6)); }
}

/* خط لامع يمر فوق العناوين الرئيسية */
.device-rich .section-titles {
  position: relative;
  overflow: visible;
}

.device-rich .section-titles::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 50%;
  transform: translateX(50%);
  width: 70px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, #6ec1ea, #9b8cff, transparent);
  background-size: 200% 100%;
  animation: underlineShimmer 2.6s linear infinite;
}

@keyframes underlineShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ظهور الكلمات بحركة رفع أنيقة (تُضاف .luxe-words عبر JS) */
.luxe-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(2deg);
  animation: wordRise 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--word-i, 0) * 90ms);
}

/* ==========================================================
   إصلاح جذري: عناوين الأقسام كانت تختفي (تظهر عند التحديد فقط)
   السبب: background-clip:text + text-fill-color:transparent مع
   تدرج لا يُرسم أحياناً بسبب تعارض القواعد ⇒ النص شفاف.
   الحل: إلغاء قص النص تماماً واستخدام لون صلب واضح دائم الظهور.
   ========================================================== */
.section-titles,
.section-titles .luxe-word,
body.device-rich .section-titles,
body.device-rich .section-titles .luxe-word {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #16344a !important;
  color: #16344a !important;
}

/* ضمان أن العنوان الأب نفسه مرئي دائماً (بلا حركة تُبقيه شفافاً) */
.section-titles {
  opacity: 1 !important;
}

/* اسم المؤسس (على خلفية داكنة) يبقى أبيض */
.founder-hero-name,
.founder-hero-name .luxe-word {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}

@keyframes wordRise {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* شعار Work Work Work بتدرج متحرك */
.device-rich .founder-hero-motto {
  background: linear-gradient(90deg, #6ec1ea, #9b8cff, #ffd86e, #6ec1ea);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mottoFlow 5s linear infinite;
}

@keyframes mottoFlow {
  0% { background-position: 0% 0; }
  100% { background-position: 300% 0; }
}

/* ---------- 4) أشكال وحركات للعناصر ---------- */

/* إطار متدرج متحرك للبطاقات */
.device-rich .catalog-card,
.device-rich .team-member-card {
  position: relative;
  isolation: isolate;
}

.device-rich .catalog-card::before,
.device-rich .team-member-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--border-angle, 0deg),
    transparent 0%, #6ec1ea 12%, transparent 26%,
    transparent 55%, #9b8cff 68%, transparent 82%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s ease;
  animation: borderSpin 5s linear infinite;
  animation-play-state: paused;
  z-index: 2;
  pointer-events: none;
}

/* الدوران يعمل فقط عند المرور — يوفّر إعادة الرسم المستمرة */
.device-rich .catalog-card:hover::before,
.device-rich .team-member-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderSpin {
  to { --border-angle: 360deg; }
}

/* زوايا زخرفية تظهر عند المرور */
.device-rich .stat-cell {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.device-rich .stat-cell::before,
.device-rich .stat-cell::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(110, 193, 234, 0.65);
  opacity: 0;
  transition: all 0.4s ease;
}

.device-rich .stat-cell::before {
  top: 4px; right: 4px;
  border-left: none; border-bottom: none;
  border-radius: 0 8px 0 0;
}

.device-rich .stat-cell::after {
  bottom: 4px; left: 4px;
  border-right: none; border-top: none;
  border-radius: 0 0 0 8px;
}

.device-rich .stat-cell:hover {
  transform: translateY(-6px) scale(1.04);
}

.device-rich .stat-cell:hover::before,
.device-rich .stat-cell:hover::after {
  opacity: 1;
}

/* أيقونات الخدمات: تأثير مدار دائري */
.device-rich .service-icon-wrap,
.device-rich .fiber-service-icon {
  position: relative;
}

.device-rich .service-icon-wrap::after,
.device-rich .fiber-service-icon::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1.5px dashed rgba(110, 193, 234, 0.4);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: orbitSpin 9s linear infinite;
}

.device-rich .service-icon-wrap:hover::after,
.device-rich .fiber-service-icon:hover::after {
  opacity: 1;
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* تموّج ضوئي دوري فوق الأزرار الرئيسية */
.device-rich .main-button {
  position: relative;
  overflow: hidden;
}

.device-rich .main-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: btnSheen 4.5s ease-in-out infinite;
}

@keyframes btnSheen {
  0%, 60% { left: -80%; }
  90%, 100% { left: 140%; }
}

/* توهج خفيف حول صورة المؤسس */
.device-rich .founder-portrait-media {
  animation: portraitBreathe 5s ease-in-out infinite;
}

@keyframes portraitBreathe {
  0%, 100% { box-shadow: 0 0 24px rgba(110, 193, 234, 0.25); }
  50% { box-shadow: 0 0 52px rgba(110, 193, 234, 0.55), 0 0 90px rgba(155, 140, 255, 0.2); }
}

/* توهج يتبع الماوس داخل البطاقات */
.device-rich .catalog-card,
.device-rich .service-card,
.device-rich .team-member-card {
  --glow-x: 50%;
  --glow-y: 50%;
}

.device-rich .catalog-card::after,
.device-rich .service-card::after,
.device-rich .team-member-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 120px at var(--glow-x) var(--glow-y),
    rgba(110, 193, 234, 0.16), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.device-rich .catalog-card:hover::after,
.device-rich .service-card:hover::after,
.device-rich .team-member-card:hover::after {
  opacity: 1;
}

/* ---------- 5) فواصل أمواج زخرفية بين الأقسام ---------- */
.luxe-divider {
  position: relative;
  height: 46px;
  overflow: hidden;
  pointer-events: none;
}

.luxe-divider svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  animation: waveDrift 14s linear infinite;
}

@keyframes waveDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- 6) احترام تفضيلات الحركة والأجهزة الضعيفة ---------- */
body.device-lite .luxe-stars,
body.device-lite .luxe-shapes,
body.device-lite .luxe-shooting-star,
body.device-lite .luxe-divider,
body.device-lite #luxe-starfield,
body.device-lite .luxe-orbit-sys,
html.device-lite .luxe-stars,
html.device-lite .luxe-shapes,
html.device-lite .luxe-shooting-star,
html.device-lite .luxe-divider,
html.device-lite #luxe-starfield,
html.device-lite .luxe-orbit-sys {
  display: none !important;
}

/* على الأجهزة الضعيفة: أوقف التأثيرات الثقيلة وسرّع الرسم بتخطي الأقسام خارج الشاشة */
html.device-lite *,
body.device-lite * {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.12s !important;
}
html.device-lite .sabarat-value-section,
html.device-lite .sabarat-services-section,
html.device-lite .sabarat-products-showcase,
html.device-lite .sabarat-team-section,
html.device-lite .sabarat-posters-section,
html.device-lite .sabarat-stats-strip,
html.device-lite .sabarat-map-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 640px;
}
/* إزالة الظلال/الفلاتر الثقيلة على الأجهزة الضعيفة */
html.device-lite .feature-card,
html.device-lite .catalog-card,
html.device-lite .service-showcase {
  box-shadow: 0 4px 14px rgba(0,0,0,.06) !important;
  backdrop-filter: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #luxe-starfield,
  .luxe-orbit-sys {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .luxe-stars, .luxe-shapes, .luxe-shooting-star,
  .luxe-star, .luxe-shape {
    display: none !important;
  }
  .luxe-word {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .device-rich .founder-hero-name,
  .device-rich .hero-title,
  .device-rich .founder-hero-motto,
  .device-rich .founder-portrait-media,
  .device-rich .main-button::after {
    animation: none !important;
  }
}

/* الجوال: تقليل كثافة الأشكال */
@media (max-width: 768px) {
  .luxe-shape { opacity: 0.08; }
  .luxe-shooting-star { display: none; }
}