/* ==========================================================================
   SALONI — Direction
   Naqsh is drawn on two hands. RTL and LTR are the two hands: ornament
   REFLECTS on the Y axis, it never rotates. (DESIGN.md §6)
   Layout itself uses logical properties everywhere, so this file only
   handles the things logical properties cannot express.
   ========================================================================== */

/* Arabic is the drawn original; the ornament set is authored RTL-first,
   so LTR is the mirrored hand. */
[dir="ltr"] .mirror { transform: scaleX(-1); transform-origin: center; }

/* The cone always points along the reading direction. The glyph is authored
   with its tip at the LEFT (the RTL/forward case), so LTR is the mirror.
   Note the hover nudge must be composed INSIDE the flip: transforms apply
   right-to-left, so under scaleX(-1) a negative translate reads as rightward. */
.cone { transform-origin: center; }
[dir="ltr"] .cone { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .cone { transform: translateX(-.28rem); }
[dir="ltr"] .btn:hover .cone { transform: scaleX(-1) translateX(-.28rem); }

/* The hero's drawn underline grows from the reading edge. */
[dir="rtl"] .hero__title em::after { transform-origin: right; }
[dir="ltr"] .hero__title em::after { transform-origin: left; }

/* The hero photograph fades on the edge that faces the copy. CSS gradients
   take no logical directions, so the side is named per direction. */
[dir="rtl"] { --scrim-to: right; }
[dir="ltr"] { --scrim-to: left; }

/* Connector vines are authored to travel right-to-left; flip the whole
   drawing (not its strokes) for Latin. */
[dir="ltr"] .connector svg,
[dir="ltr"] .hero__trace,
[dir="ltr"] .feature__trace svg { transform: scaleX(-1); }

/* The ledger's "old way -> Saloni" arrow follows the reading direction.
   The glyph is authored pointing right (the LTR case), so RTL is the flip. */
[dir="rtl"] .ledger__arrow svg { transform: scaleX(-1); }

/* A select that opts into LTR for its own content (the +971 dial code) must
   also move its arrow back to the trailing edge, which the ancestor RTL rule
   would otherwise keep on the left. */
.select[dir="ltr"] {
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  padding-inline-end: var(--s-8);
  padding-inline-start: var(--s-4);
}

/* Latin sits marginally smaller than Arabic at the same optical size. */
html[lang="en"] { --fs-hero: clamp(2.7rem, 6.8vw, 6.2rem); }

/* Arabic numerals stay Latin-figure and tabular so AR and EN totals
   align identically down the column. */
html[lang="ar"] .nums { font-family: var(--ff-body-en); }

/* Arabic text never gets tracking — it breaks the joins. */
html[lang="ar"] .btn,
html[lang="ar"] .badge,
html[lang="ar"] .seg__btn,
html[lang="ar"] .brand__name,
html[lang="ar"] .scroll-cue { letter-spacing: 0; }
html[lang="ar"] .btn { text-transform: none; font-size: var(--fs-sm); }

/* The wordmark is Latin in both languages, so it keeps its tracking. */
.brand__name { letter-spacing: .1em !important; }

/* Money and metrics stay in the Latin display face in both languages, so the
   figures are cut from the same drawing whichever language is on screen. */
html[lang="ar"] .plan__amount,
html[lang="ar"] .stat__value,
html[lang="ar"] .rep__big { font-family: var(--ff-display-en); }