/*
 * Most of the layout uses logical properties (inline-start/end, margin-inline, etc.)
 * so it adapts to [dir="rtl"] automatically. This file only overrides the handful
 * of things logical properties can't reach: background-position percentages,
 * decorative mask positions, and icons that visually imply a direction.
 */

[dir='rtl'] .hero::before {
  background:
    radial-gradient(46% 60% at 22% 8%, rgba(126, 175, 195, 0.38), transparent 70%),
    radial-gradient(38% 46% at 92% 30%, rgba(14, 86, 118, 0.16), transparent 70%);
}

[dir='rtl'] .hero::after {
  mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, black, transparent 75%);
}

[dir='rtl'] .t-nav-icon,
[dir='rtl'] .btn .icon-arrow {
  transform: scaleX(-1);
}

[dir='rtl'] .hero-visual__card {
  text-align: right;
}