/* ═══════════════════════════════════════════════════════════════════════════
   SYANAT — Arabic / RTL layer
   Loaded only by /ar/, always AFTER main.css. Two jobs, kept apart:

   1. Direction flips. main.css was swept for physical properties that have a
      logical equivalent (margin-inline-*, border-inline-*, inset-inline-*),
      so those now mirror on their own. What remains here are the rules whose
      *meaning* is directional and which have no logical form — gradient
      angles, transform-origin, absolute side offsets, a mirrored video.

   2. Arabic typography. The brand book's type spec is built for Latin and
      breaks on Arabic: negative tracking prises apart a connected script, and
      the display line-heights (.96–1.02) clip Arabic descenders outright.

   Specificity note: every selector here is at least [attr] + class, so it also
   outranks main.css's media-query rules. Any breakpoint override that touches
   a property flipped here has to be restated inside a matching @media block —
   see the responsive section at the foot of this file.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* The Arabic face, in one place. Swapping it is a change to this line plus
     the <link> in ar/index.html — nothing else in the stylesheet names it. */
  --font-ar: "Tajawal";
}

/* ═══ Arabic typography ═══════════════════════════════════════════════════ */

/* Outfit is deliberately FIRST. It carries no Arabic glyphs, so Arabic text
   falls through to --font-ar automatically, while SYANAT, the 01/02/03
   numerals, the phone number and the email keep the brand Latin face and its
   tabular figures. Latin and Arabic each get the right typeface with no
   per-element tagging. */
[lang="ar"] body{
  font-family:"Outfit", var(--font-ar), "Geeza Pro", system-ui, sans-serif;
  font-size:18px;
  line-height:1.85;
  /* No faux bold. Synthesised weight thickens Arabic strokes unevenly and
     visually breaks the joins, so a missing weight must resolve to a real cut
     of the family rather than a smeared imitation of one. */
  font-synthesis:none;
}

/* Tajawal ships 200/300/400/500/700/800/900 — there is no 600, which is the
   weight the brand book specifies for both display and headings. The font
   matcher would round up to 700 on its own; saying so explicitly keeps the
   substitution visible rather than incidental. 500 (labels, nav, buttons) and
   400 (body) both exist natively and need no mapping. */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3{ font-weight:700; }

/* Tracking. Arabic is a connected script: letter-spacing inserts gaps at the
   joins and dismantles the word. The brand book's −4% display / −3% heading
   tracking is worse still, collapsing glyphs into each other.

   Zeroed only where Arabic actually renders. The digit-only elements
   (.stage__num, .rail__item, .svc__num, .why__n, .ind__n) declare their own
   +24% in main.css and are left untouched, so the Swiss numeral treatment
   survives intact. .loader__pct is the one exception — it inherits .label. */
[lang="ar"] body,
[lang="ar"] .label,
[lang="ar"] .btn,
[lang="ar"] .nav__links a,
[lang="ar"] .stage__title,
[lang="ar"] .sechead__title,
[lang="ar"] .svc__title,
[lang="ar"] .why__item h3,
[lang="ar"] .ind__name,
[lang="ar"] .about__title,
[lang="ar"] .cta__title{ letter-spacing:normal; }

[lang="ar"] .loader__pct{ letter-spacing:.24em; }   /* digits — tracking stays */

/* Leading. Every display line-height in main.css sits at or below 1.1, which
   is tuned to Latin x-height; Arabic descenders and diacritics need real room
   or they collide with the line beneath. */
[lang="ar"] .stage__title { line-height:1.2; }
[lang="ar"] .sechead__title{ line-height:1.24; }
[lang="ar"] .about__title  { line-height:1.26; }
[lang="ar"] .cta__title    { line-height:1.22; }
[lang="ar"] .svc__title    { line-height:1.34; }
[lang="ar"] .why__item h3  { line-height:1.4; }
[lang="ar"] .ind__name     { line-height:1.4; }
[lang="ar"] .label         { line-height:1.5; font-size:12px; }

/* Arabic carries no capitals and reads at a smaller effective height than
   Latin at the same point size, so the small sizes come up a step. */
[lang="ar"] .stage__body   { line-height:1.8; }
[lang="ar"] .svc__body     { font-size:16.5px; line-height:1.8; }
[lang="ar"] .why__item p   { font-size:15.5px; line-height:1.75; }
[lang="ar"] .about__body   { line-height:1.85; max-width:46ch; }
[lang="ar"] .cta__contact a,
[lang="ar"] .cta__contact span:not(.label){ font-size:16.5px; line-height:1.75; }
[lang="ar"] .footer__links a{ font-size:15px; }
[lang="ar"] .footer__legal  { font-size:13.5px; }

/* The masked line reveal. `.reveal .ln` pads its mask so overflow:hidden cannot
   slice a descender; .12em is enough for Latin, Arabic needs roughly double.
   Measured against real glyph ink rather than guessed: the deepest line on the
   page (the CTA's دعنا نعتني) spills .17em below its line box, so .22em only
   just cleared it. .26em restores real headroom and costs nothing — the
   negative margin cancels it, so layout metrics are identical either way.
   Paired with the yPercent travel in main.js (145): the span has to clear a
   mask that is now taller. Change one, change the other. */
[lang="ar"] .reveal .ln{ padding-bottom:.26em; margin-bottom:-.26em; }

/* Two reserved lines, recomputed at the Arabic line-height (2 × 1.34em). */
[lang="ar"] .svc__title{ min-height:2.7em; }

/* "01 / 03" is a numeric expression and stays LTR, but it belongs at the start
   of the RTL line — which flex-end is, once the box itself reads LTR. */
[dir="rtl"] .stage__num{ direction:ltr; justify-content:flex-end; }

/* ═══ Direction flips ═════════════════════════════════════════════════════ */

/* Hero scrim: the dark wash sits under the copy, which has moved to the right. */
[dir="rtl"] .hero__scrim{
  background:
    linear-gradient(to left, rgba(10,10,12,.72) 0%, rgba(10,10,12,.42) 34%, rgba(10,10,12,0) 62%),
    linear-gradient(to bottom, rgba(10,10,12,.5) 0%, rgba(10,10,12,0) 26%, rgba(10,10,12,0) 68%, rgba(10,10,12,.42) 100%);
}

/* Progress rail and scroll hint swap sides with the reading direction. */
[dir="rtl"] .rail     { right:auto; left:var(--gutter); }
[dir="rtl"] .scrollhint{ left:auto; right:var(--gutter); }

/* The hint's sweep should travel with the reading direction, not against it. */
@keyframes sweep-rtl{
  0%{ transform:translateX(100%) } 55%,100%{ transform:translateX(-100%) }
}
[dir="rtl"] .scrollhint__line::after{ animation-name:sweep-rtl; }

/* main.css mirrors this clip because the sculpture sits right-of-centre in the
   source — exactly where the LTR copy column goes. In RTL the grid moves the
   copy to the left, so the flip would drop the sculpture straight back under
   the text it was added to clear. Un-mirror it: the source framing is already
   correct for this direction. */
[dir="rtl"] .why__video{ transform:none; }

/* …and the white veil follows the copy to the other side. */
[dir="rtl"] .why__scrim{
  background:linear-gradient(to right,
    #fff 0%, rgba(255,255,255,.97) 33%, rgba(255,255,255,.74) 45%,
    rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 66%);
}

/* Industries: the glow is placed to sit behind the headline, which has moved
   across, so 34% becomes its mirror. The ink veil beneath is vertical and is
   restated only because `background` is one shorthand. */
[dir="rtl"] .industries::before{
  background:
    radial-gradient(circle 900px at 66% -4%,
      rgba(27,54,196,.42) 0%, rgba(27,54,196,0) 62%),
    linear-gradient(180deg,
      rgba(10,10,12,.72) 0%, rgba(10,10,12,.78) 34%,
      rgba(10,10,12,.86) 62%, rgba(10,10,12,.90) 100%);
}

/* The CTA glow is anchored off one edge; mirror the anchor and its offset. */
[dir="rtl"] .cta__glow{
  left:auto; right:50%;
  margin-left:0; margin-right:min(-550px,-60vw);
}

/* Rules, underlines and fills all draw from the reading edge. GSAP writes only
   `transform` for these, so the origin stays CSS's to set. */
[dir="rtl"] .rail__line i,
[dir="rtl"] .svc__num::after,
[dir="rtl"] .why__item::before,
[dir="rtl"] .ind::after{ transform-origin:right; }
[dir="rtl"] .scrollbar i{ transform-origin:right center; }

[dir="rtl"] .nav__links a::after      { transform-origin:left; }
[dir="rtl"] .nav__links a:hover::after{ transform-origin:right; }

/* Contact links underline from the reading edge outward. */
[dir="rtl"] .cta__contact a{ background-position:100% 100%; }

/* The button's hover sheen is a diagonal; mirror its angle (360 − 120). */
[dir="rtl"] .btn::after{ background:linear-gradient(240deg,#2643DB,#1B36C4 55%); }

/* ═══ Responsive — restating the breakpoint overrides ═════════════════════
   The rules above outrank main.css's media queries on specificity alone, so
   any breakpoint that re-styles a flipped property has to be repeated here. */
@media (max-width:820px){
  /* Stacked hero: the scrim becomes purely vertical, with no side to mirror. */
  [dir="rtl"] .hero__scrim{
    background:linear-gradient(to bottom, rgba(10,10,12,.58) 0%, rgba(10,10,12,.12) 30%, rgba(10,10,12,.55) 72%, rgba(10,10,12,.88) 100%);
  }
  /* Rail and hint swap to a bottom row — and mirror against the LTR layout. */
  [dir="rtl"] .rail     { left:auto; right:var(--gutter); }
  [dir="rtl"] .scrollhint{ right:auto; left:var(--gutter); }
  /* Video is a band at the top; the veil fades downward, again with no side. */
  [dir="rtl"] .why__scrim{
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.05) 52%,
      rgba(255,255,255,.72) 85%, #fff 100%);
  }
  /* Stacked: nothing left to align against, matching main.css. */
  [lang="ar"] .svc__title{ min-height:0; }
}