/* ════════════════════════════════════════════════
   Findly — طبقة الزجاج التفاعلي
   تُحمَّل بعد dark.css وتبني فوقه، لا تستبدله.

   الفكرة: التصميم أصلاً ملتزم بمادة — ألواح زجاج
   لها سُمك وحافة مضيئة وظلّ داخلي — لكنها ساكنة،
   فتُقرأ كصورة زجاج لا كزجاج. هذه الطبقة تعطي
   المادة وزناً واستجابة للضوء وللمس.

   قاعدة الأداء المتّبعة هنا:
   · الحركة المستمرة على transform و opacity فقط
   · تتبّع المؤشّر محصور في أجهزة الفأرة وحدها
   · لا إمالة على أي سطح يحمل backdrop-filter
   · كل شيء ينطفئ عند prefers-reduced-motion
   ════════════════════════════════════════════════ */

:root {
  /* منحنى واحد وسلّم مدد واحد لكل الموقع */
  --ease      : cubic-bezier(.22,.61,.36,1);
  --ease-out  : cubic-bezier(.16,1,.3,1);

  --t-press   : 90ms;    /* الضغط: أسرع من العين */
  --t-fast    : 180ms;
  --t-base    : 260ms;
  --t-slow    : 420ms;

  /* موضع الضوء داخل السطح — يكتبه الجافاسكربت */
  --gx: 50%;
  --gy: 0%;
}

/* ════════════════════════════════════════════════
   ١ · الاستجابة للضغط — الأساس، ويعمل باللمس
   ════════════════════════════════════════════════

   لا وجود لحالة ضغط واحدة في dark.css. هذا سبب
   الإحساس «الجامد» على الجوال: الزائر يضغط فلا
   يردّ عليه شيء. اللمس لا hover عنده — فالضغط
   هو كامل لغة التفاعل على أغلب أجهزة الجمهور. */

.pill:active,
.circle-btn:active,
.chip:active,
.nav a:active,
.menu-toggle:active {
  transform: scale(.955);
  transition-duration: var(--t-press);
}

/* الأزرار المصمتة تغرق قليلاً: الحافة المضيئة تنطفئ
   والظلّ الداخلي يعمق — كأن اللوح انضغط في مكانه */
.pill-accent:active,
.pill-light:active {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.28);
}

.pill-ghost:active {
  background: rgba(234,241,248,.12);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.22);
}

/* البطاقات: انضغاط ألطف — مساحتها أكبر فالمقياس نفسه يبدو مبالغاً.

   مقصورة على البطاقات بحجم البطاقة. الصناديق العريضة
   — .track-card و .callout و .doc-box — تأخذ الضوء
   ولا تأخذ انضغاطاً: صندوق بعرض الصفحة ينضغط عند
   لمسه من أي موضع يبدو خطأً لا استجابة. */
.gcard:active,
.dcard:active,
.ccard:active,
.pcard:active {
  transform: scale(.988);
  transition-duration: var(--t-press);
}

/* السؤال الشائع يُفتح بالضغط فعلاً — يستحق استجابة.
   الضغط على summary يُفعِّل details أيضاً لأن :active
   تسري على سلسلة التفعيل لا على العنصر وحده.
   المقياس أخفّ: الصندوق عريض وارتفاعه يتغيّر عند الفتح. */
.faq details:active {
  transform: scale(.994);
  transition-duration: var(--t-press);
}

/* ════════════════════════════════════════════════
   ٢ · سُمك الزجاج — حافة تلتقط الضوء
   ════════════════════════════════════════════════

   حدّ علوي أفتح وحدّ سفلي أغمق يعطيان اللوح سُمكاً.
   ينتقل عند المرور فيبدو أن الضوء تحرّك عليه. */

/* ملاحظة على backdrop-filter — لا تُضِفه هنا:
   خلفية الصفحة مسطّحة وداكنة وليس تحتها إلا ثلاث
   هالات متدرّجة ناعمة. تضبيب تدرّج ناعم يعطي التدرّج
   نفسه تقريباً — كلفة كاملة بلا فرق مرئي. الضباب
   يُستعمل فوق الصور وحدها، حيث تحته تفاصيل فعلية.

   ما يجعل السطح يُقرأ زجاجاً على خلفية كهذه شيئان:
   الحواف والحبيبات. */

.glass-i {
  position: relative;
  isolation: isolate;

  /* تعبئة كحلية بمزاج مزرقّ — بطلب المالك، ليأخذ
     السطحُ طابعَ بطاقات الواجهة.

     لماذا ليست قيمة بطاقات الواجهة حرفياً:
     تلك rgba(7,24,40,.62) وهي تعمل هناك لأنها فوق
     صورة السفينة — خلفها شيء يُرى من خلالها. أما فوق
     خلفية الصفحة المسطّحة #04121f فتُركّب إلى #061625،
     أي تمايز 1.034:1 عن الخلفية — البطاقة تذوب ولا
     يبين لها حدّ.

     القيمة أدناه تُركّب إلى #0e2844، أي تمايز 1.265:1
     — أوضح حتى من التعبئة البيضاء السابقة (1.228:1)
     مع بقاء المزاج كحلياً. النص --text-dim عليها
     يقيس 9.8:1، وهو ضعف حدّ AA. */
  background-color: rgba(56,68,84,.72);

  background-image:
    /* ١ · حبيبات الصقيع — أهم إشارة مفردة أن هذا زجاج
         مطفي لا لوح ملوّن. SVG مضمّن كـ data: فلا طلب
         شبكة ولا مورد خارجي، ويمرّ تحت img-src 'self' data: */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),

    /* ٢ · الضوء يسقط من الأعلى ويخفت للأسفل.
       خُفِّض من .13/.04 بعد قياس التباين في أعلى البطاقة:
       الشريط العلوي كان يهبط بـ --text-mute إلى 3.88:1
       وبـ --orange إلى 4.21:1 في بطاقة قصيرة، أي تحت
       حدّ 4.5:1. المظهر لا يخسر شيئاً — الضوء الأبيض فوق
       كحليّ مشبع يُقرأ أقوى منه فوق رماديّ مزرقّ. */
    linear-gradient(180deg,
      rgba(255,255,255,.08)  0%,
      rgba(255,255,255,.035) 34%,
      rgba(255,255,255,0)    72%),

    /* ٣ · وهج بارد عند الحافة العليا — الزجاج ليس محايد
         اللون، ومسحة زرقاء باردة هي ما يميّزه عن البلاستيك.
         مركزه في المنتصف فلا يحتاج قلباً مع اتجاه اللغة */
    radial-gradient(130% 68% at 50% -8%,
      rgba(168,214,255,.10),
      transparent 68%);

  background-size: 140px 140px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, normal, normal;

  border: 1px solid rgba(255,255,255,.16);

  box-shadow:
    inset 0  1px 0    rgba(255,255,255,.30),   /* الحافة العليا اللامعة */
    inset 0 -1px 0    rgba(0,0,0,.38),         /* الحافة السفلى الغائرة */
    inset 0  0   0 1px rgba(255,255,255,.045), /* سُمك اللوح */
    inset 0 22px 34px -26px rgba(255,255,255,.10), /* انكسار داخلي علوي — خُفِّض مع التدرّج أعلاه */
    0 10px 30px rgba(0,0,0,.30);               /* اللوح يطفو */

  transition:
    transform    var(--t-base) var(--ease),
    box-shadow   var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}

/* عند المرور يقترب اللوح من الضوء: الحافة تشتدّ
   والظلّ يتعمّق ويتّسع */
.glass-i:hover {
  border-color: rgba(255,255,255,.26);
  box-shadow:
    inset 0  1px 0    rgba(255,255,255,.42),
    inset 0 -1px 0    rgba(0,0,0,.40),
    inset 0  0   0 1px rgba(255,255,255,.07),
    inset 0 22px 34px -26px rgba(255,255,255,.24),
    0 18px 46px rgba(0,0,0,.36);
}

/* البطاقات فوق الصور تحمل ضباباً حقيقياً أصلاً —
   لا تُلمس تعبئتها كي يبقى النص مقروءاً فوق الحمولة
   المضيئة، لكنها تأخذ الحواف والحبيبات */
.gcard.glass-i {
  background-color: rgba(7,24,40,.62);
}

/* ── استرجاع البرتقالي المطموس ──
   ثلاث لمسات برتقالية مكتوبة في dark.css بمحدِّدات مساوية
   لـ .glass-i، وهذا الملفّ لاحق فطمسها كلها. تعود هنا
   بمحدِّد أقوى بلا !important — وأهميتها ازدادت الآن، إذ
   صارت الشيء الوحيد الذي يكسر كحليّ الألواح. */

/* البطاقة البارزة: مسحتها وحدّها البرتقاليان */
.dcard-accent.glass-i {
  background-color: rgba(255,145,76,.10);
  border-color: rgba(255,145,76,.34);
}

/* شريط التنبيه البرتقالي — محاه اختصار border في .glass-i
   لأنه يصفّر الجهة المنطقية */
.callout.glass-i {
  border-inline-start: 3px solid var(--orange);
}

/* حافّة المرور البرتقالية */
.ccard.glass-i:hover,
.pcard.glass-i:hover {
  border-color: var(--orange);
}

/* ════════════════════════════════════════════════
   ٣ · بريق يتبع المؤشّر
   ════════════════════════════════════════════════

   محصور في أجهزة الفأرة. اللمس لا مؤشّر عنده،
   وتشغيله هناك يعني إعادة رسم بلا سبب. */

@media (hover: hover) and (pointer: fine) {

  .glass-i::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-base) var(--ease);
    /* خُفِّضت النواة من .14: بريق أبيض فوق نصّ فاتح على
       سطح داكن يخفض التباين حيث يقف المؤشّر بالضبط.
       عند .10 يبقى --text-mute فوق 4.5:1 في متن البطاقة. */
    background: radial-gradient(
      220px circle at var(--gx) var(--gy),
      rgba(255,255,255,.10),
      rgba(255,255,255,.035) 42%,
      transparent 68%
    );
  }

  .glass-i:hover::after { opacity: 1; }

  /* ── إمالة خفيفة نحو المؤشّر ──
     على الأسطح الخالية من backdrop-filter فقط.
     تمييل سطح مضبّب يجبر المتصفّح على إعادة حساب
     الضباب كل إطار — أغلى شيء يمكن فعله هنا. */

  .dcard:hover,
  .ccard:hover,
  .pcard:hover {
    transform:
      perspective(900px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      translateY(-5px);
  }

  /* الضغط يغلب المرور — يجب أن يأتي بعده */
  .dcard:active,
  .ccard:active,
  .pcard:active {
    transform:
      perspective(900px)
      rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg))
      scale(.988);
    transition-duration: var(--t-press);
  }
}

/* ════════════════════════════════════════════════
   ٤ · لمعة تمرّ على اللوح عند دخوله الشاشة
   ════════════════════════════════════════════════

   مرة واحدة لكل بطاقة عند أول ظهور، كأن الضوء
   انعكس على الحافة أثناء دخولها.

   تُحرَّك background-position لا transform: العنصر
   الزائف لو تحرّك بـ transform لخرج من حدود البطاقة
   واحتاج overflow: hidden على الأب — وهذا يقصّ
   الأزرار الدائرية المطلقة داخل .ccard. */

.glass-i::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(
    105deg,
    transparent            34%,
    rgba(255,255,255,.10)  43%,
    rgba(255,255,255,.30)  50%,   /* نواة ساطعة تجعلها ضوءاً لا ضبابة */
    rgba(255,255,255,.10)  57%,
    transparent            66%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
}

/* التأخير يكتبه glass.js لكل بطاقة حسب ترتيبها في
   الدفعة الداخلة، فتمرّ اللمعة موجةً واحدة على القسم
   بدل أن تلمع ثماني بطاقات في اللحظة نفسها — وذاك
   ما يجعل الصفحة تبدو شاشة تحميل. */
.reveal.in.glass-i::before,
.glass-i.lit::before {
  animation: g-sheen 1.15s var(--ease-out) var(--sheen-d, .18s) 1 both;
}

@keyframes g-sheen {
  0%   { opacity: 0; background-position: 130% 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

/* بالعربية يمرّ الضوء بالاتجاه المعاكس ليتبع القراءة */
html[dir="rtl"] .glass-i::before { background-position: -30% 0; }

html[dir="rtl"] .reveal.in.glass-i::before,
html[dir="rtl"] .glass-i.lit::before {
  animation-name: g-sheen-rtl;
}

@keyframes g-sheen-rtl {
  0%   { opacity: 0; background-position: -30% 0; }
  22%  { opacity: 1; }
  100% { opacity: 0; background-position: 130% 0; }
}

/* اللوح العريض يأخذ المادة ولا يأخذ اللمعة: تحته شلال
   .flow يمتدّ إلى 1.9 ثانية، وتأثيران متزامنان على أعرض
   سطح في الصفحة يُقرآن شاشة تحميل. الزينة تتنحّى. */
.chart-wide.glass-i.lit::before,
html[dir="rtl"] .chart-wide.glass-i.lit::before { animation: none; }

/* ════════════════════════════════════════════════
   ٥ · إصلاحات في السطح الموجود
   ════════════════════════════════════════════════ */

/* الهيدر كان ينقل backdrop-filter انتقالياً — أي
   إعادة حساب ضباب بعرض الشاشة كل إطار أثناء تبديل
   حالة التمرير. الضباب يظهر فوراً، والخلفية والحدّ
   وحدهما ينتقلان. */
.hdr {
  transition:
    background-color var(--t-base) var(--ease),
    border-color     var(--t-base) var(--ease);
}

/* شارة السهم تستجيب عند مرور البطاقة كلها لا عند
   مرورها هي وحدها — الزائر يمرّ على البطاقة لا على
   الشارة بحجم ٥٢ بكسل */
.ccard:hover  .circle-btn,
.dcard:hover  .circle-btn,
.pcard:hover  .circle-btn {
  background: var(--orange);
  border-color: var(--orange);
  color: #08151f;
}

/* البطاقات التي لا رابط فيها لا يجوز أن ترتفع —
   الارتفاع وعد بأن هنا شيئاً يُضغط */
.gcard { transition: background-color var(--t-base) var(--ease); }
.gcard:hover { transform: none; }
.gcard:has(a):hover { transform: translateY(-3px); }

/* ════════════════════════════════════════════════
   ٦ · احترام تقليل الحركة
   ════════════════════════════════════════════════

   ينطفئ كل شيء: الإمالة والبريق واللمعة والانضغاط.
   الحالات اللونية تبقى — هي معلومة لا زينة. */

@media (prefers-reduced-motion: reduce) {

  .glass-i,
  .glass-i:hover,
  .glass-i:active {
    transform: none !important;
    transition: none !important;
  }

  .glass-i::before,
  .glass-i::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .pill:active,
  .circle-btn:active,
  .chip:active,
  .nav a:active,
  .dcard:active,
  .ccard:active,
  .pcard:active {
    transform: none;
  }
}