/* =====================================================================
   KINGSIDE — rtl.css
   Right-to-left overrides only. Activated by dir="rtl" on <html>
   (toggle persisted in localStorage, applied before first paint).
   style.css already uses logical properties (margin-inline, inset-inline,
   border-inline …), so this file only fixes what logic alone cannot:
   transforms, transform origins, gradients, clip-paths and keyframes.
   Chess boards and move notation intentionally stay LTR.
   ===================================================================== */

/* 1. Things that must stay left-to-right ------------------------------ */
[dir="rtl"] .board,
[dir="rtl"] .movelist,
[dir="rtl"] .flipclock,
[dir="rtl"] .puzzle__board,
[dir="rtl"] .gridhero__grid,
[dir="rtl"] .big-cta__board,
[dir="rtl"] .pix404,
[dir="rtl"] .method__line,
[dir="rtl"] .timeline__move,
[dir="rtl"] .footer__notation,
[dir="rtl"] .auth__move,
[dir="rtl"] .story__note,
[dir="rtl"] .countdown,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .preloader__board {
  direction: ltr;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] {
  text-align: right;
}

/* 2. Directional icons ------------------------------------------------- */
[dir="rtl"] .i-flip {
  transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .i-flip,
[dir="rtl"] .btn:hover>.i-flip:last-child,
[dir="rtl"] .quick__btn:hover>.i-flip:last-child {
  transform: scaleX(-1) translateX(4px);
}

[dir="rtl"] .news-form__btn:hover {
  transform: translateX(-4px);
}

[dir="rtl"] .auth__back .i,
[dir="rtl"] .i-back,
[dir="rtl"] [data-quote-prev] .i {
  transform: none;
}

[dir="rtl"] .cal__head .icon-btn:first-child .i {
  transform: none;
}

[dir="rtl"] .hover-list__row:hover>.i {
  transform: scaleX(-1) rotate(-45deg);
}

/* 3. Header, menu, progress -------------------------------------------- */
[dir="rtl"] .menu__link:hover .menu__txt,
[dir="rtl"] .menu__link:focus-visible .menu__txt {
  transform: translateX(-14px);
}

[dir="rtl"] .scroll-progress__bar {
  transform-origin: 100% 50%;
}

[dir="rtl"] .scroll-progress__pawn {
  left: auto;
  right: 0;
  transform: translateX(calc(var(--p, 0) * (18px - 100vw)));
}

[dir="rtl"] .logo:hover .logo__mark {
  transform: rotate(90deg);
}

/* 4. Forms -------------------------------------------------------------- */
[dir="rtl"] .field__line {
  transform-origin: 100% 50%;
}

[dir="rtl"] select.field__input {
  background-position: 12px 52%, 7px 52%;
}

[dir="rtl"] .steps__bar span,
[dir="rtl"] .quiz__bar span,
[dir="rtl"] .ladder__fill,
[dir="rtl"] .bar__fill,
[dir="rtl"] .meter__bars span {
  transform-origin: 100% 50%;
}

[dir="rtl"] .form-step,
[dir="rtl"] .flow__step {
  --step-x: -24px;
}

/* 5. Panels, modals, drawers, toasts ----------------------------------- */
[dir="rtl"] .panel__dialog {
  transform: translateX(-104%);
}

[dir="rtl"] .panel.is-open .panel__dialog {
  transform: none;
}

[dir="rtl"] .dash-side {
  transform: translateX(102%);
}

[dir="rtl"] .dash-side.is-open {
  transform: none;
}

@media (min-width: 1100px) {
  [dir="rtl"] .dash-side {
    transform: none;
  }
}

[dir="rtl"] .notif__menu {
  transform-origin: 10% 0;
}

[dir="rtl"] .toast.is-leaving {
  animation-name: toastOutRtl;
}

@keyframes toastOutRtl {
  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

/* 6. Sections ----------------------------------------------------------- */
[dir="rtl"] .hero__tilt::after {
  inset: 14px 14px -14px -14px;
}

[dir="rtl"] .scroll-cue i::after {
  animation-name: cueRtl;
}

@keyframes cueRtl {
  0% {
    transform: translateX(100%);
  }

  55% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media (hover: hover) {
  [dir="rtl"] .hover-list__row:hover .hover-list__name {
    transform: translateX(-16px);
  }
}

[dir="rtl"] .split-list__btn.is-active .split-list__name {
  transform: translateX(-14px);
}

[dir="rtl"] .outline-fill::after {
  clip-path: inset(0 0 0 calc((1 - var(--fill, 1)) * 100%));
}

[dir="rtl"] .page-hero__board {
  mask-image: linear-gradient(to right, #000 20%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 20%, transparent);
}

[dir="rtl"] .marquee__track {
  direction: rtl;
}

[dir="rtl"] .principle:hover .principle__piece {
  transform: translateY(-10px) rotate(6deg);
}

[dir="rtl"] .quote__text p::before {
  content: "”";
}

[dir="rtl"] .quote__text p::after {
  content: "“";
}

[dir="rtl"] .statement--right .eyebrow {
  flex-direction: row;
}

[dir="rtl"] .eyebrow {
  letter-spacing: 0.04em;
}

[dir="rtl"] .label {
  letter-spacing: 0.02em;
}

[dir="rtl"] .timeline__line span {
  transform-origin: 50% 0;
}

[dir="rtl"] .podium {
  direction: rtl;
}

/* 7. Dashboard ---------------------------------------------------------- */
[dir="rtl"] .dnav__link:hover {
  padding-inline-start: 16px;
}

[dir="rtl"] .wk__hour {
  transform: translateY(-6px);
}

[dir="rtl"] .entry-pass::after {
  background-position: 17.5px 0, 0 17.5px;
}

/* 8. 404 / Coming soon / Login ------------------------------------------ */
[dir="rtl"] .nf__king-svg,
[dir="rtl"] .mate__king {
  transform-origin: 28% 92%;
  animation-name: toppleRtl;
}

@keyframes toppleRtl {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(8deg);
  }

  45% {
    transform: rotate(-4deg);
  }

  100% {
    transform: rotate(-88deg) translateY(4%);
  }
}

[dir="rtl"] .soon__bg {
  animation-name: boardDriftRtl;
}

@keyframes boardDriftRtl {
  from {
    transform: translate3d(0, 0, 0) rotate(8deg);
  }

  to {
    transform: translate3d(180px, -180px, 0) rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  [dir="rtl"] .nf__king-svg,
  [dir="rtl"] .mate__king {
    transform: rotate(-88deg) translateY(4%);
  }
}