/* ---------------------------------------------------------------------------
   Арабская версия: зеркалим то, что в основной таблице задано физическими
   свойствами. Подключается только на страницах с dir="rtl".
   --------------------------------------------------------------------------- */

[dir='rtl'] body {
  text-align: right;
}

/* --- Служебные метки и линейки ------------------------------------------- */

[dir='rtl'] .tag::before {
  order: 2;
}

[dir='rtl'] .tag {
  flex-direction: row-reverse;
}

[dir='rtl'] .rule-line,
[dir='rtl'] hr,
[dir='rtl'] .topbar__progress,
[dir='rtl'] .topbar__nav a::after,
[dir='rtl'] .chat__progress-bar,
[dir='rtl'] .hero__scroll-line::after {
  transform-origin: right;
}

[dir='rtl'] .topbar__progress {
  transform: scaleX(var(--scroll, 0));
}

/* --- Шапка и переключатель ------------------------------------------------ */

[dir='rtl'] .topbar__nav {
  margin-left: 0;
  margin-right: auto;
}

[dir='rtl'] .burger span {
  left: 0.7rem;
  right: 0.7rem;
}

/* --- Первый экран --------------------------------------------------------- */

[dir='rtl'] .hero__margin {
  padding-left: 0;
  padding-right: 1rem;
  border-left: 0;
  border-right: 1px solid var(--ink-rule);
}

[dir='rtl'] .hero__scroll {
  left: auto;
  right: var(--gutter);
}

/* --- Демонстрация чата ---------------------------------------------------- */

[dir='rtl'] .phone__state,
[dir='rtl'] .chat__copy,
[dir='rtl'] .scope__row em {
  margin-left: 0;
  margin-right: auto;
}

[dir='rtl'] .chat__link-url {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

[dir='rtl'] .chat__msg--out {
  align-self: flex-start;
}

[dir='rtl'] .chat__msg--in {
  align-self: flex-end;
}

/* --- Ссылки, пути, команды: техника всегда читается слева направо --------- */

[dir='rtl'] code,
[dir='rtl'] kbd,
[dir='rtl'] .mono,
[dir='rtl'] .dz__hash,
[dir='rtl'] .dz__link,
[dir='rtl'] .reply__link,
[dir='rtl'] .stage__link,
[dir='rtl'] .scope__files li {
  direction: ltr;
  unicode-bidi: embed;
}

[dir='rtl'] .mono,
[dir='rtl'] .dz__hash,
[dir='rtl'] .dz__link,
[dir='rtl'] .reply__link {
  text-align: right;
}

/* --- Секции с левой линейкой --------------------------------------------- */

[dir='rtl'] .drop__safe,
[dir='rtl'] .how__warn {
  padding-left: 0;
  padding-right: 0.9rem;
  border-left: 0;
  border-right: 2px solid var(--signal);
}

[dir='rtl'] .drop__steps,
[dir='rtl'] .doc__list {
  padding-left: 0;
  padding-right: 1.2rem;
}

[dir='rtl'] .next__list li {
  padding-left: 0;
  padding-right: 1.4rem;
}

[dir='rtl'] .next__list li::before {
  left: auto;
  right: 0;
}

/* --- Таблица сравнения ---------------------------------------------------- */

[dir='rtl'] .cmp th,
[dir='rtl'] .cmp td {
  text-align: right;
}

/* --- Сцена «как это работает»: зеркалим траекторию ------------------------ */

[dir='rtl'] .stage__node--chat {
  left: auto;
  right: 6%;
}

[dir='rtl'] .stage__node--cloud {
  right: auto;
  left: 7%;
}

[dir='rtl'] .stage__card {
  left: auto;
  right: 8%;
  transform:
    translate3d(calc(var(--p, 0) * -152%),
      calc(var(--p, 0) * var(--p, 0) * -268%), calc(var(--p, 0) * 30px))
    rotateY(calc(var(--p, 0) * -34deg))
    rotateX(calc(var(--p, 0) * -12deg))
    scale(calc(1 - var(--p, 0) * 0.24));
}

[dir='rtl'] .stage__link {
  right: auto;
  left: 7%;
}

[dir='rtl'] .stage__wire {
  transform: scaleX(-1);
}

/* --- Мелочи --------------------------------------------------------------- */

[dir='rtl'] .foot__links,
[dir='rtl'] .langs {
  margin-left: 0;
  margin-right: auto;
}

[dir='rtl'] .btn:hover .btn__arrow {
  transform: translateX(-3px);
}

[dir='rtl'] .btn__arrow,
[dir='rtl'] .pain__arrow {
  transform: scaleX(-1);
}

[dir='rtl'] .honest__grid article {
  grid-template-columns: 2.5rem minmax(0, 22rem) minmax(0, 1fr);
}

[dir='rtl'] .how__item {
  transform: translateX(4px);
}

[dir='rtl'] .how__item.is-active {
  transform: none;
}

[dir='rtl'] .js [data-reveal='slide'] {
  transform: translate3d(10px, 0, 0);
}

[dir='rtl'] .js .is-in[data-reveal='slide'] {
  transform: none;
}

@media (max-width: 760px) {
  [dir='rtl'] .topbar__nav {
    margin-right: 0;
  }
}