/* ═══════════════════════════════════════════════════════════════════════════
   PTS - ruch i przejścia

   Zasada nadrzędna: ruch ma prowadzić wzrok, a nie zabierać czas. Nic tutaj
   nie opóźnia dostępu do treści, nic nie miga i nic nie wymaga czekania.
   Każdy efekt ma stan spoczynku, w którym strona jest w pełni czytelna,
   więc wyłączony JavaScript albo `prefers-reduced-motion` nie zostawiają
   pustych miejsc.

   Ładowany po `wizual.css`.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ NAGŁÓWEK, KTÓRY USTĘPUJE ═══════════════════════════════════════════
   Pasek z logo w wymaganym rozmiarze jest wysoki, więc przy czytaniu
   zabierałby jedną szóstą ekranu. Chowa się przy przewijaniu w dół i wraca
   w górę: wtedy jest dokładnie wtedy, kiedy ktoś go szuka.                 */
.nav {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ═══ ZDJĘCIE HERO ODDYCHA ═══════════════════════════════════════════════
   Bardzo powolne zbliżenie. Ruch jest na granicy dostrzegalności i o to
   chodzi: pierwszy ekran przestaje być fotografią, a zaczyna być ujęciem.
   Parallax przy przewijaniu obsługuje `ruch.php`, więc tutaj tylko skala. */
.hero-blok .wp-block-cover__image-background {
  animation: pts-oddech 24s ease-out forwards;
}

@keyframes pts-oddech {
  from { transform: scale(1.18); }
  to   { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blok .wp-block-cover__image-background { animation: none; }
}

/* ═══ OŚ SEKCJI ══════════════════════════════════════════════════════════
   Pionowa oś ze szczeblami po lewej stronie: pokazuje, gdzie jest czytelnik
   i pozwala przeskoczyć do sekcji. Rysunek jest wprost z toru kolejowego,
   więc mówi o firmie coś, czego nie powie żaden pasek postępu.

   Buduje ją `app.js` na podstawie sekcji obecnych na stronie, więc dodanie
   sekcji w edytorze dokłada szczebel samo. Bez JavaScriptu osi po prostu
   nie ma i nic z treści nie ginie.                                         */
.os {
  position: fixed;
  left: clamp(1rem, 2.2vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
  align-items: center;
  gap: 0.9rem;
  pointer-events: none;
}

@media (min-width: 1200px) {
  .os { display: flex; }
}

.os__tor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: auto;
}

/* Szczebel jest przyciskiem, więc musi mieć pole trafienia większe niż
   sama kreska. Kreskę rysuje pseudoelement, a przycisk zostaje przezroczysty
   i wysoki na tyle, żeby dało się w niego trafić myszą. */
.os__szczebel {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  width: 1.6rem;
  height: 0.9rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.os__szczebel::before {
  content: "";
  width: 100%;
  height: 2px;
  background: var(--navy-line);
  transition: background-color 0.25s ease, width 0.25s ease;
}

.os__szczebel:hover::before,
.os__szczebel:focus-visible::before {
  background: var(--orange);
  width: 130%;
}

.os__szczebel[aria-current="true"]::before {
  background: var(--orange);
}

/* Na ciemnym tle szczeble muszą być jaśniejsze od tła, nie ciemniejsze. */
.os.na-ciemnym .os__szczebel::before { background: rgba(255, 255, 255, 0.28); }
.os.na-ciemnym .os__szczebel[aria-current="true"]::before,
.os.na-ciemnym .os__szczebel:hover::before { background: var(--orange); }

/* Znacznik pozycji: pomarańczowy prostokąt jadący po torze. Przesuwa go
   `app.js`, ustawiając `--pozycja` w pikselach. */
.os__znacznik {
  position: absolute;
  left: -0.35rem;
  top: 0;
  width: 0.7rem;
  height: 0.9rem;
  background: var(--orange);
  transform: translateY(var(--pozycja, 0px));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.os__napis {
  writing-mode: vertical-rl;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  max-height: 16rem;
  overflow: hidden;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.os.na-ciemnym .os__napis { color: var(--on-navy-3); }

@media (prefers-reduced-motion: reduce) {
  .os__znacznik { transition: none; }
}

/* ═══ WEJŚCIE NAGŁÓWKÓW SEKCJI ═══════════════════════════════════════════
   Nagłówek wjeżdża spod maski, tak samo jak nagłówek hero. Maska ma zapas
   z góry i z dołu, bo interlinia nagłówków jest ciasna i pole wiersza bywa
   niższe od liter, które w nim stoją; bez zapasu obcinałaby ogonki.        */
.js-motion .section h2[data-anim-tekst] > span {
  transform: translateY(105%);
}

.section h2[data-anim-tekst] {
  display: block;
  overflow: hidden;
  padding-block: 0.14em;
  margin-block: -0.14em;
}

.section h2[data-anim-tekst] > span {
  display: block;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.section h2[data-anim-tekst].jest > span {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .section h2[data-anim-tekst] > span { transform: none; }
  .section h2[data-anim-tekst] > span { transition: none; }
}

/* ═══ PRZEJŚCIE MIĘDZY PODSTRONAMI ═══════════════════════════════════════
   Natywne przejście widoku przeglądarki. Przeglądarki, które go nie znają,
   po prostu przeładowują stronę jak dotąd - nie ma tu żadnej zależności
   ani kodu do utrzymania. Ruch jest krótki, bo dłuższy zamienia się
   w oczekiwanie.                                                          */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pts-zanik 0.22s ease-out both;
}

::view-transition-new(root) {
  animation: pts-wejscie 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pts-zanik {
  to { opacity: 0; }
}

@keyframes pts-wejscie {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ═══ WYRÓWNANIE ═════════════════════════════════════════════════════════
   Sekcje idą do lewej krawędzi kolumny, tak jak na landingu produktu.
   Wyśrodkowany blok tekstu wygląda na zaproszenie, a nie na materiał
   techniczny, i przy dłuższym akapicie oko gubi początek wiersza.
   Wezwanie do kontaktu zostaje wyśrodkowane celowo: tam chodzi o jeden
   gest, a nie o czytanie.                                                  */
article .section,
article .section h2,
article .section > p,
article .section .wp-block-column > p,
article .section .card,
article .section .card h3,
article .section .card p {
  text-align: left;
}

article .section .wp-block-list { text-align: left; }