/* ============================================================
   Ruch — warstwa dodatkowa, nie fundament.

   Wszystko tutaj jest wyłącznie CSS-em: żadnego JavaScriptu, więc nic nie
   „nie zadziała, bo skrypt się nie wczytał”, a nagłówek CSP może dalej mieć
   script-src 'none'. Animacje przewijania opierają się na `animation-timeline`,
   które starsze przeglądarki po prostu ignorują — strona zostaje wtedy
   nieruchoma i kompletna.

   Dwa warunki obowiązują w całym pliku:
   1. stan bazowy jest zawsze stanem końcowym — nic nie startuje niewidoczne
      poza blokiem @supports, więc brak obsługi nigdy nie ukrywa treści;
   2. `prefers-reduced-motion: reduce` wyłącza wszystko. Odbiorcami serwisu są
      uczniowie ze SPE — to nie jest ustawienie teoretyczne.

   Żeby usunąć cały ruch ze strony: skasuj <link> do tego pliku w base.njk.
   ============================================================ */

/* ---------- przejścia między podstronami ---------- */

/* Nagłówek i stopka zostają na miejscu, zmienia się tylko treść. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: zniknij 120ms ease-out both;
}
::view-transition-new(root) {
  animation: pojaw-sie 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes zniknij {
  to { opacity: 0; }
}
@keyframes pojaw-sie {
  from { opacity: 0; transform: translateY(8px); }
}

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

/* ---------- pasek postępu czytania ---------- */

/* Zieleń na bieli ma 3,09 : 1 — powyżej progu 3 : 1 dla elementów graficznych.
   Bez obsługi `animation-timeline` pasek zostaje zwinięty do zera, czyli
   niewidoczny; nie zostawia po sobie martwej kreski. */
.postep {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 30;
  background: var(--ks-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@keyframes postep {
  to { transform: scaleX(1); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .postep {
      animation: postep linear;
      animation-timeline: scroll(root block);
    }
  }
}

/* ---------- nagłówek ---------- */

/* Cień pojawia się dopiero, gdy nagłówek zaczyna nachodzić na treść. */
@keyframes cien-naglowka {
  to { box-shadow: 0 12px 32px -22px rgba(17, 17, 17, 0.55); }
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
    .naglowek {
      animation: cien-naglowka linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 140px;
    }
  }
}

/* ---------- linia sprawczości rysuje się sama ---------- */

/* Stan „nienarysowana” siedzi w klatce kluczowej, nie na elemencie, a wypełnienie
   jest tylko wsteczne. Gdyby animacje w ogóle nie działały, obowiązuje styl
   bazowy — czyli linia narysowana w całości, a nie pusty pasek. */
@keyframes rysuj-linie {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* działa dzięki pathLength="1" na ścieżce — patrz partials/linia.njk */
  .teza__linia path {
    animation: rysuj-linie 1.5s cubic-bezier(0.33, 0.9, 0.36, 1) 0.2s backwards;
  }
}

/* ---------- kreski wątków w indeksie działań ---------- */

/* Kreska jest wzorzysta (kropki, kreski), więc nie da się jej narysować
   przesuwaniem dasharray — odsłaniamy ją maską od lewej. */
@keyframes rysuj-watek {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dzialanie-wiersz .watek,
    .dzialanie-naglowek .watek {
      animation: rysuj-watek linear both;
      animation-timeline: view();
      animation-range: entry 12% cover 32%;
    }
  }
}

/* ---------- kreski nad krokami metody ---------- */

@keyframes rysuj-kreske {
  from { transform: scaleX(0); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .krok::before {
      animation: rysuj-kreske cubic-bezier(0.22, 0.61, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry calc(6% + var(--opoznienie, 0%)) cover calc(26% + var(--opoznienie, 0%));
    }
  }
}

/* ---------- odsłanianie treści przy przewijaniu ---------- */

/* Świadomie BEZ animowania `opacity`. Odsłanianie sterowane przewijaniem
   zatrzymuje się na klatce początkowej, gdy oś czasu nie ruszy — a wtedy
   `opacity: 0` znaczy „tekstu nie ma”. Samo przesunięcie w najgorszym razie
   zostawia treść 20 px niżej, czyli nic się nie dzieje. Wrażenie pojawiania
   się dają kreski i linie, które i tak wyrastają z zera. */
@keyframes odslon {
  from { transform: translateY(1.25rem); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .naglowek-sekcji,
    .idea,
    .blokada,
    .kroki > *,
    .zasady > *,
    .dzialanie-wiersz,
    .konkurs-blok > *,
    .pozostale > *,
    .dane-lista > * {
      animation: odslon linear both;
      animation-timeline: view();
      animation-range: entry calc(4% + var(--opoznienie, 0%)) cover calc(20% + var(--opoznienie, 0%));
    }
  }
}

/* Wewnątrz zwiniętego <details> oś czasu przewijania nie ma czego mierzyć —
   element jest ukryty, więc po rozwinięciu treść mogłaby zostać przesunięta
   na klatce początkowej. W ogłoszeniach odsłanianie po prostu wyłączamy. */
@supports (animation-timeline: view()) {
  .ogloszenie__tresc .dane-lista > * { animation: none; transform: none; }
}

/* Elementy stojące obok siebie wchodzą do kadru równocześnie, więc rytm
   trzeba im nadać ręcznie — inaczej cały rząd mrugnie naraz. */
.kroki > :nth-child(2),
.zasady > :nth-child(2),
.pozostale > :nth-child(2),
.konkurs-blok > :nth-child(2),
.dane-lista > :nth-child(2) { --opoznienie: 5%; }

.kroki > :nth-child(3),
.zasady > :nth-child(3),
.pozostale > :nth-child(3),
.dane-lista > :nth-child(3) { --opoznienie: 10%; }

.kroki > :nth-child(4),
.pozostale > :nth-child(4),
.dane-lista > :nth-child(4) { --opoznienie: 15%; }

.pozostale > :nth-child(5),
.dane-lista > :nth-child(5) { --opoznienie: 20%; }

/* ---------- podkreślenie terminów w bloku konkursu ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .termin__data::after {
      animation: rysuj-kreske cubic-bezier(0.22, 0.61, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 14% cover 34%;
    }
  }
}