/* ==========================================================================
   Arabic edition — RTL overrides
   Loaded only by index-ar.html, after tokens/base/sections. Flex and grid
   mirror on their own under dir="rtl"; these rules cover what doesn't:
   physical left/right properties, grow-in transform origins and the two
   decorative pieces that must stay LTR.
   ========================================================================== */

:root {
  --font-display: "Almarai", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
}

/* Tracking breaks Arabic cursive joins. */
[dir="rtl"] * {
  letter-spacing: 0 !important;
}

/* Arabic script needs more leading than the condensed Latin ramp. */
[dir="rtl"] body {
  line-height: 1.75;
}
[dir="rtl"] .hero__title {
  line-height: 1.22;
}
[dir="rtl"] .section-title {
  line-height: 1.3;
}
[dir="rtl"] .lead {
  line-height: 1.9;
}

/* The preloader typewriter splits Arabic labels by word (waves.js), so the
   label flows RTL and writes right-to-left. The marquee is a looping
   translateX animation; pin its flow so the loop maths hold. */
[dir="rtl"] .record__marquee {
  direction: ltr;
}

/* Accents that grow in from the reading edge. */
[dir="rtl"] .eyebrow::before,
[dir="rtl"] .brandbar,
[dir="rtl"] .card::before,
[dir="rtl"] .progress,
[dir="rtl"] .header__nav a::after,
[dir="rtl"] .numbers__item::after {
  transform-origin: right;
}

/* Directional reveals mirror. */
.js[dir="rtl"] [data-reveal="left"] {
  translate: calc(var(--rise) * 1.4) 0;
}
.js[dir="rtl"] [data-reveal="right"] {
  translate: calc(var(--rise) * -1.4) 0;
}

/* Hero: the lockup divider and the legibility scrim swap sides with the copy. */
[dir="rtl"] .hero__lockup img + img {
  padding-left: 0;
  border-left: 0;
  padding-right: 1.4rem;
  border-right: 1px solid rgb(255 255 255 / 0.25);
}

[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to top, var(--ink) 1%, rgb(11 14 17 / 0.1) 38%, rgb(11 14 17 / 0.45)),
    linear-gradient(
      260deg,
      rgb(11 14 17 / 0.86) 0%,
      rgb(11 14 17 / 0.58) 34%,
      rgb(11 14 17 / 0.12) 62%,
      transparent 80%
    );
}

[dir="rtl"] .ribbon {
  right: auto;
  left: -6%;
  transform: scaleX(-1);
}

/* Timeline: rail and dots move to the right edge. */
[dir="rtl"] .timeline {
  padding-left: 0;
  padding-right: 2.5rem;
}
[dir="rtl"] .timeline::before,
[dir="rtl"] .timeline__rail {
  inset: 0.6rem 7px 0.6rem auto;
}
[dir="rtl"] .timeline__item::before {
  left: auto;
  right: -2.5rem;
}

[dir="rtl"] .horizon {
  border-left: 1px solid var(--hairline);
  border-right: 3px solid var(--yellow);
}

[dir="rtl"] .spectable th,
[dir="rtl"] .spectable td {
  text-align: right;
}

/* Fixed chrome mirrors. */
[dir="rtl"] .dock {
  right: auto;
  left: clamp(1rem, 3vw, 2rem);
}
[dir="rtl"] .skip-link {
  left: auto;
  right: 0;
}

/* Latin fragments inside Arabic copy (JED, WWE, FIFA, phone, email) read LTR. */
[dir="rtl"] [lang="en"],
[dir="rtl"] .field a[href^="tel:"],
[dir="rtl"] .field a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}