/* RTL overrides for nintendo-switch.css.

   The gutter anchors are written with inset-inline-start / inset-inline-end in the base sheet,
   so the three cutouts move to the mirrored gutter on their own: Mario and Luigi stand in the
   right-hand gutter in Arabic, Donkey Kong in the left. Same for the border on the closing
   heading and the row-reverse hero.

   What cannot mirror itself is anything with a direction baked into a value: a gradient angle
   and the entrance transforms. That is what this file is for. */

/* The hero text scrim runs from the reading edge outwards, so in Arabic it starts on the right. */
[dir="rtl"] .nsw .pcg-hero__text {
    background: linear-gradient(270deg, rgba(20, 22, 28, .92) 0%, rgba(20, 22, 28, .65) 45%, transparent 75%);
}

/* The two entrances are vertical, so the travel needs no mirroring - but the tilt does: a
   character leaning into the page from the left edge has to lean the other way when it walks in
   from the right. */
[dir="rtl"] .nsw-sticker--above { transform: translateY(-160px) rotate(8deg); }
[dir="rtl"] .nsw-sticker--below { transform: translateY(160px) rotate(-8deg); }

/* A side entrance is a physical direction: "start" is the right edge in Arabic, so the walk-in
   has to come from +X, not -X. */
[dir="rtl"] .nsw-sticker--side-start { transform: translateX(160px) rotate(8deg); }
[dir="rtl"] .nsw-sticker--side-end { transform: translateX(-160px) rotate(-8deg); }
[dir="rtl"] .nsw-sticker.is-in { transform: none; animation-name: nsw-float-rtl; }

@keyframes nsw-float-rtl {
    from { transform: translateY(0) rotate(2deg); }
    to { transform: translateY(-12px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
    [dir="rtl"] .nsw-sticker--above,
    [dir="rtl"] .nsw-sticker--below { transform: none; }
    [dir="rtl"] .nsw-sticker.is-in { animation: none; }
}

/* The promo-bar sweep travels with the reading direction: a gradient angle and a translate sign
   are both physical, so in Arabic the highlight starts on the right and runs left. */
[dir="rtl"] .nsw > .container > .theme_1 .promo-bar::after {
    background: linear-gradient(260deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 66%);
    transform: translateX(100%);
    animation-name: nsw-sweep-rtl;
}

@keyframes nsw-sweep-rtl {
    to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    [dir="rtl"] .nsw > .container > .theme_1 .promo-bar::after { animation: none; }
}

/* "Joy-Con", "eShop", "Switch 2", "OLED", "4K" and "1080p" keep their latin run intact inside
   Arabic copy instead of being reordered around the surrounding text. */
[dir="rtl"] .nsw-about h2,
[dir="rtl"] .nsw-about p { unicode-bidi: plaintext; }

/* Arabic runs taller than latin, so the closing copy needs the extra leading. */
[dir="rtl"] .nsw-about p {
    line-height: 1.85;
    max-width: 66ch;
}

/* The big section headings are tight-tracked for latin; Arabic needs the letters left alone and
   a little more room between the lines. */
[dir="rtl"] .nsw .theme_1 .card__header h2,
[dir="rtl"] .nsw .theme_default_container .card__header h2,
[dir="rtl"] .nsw .theme_8_head h2,
[dir="rtl"] .nsw .theme_3 .hero h2,
[dir="rtl"] .nsw .theme_10_body h2,
[dir="rtl"] .nsw-stage h2:not(.pcg-sr) {
    letter-spacing: 0;
    line-height: 1.2;
    unicode-bidi: plaintext;
}

/* Latin hardware values ("7.9\" LCD, 1080p", "256 GB") stay left-to-right inside the Arabic
   comparison, and its titles ("سويتش OLED") keep the latin word in place. */
[dir="rtl"] .theme_9--static .theme_9_spec dd,
[dir="rtl"] .theme_9--static .theme_9_title { unicode-bidi: plaintext; }

/* Theme 0 card titles and prices mix Arabic product names with latin model numbers. */
[dir="rtl"] .nsw .theme_default_container .slide_product_title,
[dir="rtl"] .nsw .theme_default_container .product__price { unicode-bidi: plaintext; }