/* ==========================================================================
   NetWelop — RTL corrections

   The rest of the system is written with logical properties (inline-start,
   margin-inline, padding-block …) so it mirrors automatically. What is left
   here are the cases CSS logical properties genuinely cannot express:
   physical transforms, physical gradient angles, and glyph direction.
   ========================================================================== */

@layer components {
  [dir="rtl"] {
    /* Persian text at the same optical size wants a touch more weight to hold
       its own against Latin at 400. */
    --fs-base: clamp(0.98rem, 0.93rem + 0.28vw, 1.1rem);
  }

  /* --------------------------------------------------------- direction ---- */
  [dir="rtl"] .eyebrow::before {
    background: linear-gradient(
      to left,
      transparent,
      color-mix(in oklab, var(--cyan-400) 90%, transparent)
    );
  }

  [dir="rtl"] .hairline {
    background: linear-gradient(
      to left,
      transparent,
      var(--line-strong) 20%,
      var(--line-strong) 80%,
      transparent
    );
  }

  /* transform-origin has no logical keyword in current browsers */
  [dir="rtl"] .btn-quiet::before,
  [dir="rtl"] .nav-progress {
    transform-origin: right;
  }

  [dir="rtl"] .btn-primary::after { transform: translateX(120%); }
  [dir="rtl"] .btn-primary:hover::after { transform: translateX(-120%); }

  /* Gradient text sweeps toward the reading direction */
  [dir="rtl"] .grad-text {
    background: linear-gradient(264deg, #ffffff 12%, var(--indigo-300) 48%, var(--cyan-300) 88%);
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Masks are physical: flip the marquee fade so it matches the flow */
  [dir="rtl"] .marquee {
    mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 12%, #000 88%, transparent);
  }

  /* Icons that point somewhere must point the other way */
  [dir="rtl"] .flip-x { transform: scaleX(-1); }

  [dir="rtl"] .timeline { padding-inline-start: var(--sp-8); }

  /* -------------------------------------------------------------- numbers -- */
  /* Latin numerals, phone numbers, URLs, code and prices inside Persian text
     must stay LTR or the digits reorder on screen. */
  [dir="rtl"] .ltr,
  [dir="rtl"] .mono,
  [dir="rtl"] .terminal-body,
  [dir="rtl"] .device-url,
  [dir="rtl"] .prose pre,
  [dir="rtl"] code,
  [dir="rtl"] .plan-amount {
    direction: ltr;
    unicode-bidi: isolate;
  }

  [dir="rtl"] .plan-price,
  [dir="rtl"] .stat-value {
    /* Value and unit still read right-to-left as a phrase; only the numeral
       run itself is isolated. */
    direction: rtl;
  }

  /* Persian headlines do not want negative tracking — the letterforms join. */
  [dir="rtl"] h1,
  [dir="rtl"] h2,
  [dir="rtl"] h3,
  [dir="rtl"] .hero-title,
  [dir="rtl"] .page-title,
  [dir="rtl"] .section-title,
  [dir="rtl"] .stat-value,
  [dir="rtl"] .plan-name {
    letter-spacing: 0;
  }

  /* Uppercase + wide tracking is a Latin device; on Persian it just breaks
     the joins, so eyebrows keep their Latin styling only for Latin text. */
  [dir="rtl"] .eyebrow {
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
  }

  [dir="rtl"] .eyebrow-latin {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    direction: ltr;
  }

  [dir="rtl"] .scroll-cue,
  [dir="rtl"] .timeline-year,
  [dir="rtl"] .tag {
    letter-spacing: 0;
    text-transform: none;
  }

  /* Latin brand/product names embedded in Persian copy */
  [dir="rtl"] .latin {
    font-family: var(--font-sans);
    direction: ltr;
    unicode-bidi: isolate;
    letter-spacing: var(--tracking-snug);
  }
}