/* Direction-aware adjustments for the home hero. */
html[dir="rtl"] .hero-copy { text-align: right; }

html[dir="ltr"] .hero-layout {
  direction: ltr;
}

html[dir="ltr"] .hero-copy {
  text-align: left;
}

html[dir="ltr"] .hero-visual {
  direction: ltr;
}

html[dir="ltr"] .hero-grid-pattern {
  inset: 0 48% 0 0;
  mask-image: linear-gradient(270deg, transparent, #000 30%, transparent 85%);
}

html[dir="ltr"] .orbit-one { left: auto; right: 38%; }
html[dir="ltr"] .orbit-two { left: auto; right: 49%; }
html[dir="ltr"] .visual-glow { left: 10%; right: auto; }

html[dir="ltr"] .golden-gate { left: 15%; right: auto; }
html[dir="ltr"] .golden-gate:before { left: -20px; right: auto; }
html[dir="ltr"] .golden-gate:after { left: auto; right: -20px; }
html[dir="ltr"] .gate-logo { left: 88px; right: auto; }
html[dir="ltr"] .gate-line { transform-origin: left; }
html[dir="ltr"] .line-a { left: 25px; right: auto; transform: rotate(42deg); }
html[dir="ltr"] .line-b { left: auto; right: 25px; transform: rotate(-42deg); }
html[dir="ltr"] .line-c { left: 97px; right: auto; }

html[dir="ltr"] .card-sites { left: auto; right: 2%; }
html[dir="ltr"] .card-shops { left: auto; right: 7%; }
html[dir="ltr"] .card-chart { left: 6%; right: auto; }
html[dir="ltr"] .float-card { text-align: left; }

html[dir="ltr"] .visual-caption {
  left: auto;
  right: 0;
  border-left: 2px solid var(--gold);
  border-right: 0;
  padding-left: 12px;
  padding-right: 0;
}

html[dir="ltr"] .hero-bottom .container { direction: ltr; }
html[dir="ltr"] .hero-bottom .container > p:last-child { direction: ltr; }

@media (max-width: 820px) {
  html[dir="ltr"] .hero-copy { text-align: center; }
  html[dir="ltr"] .golden-gate { left: calc(50% - 155px); right: auto; }
  html[dir="ltr"] .visual-glow { left: calc(50% - 165px); right: auto; }
  html[dir="ltr"] .card-sites {
    left: auto;
    right: 0;
    transform-origin: right top;
  }
  html[dir="ltr"] .card-shops {
    left: auto;
    right: 4%;
    transform-origin: right top;
  }
  html[dir="ltr"] .card-chart {
    left: 0;
    right: auto;
    transform-origin: left bottom;
  }
  html[dir="ltr"] .visual-caption {
    left: auto;
    right: 4px;
  }
}