/* rtl.css - RTL-specific overrides */

[dir="rtl"] .hero-image-rail-track {
  animation-name: railScrollRTL;
}

@keyframes railScrollRTL {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(50%, 0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .hero-image-rail-track {
    animation-name: railScrollRTL;
  }
}

@media (prefers-reduced-motion: reduce) {
  [dir="rtl"] .hero-image-rail-track {
    animation: none;
  }
}

/* Slider arrows - in RTL the visual direction should match the linear flow:
   "previous" (chevron-left) is the right-hand button, "next" (chevron-right) is the left-hand button.
   The buttons stay in their original logical positions (inset-inline-start/end) but the
   SVG arrows need to flip so they point in the correct direction. */
[dir="rtl"] .slider-nav svg {
  transform: scaleX(-1);
}

/* Make sure copy-block dots stay circular in RTL */
[dir="rtl"] .copy-block-chrome .dot {
  border-radius: 50% / 50% !important;
}