/* ============================================================
   RTL + Arabic overrides. Loaded only by index-ar.html, after om.css.
   Most of the layout already uses logical properties (padding-inline,
   margin-inline, text-align: start) and flips for free — what remains
   is typography, the decorative pieces pinned with left/right, and the
   hero video's framing.
   ============================================================ */

/* ---------- typography ----------
   Space Grotesk and Instrument Serif have no Arabic coverage, so headings
   and the accent runs both fall back to IBM Plex Sans Arabic. The accent
   keeps its amber colour and picks up weight instead of a serif italic. */
[dir="rtl"] body {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] .h2,
[dir="rtl"] .contact h2,
[dir="rtl"] .svc-card h3,
[dir="rtl"] .work-body h3,
[dir="rtl"] .step p:first-child,
[dir="rtl"] .hero-stats strong,
[dir="rtl"] .avatar {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}

[dir="rtl"] em.accent {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  color: var(--amber);
}

/* Arabic is a connected script — tracking breaks the joins. Reset every
   place om.css adds letter-spacing, but keep it on Latin-only chips. */
[dir="rtl"] h1,
[dir="rtl"] .h2,
[dir="rtl"] .contact h2,
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-kicker,
[dir="rtl"] .work-kind,
[dir="rtl"] .footer-head {
  letter-spacing: normal;
}

/* Arabic glyphs sit taller than Latin; a little extra leading stops the
   headline descenders from crowding. */
[dir="rtl"] h1 {
  line-height: 1.25;
}

[dir="rtl"] .h2,
[dir="rtl"] .contact h2 {
  line-height: 1.35;
}

/* ---------- hero ----------
   The scrim is a directional gradient: dense behind the copy, clear over
   the subject. In RTL the copy moves to the right, so the gradient flips. */
[dir="rtl"] {
  --hero-scrim: linear-gradient(270deg, rgba(244, 248, 255, .94) 0%, rgba(244, 248, 255, .82) 42%, rgba(244, 248, 255, .15) 75%, rgba(244, 248, 255, 0) 100%);
}

html[data-theme="dark"][dir="rtl"] {
  --hero-scrim: linear-gradient(270deg, rgba(10, 20, 38, .94) 0%, rgba(10, 20, 38, .82) 42%, rgba(10, 20, 38, .15) 75%, rgba(10, 20, 38, 0) 100%);
}

/* The clip's subject sits on the right of frame, which is where the Arabic
   copy now lives — so the video is mirrored to move the subject left.

   Mapping, with element width W: scale(-1.18) about the left edge sends
   x to -1.18x (entirely off-screen), so the translateX(100%) that follows
   brings it back: f(x) = W - 1.18x. That puts original x=0 at the right
   edge, mirrors the frame, and pushes everything past x=0.847 off the left
   edge — which is where the generator's watermark (x 0.89-0.94) lives.
   A bare scale(-1.18) with any single origin cannot do this: negative
   scaling about an edge maps the whole element outside the container. */
[dir="rtl"] .hero video {
  transform: translateX(100%) scale(-1.18, 1.18);
  transform-origin: left top;
}

/* Blob positions are decorative and pinned in percentages — one mirror
   on the container is cheaper than restating each. */
[dir="rtl"] .hero-blobs {
  transform: scaleX(-1);
}

/* ---------- about map ----------
   Pins are absolutely positioned; .map-far and the labels need their
   inline axis swapped. The pin-sm coordinates are set inline in the
   Arabic markup, so only the class-level ones are restated here. */
[dir="rtl"] .ring,
[dir="rtl"] .pin-hq {
  left: auto;
  right: 44%;
}

[dir="rtl"] .pin span {
  left: auto;
  right: 10px;
}

[dir="rtl"] .pin-hq span {
  left: auto;
  right: 12px;
}

[dir="rtl"] .map-far {
  left: auto;
  right: 78%;
}

/* ---------- misc ----------
   Latin-only chips keep their own direction so mixed runs don't reorder. */
[dir="rtl"] .work-tags span,
[dir="rtl"] .lang .on,
[dir="rtl"] .lang .off,
[dir="rtl"] .lang-btn {
  direction: ltr;
}

/* Figures like "10+" are a neutral sign next to digits, which the bidi
   algorithm will reorder against the surrounding Arabic. Pinning the run
   to LTR makes them render exactly as authored, matching the English page. */
[dir="rtl"] .hero-stats strong {
  direction: ltr;
  unicode-bidi: isolate;
}