/* ============================================================
   base.css — الضبط، الطباعة، قواعد العربية/RTL، الحبيبات، المؤشر
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

/* Lenis يتولّى التمرير الناعم — نعطّل تمرير المتصفح الأصلي */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* بلا Lenis (تقليل الحركة أو فشل التحميل) نعود للتمرير الأصلي */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

/* ============================================================
   الطباعة العربية — القواعد الحرجة
   ============================================================ */

html[lang="ar"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --fs-base: 1.07rem;     /* العربية أكبر بـ~12% عن اللاتينية */
  --lh-base: 1.85;        /* مساحة للنقاط والتشكيل */
}

html[lang="en"] {
  --font-display: var(--font-display-en);
  --font-body: var(--font-body-en);
  --fs-base: .95rem;
  --lh-base: 1.62;
}

/* ⚠️ العربية خط متّصل: أي letter-spacing يكسر اتصال الحروف. */
html[lang="ar"] * { letter-spacing: 0 !important; }

/* التتبّع السالب للعناوين مسموح في اللاتينية فقط */
html[lang="en"] .display { letter-spacing: -.03em; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  text-wrap: balance;
}
html[lang="ar"] .display { line-height: 1.24; font-weight: 800; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; text-wrap: balance; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.42; }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }

/* أي display صريح في CSS يتغلّب على [hidden] الافتراضي — نُلزمه.
   مهم: أيقونات التواصل تُخفى بـ hidden عند غياب الرابط. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }

/* أرقام لاتينية متساوية العرض */
.num, time, [data-count] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ============================================================
   الوصولية
   ============================================================ */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; top: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -140%);
  z-index: var(--z-loader);
  padding: var(--s-3) var(--s-6);
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ============================================================
   التخطيط
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * .6); }

/* ============================================================
   قلب الاتجاه — الأيقونات الاتجاهية فقط
   ============================================================ */
[dir="rtl"] .i-flip { transform: scaleX(-1); }

/* ============================================================
   طبقة الحبيبات السينمائية (Film grain)
   ============================================================ */
.grain {
  position: fixed; inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 700ms steps(1) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 1%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ============================================================
   المؤشر المخصّص (أجهزة المؤشر الدقيق فقط)
   ============================================================ */
.cursor, .cursor-dot { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block;
    position: fixed; top: 0; inset-inline-start: 0;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    z-index: var(--z-cursor);
    pointer-events: none;
    mix-blend-mode: difference;
    will-change: transform;
  }
  .cursor-dot {
    display: block;
    position: fixed; top: 0; inset-inline-start: 0;
    width: 5px; height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--accent);
    border-radius: 50%;
    z-index: var(--z-cursor);
    pointer-events: none;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) { .cursor, .cursor-dot { display: none !important; } }

/* ============================================================
   شاشة التحميل
   ============================================================ */
.loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  display: grid; place-items: center;
  background: var(--ink);
}
.loader__inner { display: grid; justify-items: center; gap: var(--s-6); }
.loader__mark { width: 66px; height: 66px; color: var(--accent); }
.loader__bar { width: min(240px, 50vw); height: 1px; background: var(--line); position: relative; overflow: hidden; }
.loader__fill { position: absolute; inset: 0; inset-inline-end: auto; width: 0; background: var(--accent); }
.loader__pct { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--muted); }

/* ============================================================
   كشف العناصر عند التمرير
   السلوك الافتراضي: مخفي. لو لم تُحمَّل GSAP أو كان
   تقليل الحركة مفعّلاً، تعرضها القاعدة الاحتياطية فوراً.
   ============================================================ */
[data-reveal] { opacity: 0; will-change: opacity, transform; }
html.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* أقنعة كشف الأسطر (تُبنى بـ SplitType) */
.line-mask { overflow: hidden; display: block; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   الطباعة على الورق
   ============================================================ */
@media print {
  .grain, .cursor, .cursor-dot, .loader, .site-header, .fab-stack, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}