/* ==========================================================================
   RED ANGEL — English (LTR) overrides
   Loaded ONLY by en.html, after sections.css.

   The three main stylesheets are written with logical properties, so most of
   the layout mirrors itself. What does NOT mirror automatically:
     - CSS gradient angles (they are absolute, direction never flips them)
     - transform-origin (it has no logical keyword)
     - anything set with physical left/right on purpose
   Those are corrected here, plus the typographic differences between setting
   Arabic and setting English.
   ========================================================================== */

/* ------------------------------------------------------------ 1. TYPOGRAPHY
   Arabic needs 2.05 leading for its diacritics; Latin at that leading looks
   loose and unedited. English also *may* be tracked and uppercased — Arabic
   never may. */
html[dir="ltr"] body {
  font-family: var(--font-ar);           /* Tajawal has a clean Latin cut */
  line-height: 1.75;
}

html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3 { line-height: 1.18; }

/* Section titles switch to Cinzel: the same Trajan-style roman as the
   wordmark, which is where this brand's Latin voice actually lives. */
html[dir="ltr"] .section-title {
  font-family: var(--font-latin);
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.2;
  background-image: var(--grad-gold);    /* 105deg original, not the RTL mirror */
}

html[dir="ltr"] .section-title .word {
  background-image: var(--grad-gold);
}

html[dir="ltr"] .vpanel__title {
  font-family: var(--font-latin);
  font-weight: 700;
  letter-spacing: .03em;
  background-image: var(--grad-gold);
}

html[dir="ltr"] .eyebrow {
  font-family: var(--font-latin);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3em;
}

html[dir="ltr"] .hero__name {
  font-family: var(--font-latin);
  font-weight: 600;
  letter-spacing: .06em;
}

html[dir="ltr"] .svc__title { letter-spacing: .01em; }

/* ------------------------------------------------- 2. DIRECTIONAL DRAW-INS
   transform-origin has no logical keyword, so the RTL sheets hard-code
   `100% 50%` (write right-to-left). English writes the other way. */
html[dir="ltr"] .eyebrow::before,
html[dir="ltr"] .draw,
html[dir="ltr"] .nav__link::after,
html[dir="ltr"] .nav__progress-fill,
html[dir="ltr"] .footer__nav a::after {
  transform-origin: 0 50%;
}

html[dir="ltr"] .eyebrow::before {
  background: linear-gradient(to right, transparent, var(--gold-500));
}

/* ------------------------------------------------------- 3. GRADIENT ANGLES */
html[dir="ltr"] .ornament__rule:first-child {
  transform-origin: 0 50%;
  background: linear-gradient(to right, transparent, var(--gold-600) 34%, var(--gold-300));
}

html[dir="ltr"] .ornament__rule:last-child {
  transform-origin: 100% 50%;
  background: linear-gradient(to left, transparent, var(--gold-600) 34%, var(--gold-300));
}

html[dir="ltr"] .preloader__fill,
html[dir="ltr"] .nav__progress-fill {
  background: linear-gradient(to right, var(--gold-600), var(--gold-100));
}

/* The partnership scrim darkens the side the text sits on — the other side now. */
html[dir="ltr"] .partnership__scrim {
  background:
    linear-gradient(to right, rgba(6, 12, 24, .96) 8%, rgba(6, 12, 24, .58) 55%, rgba(6, 12, 24, .9)),
    linear-gradient(to bottom, var(--navy-900), transparent 22%, transparent 76%, var(--navy-900));
}

html[dir="ltr"] .partnership__bg img { object-position: 70% center; }

/* ------------------------------------------------------ 4. SMALL MIRRORINGS */
/* The hover nudge should push toward the reading start, which is now the left. */
html[dir="ltr"] .cline:hover,
html[dir="ltr"] .cline:focus-visible { transform: translateX(6px); }

/* Trailing letter-spacing sits after the last glyph in LTR. */
html[dir="ltr"] .preloader__word {
  padding-inline-start: 0;
  padding-inline-end: .34em;
}

html[dir="ltr"] .nav__latin {
  padding-inline-start: 0;
  padding-inline-end: .3em;
}

/* The select arrow belongs on the trailing edge. */
html[dir="ltr"] .field select {
  background-position: right 16px center;
  padding-inline-start: 16px;
  padding-inline-end: 44px;
}

/* Drawer links slide in from the panel's own edge. */
html[dir="ltr"] .menu__link,
html[dir="ltr"] .menu__contact { transform: translateX(-26px); }
html[dir="ltr"] body.menu-open .menu__link,
html[dir="ltr"] body.menu-open .menu__contact { transform: none; }

/* ------------------------------------------------------ 5. LANGUAGE SWITCH */
/* Nothing to mirror — .langswitch uses logical properties — but the Latin
   label wants the same roman as the rest of the English page. */
html[dir="ltr"] .langswitch { font-family: var(--font-latin); letter-spacing: .12em; }