/* ==========================================================================
   SEES — RTL overrides (loaded only when is_rtl()).
   Arabic typography (font, sizes, line-heights, no uppercase / tracking) comes
   from the :lang(ar) tokens in main.css. Only mirroring lives here.
   ========================================================================== */

/* Lines and bars grow from the right. */
.eyebrow__line,
.solution-row__line,
.solution-card__bar,
.primary-nav__list a::after { transform-origin: right center; }

/* Mirror directional arrows and nudge them the other way. */
.icon-arrow { transform: scaleX(-1); }
.arrow:hover .icon-arrow,
.solution-card:hover .icon-arrow { transform: scaleX(-1) translateX(5px); }

/* Photo fades in from the left. */
.hero::before {
	/* Mirrors the LTR fade; the Arabic hero photo is mirrored too (sky on the right). */
	background:
		linear-gradient(270deg,
			color-mix(in srgb, var(--fade) 88%, transparent) 0%,
			color-mix(in srgb, var(--fade) 72%, transparent) 26%,
			color-mix(in srgb, var(--fade) 30%, transparent) 42%,
			transparent 56%);
}
.page-header {
	background:
		radial-gradient(60% 90% at 12% 30%, var(--glow-1) 0%, transparent 70%),
		radial-gradient(40% 60% at 30% 110%, var(--glow-2) 0%, transparent 70%),
		linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
}
.page-header::before {
	-webkit-mask-image: linear-gradient(270deg, transparent 25%, #000 75%);
	mask-image: linear-gradient(270deg, transparent 25%, #000 75%);
}
/* Circuit lines enter from the left edge. */
.page-header__circuit { transform: scaleX(-1); }
.story-card__shade {
	background: linear-gradient(270deg, color-mix(in srgb, var(--c-navy) 82%, transparent) 0%, color-mix(in srgb, var(--c-navy) 35%, transparent) 55%, transparent 100%);
}
.cta--photo .cta__box::before {
	background: linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 95%, transparent) 0%, color-mix(in srgb, var(--c-ink) 75%, transparent) 45%, color-mix(in srgb, var(--c-ink) 10%, transparent) 100%);
}
.hero__media img { object-position: center bottom; }
.hero__mark { animation-name: drift-rtl; }
@keyframes drift-rtl { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(2deg); } }

/* Marquee scrolls the other way. */
.marquee__track { animation-name: marq-rtl; }
@keyframes marq-rtl { to { transform: translateX(50%); } }

@media (max-width: 760px) {
	.hero__media img { object-position: 16% center; }
}