/* ============================================================================
   RTL corrections.
   The component layer is written in logical properties, so this file only
   carries what logical values genuinely cannot express: transform origins,
   physical gradient directions, and script-level typography.
   ========================================================================= */

/* Every sweep, underline and draw-in grows from the reading start edge.
   `transform-origin` has no logical keywords, so each one needs stating. */
[dir="rtl"] .nav__link::after,
[dir="rtl"] .chip::after,
[dir="rtl"] .dim__rule,
[dir="rtl"] .hero__rule::before,
[dir="rtl"] .spec-table tr::after {
  transform-origin: right center;
}

/* The plate sweep travels with the reading direction. */
[dir="rtl"] .plate__sweep {
  background: linear-gradient(
    to left,
    transparent,
    rgb(255 154 82 / 0.06) 45%,
    var(--flame-500) 50%,
    rgb(255 154 82 / 0.06) 55%,
    transparent
  );
}

[dir="rtl"] .js .plate[data-plate].is-in .plate__sweep {
  animation-name: plate-sweep-rtl;
}

@keyframes plate-sweep-rtl {
  0%   { opacity: 0; transform: translateX(120%); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-320%); }
}

/* Physical gradient/mask directions. */
[dir="rtl"] .ground,
[dir="rtl"] .hero__ground {
  mask-image: radial-gradient(115% 85% at 80% 15%, #000 20%, transparent 70%);
}

[dir="rtl"] .hero__heat {
  inset-inline-end: auto;
  inset-inline-start: -12%;
}

[dir="rtl"] .tile__cap {
  background: linear-gradient(to top, rgb(18 19 22 / 0.85), transparent);
}

/* The play badge mirrors to the right edge with the flow, which is correct —
   but the triangle inside it must be flipped back. A play arrow points along
   the timeline, and a timeline runs left to right in every locale. */
[dir="rtl"] .tile__play svg {
  transform: scaleX(-1);
  margin-inline-start: 0;
  margin-inline-end: 2px;
}

/* Flags are artwork with a fixed orientation: the UAE hoist stays at the
   staff, not at the reading edge. Nothing here may mirror them. */
[dir="rtl"] .lang__flag { transform: none; }

/*
   The headline reveal masks each word in a slot and slides it up. That works
   for Latin, where glyphs sit inside their advance box, but Arabic descenders
   drop well below the baseline and initial/final forms overhang horizontally —
   both get sliced by the mask. RTL therefore drops the mask entirely and
   animations.js fades the words in instead: same intent, typography that
   suits the script.
*/
[dir="rtl"] .word { overflow: visible; }

/* Latin product codes (DS-800, KV-3000) inside Arabic text must stay LTR. */
[dir="rtl"] .card__title,
[dir="rtl"] .cat__title,
[dir="rtl"] .sticky-sel__title,
[dir="rtl"] .drawer__link,
[dir="rtl"] .quote-bar__name {
  unicode-bidi: plaintext;
}

/* Spec values are number+unit pairs. `isolate` keeps the RTL paragraph
   direction, which reorders the two LTR runs in "72 dB" into "dB 72".
   `plaintext` takes direction from the first strong character instead, so
   "72 dB" stays LTR while "٤٥ ثانية" stays RTL. */
[dir="rtl"] .spec-table td,
[dir="rtl"] .card__spec b,
[dir="rtl"] .sticky-sel__meta b,
[dir="rtl"] .dim__value {
  unicode-bidi: plaintext;
  /* plaintext resolves a value with no strong character ("24") to LTR, which
     would drag it to the opposite edge. Pin the alignment so the column
     reads as one straight edge whatever each value's internal direction. */
  text-align: right;
}

/* The metric value is digits plus a unit and should follow page direction. */
[dir="rtl"] .metric__value { unicode-bidi: isolate; }

/* The scroll hint is set vertically, which Latin tolerates and Arabic does
   not: the script's joined forms break apart and the result is unreadable.
   It is decorative and aria-hidden, so RTL simply drops it rather than
   shipping a word that cannot be read. */
[dir="rtl"] .hero__scroll { display: none; }

/* Breadcrumb separators lean the other way. */
[dir="rtl"] .breadcrumb li + li::before { content: "\\"; }

/* The drawer slides in from the reading start edge. */
[dir="rtl"] .drawer { border-inline-start: 0; border-inline-end: var(--hairline) solid var(--line); }

/* Native controls sometimes keep an LTR alignment. */
[dir="rtl"] .field__control,
[dir="rtl"] .search input { text-align: start; }

/* Thumbnail strips and chip rows scroll from the right. */
[dir="rtl"] .gallery__thumbs,
[dir="rtl"] .catrail { direction: rtl; }