/* Atkinson Hyperlegible Next: pliki z Google Fonts wgrane bez zmian, licencja w fonty/OFL.txt.
   Jeden plik zmienny na zakres znaków; plik obsługuje grubości 200-800, strona używa 400, 600, 700 i 800. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonty/atkinson-hyperlegible-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonty/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paleta - opis ról w DESIGN.md */
  --biel: #FFFFFF;
  --czern-tuszu: #1C1B22;
  --grafit-olowka: #5C5A66;
  --fiolet-pieczatki: #4B2E83;
  --bibula: #F4F2F8;
  --rula: #DCDAE2;

  --kroj: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Skala płynna między 320 px a 1280 px szerokości */
  --rozmiar-tytul: clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);                    /* 36 -> 72 px */
  --rozmiar-tytul-podstrony: clamp(1.875rem, 1.5833rem + 1.4583vw, 2.75rem);   /* 30 -> 44 px */
  --rozmiar-sekcja: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);                   /* 28 -> 40 px */
  --rozmiar-sekcja-podstrony: clamp(1.375rem, 1.2917rem + 0.4167vw, 1.625rem); /* 22 -> 26 px */
  --rozmiar-nazwa: clamp(1.375rem, 1.2917rem + 0.4167vw, 1.625rem);            /* 22 -> 26 px */
  --rozmiar-kafel-nazwa: clamp(1.5rem, 1.4167rem + 0.4167vw, 1.75rem);         /* 24 -> 28 px */
  --rozmiar-kafel-opis: 1rem;                                                   /* 16 px */
  --rozmiar-tresc: clamp(1.125rem, 1.0833rem + 0.2083vw, 1.25rem);             /* 18 -> 20 px */
  --rozmiar-etykieta: clamp(0.9375rem, 0.9167rem + 0.1042vw, 1rem);            /* 15 -> 16 px */
  --rozmiar-nazwa-stopki: 1.125rem;                                             /* 18 px */
  --rozmiar-stopka: 0.6875rem;                                                  /* 11 px, dolny rząd stopki */
  --monogram-stopki: 1.75rem;                                                   /* 28 px */
  --rozmiar-tresc-polityki: 0.875rem;                                           /* 14 px - dolna granica, nie zmniejszać */
  --rozmiar-data-polityki: 0.9375rem;                                           /* 15 px */

  /* Odstępy: cztery wartości, każda oznacza poziom hierarchii. Twarda granica: 120 px. */
  --odstep-1: 0.5rem;                                      /* 8 px, wewnątrz elementu */
  --odstep-2: clamp(1.5rem, 1.375rem + 0.625vw, 1.875rem); /* 24-30 px, między blokami */
  --odstep-3: 4rem;                                        /* między sekcjami: 64 px telefon, 96 px desktop */
  --odstep-4: 4rem;                                        /* górne dopełnienie pasa bibuły to połowa: 32 / 60 px */
  --odstep-kafli: 1.5rem;                                  /* 24 px między kafelkami - decyzja właściciela, wyjątek od skali */

  /* Układ: jedna kolumna przy lewej krawędzi, różne miary w środku */
  --kolumna: 44rem;
  --kolumna-kafli: 76rem;
  --miara-tytulu: 13ch;
  --miara-zdania: 42rem; /* szersza niż miara tytułu */
  --margines: 1.25rem;
  --kolumna-etykiet: 10rem;
  --kolumna-etykiet-administratora: 4rem;
  --rozmiar-etykieta-administratora: 0.75rem; /* 12 px, grafit na bibule 6,08:1 */
  --odstep-kolumn: 2rem;
  --monogram: 4rem;
  --promien-kafla: 1.25rem;
  --ikona-kafla: clamp(6rem, 5.5rem + 2.5vw, 7.5rem); /* 96 -> 120 px, stała, nie procent kafla */

  /* Ruch */
  --ruch-reakcja: 180ms;
  --ruch-wejscie: 300ms;
  --ruch-odslona: 300ms;
  --ruch-rozwijanie: 280ms;
  --ruch-zwijanie: 200ms;
  --krzywa-wyjscia: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

@media (min-width: 60rem) {
  :root {
    --odstep-3: 6rem;
    --odstep-4: 7.5rem;
    --margines: clamp(2.5rem, 4.5vw, 5rem);
    --monogram: 6rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Płótno pod body ma kolor stopki: gdy okno jest wyższe niż strona (zrzut całej strony, powiększenie,
   przewijanie sprężyste, zmienny pasek adresu na telefonie), pod stopką nigdy nie wychodzi biel. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--czern-tuszu);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--biel);
  color: var(--czern-tuszu);
  font-family: var(--kroj);
  font-size: var(--rozmiar-tresc);
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
}

main {
  flex: 0 0 auto;
}

h1,
h2,
h3,
p,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

::selection {
  background-color: var(--fiolet-pieczatki);
  color: var(--biel);
}

:focus-visible {
  outline: 3px solid var(--fiolet-pieczatki);
  outline-offset: 3px;
}

/* Kolumna przy lewej krawędzi; na desktopie prawa strona zostaje pusta */
.kolumna {
  margin-inline-start: var(--margines);
  margin-inline-end: 1.25rem;
  max-width: var(--kolumna);
}

/* Siatka kafli aplikacji jest szersza, ale startuje z tej samej lewej krawędzi */
.kolumna--kafle {
  max-width: var(--kolumna-kafli);
}

/* Pierwszy ekran: pole fioletu na pełną szerokość z paskiem nazwy i menu */
.pole {
  background-color: var(--fiolet-pieczatki);
  color: var(--biel);
  /* Pod tytułem tyle oddechu co nad paskiem: 32 px telefon, 48 px desktop */
  padding-block: calc(var(--odstep-3) / 2);
}

.pole ::selection {
  background-color: var(--biel);
  color: var(--fiolet-pieczatki);
}

.pole :focus-visible {
  outline-color: var(--biel);
}

.pole .link {
  color: var(--biel);
}

.pole__pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--odstep-2);
  row-gap: var(--odstep-1);
  margin-inline: var(--margines);
}

.pole__znak {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.menu__lista {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--odstep-2);
}

.menu .link {
  font-weight: 600;
}

/* Biały kafel z literą wyciętą do fioletu pola */
.monogram {
  display: block;
  flex: none;
  width: var(--monogram);
  height: var(--monogram);
  fill: var(--biel);
}

.nazwa {
  font-size: var(--rozmiar-nazwa);
  font-weight: 700;
  line-height: 1.25;
}

.tytul {
  margin-block-start: var(--odstep-2);
  max-inline-size: var(--miara-tytulu);
  font-size: var(--rozmiar-tytul);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tytul--podstrona {
  max-inline-size: none;
  font-size: var(--rozmiar-tytul-podstrony);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Pary etykieta-wartość */
.etykieta {
  font-size: var(--rozmiar-etykieta);
  font-weight: 600;
  line-height: 1.4;
  color: var(--grafit-olowka);
}

.para + .para {
  margin-block-start: var(--odstep-2);
}

@media (min-width: 60rem) {
  .para {
    display: grid;
    grid-template-columns: var(--kolumna-etykiet) minmax(0, 1fr);
    column-gap: var(--odstep-kolumn);
    align-items: baseline;
  }

  .para + .para {
    margin-block-start: var(--odstep-1);
  }
}

.liczby {
  font-variant-numeric: tabular-nums;
}

/* Linki: cienkie podkreślenie zawsze widoczne, grubsze narasta od lewej przy najechaniu i focusie */
.link {
  color: var(--fiolet-pieczatki);
  text-decoration: none;
}

.link--tekst {
  color: inherit;
}

/* Obszar klikalny co najmniej 48 px wysokości */
.link--cel {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
}

.link__tekst {
  position: relative;
  display: inline-block;
}

.link__tekst::before,
.link__tekst::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.06em;
  height: max(1px, 0.06em);
  background-color: currentColor;
}

.link__tekst::after {
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
}

.link:hover .link__tekst::after,
.link:focus-visible .link__tekst::after {
  transform: scaleX(1);
}

@media (forced-colors: active) {
  .link {
    text-decoration: underline;
  }

  .link__tekst::before,
  .link__tekst::after {
    display: none;
  }
}

/* Sekcje */
.naglowek-sekcji {
  font-size: var(--rozmiar-sekcja);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.naglowek-sekcji--podstrona {
  font-size: var(--rozmiar-sekcja-podstrony);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}

/* Pas bibuły na pełną szerokość okna pod pierwszym ekranem */
.sekcja-aplikacje {
  padding-block: calc(var(--odstep-4) / 2) calc(var(--odstep-3) / 2);
  background-color: var(--bibula);
}

.komunikat {
  margin-block-start: var(--odstep-2);
  max-inline-size: var(--miara-zdania);
}

/* ============================================================
   Aplikacje: siatka kolorowych kafli.
   ŚWIADOME ODSTĘPSTWO od zasady braku kart - tylko w tej sekcji.
   Jeden wariant kafla, kompaktowy: wysokość wynika z treści.
   1-2 aplikacje: jedna kolumna. 3 i więcej: dwie kolumny od 64rem (klasa z app.js).
   ============================================================ */
.aplikacje {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--odstep-kafli);
  margin-block-start: var(--odstep-2);
}

@media (min-width: 64rem) {
  .aplikacje--dwie-kolumny {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Każdy wpis zajmuje trzy wiersze siatki: kafel, przycisk "Szczegóły", panel.
   Dzięki subgrid kafle w jednym rzędzie mają równą wysokość. */
.wpis {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  min-inline-size: 0;
}

/* Żadna aplikacja nie ma szczegółów: wpis to sam kafel w jednym wierszu. Bez tego dwa puste
   wiersze (przycisk, panel) z odstępami po 24 px dokładałyby pustą bibułę pod ostatnim kafelkiem. */
.aplikacje--bez-szczegolow > .wpis {
  grid-row: span 1;
}

/* Kafel: tło w kolorze akcentu, tekst czernią tuszu albo bielą (dobiera app.js dla kontrastu >= 4.5:1).
   Kafel jest kontenerem: układ wnętrza zależy od szerokości kafla, nie okna. */
.kafel {
  display: grid;
  container-type: inline-size;
  min-inline-size: 0;
  padding: var(--odstep-2);
  border-radius: var(--promien-kafla);
  background-color: var(--kafel-tlo, var(--rula));
  color: var(--kafel-tekst, var(--czern-tuszu));
  text-align: start;
}

/* Wąski kafel: link w osobnym wierszu pod tekstem, opis kończy się nad nim. */
.kafel__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "tekst"
    "akcja";
  column-gap: var(--odstep-2);
  row-gap: var(--odstep-1);
}

.kafel--z-ikona .kafel__uklad {
  grid-template-columns: var(--ikona-kafla) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "ikona tekst"
    "ikona akcja";
}

/* Szeroki kafel: link w osobnej kolumnie w prawym dolnym rogu, obok opisu - kafel jest niższy. */
@container (min-width: 24rem) {
  .kafel__uklad {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    grid-template-areas: "tekst akcja";
  }
}

@container (min-width: 33rem) {
  .kafel--z-ikona .kafel__uklad {
    grid-template-columns: var(--ikona-kafla) minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    grid-template-areas: "ikona tekst akcja";
  }
}

.kafel ::selection {
  background-color: var(--kafel-tekst, var(--czern-tuszu));
  color: var(--kafel-tlo, var(--rula));
}

.kafel :focus-visible {
  outline-color: var(--kafel-tekst, var(--czern-tuszu));
}

.kafel .link {
  color: inherit;
}

.kafel--rozwijany {
  cursor: pointer;
}

.kafel__tekst {
  grid-area: tekst;
  align-self: start;
  min-inline-size: 0;
}

.kafel__nazwa {
  font-size: var(--rozmiar-kafel-nazwa);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.kafel__opis {
  margin-block-start: var(--odstep-1);
  font-size: var(--rozmiar-kafel-opis);
  line-height: 1.45;
}

.kafel__akcja {
  grid-area: akcja;
  justify-self: end;
  align-self: end;
  font-size: var(--rozmiar-etykieta);
  font-weight: 600;
  line-height: 1.4;
}

.kafel__wkrotce {
  display: flex;
  align-items: center;
  min-height: 3rem;
}

/* Ikona: stały kwadrat 96 -> 120 px po lewej. Brak ikony = brak kolumny. */
.kafel__ikona {
  grid-area: ikona;
  display: block;
  align-self: start;
  inline-size: var(--ikona-kafla);
  block-size: var(--ikona-kafla);
  object-fit: cover;
  border-radius: 22%;
}

/* Cechy: małe etykiety na jasnym tle z koloru akcentu, tekst czernią tuszu dla kontrastu */
.cechy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odstep-1);
  margin-block-start: var(--odstep-2);
}

.cecha {
  padding: 0.25rem 0.625rem;
  background-color: color-mix(in srgb, var(--kolor-akcentu, var(--rula)) 16%, var(--biel));
  color: var(--czern-tuszu);
  font-size: var(--rozmiar-etykieta);
  font-weight: 600;
  line-height: 1.4;
}

/* Zrzuty: rząd ekranów telefonu, na wąskim ekranie przewijany w poziomie */
.zrzuty {
  margin-block-start: var(--odstep-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--rula) transparent;
  scrollbar-width: thin;
}

.zrzuty__lista {
  display: flex;
  gap: 1rem;
  padding-block-end: var(--odstep-1);
}

.zrzuty__lista > li {
  flex: none;
  scroll-snap-align: start;
}

.zrzut {
  display: block;
  inline-size: 9.5rem;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border-radius: 1.25rem;
  background-color: var(--biel);
}

/* Panel szczegółów pod kafelem. Kafel z panelem klika się w całości; dostępnym elementem jest przycisk. */
.przycisk-szczegolow {
  justify-self: start;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.wpis__panel--ruch {
  overflow: hidden;
}

.wpis__panel-tresc {
  padding-block: var(--odstep-1) var(--odstep-2);
  cursor: auto;
}

.wpis__panel-tresc > * {
  margin-block-start: 0;
}

.wpis__panel-tresc > * + * {
  margin-block-start: var(--odstep-2);
}

.opis-dlugi {
  max-inline-size: var(--miara-zdania);
}

.opis-dlugi p + p {
  margin-block-start: var(--odstep-1);
}

.gry {
  margin-block-start: var(--odstep-1);
  padding-inline-start: 1.25em;
  list-style: square;
}

.gry li::marker {
  color: var(--grafit-olowka);
}

/* Tekst tylko dla czytników ekranu */
.dla-czytnikow {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Stopka: pas czerni tuszu z menu i znakiem praw autorskich.
   Na krótkiej stronie to stopka wypełnia ekran, więc odstępy między treściami się nie zmieniają. */
.stopka {
  flex: 1 0 auto;
  margin-block-start: calc(var(--odstep-3) / 2);
  /* Góra 24 / 30 px; dół 16 px - pod rzędem 11 px nie zostaje pustka */
  padding-block: var(--odstep-2) calc(var(--odstep-1) * 2);
  background-color: var(--czern-tuszu);
  color: var(--biel);
}

/* Strona główna: stopka przylega do pasa bibuły, bez białego pasa między nimi */
.stopka--przy-pasie {
  margin-block-start: 0;
}

.stopka ::selection {
  background-color: var(--biel);
  color: var(--czern-tuszu);
}

.stopka :focus-visible {
  outline-color: var(--biel);
}

.stopka .link {
  color: var(--biel);
}

/* Górny rząd: wyłącznie monogram z nazwą. Linia. Dolny rząd do prawej: polityka i znak ©. */
.stopka__gora {
  display: flex;
  align-items: center;
}

.stopka__znak {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--biel);
  text-decoration: none;
}

/* Na polityce znak jest linkiem: obszar klikalny 48 px z dopełnienia, bez podnoszenia wysokości stopki */
a.stopka__znak {
  padding-block: calc((3rem - var(--monogram-stopki)) / 2);
  margin-block: calc((var(--monogram-stopki) - 3rem) / 2);
}

/* Biały kafel z literą wyciętą do czerni stopki */
.stopka__monogram {
  display: block;
  flex: none;
  width: var(--monogram-stopki);
  height: var(--monogram-stopki);
  fill: var(--biel);
}

.stopka__nazwa {
  font-size: var(--rozmiar-nazwa-stopki);
  font-weight: 700;
  line-height: 1.25;
}

/* Linia oddzielająca: grafit na czerni, jaśniejszy od tła, ale delikatny; nigdy tekst */
.stopka__linia {
  height: 0;
  margin-block: calc(var(--odstep-1) * 2) calc(var(--odstep-1) * 1.5); /* 16 px nad, 12 px do rzędu 11 px */
  margin-inline: 0;
  border: 0;
  border-block-start: 1px solid var(--grafit-olowka);
}

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--odstep-2);
  text-align: end;
}

.stopka__dol .link {
  font-size: var(--rozmiar-stopka);
  font-weight: 400;
  line-height: 1.4;
}

/* "Polityka prywatności" to jedyny link do dokumentu wymaganego przez Google Play: obszar klikalny
   48 px z dopełnienia linku (nie z rozmiaru tekstu), ujemny margines nie podnosi rzędu ponad tekst 11 px */
.stopka__dol .link--cel {
  min-height: 0;
  padding-block: calc((3rem - 1.4 * var(--rozmiar-stopka)) / 2);
  margin-block: calc((1.4 * var(--rozmiar-stopka) - 3rem) / 2);
}

.stopka__prawa {
  font-size: var(--rozmiar-stopka);
  font-weight: 400;
  line-height: 1.4;
  color: var(--bibula);
}

/* Polityka prywatności: data, sekcje z oznaczeniem §, listy numerowane; tekst treści 15 px */
.polityka__data {
  margin-block-start: calc(var(--odstep-3) / 2);
  font-size: var(--rozmiar-data-polityki);
  color: var(--grafit-olowka);
}

.polityka__sekcja {
  margin-block-start: calc(var(--odstep-3) / 2);
}

.polityka__sekcja > .naglowek-sekcji + *,
.administrator .naglowek-sekcji + * {
  margin-block-start: var(--odstep-2);
}

.polityka__tekst,
.polityka__lista {
  max-inline-size: var(--miara-zdania);
  font-size: var(--rozmiar-tresc-polityki);
}

.polityka__tekst + .polityka__lista,
.polityka__lista + .polityka__tekst {
  margin-block-start: var(--odstep-1);
}

.polityka__lista {
  padding-inline-start: 1.5em;
  list-style: decimal;
}

.polityka__lista--litery {
  list-style: lower-alpha;
}

.polityka__lista li + li {
  margin-block-start: var(--odstep-1);
}

.polityka__lista li::marker {
  color: var(--grafit-olowka);
  font-weight: 600;
}

.polityka__lista .link {
  font-size: inherit;
}

/* § 2 Administrator danych: zwarty blok jak stopka redakcyjna.
   Wartości w rozmiarze treści polityki (14 px), etykiety 12 px grafitem obok wartości.
   Odstępy wewnątrz bloku 8-12 px; dwie kolumny par od 60rem. */
.administrator {
  margin-block-start: calc(var(--odstep-3) / 2);
  padding-block: var(--odstep-2);
  background-color: var(--bibula);
}

.administrator .naglowek-sekcji + .pary {
  margin-block-start: calc(var(--odstep-1) * 1.5); /* 12 px */
}

.administrator .pary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--odstep-1);
}

.administrator .para {
  display: grid;
  grid-template-columns: var(--kolumna-etykiet-administratora) minmax(0, 1fr);
  column-gap: var(--odstep-1);
  align-items: baseline;
}

.administrator .para + .para {
  margin-block-start: 0;
}

.administrator .etykieta {
  font-size: var(--rozmiar-etykieta-administratora);
  line-height: 1.4;
}

.administrator dd {
  font-size: var(--rozmiar-tresc-polityki);
  line-height: 1.45;
}

/* Link w wierszu: dopełnienie inline poszerza obszar klikalny do 48 px, nie rozpychając wiersza */
.administrator .link--cel {
  display: inline;
  min-height: 0;
  padding-block: 0.9375rem;
}

@media (min-width: 60rem) {
  .administrator .pary {
    grid-template-columns: repeat(2, minmax(0, max-content));
    column-gap: var(--odstep-2);
  }

  /* Adres i kontakt w jednym wierszu każdy */
  .administrator dd {
    white-space: nowrap;
  }
}

/* Wejście przy załadowaniu strony głównej */
@keyframes wejscie {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Cały ruch CSS jest zadeklarowany wyłącznie tutaj. Przy prefers-reduced-motion: reduce
   żadna z tych reguł nie obowiązuje, a elementy są od razu widoczne. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Wejście: monogram z nazwą, tytuł, zdanie co 80 ms, całość 460 ms */
  .wejscie {
    animation: wejscie var(--ruch-wejscie) var(--krzywa-wyjscia) both;
  }

  .wejscie--2 {
    animation-delay: 80ms;
  }

  .wejscie--3 {
    animation-delay: 160ms;
  }

  /* Po przejściu z polityki prywatności strona się nie porusza drugi raz */
  .bez-wejscia .wejscie {
    animation: none;
  }

  /* 2. Reakcja na najechanie i focus: podkreślenie linku */
  .link__tekst::after {
    transition: transform var(--ruch-reakcja) var(--krzywa-wyjscia);
  }

  /* 3. Pojawienie przy przewijaniu: 8 px, 300 ms, ease-out, raz.
     Klasę .odslony na <html> ustawia app.js, więc bez skryptu nic nie jest ukryte. */
  .odslony .do-odslony {
    transition:
      opacity var(--ruch-odslona) ease-out var(--opoznienie-odslony, 0ms),
      transform var(--ruch-odslona) ease-out var(--opoznienie-odslony, 0ms);
  }

  .odslony .do-odslony:not(.odsloniete) {
    opacity: 0;
    transform: translateY(8px);
  }

  /* 4. Przejście między stronami: przenikanie 200 ms */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
  }

  /* 5. Panel szczegółów: wysokość i przezroczystość animuje app.js (Web Animations) */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .do-odslony {
    opacity: 1 !important;
    transform: none !important;
  }
}