/* ==========================================================================
   rtl.css — the short list of things logical properties cannot express, plus
   the typographic corrections that make Arabic look set rather than mirrored.

   Everything else in this design system is already direction-neutral: the
   spacing is margin-inline/padding-inline, the offsets are inset-inline, the
   text is aligned start/end, and CSS Grid lays its tracks out along the inline
   axis, so .grid-editorial reverses on its own with no template here.

   What is left is the genuinely physical: rotations, gradient angles, transform
   origins, inline-axis translations — and the type itself.
   ========================================================================== */

/* ----------------------------------------------------------------- the turns
   Every deliberate angle on this site is drawn from the four tokens below,
   including the 3D turns: a rotateY is resolved in physical coordinates and
   knows nothing about writing direction, so a panel that leans TOWARD the light
   in Turkish leans away from it in Arabic unless the whole set is negated.
   Doing it once here turns the entire composition round — the stamp, the deck's
   fan, the two hero screens, the founders' plates, the pinboard. */
[dir="rtl"] {
  --stamp-tilt: 4deg;
  --tilt-a: -5deg;
  --tilt-b: 4deg;
  --tilt-c: -8deg;
}

/* The light in the room lives at the inline-start edge of a panel, which is a
   logical edge and mirrors on its own — but the gradient that paints it is
   struck at an absolute angle and does not. */
[dir="rtl"] .frame::before,
[dir="rtl"] .media-frame::before {
  background-image: linear-gradient(
    210deg, var(--glass-edge) 0%, transparent 40%, transparent 60%, var(--glass-edge) 100%);
}

/* The sheen sweeps across a panel from the light. Its angle is absolute. */
[dir="rtl"] {
  --sheen: linear-gradient(
    242deg,
    transparent 0%,
    color-mix(in srgb, var(--surface-2) 30%, transparent) 36%,
    color-mix(in srgb, var(--surface-2) 78%, transparent) 47%,
    transparent 64%);
}

/* The index rule's spill and the deck's leading edge both run top-to-bottom,
   which is a block-axis gradient and needs nothing here. The tape over a pinned
   screen does not: it sits over the other corner and runs the other way. */
[dir="rtl"] .pin::before { rotate: 4deg; }

/* ---------------------------------------------------------------- gradients
   linear-gradient angles are absolute. This is also why the gradients in this
   project are written in degrees rather than `to right`: a keyword has no
   counterpart to flip to. */
[dir="rtl"] .divider-rule--fade {
  background-image: linear-gradient(270deg, var(--line-strong), transparent);
}

/* ---------------------------------------------------------------- transforms
   transform-origin and translateX are resolved in physical coordinates no
   matter the writing mode, so the places this design system uses them have to
   be restated. The nav underline must grow away from the start of the word, the
   link's bar must draw the way the reader is going, and the button's wipe must
   fill that way too. */
[dir="rtl"] .site-nav a::after,
[dir="rtl"] .text-link,
[dir="rtl"] .btn::before {
  transform-origin: 100% 50%;
}

[dir="rtl"] .text-link { background-position: 100% 100%; }

/* The floating label scales from its own leading corner. */
[dir="rtl"] .field__label { transform-origin: 100% 0; }

@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .btn:hover .btn__icon { translate: -0.22em 0; }

  [dir="rtl"] .menu-overlay a:hover { translate: -0.5rem 0; }

  /* The marquee runs the other way. The track is laid out by flex, so in RTL
     its first copy already starts at the inline end of the strip and
     translating it negatively would pull it further off screen. A separate
     keyframe set rather than `animation-direction: reverse`, which would also
     reverse the easing — linear only by luck rather than by contract. */
  [dir="rtl"] .marquee__track { animation-name: marquee-run-rtl; }

  @keyframes marquee-run-rtl {
    from { transform: translateX(0); }
    to { transform: translateX(50%); }
  }

  [dir="rtl"] .ghost-word,
  [dir="rtl"] .footer__ghost { animation-name: ghost-drift-rtl; }

  @keyframes ghost-drift-rtl {
    from { translate: 0 -50%; }
    to { translate: 4% -50%; }
  }
}

/* The footer's engraved word is anchored to a physical corner. */
[dir="rtl"] .footer__ghost { inset-inline-start: auto; inset-inline-end: -2%; }

/* Directional glyphs — arrows, chevrons — are mirrored with the `scale`
   property rather than a transform, so a hover transform can still animate
   independently without one clobbering the other. */
[dir="rtl"] .icon--directional { scale: -1 1; }

/* ---------------------------------------------------------------- typography
   Arabic is a connected script with deep descenders and no case. Underlines
   have to clear the descenders; uppercasing is meaningless noise; and the
   negative display tracking that would break letter joins is already zeroed in
   tokens.css. */
[lang="ar"] {
  text-underline-offset: 0.34em;
}

/* This design sets every label, eyebrow and caption in uppercase mono. Arabic
   has no case, so `text-transform: uppercase` does nothing to the script
   itself — but it does uppercase the Latin brand names embedded in those
   labels, which turns "MatchAI" into "MATCHAI" inside an Arabic sentence for
   no reason. Turned off wholesale here, and the weight raised to compensate
   for the lost emphasis. */
[lang="ar"] .eyebrow,
[lang="ar"] .stamp,
[lang="ar"] .marquee__item,
[lang="ar"] .footer__heading,
[lang="ar"] .footer__links,
[lang="ar"] .footer__copyright,
[lang="ar"] .site-nav a,
[lang="ar"] .lang-switcher__toggle,
[lang="ar"] .lang-switcher__option,
[lang="ar"] .social-link,
[lang="ar"] .pill,
[lang="ar"] .stat__label,
[lang="ar"] .folder__tab,
[lang="ar"] .pin__meta,
[lang="ar"] .module-entry__meta,
[lang="ar"] .hero__scroll,
[lang="ar"] .field__label,
[lang="ar"] .pager__readout,
[lang="ar"] .text-meta {
  text-transform: none;
  font-weight: 600;
}

/* Latin brand names — MatchAI, Skool, UGC — are wrapped in <bdi> in the markup
   so the bidi algorithm treats each as one opaque run and cannot reorder the
   characters around neighbouring Arabic. Keeping them in the body family rather
   than letting them fall to a system fallback is the other half of that: Plex
   Arabic's Latin subsets are loaded for exactly this. */
bdi {
  unicode-bidi: isolate;
}

/* Latin quotation marks inside Arabic prose sit on the wrong side otherwise. */
[lang="ar"] .prose blockquote {
  padding-inline-start: var(--space-m);
}

/* ---------------------------------------------------------------- chrome */

/* The lightbox arrows are the one pair whose glyph, not just its position, has
   to turn round. */
[dir="rtl"] .lightbox__prev .icon--directional,
[dir="rtl"] .lightbox__next .icon--directional {
  scale: -1 1;
}