/* Arabic (RTL) layer on top of styles.css.
   Alexandria carries both display and body; Arabic never gets negative tracking (it breaks the joins). */
:root { --font: 'Alexandria', 'Bricolage Grotesque', system-ui, sans-serif; }
html[dir="rtl"] body { line-height: 1.7; }
[dir="rtl"] .h2, [dir="rtl"] .hero__title, [dir="rtl"] .ticket__price, [dir="rtl"] .reel h3, [dir="rtl"] .step h3, [dir="rtl"] .beats h3, [dir="rtl"] .marquee__track {
  letter-spacing: 0; font-variation-settings: normal;
}
[dir="rtl"] .h2 { line-height: 1.2; font-weight: 800; }
[dir="rtl"] .hero__title { font-size: clamp(60px, 8.4vw, 136px); line-height: 1.12; font-weight: 800; }
[dir="rtl"] .hero__title .line { padding-bottom: .12em; }
[dir="rtl"] .slot, [dir="rtl"] .slot__col span { height: 1.3em; line-height: 1.3em; }
@media (max-width: 900px) { [dir="rtl"] .hero__title { font-size: 15vw; } }

/* nav: Arabic wordmark next to the mark, links pushed to the start side */
.nav__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__logo .ar-word { font-weight: 800; font-size: 26px; color: var(--paper); }
[dir="rtl"] .nav__logo img { height: 40px; }
[dir="rtl"] .nav__links { margin-left: 0; margin-right: auto; }
/* phones: logo, English pill and order button must each keep their own space */
@media (max-width: 720px) {
  [dir="rtl"] .nav { gap: 14px; }
  [dir="rtl"] .nav__logo, [dir="rtl"] .nav__links, [dir="rtl"] .nav .btn { flex: none; }
  [dir="rtl"] .nav__logo { gap: 6px; }
  [dir="rtl"] .nav__logo img { height: 32px; }
  [dir="rtl"] .nav__logo .ar-word { font-size: 22px; }
  [dir="rtl"] .nav .btn { margin-left: 0; }
}
@media (max-width: 349px) { [dir="rtl"] .nav__logo .ar-word { display: none; } }

/* hero decoration mirrors */
[dir="rtl"] .viewfinder { rotate: 6deg; }
[dir="rtl"] .viewfinder__hud { left: auto; right: 16px; direction: ltr; }
[dir="rtl"] .sticker { left: auto; right: max(-10px, calc(50% - 300px)); }

/* marquee keeps running the same way */
[dir="rtl"] .marquee__track { direction: rtl; }
@media (prefers-reduced-motion: no-preference) { [dir="rtl"] .marquee__track { animation-name: marquee-rtl; } }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .marquee__track i { clip-path: polygon(100% 0, 0 50%, 100% 100%); }

/* play-triangle bullets point the reading way */
[dir="rtl"] .ticket li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .ticket li::before { left: auto; right: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
[dir="rtl"] .ticket--feature::after { content: "الأوفر"; right: auto; left: 24px; }
[dir="rtl"] summary { padding: 18px 0 18px 36px; }
[dir="rtl"] summary::after { right: auto; left: 2px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
[dir="rtl"] details[open] summary::after { rotate: -90deg; }
[dir="rtl"] .reel__sound { font-size: 13px; }
[dir="rtl"] .anatomy__sound { right: auto; left: 14px; }
[dir="rtl"] .step__tc, [dir="rtl"] .timeline__ticks { direction: ltr; }
[dir="rtl"] .timeline__bar { direction: ltr; }
[dir="rtl"] .seg { direction: rtl; }
[dir="rtl"] input[type="email"], [dir="rtl"] #f-link { direction: ltr; text-align: right; }

/* giant Arabic wordmark in the footer */
.footer__word--ar { font-weight: 800; font-size: clamp(90px, 22vw, 330px); line-height: 1; margin: 0; color: var(--paper); text-align: center; }

/* language link */
.nav__links .lang { border: 2px solid var(--paper); border-radius: 999px; padding: 2px 12px; opacity: 1; }

/* the spinning sticker's ring text is English; the Arabic page keeps the frame clean */
[dir="rtl"] .sticker { display: none; }

/* RTL strip scrolls the other way: point the swipe arrow right */
[dir="rtl"] .work__swipe svg { transform: scaleX(-1); animation-name: swipe-nudge-rtl; }
@keyframes swipe-nudge-rtl { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateX(-6px); } }