/* ==========================================================================
   AQUAVOLTX — RTL / Arabic layer
   Layout mirroring is handled by logical properties in style.css.
   This file only holds what logical properties cannot express:
   directional icons, transform origins, background positions, motion
   direction, and Arabic typographic tuning.
   ========================================================================== */

/* Arabic typography: Plex Sans Arabic, no negative tracking (it breaks joined letters),
   and a taller line-height for ascenders/descenders and diacritics. */
html[lang="ar"] {
  --font-body: var(--font-arabic);
  --lh-body: 1.8;
  --lh-tight: 1.35;
  --tracking-display: 0;
}
html[lang="ar"] .hero-title { line-height: 1.3; }
html[lang="ar"] .section-title { line-height: 1.4; }
html[lang="ar"] .btn { letter-spacing: 0; }
/* Latin-only elements keep their Latin face inside Arabic pages */
html[lang="ar"] .brand-word,
html[lang="ar"] [dir="ltr"],
html[lang="ar"] .figure-value { font-family: var(--font-latin); }

/* Directional icons (arrows) point toward the reading direction */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .icon-dir,
[dir="rtl"] .text-link:hover .icon-dir,
[dir="rtl"] .service-link:hover .icon-dir { transform: scaleX(-1) translateX(4px); }

/* Transform origins & background positions are physical, so flip them;
   --dir signs every horizontal motion (reveals, marquee, hover nudges) */
[dir="rtl"] { --origin-start: right; --dir: -1; }
[dir="rtl"] .wa-panel { transform-origin: bottom left; }
[dir="rtl"] .field select { background-position: left 0.8rem center; }

/* Phone/email values stay LTR inside RTL lines but align with the Arabic column */
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
[dir="rtl"] .field input[dir="ltr"]::placeholder { text-align: right; }


/* Marquee travels toward the reading start (separate keyframes: var() inside @keyframes is unreliable in Safari) */
[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
[dir="rtl"] .marquee { mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(270deg, transparent, #000 8%, #000 92%, transparent); }

/* Arabic opening quote mark for the testimonials watermark */
[dir="rtl"] .testimonials::after { content: "\201C"; }