/* Persian-only additions. The source prototype stays untouched for English. */
@font-face {
  font-family: "DibziPersian";
  src: url("/fonts/IRANYekan.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DibziPersian";
  src: url("/fonts/IRANYekan-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DibziPersian";
  src: url("/fonts/IRANYekan-ExtraBold.woff2") format("woff2");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DibziPersianBold";
  src: url("/fonts/IRANYekan-Bold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DibziPersianExtraBold";
  src: url("/fonts/IRANYekan-ExtraBold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

[dir="rtl"] {
  font-family: "DibziPersian", Inter, ui-sans-serif, sans-serif;
  direction: rtl;
}

[dir="rtl"] .intro-copy h1 {
  font-family: "DibziPersian", sans-serif;
  font-weight: 900;
}

[dir="rtl"] .story-heading h2.chapter-title-fa {
  font-family: "DibziPersianExtraBold", sans-serif;
  font-weight: 400;
}

[dir="rtl"] .intro-copy {
  left: auto;
  right: clamp(24px, 7vw, 112px);
}

/* Persian display hierarchy: the games promise is bold, while the
   relationship statement carries the extra-bold emphasis. */
[dir="rtl"] .game-showcase-title {
  font-family: "DibziPersianBold", sans-serif;
  font-weight: 400;
  line-height: 1.1;
}

[dir="rtl"] .connection-intro h2 {
  font-family: "DibziPersianExtraBold", sans-serif;
  font-weight: 400;
  line-height: 1.1;
}

[dir="rtl"] .connection-final h2 {
  font-family: "DibziPersianExtraBold", sans-serif;
  font-weight: 400;
}

/* Match the first painted frame to hero.js so the phone never flashes on the
   LTR side before the scroll animation gets its first render. */
[dir="rtl"] .stage {
  --phone-x: -37vw;
}

[dir="rtl"] .topbar,
[dir="rtl"] .topbar-actions,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .footer-links {
  direction: rtl;
}

[dir="rtl"] .intro-copy,
[dir="rtl"] .entry-copy,
[dir="rtl"] .economy-copy,
[dir="rtl"] .footer-brand,
[dir="rtl"] .footer-col {
  text-align: right;
}

[dir="rtl"] .step-rail,
[dir="rtl"] .economy-meter,
[dir="rtl"] .mosaic-days {
  direction: rtl;
}

[dir="rtl"] .entry-tabs,
[dir="rtl"] .footer-links,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .topbar-actions {
  direction: rtl;
}

/* Mirror the desktop hero annotations around the centered phone. */
[dir="rtl"] .step-rail {
  left: auto;
  right: clamp(24px, 5.5vw, 90px);
}

[dir="rtl"] .step {
  padding-left: 0;
  padding-right: 30px;
  transform: translateX(4px);
}

[dir="rtl"] .step::before {
  left: auto;
  right: 0;
  transform-origin: right center;
}

[dir="rtl"] .step.active {
  transform: translateX(0);
}

[dir="rtl"] .right-note {
  right: auto;
  left: clamp(26px, 5vw, 80px);
}

[dir="rtl"] .story-heading {
  left: auto;
  right: calc(50% + var(--phone-w) / 2 + 28px);
  text-align: right;
}

/* Mirror the pact composition: Persian copy on the right, calendar card on
   the left, with the card's own labels and weekday grid reading RTL. */
[dir="rtl"] .ritual-label {
  left: auto;
  right: clamp(24px, 5.5vw, 88px);
}

[dir="rtl"] .ritual-copy {
  left: auto;
  right: clamp(24px, 7vw, 112px);
  text-align: right;
}

[dir="rtl"] .ritual-visual {
  left: clamp(24px, 6.2vw, 100px);
  right: auto;
}

[dir="rtl"] .pact-card-main,
[dir="rtl"] .pact-days,
[dir="rtl"] .habit-list {
  direction: rtl;
}

[dir="rtl"] .habit-streak {
  margin-left: 0;
  margin-right: auto;
}

/* Mirror the entry section's desktop columns for Persian. */
[dir="rtl"] .entry-copy {
  left: auto;
  right: clamp(28px, 7vw, 112px);
  text-align: right;
}

[dir="rtl"] .entry-copy h2 {
  font-family: "DibziPersianBold", sans-serif;
  font-weight: 400;
}

[dir="rtl"] .entry-visual {
  left: clamp(28px, 5vw, 82px);
  right: auto;
}

[dir="rtl"] .entry-ghost-word {
  left: -2vw;
  right: auto;
}

[dir="rtl"] .entry-progress {
  left: auto;
  right: clamp(28px, 7vw, 112px);
}

[dir="rtl"] .queue-wait {
  text-align: left;
}

[dir="rtl"] .entry-invite-code {
  justify-content: flex-end;
}

@media (max-width: 900px) {
  [dir="rtl"] .story-heading {
    left: 50%;
    right: auto;
    width: calc(100vw - 40px);
    top: 72px;
    text-align: center;
    transform: translateX(-50%) translateY(var(--story-heading-y, 22px));
  }

  [dir="rtl"] .story-heading h2 {
    font-size: clamp(25px, 6.8vw, 36px);
  }

  [dir="rtl"] .intro-copy .eyebrow {
    margin-bottom: 12px;
  }

  [dir="rtl"] .intro-copy p {
    margin-top: 8px;
  }

  [dir="rtl"] .step-rail {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  [dir="rtl"] .step {
    padding: 0 10px;
    transform: translateX(calc(-50% + var(--step-x, 0px)));
  }

  [dir="rtl"] .step.active {
    transform: translateX(calc(-50% + var(--step-x, 0px)));
  }

  [dir="rtl"] .ritual-label {
    left: auto;
    right: 24px;
  }

  [dir="rtl"] .ritual-copy {
    left: 24px;
    right: 24px;
    text-align: center;
  }

  [dir="rtl"] .ritual-visual {
    left: 50%;
    right: auto;
  }

  [dir="rtl"] .entry-copy {
    left: 24px;
    right: 24px;
    text-align: center;
  }

  [dir="rtl"] .entry-visual {
    left: 50%;
    right: auto;
  }

  [dir="rtl"] .entry-progress {
    left: 24px;
    right: 24px;
  }

  [dir="rtl"] .queue-wait {
    text-align: right;
  }
}

[dir="rtl"] .download-pill-copy,
[dir="rtl"] .du-screen {
  direction: rtl;
}

/* The phone declares its own English UI face in phone-ui.css. Keep every
   Persian label inside the phone on the app's Persian typeface as well. */
[dir="rtl"] .du,
[dir="rtl"] .du * {
  font-family: "DibziPersian", Inter, ui-sans-serif, sans-serif;
}

/* Chat copy must keep Persian reading order inside both received and sent
   bubbles, even though the bubbles themselves sit on opposite sides. */
[dir="rtl"] .du-bubble-text,
[dir="rtl"] .du-composer-field {
  direction: rtl;
  text-align: right;
}

/* Chess coordinates and piece positions are game data, not Persian layout.
   Keep every board row and moving piece in the source LTR orientation. */
[dir="rtl"] .du-chess-board,
[dir="rtl"] .du-chess-rank,
[dir="rtl"] .du-chess-cell,
[dir="rtl"] .du-chess-mover {
  direction: ltr;
}

[dir="rtl"] .footer-col a::after {
  left: 100%;
  right: 0;
}

[dir="rtl"] .footer-col a:hover::after {
  left: 0;
  right: 0;
}

/* The Persian closing title is wider than the English copy. Keep it bold,
   while giving the longer line enough room to breathe. */
[dir="rtl"] .end-cap h3 {
  font-size: clamp(56px, 8vw, 124px);
  letter-spacing: -.06em;
}

@media (max-width: 900px) {
  [dir="rtl"] .end-cap h3 {
    font-size: clamp(36px, 10vw, 54px);
  }
}

@media (max-height: 840px) and (max-width: 900px) {
  [dir="rtl"] .intro-copy h1 { max-width: 75%; font-size: clamp(40px, 9.5vw, 62px); }
  [dir="rtl"] .intro-copy p { max-width: 64%; margin-top: 8px; font-size: 14px; }
}

@media (max-width: 700px) {
  [dir="rtl"] .game-showcase-title,
  [dir="rtl"] .entry-intro h2 { line-height: 1.3; }
}