/* ═══════════════════════════════════════════════════════════════════════════
   sketch — Modes
   الأطروحة: الواجهة نفسها تُثبت «من خربشة، إلى نظام».

   .mode-sketch  → حواف مهتزّة، ميلان، ورق مسطّر، لا شبكة
   .mode-system  → حواف حادّة، شبكة بلوبرنت، علامات قياس، تعليقات أبعاد

   الانتقال بينهما مُتحرَّك — المستخدم يشوف الخربشة تتحوّل لنظام أمامه.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --mode-dur:  .9s;
  --paper-tex: 0;      /* شدّة نسيج الورق */
  --jitter:    0deg;   /* ميلان البطاقات */
  --edge:      1;      /* حدّة الحدود */
}

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ── مفتاح التبديل ──────────────────────────────────────────────────────── */
/**
 * اللون معلن صراحةً كبقيّة عناصر الترويسة.
 *
 * كان المفتاح وحده بلا لون، فيرث حبر الجسم الداكن. وحدوده مبنية على
 * currentColor والخيار غير النشط يرث اللون نفسه — فكان الإطار و«خربشة»
 * داكنَين على الهيرو الداكن، أي غير مرئيَّين أصلًا. لم يُلاحَظ ذلك لأن
 * الخيار النشط يأخذ لونًا فاتحًا فوق الحبّة البنفسجية فيظهر وحده.
 */
.mode-switch{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid currentColor; border-radius:999px; padding:3px;
  font-family:var(--font-mono); direction:ltr; font-size:10px; letter-spacing:.06em;
  position:relative; isolation:isolate;
  color:var(--paper);
  transition:color var(--dur-base) ease;
}
/* عند التمرير تصير الترويسة فاتحة، فيعود الحبر داكنًا */
.site-header.is-scrolled .mode-switch{ color:var(--ink); }
.mode-switch button{
  padding:6px 12px; border-radius:999px; color:inherit; opacity:.55;
  transition:opacity var(--dur-fast) ease, color var(--dur-fast) ease;
  white-space:nowrap; position:relative; z-index:1;
}
.mode-switch button[aria-pressed="true"]{ opacity:1; color:var(--paper); }
.site-header.is-scrolled .mode-switch button[aria-pressed="true"]{ color:var(--paper); }

/* الحبّة المنزلقة — تتحرك بين الخيارين */
.mode-switch::after{
  content:''; position:absolute; z-index:0; inset:3px auto 3px 3px;
  width:calc(50% - 3px); border-radius:999px; background:var(--violet);
  transition:transform var(--dur-base) var(--ease-spring);
}
/**
 * الحبّة تبدأ فوق «خربشة» (inset-inline-start:3px)، وتنزلق عرض نفسها
 * لتغطّي «نظام».
 *
 * كانت الإشارة سالبة، فتخرج الحبّة من المفتاح كلّه وتستقرّ فوق زرّ
 * لوحة الأوامر المجاور. والمفتاح مضبوط على direction:ltr، فالموجب
 * يعني «يمينًا» أي نحو الخيار الثاني.
 */
html.mode-sketch .mode-switch::after{ transform:translateX(0); }
html.mode-system .mode-switch::after{ transform:translateX(100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   وضع الخربشة
   ═════════════════════════════════════════════════════════════════════════ */
html.mode-sketch{
  --paper-tex: .5;
  --jitter: .35deg;
  --edge: 0;
}

/* ورق مسطّر خفيف — خلف المحتوى فعلًا لا فوقه.
   ‏z-index سالب يُنزلها تحت طبقة الأقسام، وشفافية خلفية body تجعلها
   مرئية فوق لون html. كانت بـ z-index يساوي صفرًا فترسم فوق النصّ —
   وهو الخلل نفسه الذي أدّى إلى إزالة شبكة البلوبرنت. */
html.mode-sketch body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--paper-tex);
  background-image:repeating-linear-gradient(
    to bottom, transparent, transparent 27px, color-mix(in srgb, var(--line) 55%, transparent) 28px
  );
  mask-image:linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  transition:opacity var(--mode-dur) var(--ease);
}
html.mode-system body::before{ opacity:0; }

/* لون الصفحة ينتقل إلى html كي تظهر طبقة الورق بينهما */
html.mode-sketch body{ background-color:transparent; }

/* البطاقات: الحد الحاد يُستبدل بطبقة مهتزّة */
.svc-row, .product, .post-card, .pillar, .pf-row{
  position:relative;
  transition:transform var(--dur-fast) ease, border-color var(--dur-fast) ease,
             rotate var(--mode-dur) var(--ease-spring);
}

html.mode-sketch .product,
html.mode-sketch .post-card{
  border-color:transparent;
  rotate:calc(var(--jitter) * var(--sign, 1));
}
html.mode-sketch .product::after,
html.mode-sketch .post-card::after{
  content:''; position:absolute; inset:-2px; pointer-events:none;
  border:1.6px solid var(--ink);
  filter:url(#fx-rough);
  opacity:.85;
  animation:edge-in .5s var(--ease) backwards;
}
html.mode-sketch .product:hover::after,
html.mode-sketch .post-card:hover::after{ border-color:var(--violet); }

@keyframes edge-in{ from{ opacity:0; } }

/* الصفوف: الفاصل الحاد يصير خطًا مرسومًا بدل إطار كامل */
html.mode-sketch .svc-row, html.mode-sketch .pf-row{ border-bottom-color:transparent; }
html.mode-sketch .svc-row::before, html.mode-sketch .pf-row::before{
  content:''; position:absolute; inset-inline:0; bottom:-1px; height:2px;
  background:currentColor; opacity:.28; filter:url(#fx-ink); pointer-events:none;
}
html.mode-sketch .services-list{ border-top-color:transparent; }

/* ميلان متبادل — بطاقة يمين وبطاقة يسار، زي ورق مبعثر */
.product:nth-child(even),
.post-card:nth-child(even){ --sign:-1; }

/* أعمدة intro: الفواصل الحادة تصير خطوط مرسومة */
html.mode-sketch .intro-pillars{ background:transparent; border-color:transparent; gap:14px; }
html.mode-sketch .pillar{ rotate:calc(var(--jitter) * .6 * var(--sign, 1)); }
html.mode-sketch .pillar::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1.4px solid var(--ink); filter:url(#fx-rough); opacity:.7;
}
html.mode-sketch .pillar:nth-child(even){ --sign:-1; }

/* شريط لاصق فوق البطاقات — لمسة الدفتر */
html.mode-sketch .pillar::before{
  content:''; position:absolute; top:-9px; inset-inline-start:22px;
  width:42px; height:16px; z-index:2;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--violet) 22%, transparent) 0 3px,
    color-mix(in srgb, var(--violet) 8%, transparent) 3px 6px);
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  rotate:-4deg;
  animation:tape-in .45s var(--ease-spring) backwards;
}
@keyframes tape-in{ from{ opacity:0; scale:.6; } }

/* ═══════════════════════════════════════════════════════════════════════════
   وضع النظام
   ═════════════════════════════════════════════════════════════════════════ */
html.mode-system{ --paper-tex:0; --jitter:0deg; --edge:1; }

/* ═══════════════════════════════════════════════════════════════════════════
   أُزيلت شبكة البلوبرنت — أغسطس ٢٠٢٦
   ═══════════════════════════════════════════════════════════════════════════

   كانت طبقة «position:fixed; inset:0; z-index:0» تغطّي الشاشة كاملةً.

   والخلل أنها كانت تُرسم **فوق** المحتوى لا خلفه: العنصر الثابت بـ
   z-index يساوي صفرًا يُنشئ سياق تراص في الطبقة نفسها التي ترسم فيها
   الأقسام (position:relative بـ z-index تلقائي)، وترتيب DOM هو الفاصل —
   و «‎::after» آخر أبناء body، فيعلو كل ما سبقه.

   ولأنها ثابتة لا تتحرّك مع التمرير، كان المحتوى ينزلق تحت شبكة ساكنة،
   فيقرأه العين تشوّهًا لا زخرفة.

   لم تُعالَج بترتيب الطبقات بل أُزيلت: طبقة تغطّي كل شاشة لا تحمل معلومة،
   وتزاحم النصّ على الانتباه. وتمييز «وضع النظام» باقٍ بما هو أدلّ منها:
   الحواف الحادّة، وعلامات القياس بالزوايا، وتعليقات الأبعاد.
   ═════════════════════════════════════════════════════════════════════════ */

/* علامات القياس (crosshair) بزوايا البطاقات — توقيع البلوبرنت */
html.mode-system .svc-row::before,
html.mode-system .pf-row::before{
  content:''; position:absolute; top:-1px; inset-inline-start:-1px;
  width:11px; height:11px; pointer-events:none;
  background:
    linear-gradient(var(--violet), var(--violet)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--violet), var(--violet)) 50% 0 / 1px 100% no-repeat;
  opacity:.9; animation:xh-in .5s var(--ease) .25s backwards;
}
html.mode-system .svc-row::after,
html.mode-system .pf-row::after{
  content:''; position:absolute; bottom:-1px; inset-inline-end:-1px;
  width:11px; height:11px; pointer-events:none;
  background:
    linear-gradient(var(--violet), var(--violet)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--violet), var(--violet)) 50% 0 / 1px 100% no-repeat;
  opacity:.9; animation:xh-in .5s var(--ease) .35s backwards;
}
@keyframes xh-in{ from{ opacity:0; } }

/* تعليقات الأبعاد — تظهر على البطاقة المُمرَّر عليها، زي مخطط هندسي */
html.mode-system .svc-row{ --dim:''; }
html.mode-system .svc-row:hover::before{ opacity:1; }

.dim-note{
  position:absolute; inset-inline-end:10px; top:8px;
  font-family:var(--font-mono); direction:ltr; font-size:8.5px; letter-spacing:.08em;
  color:var(--violet); opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast) ease;
}
html.mode-system .svc-row:hover .dim-note,
html.mode-system .pf-row:hover .dim-note{ opacity:.85; }

/* ═══════════════════════════════════════════════════════════════════════════
   الانتقال بين الوضعين — View Transitions
   ═════════════════════════════════════════════════════════════════════════ */
@supports (view-transition-name: none){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:var(--mode-dur);
    animation-timing-function:var(--ease);
  }
  ::view-transition-old(root){ animation-name:mode-out; }
  ::view-transition-new(root){ animation-name:mode-in; }

  @keyframes mode-out{ to{ opacity:0; filter:blur(2px); } }
  @keyframes mode-in{ from{ opacity:0; filter:blur(2px); } }
}

/* ═══ احترام تقليل الحركة ═══ */
@media (prefers-reduced-motion: reduce){
  html.mode-sketch .svc-row,
  html.mode-sketch .product,
  html.mode-sketch .post-card,
  html.mode-sketch .pillar{ rotate:0deg !important; }

  html.mode-system .svc-row::before, html.mode-system .svc-row::after,
  html.mode-system .pf-row::before,  html.mode-system .pf-row::after{ animation:none; opacity:.9; }
  html.mode-sketch .svc-row::after, html.mode-sketch .pillar::before{ animation:none; }

  ::view-transition-old(root), ::view-transition-new(root){ animation:none !important; }
}

/* المرشّحات مكلفة على الأجهزة الضعيفة — نلغيها بالشاشات الصغيرة جدًا */
@media (max-width:520px){
  html.mode-sketch .svc-row::after,
  html.mode-sketch .product::after,
  html.mode-sketch .post-card::after,
  html.mode-sketch .pillar::after{ filter:none; }
}