/* ═══ قسم Services — عنقود الصور المتفتّح مع السكرول ═══
   ممرّ سكرول طويل بمشهد مثبّت وأجواء داكنة عميقة (على أسلوب
   pacomepertant.com): البطاقات تبدأ متكوّمة في الوسط وتتناثر على
   الشاشة مع التقدّم — المحرّك والمعايرة في js/services.js. */

.sec-services{
  /* فوق الـ pin (z-index:1) وتحت شريط التنقّل (z-index:7) */
  position:relative;
  z-index:2;
  width:100%;
  height:320vh;              /* طول الممرّ — مسافة التفتّح كاملة */
  background:#050505;
}

.sec-services__pin{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  /* مشهد المرجع: أسود فحميّ وشبكة خطوط باهتة، وعمق حقيقيّ للبطاقات */
  perspective:1100px;
  perspective-origin:50% 46%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    radial-gradient(130% 95% at 50% 45%, #101010 0%, #0a0a0a 60%, #040404 100%);
}
.sec-services__pin::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 24vw rgba(0,0,0,.8);
}

/* بلاطات موحّدة على هيئة المرجع: كلّها بمقاس واحد ونسبة 3:2،
   والصورة تملأ البلاطة بقصّ cover — إطار مدوّر بحدّ رقيق وظلّ عميق */
.sec-services__card{
  position:absolute;
  left:0;
  top:0;
  width:21vw;
  aspect-ratio:3/2;
  overflow:hidden;
  border-radius:clamp(10px, .9vw, 20px);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  will-change:transform;
  /* يظهر مع أوّل إطار من المحرّك — فلا وميض لتكوّم غير مضبوط */
  opacity:0;
}
.sec-services__card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  transition:filter .35s ease;
}
/* البطاقات تفتح مشغّل الفيديو (اللايت-بوكس تحت): مؤشّر ولمعة عند
   التمرير للبطاقات التي تحمل data-video */
.sec-services__card[data-video]{cursor:pointer}
.sec-services__card[data-video]:hover img,
.sec-services__card[data-video]:focus-visible img{filter:brightness(1.18)}
.sec-services__card[data-video]:focus-visible{outline:2px solid var(--nav);outline-offset:4px}

/* علامة الفيديو — شارة التشغيل التقليدية: دائرة داكنة ومثلّث أبيض
   في وسطها، بلغة أزرار شريط التحكّم نفسها. ظاهرة دائماً على كلّ
   البلاطات (بطلب المستخدم) فيعرف الزائر أنّها فيديو قبل أيّ تمرير،
   وتكبر قليلاً عند التحويم. تركب على مستوى البطاقة ثلاثيّ الأبعاد
   فتميل معها. */
.sec-services__card[data-video]::after{       /* الدائرة */
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:clamp(46px, 3.6vw, 68px);
  height:clamp(46px, 3.6vw, 68px);
  border-radius:50%;
  background:rgba(10,10,10,.72);
  border:1px solid rgba(255,255,255,.28);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:1;
  z-index:1;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.sec-services__card[data-video]::before{      /* المثلّث */
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-style:solid;
  border-width:clamp(8px, .62vw, 12px) 0 clamp(8px, .62vw, 12px) clamp(13px, 1vw, 19px);
  border-color:transparent transparent transparent #fff;
  transform:translate(-36%,-50%);
  pointer-events:none;
  opacity:1;
  z-index:2;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
/* تأكيد التحويم/التركيز: الشارة تكبر قليلاً */
.sec-services__card[data-video]:hover::after,
.sec-services__card[data-video]:focus-visible::after{
  transform:translate(-50%,-50%) scale(1.1);
}
.sec-services__card[data-video]:hover::before,
.sec-services__card[data-video]:focus-visible::before{
  transform:translate(-36%,-50%) scale(1.1);
}

/* الهواتف: تكبير البلاطات كي لا تصير طوابع */
@media (max-width:560px){
  .sec-services__card{width:40vw}
}

/* ═══ مشغّل الفيديو (لايت-بوكس) — على مرجع المستخدم ═══
   النقر على بطاقة يفتح الصورة المصغّرة كبيرةً في لوح مدوّر بزرّ ×
   وحبّة «!play» تلاحق المؤشّر؛ النقر في أيّ مكان يشغّل الفيديو بملء
   الشاشة مع شريط تحكّم (إيقاف/تشغيل + صوت + تقدّم)، والحبّة تصير
   «close» — والنقر في أيّ مكان خارج الشريط يخرج من الفيديو. */
.svc-lb{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,3,3,.94);
  opacity:0;transition:opacity .35s ease;
  cursor:pointer;
}
.svc-lb.is-open{opacity:1}
.svc-lb__panel{
  position:absolute;inset:2.2vw;
  border-radius:22px;overflow:hidden;background:#000;
  transition:inset .3s ease,border-radius .3s ease;
}
.svc-lb__panel img{width:100%;height:100%;object-fit:cover;display:block}
.svc-lb.is-playing .svc-lb__panel{inset:0;border-radius:0}
.svc-lb.is-playing .svc-lb__panel img{display:none}
/* عنصر الفيديو يبقى في اللوح بعد أوّل تشغيل — يُخفى في طور الصورة
   وإلا غطّى بخلفيّته السوداء الصورَ المصغّرة التالية */
.svc-lb video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none}
.svc-lb.is-playing video{display:block}
.svc-lb__x{
  position:absolute;top:24px;right:24px;z-index:3;
  width:52px;height:52px;border-radius:50%;
  background:#141414;border:none;color:#fff;font-size:20px;
  display:grid;place-items:center;cursor:pointer;
}
/* زرّ × ظاهر أثناء التشغيل أيضاً — هو مخرج الفيديو (لا حبّة ملاحِقة):
   النقر على الشاشة نفسها إيقاف/استئناف لا خروج */
/* مؤشّر التحميل — يظهر حين يتلعثم الفيديو (إنترنت بطيء أو Seek بعيد)
   ويختفي فور جريان التشغيل. حلقة تدور ببرتقاليّ الهوية (لون الشريط). */
.svc-lb__spin{
  position:absolute;
  left:50%;
  top:50%;
  width:64px;
  height:64px;
  margin:-32px 0 0 -32px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:var(--nav);
  animation:svc-spin 1s linear infinite;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.svc-lb.is-buffering .svc-lb__spin{opacity:1}
@keyframes svc-spin{to{transform:rotate(360deg)}}

/* شريط التحكّم — على مرجع المستخدم: حبّة داكنة لمّاعة (حدّ خافت،
   لمعة علوية داخلية وظلّ عميق)، الأزرار أقراص داكنة والتشغيل يلفّه
   طوق قزحيّ متوهّج يدور ببطء */
.svc-lb__bar{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:none;align-items:center;gap:12px;
  background:#0b0b0d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;padding:12px;
  box-shadow:0 26px 80px rgba(0,0,0,.7),
             0 2px 10px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.08);
  cursor:default;direction:ltr;
}
.svc-lb.is-playing .svc-lb__bar{display:flex}
.svc-lb__btn{
  position:relative;
  width:52px;height:52px;border-radius:50%;
  background:#141417;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  cursor:pointer;
  display:grid;place-items:center;
}
.svc-lb__btn svg{width:18px;height:18px;fill:#fff;display:block}
/* طوق زرّ الصوت بألوان هوية الموقع (لوحة المستخدم: أخضر غابة عميق
   ‎#285A48، أحمر قرمزيّ ‎#D23929، أسود غنيّ ‎#121212، أبيض): قرص
   conic يُقنَّع إلى حافة رفيعة، يدور وعليه وميض أبيض يسري بين
   الأخضر والأحمر — ومع الدوران هالةٌ تتنفّس تتناوب لوني الهوية */
.svc-lb__snd::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  background:conic-gradient(from 20deg,
    #121212 0deg,
    #285A48 55deg, #47a37e 110deg,
    #ffffff 140deg,
    #D23929 185deg, #e2603a 245deg,
    #121212 310deg, #121212 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 5px));
  filter:blur(1.5px) saturate(1.2);
  animation:svc-ring 5s linear infinite;
  pointer-events:none;
}
@keyframes svc-ring{to{transform:rotate(360deg)}}
/* الهالة الحيّة: توهّج يتنفّس حول الزرّ متناوباً أخضر/أحمر الهوية */
.svc-lb__snd{animation:svc-aura 3.6s ease-in-out infinite}
@keyframes svc-aura{
  0%,100%{box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 18px rgba(40,90,72,.55)}
  50%{box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 22px rgba(210,57,41,.5)}
}
@media (prefers-reduced-motion: reduce){
  .svc-lb__snd::before{animation:none}
  .svc-lb__snd{animation:none}
}
.svc-lb__prog{
  position:relative;width:min(380px,38vw);height:52px;
  border-radius:12px;overflow:hidden;background:#000;
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  touch-action:none;          /* سحب الفرك يعمل باللمس أيضاً */
}
/* بانوراما الفيديو: شريط لقطات يُولَّد من الفيديو نفسه (js) فيُرى
   مضمون الشريط الزمنيّ كاملاً بوضوحه، والنقر ينقل إلى الموضع المنقور */
.svc-lb__film{position:absolute;inset:0}
.svc-lb__film canvas{width:100%;height:100%;display:block}
/* المقطوع منه: صبغة برتقالية شفيفة تُبقي اللقطات مرئية، وخطّ
   برتقاليّ عند موضع التشغيل الحاليّ */
.svc-lb__prog span{
  position:absolute;top:0;bottom:0;left:0;width:0;
  background:rgba(238,75,40,.22);
  border-right:2px solid var(--nav);
}
/* شاشات اللمس: لا مؤشّر يُلاحَق — الحبّة تثبت أسفل يمين الشاشة */
/* ═══ زرّ Start Your Project Now! — نهاية لولب الأعمال ═══
   على مرجع «Get Started» وبألوان الهوية: إطار أسود سميك لمّاع، وجهٌ
   داخليّ متوهّج كشفق يمزج أخضر الغابة ‎#285A48 بالقرمزيّ ‎#D23929
   على الأسود الغنيّ ‎#121212 مع شفق يدور ببطء داخله، سطران بخطّ
   Gragio، وخلف الزرّ هالة ضوء تتنفّس على خلفية الصفحة.
   الكشف بعد اكتمال اللولب بإضافة is-on (المحرّك في js/services.js). */
.sec-services__start{
  position:absolute;
  inset:0;
  margin:auto;                    /* توسيط الحبّة دون تحويل — حدّة النصّ */
  width:max-content;
  height:max-content;
  z-index:120;                    /* فوق كلّ البطاقات (أقصى عمقها ~101) */
  display:block;
  border-radius:999px;
  padding:11px;                   /* الإطار الأسود السميك */
  background:#0c0c0c;
  box-shadow:0 30px 90px rgba(0,0,0,.65),
             inset 0 1px 0 rgba(255,255,255,.1),
             inset 0 -3px 8px rgba(0,0,0,.85);
  text-decoration:none;
  opacity:0;
  transform:translateY(30px);
  pointer-events:none;
  /* الانتقالات تُقرأ من الحالة الوِجهة: نزع is-on يعتمد انتقالَي
     القاعدة هذين — خروج قصير عند الرجوع لأعلى فلا يعلق الزرّ فوق
     البطاقات العائدة */
  transition:opacity .7s ease, transform .8s ease;
}
/* ظهور مهيب كنصوص About حرفيّاً (بطلب المستخدم): يبدأ أخفض قليلاً
   وشفّافاً ويصعد ويكتمل بمنحنى About ومدّتيه — على شاشة أخلاها
   المحرّك من البطاقات أوّلاً. النهاية transform:none لحدّة النصّ. */
.sec-services__start.is-on{
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition:opacity 1.9s cubic-bezier(.16,.72,.24,1),
             transform 2.3s cubic-bezier(.16,.72,.24,1);
}
@media (prefers-reduced-motion: reduce){
  .sec-services__start{transition-duration:.01ms}
}
.sec-services__start:focus-visible{outline:2px solid var(--nav);outline-offset:6px}
/* الهالة خلف الزرّ: بقعتان ضوئيّتان بلوني الهوية تذوبان في خلفية
   الصفحة وتتنفّسان ببطء */
.sec-services__start-halo{
  position:absolute;
  inset:-90px -130px;
  z-index:-1;
  border-radius:50%;
  background:
    radial-gradient(46% 62% at 30% 44%, rgba(40,90,72,.6) 0%, rgba(40,90,72,0) 72%),
    radial-gradient(46% 62% at 72% 56%, rgba(210,57,41,.55) 0%, rgba(210,57,41,0) 72%);
  filter:blur(34px);
  pointer-events:none;
  animation:svc-halo 5s ease-in-out infinite;
}
@keyframes svc-halo{0%,100%{opacity:.55}50%{opacity:.9}}
/* الوجه الداخليّ المتوهّج: شفق أخضر من أعلى اليسار وقرمزيّ من أسفل
   اليمين على الأسود الغنيّ، لمعة بيضاء داخلية عند الحوافّ كالمرجع،
   وداخله ضوء conic يدور ببطء فيبقى حيّاً */
.sec-services__start-face{
  position:absolute;
  inset:11px;
  z-index:1;
  border-radius:999px;
  overflow:hidden;
  background:
    radial-gradient(120% 175% at 24% -10%, rgba(74,223,152,.95) 0%, rgba(36,132,90,.62) 40%, rgba(36,132,90,0) 72%),
    radial-gradient(130% 185% at 78% 110%, rgba(255,84,44,.95) 0%, rgba(226,50,26,.55) 42%, rgba(226,50,26,0) 74%),
    radial-gradient(140% 220% at 50% 50%, #1a201d 0%, #121212 100%);
  box-shadow:inset 0 0 26px rgba(255,255,255,.18),
             inset 0 8px 22px rgba(255,255,255,.12),
             inset 0 -12px 28px rgba(0,0,0,.5);
  filter:saturate(1.5);
  transition:filter .35s ease;
}
.sec-services__start-face::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:conic-gradient(from 0deg,
    rgba(40,90,72,0) 0deg, rgba(64,196,138,.65) 80deg, rgba(40,90,72,0) 160deg,
    rgba(240,62,34,.6) 260deg, rgba(240,62,34,0) 340deg);
  filter:blur(18px);
  animation:svc-ring 9s linear infinite;
}
.sec-services__start:hover .sec-services__start-face,
.sec-services__start:focus-visible .sec-services__start-face{
  filter:saturate(1.35) brightness(1.15);
}
@media (prefers-reduced-motion: reduce){
  .sec-services__start-halo,
  .sec-services__start-face::before{animation:none}
}
/* السطران بخطّ الموقع الرئيس GC EpicPro: «Start Your» فوق
   و«Project Now!» تحته — direction:ltr تُبقي علامة التعجّب بعد
   «Now» (صفحة RTL تقلب الترقيم الطرفيّ بدونها) */
.sec-services__start-label{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.08em;
  padding:.5em 1.45em .56em;
  direction:ltr;
  font-family:'GC EpicPro','Segoe UI',system-ui,sans-serif;
  font-size:clamp(24px, 2.4vw, 44px);
  line-height:1.04;
  letter-spacing:.1em;
  text-align:center;
  white-space:nowrap;
  /* نصّ محفور داخل السطح لا فوقه: ظلّ داخليّ داكن من الأعلى ولمعة
     رفيعة من الأسفل (letterpress) وأبيض يشفّ قليلاً فيمتزج بالوجه */
  color:rgba(255,255,255,.92);
  text-shadow:0 -1px 1px rgba(0,0,0,.65),
              0 -2px 6px rgba(0,0,0,.35),
              0 1px 0 rgba(255,255,255,.25);
}
.sec-services__start-label span{display:block}

/* ═══ الهواتف: مشغّل الفيديو ═══
   يجب أن تلي قواعدَ اللايت-بوكس في الملفّ لتغلبها (تخصيص متساوٍ،
   فالمتأخّر يرجح). شريط البانوراما يتمدّد ليملأ ما تبقّى من العرض:
   38vw تعطي ~143px فقط على الهاتف، وهي ضيّقة للفرك بالإصبع. */
@media (max-width:560px){
  .svc-lb__prog{width:calc(100vw - 200px)}
  .svc-lb__bar{gap:9px;padding:10px;bottom:18px}
  .svc-lb__x{top:16px;right:16px;width:46px;height:46px}
}