/* ==========================================================================
   AquaCubs — rtl.css
   Right-to-left overrides, activated by html[dir="rtl"].
   Most spacing in style.css uses logical properties (inline-start/end),
   so this file only mirrors the physical pieces: transforms, origins,
   directional animations, arrows, slide-in panels and line positions.
   GSAP horizontal motion is mirrored in script.js (dirSign helper).
   ========================================================================== */

/* ---------- Arrows and directional icons ---------- */
[dir="rtl"] svg:has(> use[href="#i-arrow"]),
[dir="rtl"] svg:has(> use[href="#i-chev"]) { transform: scaleX(-1); }
[dir="rtl"] svg.arrow-back.arrow-back { transform: none; }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-4px); }
[dir="rtl"] .quick-actions a:hover { transform: translateX(-6px); }
[dir="rtl"] .eyebrow::before { transform: scaleX(-1); }

/* ---------- Header and menus ---------- */
[dir="rtl"] .roll > span::after { left: 0; right: 0; }
[dir="rtl"] .scroll-lane-fill { transform-origin: right center; left: auto; right: 0; }
[dir="rtl"] .scroll-swimmer { left: auto; right: 0; margin-left: 0; margin-right: -13px; }
[dir="rtl"] .scroll-swimmer svg { transform: scaleX(-1); }
[dir="rtl"] .menu-links a { flex-direction: row; }
[dir="rtl"] .notif-menu { transform-origin: top left; }

/* ---------- Hero ---------- */
[dir="rtl"] .hero-title .indent { padding-inline-start: clamp(0rem, 6vw, 6rem); }
[dir="rtl"] .porthole-img { transform: scaleX(-1); }       /* mirror illustration so faces look into the page */
[dir="rtl"] .wavy-line { transform: scaleX(-1); }

/* ---------- Marquees and sliders (direction reversed) ---------- */
[dir="rtl"] .marquee-track, [dir="rtl"] .tslider-track { flex-direction: row; }
[dir="rtl"].no-js .marquee-track, [dir="rtl"].io-mode .marquee-track, [dir="rtl"] .tslider-track { animation-name: marqueeRtl; }
@keyframes marqueeRtl { to { transform: translateX(50%); } }
[dir="rtl"] .tslider { mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent); }
[dir="rtl"] .vslider-progress i b, [dir="rtl"] .quiz-progress i b, [dir="rtl"] .mock-bar i { transform-origin: right; }
[dir="rtl"] .vslide figcaption { flex-direction: row; }

/* ---------- Lists, journey, program rows ---------- */
[dir="rtl"] .journey-step.is-active { transform: translateX(-10px); }
@media (max-width: 999px) { [dir="rtl"] .journey-step.is-active { transform: none; } }
[dir="rtl"] .journey-kid, [dir="rtl"] .journey-deck { left: auto; right: 10%; }
[dir="rtl"] .journey-deck { right: 0; border-radius: 12px 0 0 0; }
[dir="rtl"] .journey-ring { right: auto; left: 12%; }
[dir="rtl"] .journey-stage .journey-kid { transform: scaleX(-1); }
[dir="rtl"] .prog-row a:hover .go { transform: rotate(-135deg); }
[dir="rtl"] .hover-img.is-on { transform: translate(-50%, -50%) scale(1) rotate(3deg); }
[dir="rtl"] .badge-face.back li::before { content: "✓"; }
[dir="rtl"] .coach-card .coach-photo::after { content: "← View profile"; left: auto; right: 1rem; }

/* ---------- Swim-lane timeline (About) ---------- */
[dir="rtl"] .lane-timeline::before, [dir="rtl"] .lane-timeline .lane-progress { left: auto; right: 28px; }
[dir="rtl"] .lane-swimmer { left: auto; right: 33px; margin-left: 0; margin-right: -28px; }
[dir="rtl"] .milestone::before { left: auto; right: 21px; }
@media (min-width: 1000px) {
  [dir="rtl"] .lane-timeline::before, [dir="rtl"] .lane-timeline .lane-progress { right: 50%; margin-left: 0; margin-right: -5px; }
  [dir="rtl"] .lane-swimmer { right: 50%; }
  [dir="rtl"] .milestone::before { right: -12px; left: auto; }
  [dir="rtl"] .milestone:nth-child(odd of .milestone)::before { right: auto; left: -12px; }
}

/* ---------- Roadmap, steps, lanes ---------- */
[dir="rtl"] .roadmap .level-stop::before { right: 0; left: -2rem; }
[dir="rtl"] .roadmap .level-stop:last-child::before { left: 0; }
[dir="rtl"] .roadmap .level-stop .dot { left: auto; right: 0; }
[dir="rtl"] .steps-lane li::before { left: -50%; right: 50%; }
[dir="rtl"] .lane-marker { margin-left: 0; margin-right: -22px; }
[dir="rtl"] .lane-marker svg { transform: scaleX(-1); }
[dir="rtl"] .feedback-tl::before { left: auto; right: 6px; }
[dir="rtl"] .feedback-tl li::before { left: auto; right: calc(-1.6rem + 1px); }

/* ---------- Side panels slide in from the start side in RTL ---------- */
[dir="rtl"] .side-panel { transform: translateX(-105%); box-shadow: 30px 0 60px -30px rgba(11, 37, 69, .45); }
[dir="rtl"] .side-panel.is-open { transform: none; }
[dir="rtl"] .dash-sidebar { transform: translateX(105%); }
[dir="rtl"] .dash-sidebar.is-open { transform: none; }
@media (min-width: 1100px) { [dir="rtl"] .dash-sidebar { transform: none; } }

/* ---------- Forms ---------- */
[dir="rtl"] .field select { background-position: left 14px center; }
[dir="rtl"] .field-line::after { transform-origin: right; }
[dir="rtl"] .check .box::after { left: auto; right: 8px; }
[dir="rtl"] .switch .track::after { left: auto; right: 4px; }
[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-28px); }
[dir="rtl"] .strength i { transform-origin: right; }
[dir="rtl"] .input-wrap input[type="tel"], [dir="rtl"] .input-wrap input[type="email"] { direction: ltr; text-align: right; }

/* ---------- Tables, calendar ---------- */
[dir="rtl"] .now-line::before { left: auto; right: -6px; }
[dir="rtl"] .chart { direction: ltr; }   /* time flows left to right in charts */
[dir="rtl"] .bar i { background: linear-gradient(270deg, var(--aqua-ink), var(--aqua)); }

/* ---------- Toasts and floating controls ---------- */
@keyframes toastOutRtl { to { transform: translateX(-40px); opacity: 0; } }
[dir="rtl"] .toast.is-leaving { animation-name: toastOutRtl; }
[dir="rtl"] .hotspot-card { text-align: right; }

/* ---------- Mobile menu, footer ---------- */
[dir="rtl"] .footer-bottom { flex-direction: row; }
[dir="rtl"] .site-footer a:hover { text-decoration: underline; }

/* ---------- Split text ----------
   Split headlines are built from inline-block letters/words. Inside an RTL
   paragraph those atomic pieces would be re-ordered right-to-left, scrambling
   Latin demo copy, so split headings keep their own (LTR) reading order while
   aligning to the right edge. For real Arabic/Hebrew copy, use data-split="words"
   and remove this rule so words flow right-to-left. */
[dir="rtl"] [data-split] { direction: ltr; text-align: right; }
[dir="rtl"] .big-cta [data-split], [dir="rtl"] .lost [data-split], [dir="rtl"] .soon [data-split], [dir="rtl"] [data-split][style*="center"] { text-align: center; }
[dir="rtl"] .hero-title .indent { padding-inline-start: 0; padding-right: clamp(0rem, 6vw, 6rem); }