/*
 * UKLAD OD PRAWEJ — poprawki, ktorych NIE da sie wyrazic wlasciwosciami
 * logicznymi. Laduje sie WYLACZNIE na stronach z `dir="rtl"` (dzis arabski,
 * `Strona.astro`), po wszystkich arkuszach z `public/`.
 *
 * Podzial pracy:
 *   - odstepy, krawedzie, polozenie i wyrownanie stoja w arkuszach zrodlowych
 *     jako wlasciwosci LOGICZNE (`margin-inline-start`, `inset-inline-end`,
 *     `text-align: start`) i odwracaja sie same — w ukladzie od lewej znacza
 *     dokladnie to, co dawne `left`/`right`;
 *   - tutaj zostaje to, co logiczne nie jest: transformacje, gradienty,
 *     maski, `transform-origin`, klatki animacji i lustrzane ikony kierunkowe.
 *
 * KAZDA regula niesie `:dir(rtl)`. Arkusze pakowane przez Astro stoja w <head>
 * DALEJ niz ten plik, wiec przy rownej swoistosci wygralyby z nim — `:dir(rtl)`
 * dokłada jedna pseudoklase i rozstrzyga to bez `!important`.
 *
 * Typografia arabska (rozstrzelenie, wersaliki, kursywa, interlinia tekstu)
 * nie mieszka tutaj, tylko w `src/styles/tokens.css` pod `:lang(ar)`: dotyczy
 * pisma, a nie kierunku, i obowiazuje takze wysepki `lang="ar"` na stronach
 * pisanych od lewej. Ponizej sa tylko interlinie, ktore komponenty ustawiaja
 * same i ktore dla liter arabskich sa za ciasne.
 */

/* ————— Ikony kierunkowe ————————————————————————————————————————————————
 *
 * Strzalka „dalej" ma wskazywac kierunek czytania. Wybieramy ksztalt po
 * DANYCH SCIEZKI, a nie po klasie: ikony stoja w szablonach jako gotowe SVG
 * (kilkadziesiat kopii w naglowku, stopce i sekcjach), wiec kazda nowa kopia
 * odwraca sie bez dopisywania czegokolwiek do znacznikow.
 *
 * `scale`, a nie `transform`: wlasciwosc `scale` sklada sie z `transform`,
 * zamiast go nadpisywac — przesuniecia przy najechaniu
 * (`transform: translate(2px, -2px)`) dzialaja dalej i, odbite razem
 * z ikona, ida w strone czytania.
 *
 * NIE odwracamy: krzyzyka zamkniecia, ptaszka, globusa, dymka czatu, lupy,
 * kosza, strzalek pionowych, znakow firm ani przycisku odtwarzania (media
 * graja w czasie, nie w kierunku pisma).
 */
svg:dir(rtl):has(> path[d='M5 19 19 5M5 5h14v14']),
svg:dir(rtl):has(> path[d='M4 12h16m-6-6 6 6-6 6']),
svg:dir(rtl):has(> path[d='M5 12h14m-6-6 6 6-6 6']),
svg:dir(rtl):has(> path[d='M20 12H4m6-6-6 6 6 6']),
svg:dir(rtl):has(> path[d='M5 12 19 5l-6 14-2-6-6-1z']) {
  scale: -1 1;
}

/* ————— Bohater strony glownej ————————————————————————————————————————— */

/*
 * LUSTRO, A NIE ODWRACANIE PO KAWALKU (zgloszenie wlasciciela 2026-10-13).
 * Rysunek stoi po stronie konca wiersza (`inset-inline-end`, `margin-inline`
 * w styles.css i mobile.css), wiec na stronie od prawej juz wychodzi za LEWA
 * krawedz. Sam mozg byl jednak nieodbity: patrzyl w strone krawedzi, a nie
 * tekstu. Odbijamy CALY kontener — plakat, plotno animacji i film naraz.
 *
 * Dzieki temu maski wygaszenia (90deg przy krawedzi zwroconej do tekstu)
 * i animacja wejscia (`art-in`, przesuniecie od strony krawedzi) odbijaja sie
 * razem z rysunkiem i NIE potrzebuja osobnych wersji od prawej: wlasciwosc
 * `scale` mnozy sie z `transform` animacji, a nie go zastepuje. Rysunek jest
 * dekoracja (`aria-hidden`, `pointer-events: none`), bez tekstu w srodku.
 */
.hero-art:dir(rtl) {
  scale: -1 1;
}

/* Kolo „Porozmawiajmy": po najechaniu strzalka obraca sie w strone czytania. */
.contact-arrow:dir(rtl):hover {
  transform: rotate(-45deg);
}

/* ————— Makieta Erudis —————————————————————————————————————————————————— */

.module[data-erudis]:dir(rtl) {
  animation-name: hero-demo-slide-rtl;
}

@keyframes hero-demo-slide-rtl {
  0% {
    opacity: 0;
    transform: translate(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.feed[data-erudis] li[data-erudis]:dir(rtl) {
  animation-name: hero-demo-slide-rtl;
}

/* ————— Tasma logotypow (KlienciSciana) ————————————————————————————————
 *
 * Tory stoja w rzedzie od prawej: pierwszy przy prawej krawedzi, drugi na
 * lewo od niego. Przesuniecie o -100% (w lewo) wypchneloby oba poza pole
 * i otworzylo dziure — od prawej tasma jedzie W PRAWO, o te same sto procent
 * wlasnej szerokosci toru, wiec petla zamyka sie tak samo bez skoku.
 */
.kl-tor:dir(rtl) {
  animation-name: kl-przesuw-rtl;
}

@keyframes kl-przesuw-rtl {
  to {
    transform: translate3d(100%, 0, 0);
  }
}

/* ————— Szyna aktualnosci ————————————————————————————————————————————— */

/* Wygaszenie przy krawedzi KONCA szyny — od prawej to lewa krawedz panelu. */
.ak-wygaszenie:dir(rtl) {
  background: linear-gradient(to left, rgb(247 248 252 / 0%), var(--paper) 78%);
}

/* ————— Asystent Neo ————————————————————————————————————————————————— */

/* Pasek odliczania przed przejsciem kurczy sie ku poczatkowi wiersza. */
.neo-nawigacja-pasek:dir(rtl) {
  transform-origin: right;
}