/* base.css — الخطوط، التصفير، الإيقاع العام، الوصولية */

/* ===== الخطوط المستضافة ذاتياً ===== */
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/Zain-300-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/Zain-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Zain-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Zain-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Zain-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Zain-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/Zain-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('../fonts/Zain-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/Zain-900-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Zain'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('../fonts/Zain-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/Tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/Tajawal-500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/Tajawal-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/Tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/IBMPlexMono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F;
}

/* ===== تصفير ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* حبيبات خفيفة — ملمس مادي للأسطح الداكنة */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--gold); color: var(--navy-900); }

/* ===== الوصولية ===== */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  top: -60px;
  z-index: 300;
  background: var(--gold);
  color: var(--navy-900);
  font-weight: 700;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-s);
  transition: top var(--d-fast) var(--ease-out);
}
.skip-link:focus-visible { top: var(--s-4); }

/* ===== الحاوية والإيقاع ===== */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: var(--sec-pad); }

/* ===== الطباعة ===== */
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.22; }
h1 { font-weight: 900; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-cap);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-deep);
}
.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }

/* ===== الظهور عند التمرير ===== */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}
.rv.in { opacity: 1; transform: none; }

/* خط ذهبي يُرسم تحت عناوين الأقسام */
.gold-rule {
  width: 72px;
  height: 2px;
  margin-block-start: var(--s-4);
  background: var(--gold);
  transform-origin: var(--rule-origin, right);
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out) 150ms;
}
.rv.in .gold-rule, .in .gold-rule { transform: scaleX(1); }

/* ===== تقليل الحركة ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: opacity 140ms linear; }
  .gold-rule { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ===== وضع اللقطات (?shot=1) — تثبيت كل شيء للفحص الآلي ===== */
html[data-shot] .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-shot] .gold-rule { transform: none !important; transition: none !important; }
html[data-shot] *, html[data-shot] *::before, html[data-shot] *::after {
  animation: none !important;
  transition: none !important;
}