/* ============================================================================
   Zelavi — right-to-left overrides (ar, fa).
   Loaded on all four pages AFTER i18n/switcher.css and BEFORE each page's inline
   <style>. Because the inline <style> wins ties, every rule here is scoped with
   [dir="rtl"] (specificity ≥ 0,2,0) so it beats the single-class base rules.

   Scope: TEXT, NAV and UI CHROME only. The scroll-film canvas, the GSAP
   ScrollTrigger pin geometry, the thread SVGs and the app screenshots are
   imagery — they are deliberately NOT mirrored.

   The runtime (i18n/runtime.js) sets document.documentElement.dir + .lang from
   the active locale; this file only reacts to that.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. FONTS
   Fraunces / Albert Sans / Spline Sans Mono carry no Arabic-script glyphs.
   Amiri (Naskh serif) and Vazirmatn are already in each page's Google Fonts
   <link>. Arabic keeps a serif display face to mirror the Fraunces role;
   Persian uses Vazirmatn throughout — Amiri's Persian letterforms are not
   idiomatic for فارسی. */
:root[lang="ar"]{
  --font-display:'Amiri','Noto Naskh Arabic',serif;
  --font-body:'Vazirmatn','Noto Sans Arabic',system-ui,sans-serif;
  --font-mono:'Vazirmatn',ui-monospace,monospace;
}
:root[lang="fa"]{
  --font-display:'Vazirmatn','Noto Naskh Arabic',sans-serif;
  --font-body:'Vazirmatn',system-ui,sans-serif;
  --font-mono:'Vazirmatn',ui-monospace,monospace;
}
/* signin/signup/legal redeclare the tokens on a bare :root in their inline
   <style>; [lang] raises specificity so these still win. */
:root[lang="ar"] body,:root[lang="fa"] body{font-family:var(--font-body)}
:root[lang="ar"] .wordmark,:root[lang="ar"] h1,:root[lang="ar"] h2,
:root[lang="fa"] .wordmark,:root[lang="fa"] h1,:root[lang="fa"] h2{font-family:var(--font-display)}

/* ------------------------------------------------------- 2. TYPOGRAPHY (RTL)
   a) letter-spacing breaks the visual rhythm of joined Arabic script, and
      text-transform:uppercase is a no-op there. Zero both wherever the LTR
      design used them as a stylistic device.
   b) synthetic italics are bad Arabic/Persian typography — <em> keeps its
      colour, drops the slant. (index.html already does this for #lang-title.)
   c) Arabic/Persian need more leading than the 1.12–1.22 display values. */
[dir="rtl"] .act-kicker,[dir="rtl"] .af-kicker,[dir="rtl"] .film-caption-sub,
[dir="rtl"] .title-proofs,[dir="rtl"] .ab-proof,[dir="rtl"] .cine-hint,
[dir="rtl"] .rail-label,[dir="rtl"] .store-badge .sb-small,[dir="rtl"] .store-soon,
[dir="rtl"] .cta-note,[dir="rtl"] .cta-risk,[dir="rtl"] .scroll-indicator,
[dir="rtl"] .qr-card .qr-label,[dir="rtl"] .hero-float,[dir="rtl"] .divider,
[dir="rtl"] .film-loading,[dir="rtl"] .landing-tagline,[dir="rtl"] .wordmark,
[dir="rtl"] .stat-val,[dir="rtl"] .mm-cta{letter-spacing:0;text-transform:none}

/* Each page's inline <style> loads AFTER this file, so a bare `[dir="rtl"] em`
   (0,1,1) only TIES with `.hero-h1 em` (0,1,1) and loses. Name the parents. */
[dir="rtl"] .hero-h1 em,[dir="rtl"] .act-title em,[dir="rtl"] .film-caption-text em,
[dir="rtl"] .wordmark em,[dir="rtl"] .hero-brand em,[dir="rtl"] .topbar-mark em,
[dir="rtl"] .ab-mid h1 em,[dir="rtl"] .af-card h2 em,[dir="rtl"] em{font-style:normal}
[dir="rtl"] .city-line,[dir="rtl"] .landing-tagline{font-style:normal}

[dir="rtl"] .hero-h1,[dir="rtl"] .act-title,[dir="rtl"] .film-caption-text,
[dir="rtl"] .ab-mid h1,[dir="rtl"] .af-card h2,[dir="rtl"] main h1{line-height:1.45}
[dir="rtl"] .act-body,[dir="rtl"] .hero-sub,[dir="rtl"] .af-sub,
[dir="rtl"] .quote-banner,[dir="rtl"] footer .crisis{line-height:1.85}

/* --------------------------------------------- 3. DIRECTIONAL ICONS / ARROWS
   The CTA arrows (&rarr; on the home page, &larr; on "Back to site") are the
   only glyphs in the chrome that encode a direction — they must mirror.
   Deliberately NOT mirrored: ▶ (play, a media control), the ▾ switcher caret,
   the down scroll-chevron and the up "back to top" SVG. */
[dir="rtl"] .i18n-arrow{display:inline-block;transform:scaleX(-1)}

/* ------------------------------------------------------------- 4. TOPBAR/NAV
   .topbar-in / .topbar-nav / .topbar-right are flex rows, so their order
   mirrors from `direction` alone. Only the physical bits need help. */
[dir="rtl"] .topbar::after{background:linear-gradient(270deg,transparent,var(--mint) 30%,var(--lilac) 70%,transparent)}
[dir="rtl"] .build-tag{margin-left:0;margin-right:10px}

/* --------------------------------------------------- 5. LANGUAGE SWITCHER
   switcher.css already uses logical props for the menu box. What it cannot
   know is the page direction: it flips RTL rows back to flag-first for an LTR
   page. On an RTL page the flag belongs on the start (right) edge for every
   row, so LTR rows are the ones that need reversing. */
[dir="rtl"] .i18n-menu li,[dir="rtl"] .i18n-menu li[dir="rtl"]{flex-direction:row;text-align:start}
[dir="rtl"] .i18n-menu li[dir="ltr"]{flex-direction:row-reverse;text-align:start}
[dir="rtl"] .i18n-switch-btn .i18n-endonym{text-align:start}

/* --------------------------------------------------------- 6. HERO / FILM 1
   The hero block is a cross-axis flex-start item in a column flex container,
   so it moves to the right on its own; the readability scrim (100deg) and the
   asymmetric side padding do not. */
[dir="rtl"] .film-title{background:linear-gradient(260deg,rgba(9,13,26,0.82) 0%,rgba(9,13,26,0.55) 42%,rgba(9,13,26,0.08) 72%,rgba(9,13,26,0) 100%)}
[dir="rtl"] .hero-block{padding:0 clamp(24px,9vw,190px) 0 24px}
@media (max-width:640px){[dir="rtl"] .hero-block{padding:0 8vw}}

/* Greeting floats (intentional multilingual showcase, translate="no") are
   pinned with an inline `right:Nvw`, which would drop them on top of the
   mirrored hero copy. They are matched on their own inline value, in BOTH
   serialisations: the page ships `right:24vw`, but GSAP rewrites the whole
   style attribute as `right: 24vw` (with a space) the moment it animates them,
   so a single-form selector silently stops matching mid-page-life.
   `right:auto` lives inside each matching rule — never on its own — so a float
   the selector misses keeps its original position instead of collapsing.
   !important is required only because the source value is an inline style. */
[dir="rtl"] .hero-float[style*="right:6vw"],[dir="rtl"] .hero-float[style*="right: 6vw"]{right:auto!important;left:6vw}
[dir="rtl"] .hero-float[style*="right:7vw"],[dir="rtl"] .hero-float[style*="right: 7vw"]{right:auto!important;left:7vw}
[dir="rtl"] .hero-float[style*="right:10vw"],[dir="rtl"] .hero-float[style*="right: 10vw"]{right:auto!important;left:10vw}
[dir="rtl"] .hero-float[style*="right:15vw"],[dir="rtl"] .hero-float[style*="right: 15vw"]{right:auto!important;left:15vw}
[dir="rtl"] .hero-float[style*="right:21vw"],[dir="rtl"] .hero-float[style*="right: 21vw"]{right:auto!important;left:21vw}
[dir="rtl"] .hero-float[style*="right:24vw"],[dir="rtl"] .hero-float[style*="right: 24vw"]{right:auto!important;left:24vw}
[dir="rtl"] .hero-float[style*="right:27vw"],[dir="rtl"] .hero-float[style*="right: 27vw"]{right:auto!important;left:27vw}
[dir="rtl"] .hero-float[style*="right:30vw"],[dir="rtl"] .hero-float[style*="right: 30vw"]{right:auto!important;left:30vw}
[dir="rtl"] .hero-float b{margin-inline-start:9px}

/* ------------------------------------------------------------ 7. FILM CHROME
   Captions are already centred; only the scrub progress bar has a side. It is
   UI chrome, not the film, so it fills from the right in RTL. */
[dir="rtl"] .film-progress{left:auto;right:0;background:linear-gradient(270deg,var(--primary),var(--secondary))}

/* --------------------------------------------------------- 8. ACTS / PHONES
   .act-inner (and .reverse) are flex rows — they mirror from `direction`.
   The phone stack's negative overlap and its tilt are physical. */
[dir="rtl"] .phone-stack .phone:last-child{margin-left:0;margin-right:-70px;transform:rotate(-4deg) translateY(26px)}
@media (max-width:860px){[dir="rtl"] .phone-stack .phone:last-child{margin-left:0;margin-right:-90px}}

/* Stat values are "<count><unit>" with no separator; en relies on "h"/"%"
   sitting flush. Arabic/Persian units are words and need a hair of air.
   (The catalogs cannot add a leading space — the gate enforces edge-whitespace
   parity with en.json.) */
[dir="rtl"] .stat-val .count{margin-inline-end:.2em}

/* ------------------------------------------------------------- 9. CHIP ROWS
   .chip-row is flex-wrap and mirrors on its own. The chips themselves are
   translate="no" multilingual showcase content — each .ra/.rb already carries
   dir="auto", so leave their internal direction alone and only make sure the
   row starts on the right. */
[dir="rtl"] .chip-row{justify-content:flex-start}
[dir="rtl"] .chip .ra,[dir="rtl"] .chip .rb{text-align:center}

/* ---------------------------------------------------------- 10. TIMELINE RAIL */
[dir="rtl"] .rail{left:auto;right:26px}
[dir="rtl"] .rail-label{left:auto;right:22px}

/* ------------------------------------------------- 11. STICKY CTA / TO-TOP
   Both are centred or corner-pinned; the pill's asymmetric padding and the
   to-top corner are physical. */
[dir="rtl"] .sticky-cta{padding:10px 22px 10px 10px}
@media (max-width:860px){[dir="rtl"] .sticky-cta{padding:7px 15px 7px 8px}}
[dir="rtl"] .to-top{right:auto;left:26px}

/* ------------------------------------------------------------ 12. DOWNLOAD */
[dir="rtl"] .store-badge{text-align:start}
[dir="rtl"] .qr-card .qr-label{margin-inline:auto}

/* -------------------------------------------------------------- 13. FOOTER
   Centred already; the legal row is a centred flex row that mirrors itself. */
[dir="rtl"] footer .legal{justify-content:center}

/* --------------------------------------------------------- 14. MOBILE MENU
   Full-bleed column with symmetric padding — text alignment follows `dir`
   automatically. The CTA pill stays centred. */
[dir="rtl"] .mobile-menu a{text-align:start}
[dir="rtl"] .mobile-menu .mm-cta{text-align:center}
@media (max-width:860px){[dir="rtl"] .i18n-switch-btn{text-align:start}}

/* ----------------------------------------------- 15. AUTH PAGES (signin/up)
   .auth is a 2-column grid: the columns swap from `direction` alone, so the
   brand panel lands on the right. .af-back / .af-lang are absolutely
   positioned against the initial containing block and must swap corners. */
[dir="rtl"] .af-back{right:auto;left:5vw}
[dir="rtl"] .af-lang{left:auto;right:5vw}
/* switcher.css gives .i18n-switcher width:100% below 860px. Combined with a 5vw
   side offset that is 100vw + 5vw of content — signin/signup pick up a 19px
   horizontal scrollbar at 390px. Measured: identical in en and de today (LTR
   overflows right, RTL would overflow left), so this is a pre-existing responsive
   bug, not an RTL one — the real fix belongs in switcher.css
   (`.i18n-switcher{width:100%}` -> `width:auto` inside that media query).
   Guarded here so the RTL build does not ship a sideways scroll. */
@media (max-width:860px){[dir="rtl"] .af-lang{left:5vw;right:5vw;width:auto}}
[dir="rtl"] .af-alt,[dir="rtl"] .af-legal{text-align:center}
[dir="rtl"] .field label,[dir="rtl"] .field .hint,[dir="rtl"] .af-note{text-align:start}
/* Email is LTR-only data; the input already carries dir="ltr" in the markup so
   its caret and punctuation behave. Keep it visually anchored to the form's
   start edge rather than stranded on the far side. */
[dir="rtl"] input[dir="ltr"]{text-align:right}

/* ------------------------------------------------------------- 16. LEGAL
   The document body is fetched per country and may be German, English or
   Arabic. unicode-bidi:plaintext lets each paragraph pick its own direction
   from its first strong character instead of inheriting the page's RTL. */
[dir="rtl"] .doc{unicode-bidi:plaintext;text-align:start}
[dir="rtl"] .meta{text-align:start;unicode-bidi:plaintext}
[dir="rtl"] .legal-head-right{justify-content:flex-end}