/* Arabic: right-to-left fixes. See docs/multilingual.md.
   dir="rtl" already mirrors every grid and flex row; what is left is what
   points or grows in a direction, and what must stay left-to-right. */

/* Arrows point the way the page reads. */
[dir="rtl"] :is(.btn, .pace__cta, .menu__go, .tile__arrow, .pv__next-arrow, .testimonials__arrow, .cta__acts a, .journal-card__footer a) svg { transform:scaleX(-1); }
[dir="rtl"] .testimonials__arrow--next svg, [dir="rtl"] .testimonials__arrow svg { transform:scaleX(-1); }
[dir="rtl"] :is(.launch__work, .pv__zoom-next, .pv__zoom-prev, .launch__run) svg { transform:scaleX(-1); }
/* Arrows set as text (→ ↗ ←) in labels and buttons. */
[dir="rtl"] :is(.svc__go, .btn__arrow, .contact__ext, .tech-deck__controls button[data-tech-prev], .tech-deck__controls button[data-tech-next]) { display:inline-block; transform:scaleX(-1); }

/* Underlines and progress that grow from the start of the line. */
[dir="rtl"] .nav__link::after, [dir="rtl"] .svc::after, [dir="rtl"] .trav[data-live] .trav__body::before { transform-origin:100%; }
[dir="rtl"] .trav__base::after { transform-origin:100% 0; }

/* Addresses, code and numbers read left to right inside Arabic text. */
[dir="rtl"] :is(.copy, code, pre, kbd, input[type="email"], input[type="url"], .brief__count, .pf-stat__n, .testimonials__count, .tech-deck__count) { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { text-align:right; }

/* Rules that sit on the reading edge move to the right. */
[dir="rtl"] .note { border-left:0; border-right:2px solid var(--mark); padding:var(--s1) var(--s5) var(--s1) 0; }
[dir="rtl"] .flow__card, [dir="rtl"] .plan__node--store { border-left-width:1px; border-left-color:var(--rule); border-right:2px solid var(--mark); }
[dir="rtl"] .plan__node--store { border-right-width:4px; }
[dir="rtl"] .profile__fact { border-left:0; border-right:1px solid #cccbbf; }
[dir="rtl"] .profile__fact:first-child { padding-right:0; border-right:0; }
[dir="rtl"] .pf-stat + .pf-stat { border-left:0; padding-left:0; border-right:1px solid var(--rule); padding-right:max(1.5rem,min(3.5vw,3.5rem)); }
[dir="rtl"] .cv__results li + li { padding-left:0; border-left:0; padding-right:var(--s5); border-right:1px solid var(--rule-ink); }

/* The flow in a case diagram runs right to left: its line grows from the right and its arrowhead points left. */
[dir="rtl"] .plan__link::before { transform-origin:100%; }
@media (min-width:721px) {
  [dir="rtl"] .plan__link::after { right:auto; left:0; border-left:0; border-right:6px solid var(--ink-3); transform-origin:0; }
}

/* ── Motion reads right to left ─────────────────────────────────────
   Every animation that travels, fills or sweeps starts on the right and
   moves left, the way Arabic is read. Figures are mirrored whole; the words
   inside them are turned back so they still read. */

/* Home hero: the request runs browser → application → data from the right.
   The scene is mirrored; each label is flipped back on its own centre and
   anchored from its far edge, so after the mirror it hangs from the right. */
[dir="rtl"] .launch__scene { scale:-1 1; }
[dir="rtl"] .launch__scene text { scale:-1 1; transform-box:fill-box; transform-origin:center; }
[dir="rtl"] .launch__scene text:not([text-anchor="middle"]) { text-anchor:end; }
/* Inside the mirror the pointer's sideways pull is reversed: undo it, so the layers still follow the hand. */
[dir="rtl"] .launch__depth--interface { transform:translate(calc(-1 * var(--launch-drift)),calc(-1 * var(--launch-spread))) rotate(var(--launch-turn)); }
[dir="rtl"] .launch__depth--application { transform:translate(calc(.45 * var(--launch-drift)),0) rotate(calc(-.35 * var(--launch-turn))); }
[dir="rtl"] .launch__depth--data { transform:translate(calc(.65 * var(--launch-drift)),var(--launch-spread)) rotate(calc(-1 * var(--launch-turn))); }
@media (prefers-reduced-motion:reduce) { [dir="rtl"] .launch__depth { transform:none; } }

/* Home pace: the portrait takes the left, its shade falls towards the words,
   and the track comes in from the right. The photo itself is not mirrored. */
[dir="rtl"] .pace__visual { inset:0 42% 0 0; }
@media (min-width:1700px) { [dir="rtl"] .pace__visual { left:calc((100vw - 1700px)/2); right:46%; } }
@media (max-width:1000px) { [dir="rtl"] .pace__visual { left:0; right:38%; } }
@media (max-width:640px) { [dir="rtl"] .pace__visual { inset:0 0 auto; } }
[dir="rtl"] .pace__visual::after { background:linear-gradient(270deg,#16171a 0%,#16171ad9 9%,#16171a30 36%,#16171a00 65%),linear-gradient(0deg,#16171a 0%,#16171a85 15%,transparent 47%); }
@media (max-width:1000px) { [dir="rtl"] .pace__visual::after { background:linear-gradient(270deg,#16171a 0%,#16171ae0 13%,#16171a20 55%),linear-gradient(0deg,#16171a,transparent 50%); } }
@media (max-width:640px) { [dir="rtl"] .pace__visual::after { background:linear-gradient(0deg,#16171a 0%,#16171a90 14%,transparent 55%),linear-gradient(270deg,#16171a30,transparent); } }
[dir="rtl"] .pace__track { scale:-1 1; }
[dir="rtl"] .pace__lead span { transform:skewX(30deg); }
[dir="rtl"] .pace__replay { right:auto; left:var(--gutter); }
[dir="rtl"] .pace__cta:hover svg { transform:scaleX(-1) translateX(3px); }

/* Technology deck: cards swing in from the right, the orbit tilts the other way. */
[dir="rtl"] .tech-deck__orbit { left:auto; right:8%; transform:rotateX(64deg) rotateZ(30deg); }
@keyframes tech-enter-rtl { from { opacity:0; transform:translateY(25px) rotateY(12deg); } to { opacity:1; transform:translateY(0) rotateY(0); } }
[dir="rtl"] .tech-deck.is-animated .tech-deck__slide { animation-name:tech-enter-rtl,tech-float; }

/* Case diagrams (portfolio): the packet runs the link from right to left. Stacked on phones it runs down, as before. */
@keyframes plan-run-rtl { 0% { opacity:0; left:100%; } 5% { opacity:1; } 20% { opacity:1; } 25% { opacity:0; left:0; } to { opacity:0; left:0; } }
@media (min-width:721px) { [dir="rtl"] .case[data-on=true] .plan[data-live=true] .plan__dot { animation-name:plan-run-rtl; } }

/* WordPress hero: both lanes load from the right; the waiting shimmer sweeps leftwards. */
[dir="rtl"] .race__bar i { transform-origin:100%; }
[dir="rtl"] .race__wait { left:auto; right:0; }
@keyframes race-wait-rtl { 0% { opacity:1; transform:translate(100%); } 13% { opacity:1; transform:translate(-250%); } 14%,to { opacity:0; } }
@keyframes race-wait-slow-rtl { 0% { opacity:1; transform:translate(100%); } 64% { opacity:1; transform:translate(-250%); } 66%,to { opacity:0; } }
[dir="rtl"] .race[data-live=true] .race__lane[data-kind=hand] .race__wait { animation-name:race-wait-rtl; }
[dir="rtl"] .race[data-live=true] .race__lane[data-kind=builder] .race__wait { animation-name:race-wait-slow-rtl; }

/* Speed page: each timing bar grows from the right, its end tick on the left. */
[dir="rtl"] .span__track { border-left:0; border-right:1px solid var(--rule); }
[dir="rtl"] .band--ink .span__track { border-right-color:var(--rule-ink); }
[dir="rtl"] .span__bar { left:auto; right:0; }
[dir="rtl"] .span__bar::after { right:auto; left:0; }

/* Rules and progress bars that draw themselves fill from the right. */
[dir="rtl"].js-ok .svc-hero__aside::before,
[dir="rtl"].js-ok :is(.rise .head__note,.head__note.rise)::after,
[dir="rtl"] .works__hud-bar i,
[dir="rtl"] .reading-progress,
[dir="rtl"] .pv__progress i,
[dir="rtl"] .xp__tab-time,
[dir="rtl"] .pe-explainer__rail i,
[dir="rtl"] .brief__signal-line::after { transform-origin:100%; }

/* AI page: the struck-through manual steps are crossed out from the right, step out leftwards, and the sweep points left. */
[dir="rtl"] .xp__col--before .xp__step::after { left:.75rem; right:2.4rem; transform-origin:100%; }
[dir="rtl"] .xp[data-ready] .xp__panel:is([data-state="before"], [data-state="sweep"]) :is(.xp__col--after .xp__step, .xp__col-h--you) { transform:translateX(-.75rem); }
[dir="rtl"] .xp__sweep::after { content:"←"; }
@media (max-width:900px) { [dir="rtl"] .xp__sweep::after { content:"↓"; } }
[dir="rtl"] .xp__tab[aria-selected="true"] { padding-left:0; padding-right:.4rem; }
[dir="rtl"] .xp__name .label { margin-right:0; margin-left:.35rem; }
[dir="rtl"] .flow__stages::before, [dir="rtl"] .flow__stages::after { left:auto; right:calc(.45rem - .5px); }
[dir="rtl"] .flow__json[data-typing]::after { margin-left:0; margin-right:1px; }
[dir="rtl"] .anat__wire { left:auto; right:1.05rem; }
[dir="rtl"] .anat__pulse { left:auto; right:-3.5px; }

/* Journal explainers: the packet travels the rail from right to left; stacked on phones the rail sits on the right. */
@keyframes pe-packet-rtl { from { left:100%; opacity:.3; } 30% { opacity:1; } to { left:0; opacity:0; } }
[dir="rtl"] .pe-explainer.is-playing .pe-explainer__rail b { animation-name:pe-packet-rtl; }
@media (max-width:600px) {
  [dir="rtl"] .pe-explainer__rail { left:auto; right:47px; }
  [dir="rtl"] .pe-explainer.is-playing .pe-explainer__rail b { left:auto; right:-4px; animation-name:pe-packet-vertical; }
  [dir="rtl"] .pe-explainer__nodes button[aria-pressed=true] { transform:translateX(-3px); }
  [dir="rtl"] .pe-explainer__state { margin-left:0; margin-right:auto; }
}

/* Brief sent: the message leaves from the right and lands on the left. The tick is turned back so it is still a tick. */
[dir="rtl"] .brief__signal-track { scale:-1 1; }
[dir="rtl"] .brief__signal-target svg { scale:-1 1; }

/* Technology deck: the cards stacked behind fan out to the left. */
[dir="rtl"] .tech-deck__slide { box-shadow:-8px 10px 0 -2px #252b30,-8px 10px 0 -1px #56616a,-16px 20px 0 -3px #202529,-16px 20px 0 -2px #39434a; }

/* Process timeline: the travelling dot starts on the right and runs left, the line's glowing tip leads it.
   Stacked (1080px and below) the line and its dot run down the right-hand edge. */
[dir="rtl"] .trav[data-live] .trav__head { left:auto; right:calc(var(--p) * 100%); margin:-4.5px -4.5px 0 0; }
[dir="rtl"] .trav[data-live] .trav__base::after { background:linear-gradient(270deg, var(--ink) 0%, var(--ink) 70%, var(--mark) 100%); }
@media (max-width:1080px) {
  [dir="rtl"] .trav__base { left:auto; right:5px; }
  [dir="rtl"] .trav[data-live] .trav__head { left:auto; right:5px; top:calc(var(--p) * 100%); margin:-4.5px -4px 0 0; }
  [dir="rtl"] .trav[data-live] .trav__base::after { background:linear-gradient(180deg, var(--ink) 0%, var(--ink) 70%, var(--mark) 100%); }
  [dir="rtl"] .trav__st { text-align:right; }
  [dir="rtl"] .trav__st[data-side=up] .trav__body, [dir="rtl"] .trav__st[data-side=down] .trav__body { padding-left:0; padding-right:var(--s4); }
  [dir="rtl"] .trav__body::before { left:auto; right:0; }
  [dir="rtl"] .trav[data-live] .trav__st:not([data-on=true]) .trav__body { translate:-8px; }
  [dir="rtl"] .trav__field { -webkit-mask-image:linear-gradient(270deg,#0000 2%,#000 30%); mask-image:linear-gradient(270deg,#0000 2%,#000 30%); }
}

/* Home pace portrait: the built-in photo has a mirrored Arabic copy (template-parts/home/pace.php).
   A photo chosen in the editor is mirrored here, so the person still faces the words. */
[dir="rtl"] .pace__portrait .pace__plate { scale:-1 1; }
@media (max-width:1000px) { [dir="rtl"] .pace__portrait img { object-position:47% 25%; } }

/* The wordmark is a Latin name: it always reads "paul edward." left to right, dot last.
   In an Arabic line the boxes the footer mark is split into (one per letter, for its
   rise-in) would otherwise run right to left — "drawde luap" — and the dot would jump
   to the front. It stays on the right-hand side of the layout. */
[dir="rtl"] :is(.nav__id, .foot__mark) { direction:ltr; unicode-bidi:isolate; }
[dir="rtl"] :is(p.nav__id, .foot__mark) { text-align:right; }
/* The copyright line: "© 2026 Paul Edward", not "Paul Edward 2026 ©". */
[dir="rtl"] .foot__base .label:first-child { direction:ltr; unicode-bidi:isolate; }
/* i18n.css zeroes letter-spacing on everything in Arabic (it would break up joined script).
   The Latin wordmarks keep their designed tracking, or the footer mark outgrows its line and loses its dot. */
:root:lang(ar) :is(.foot__mark, .foot__mark *) { letter-spacing:-.055em !important; }
:root:lang(ar) :is(.nav__id, .nav__id *) { letter-spacing:-.015em !important; }
/* …and its own font for every character. With Arabic fonts in the stack (i18n.css), the browser takes the
   full stop from Geeza Pro — a round dot — instead of Bricolage's square one. The wordmark has no Arabic in it. */
[dir="rtl"] :is(.nav__id, .foot__mark) { --display:"Bricolage","Helvetica Neue",Arial,sans-serif; }

/* Phone header: the wordmark sits at the right, where Arabic starts; the menu button at the left.
   (wp.css pushes it with margin-right:auto. .js-ok is on <html>, as dir is, hence no space.) */
@media (max-width:860px) {
  [dir="rtl"].js-ok .nav__in > .nav__id { margin-right:0; margin-left:auto; }
}
/* The menu button's short bar is anchored to the reading start. */
[dir="rtl"] .nav__burger-icon i:last-child { transform-origin:right center; }

/* Journal explainer notes: the rule that marks a problem sits on the reading edge. */
[dir="rtl"] .article-content .pe-explainer__note { border-left:0; border-right:3px solid #b13e13; border-radius:6px 0 0 6px; }