/* OBRAZY: WYMIARY W ZNACZNIKU, WYSOKOSC Z PROPORCJI
   ------------------------------------------------------------------------
   Kazdy <img> w motywie niesie width i height, zeby przegladarka znala
   proporcje ZANIM pobierze plik i zarezerwowala miejsce. Bez tego obraz
   zajmuje 0 px do chwili wczytania, a potem skacze do swojej wysokosci -
   uklad przesuwa sie pod czytelnikiem, a przy dolnej krawedzi dokumentu
   przegladarka przycina przy okazji pozycje przewijania.

   Ta regula jest druga polowa tamtej: atrybuty maja SLUZYC do rezerwacji
   miejsca, a nie ustawiac wysokosc. Bez height: auto obraz o pliku 500x500,
   ktoremu CSS nadaje max-width: 150px, mialby 150x500. Specyficznosc jest
   celowo najnizsza z mozliwych, wiec kazda regula nadajaca wysokosc wprost
   nadal wygrywa. */
img {
	height: auto;
}

.wrap {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	--rama: 250px;
	padding: 150px var(--rama);
}

.wrap.no-top {padding-top: 0}

.wrap.no-bottom {padding-bottom: 0}

.iwrap {
	width: 100%;
	max-width: var(--tresc-czytanie);
	position: relative;
	margin: 0 auto;
}

/* PRZEWIJANIE - wymagania Lenisa
   ------------------------------------------------------------------------
   scroll-behavior: smooth na html MUSI tu zostac wylaczone. Kiedy strona
   deklaruje plynne przewijanie, a rownoczesnie skrypt steruje pozycja,
   przegladarka animuje to samo przewiniecie dwa razy: raz wlasnym
   silnikiem, raz naszym. Efektem sa rozjezdzajace sie stany - element
   rysuje sie w jednym miejscu, a reaguje w innym, wiec po przewinieciu
   nie da sie trafic w przycisk. To byla prawdziwa przyczyna bledu
   zglaszanego trzykrotnie w sierpniu 2026.

   Kotwice przejmuje Lenis (opcja anchors), wiec nic nie tracimy. */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* Ramki nie sa przewijane przez Lenisa, wiec podczas przewijania strony
   nie moga przechwytywac zdarzen kolka. */
.lenis.lenis-smooth iframe {
	pointer-events: none;
}

/* Tresc widoczna wylacznie dla technologii asystujacych. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Link pomijajacy nawigacje. Ukryty do momentu otrzymania fokusu. */
.skip-link {
	position: fixed;
	z-index: 200;
	top: -100px;
	left: 0;
	padding: 15px 25px;
	background: var(--kolor-granat);
	color: white;
	font-family: "Nunito Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	transition: top 0.2s;
}
.skip-link:focus {top: 0}

.opacity-hover a, a.opacity-hover {transition: opacity var(--ruch-stan)}
.opacity-hover a:hover, a.opacity-hover:hover {opacity: 0.6}

.black-to-blue a, a.black-to-blue {transition: color var(--ruch-stan)}
.black-to-blue a:hover, a.black-to-blue:hover {color: var(--kolor-akcent)}

.fc-white, .fc-white p, .fc-white a, .fc-white h2, .fc-white h3 {color: white}
.fc-black {color: var(--kolor-tekst)}

/* Klasa byla uzywana w page-rejestracja.php, ale nie miala zadnej definicji -
   komunikat bledu renderowal sie zwyklym kolorem tekstu i niczym nie rozni sie
   od reszty formularza. Kolor sam bledu nie niesie (patrz DESIGN.md), wiec
   towarzyszy mu pogrubienie; sama tresc komunikatu mowi, co jest nie tak. */
.fc-alert {
	color: var(--kolor-blad);
	font-weight: 700;
}

.bc-grey {background-color: var(--kolor-mgla)}
.bc-white {background-color: white}


/* MIARA CZYTANIA
   ------------------------------------------------------------------------
   Tresc wpisow biegla przez pelna szerokosc karty: 1090 px, czyli okolo
   136 znakow w wierszu przy komfortowym zakresie 45-75. Przy dwukrotnym
   przekroczeniu oko gubi poczatek nastepnego wiersza - a wpisy sa jedyna
   powierzchnia na tej stronie, na ktorej ktos naprawde czyta dluzszy tekst.
   To samo dotyczylo sekcji "Wspoldzielczosc" na stronie glownej.

   UWAGA na przyszly pomiar: "O wydarzeniu", "Wspoldzielczosc" i "Historia"
   wygladaja w pomiarze na jeszcze szersze, ale ich kontenery maja
   column-count: 2 - kolumna ma tam 520 px i miara byla poprawna od poczatku.
   getBoundingClientRect() zwraca dla takiego akapitu prostokat obejmujacy
   OBIE kolumny, wiec liczenie znakow z szerokosci prostokata klamie.
   Regula obejmuje je mimo to: przy szerszym oknie kolumny rosna i wtedy
   ograniczenie zaczyna byc potrzebne.

   Ograniczamy WYLACZNIE elementy tekstowe. Zdjecia, filmy i osadzenia
   zostaja na pelnej szerokosci kontenera - one nie maja miary czytania,
   a ich skrocenie zepsulo by kompozycje.

   Jednostka ch odnosi sie do szerokosci znaku aktualnego kroju, wiec ta
   sama wartosc trzyma miare takze wtedy, gdy zmieni sie rozmiar tekstu.
   UWAGA: ch to szerokosc cyfry zero, wyrazniej szerszej od sredniej litery -
   58ch daje w polskim tekscie okolo 65 znakow w wierszu, a nie 58. Wartosc
   zostala dobrana pomiarem liczby znakow, nie z nazwy jednostki.

   Celujemy w istniejace kontenery, a nie w nowa klase w szablonach:
   czesc tej tresci wstrzykuje CMS przez mechanizm copyfrom/copyto, wiec
   dokladanie klas do znacznikow blokow jest tam zawodne. */
#single-aktualnosc > article > p,
#single-aktualnosc > article > ul,
#single-aktualnosc > article > ol,
#o_wydarzeniu-opis > article > p,
#wspoldzielczosc-opis > article > p,
#historia-wrap > article > article p,
#historia-wrap > article > article ul,

/* Dwie sekcje ze STRONY GLOWNEJ zostaly przy tamtej pracy pominiete - na
   liscie byly tylko ich odpowiedniki z podstron (#o_wydarzeniu-opis oraz
   tresc /program/). Zmierzone przy oknie 2560px: akapit O wydarzeniu mial
   955px, czyli okolo 119 znakow w wierszu, a akapit Programu 1030px, czyli
   129 - przy zalecanych 45-75.

   Sufit szerokosci sekcji tego nie zalatwia: nawet po zatrzymaniu jej na
   1700px kolumna tekstu daje jeszcze ~97 znakow. */
#home-wydarzenie > article > p,
#home-program > article > p,

/* BIALE KARTY WSTEPU NA PODSTRONACH
   Kazda podstrona otwiera sie biala karta z akapitem wprowadzajacym i zadna
   z nich nie byla objeta ta regula - obejmowala wylacznie sekcje
   dwukolumnowe, gdzie miare trzyma sama kolumna. Zmierzone przy 2560px
   prostokatami wierszy (a nie pudelkiem akapitu, ktore przy dwoch kolumnach
   klamie): 115-119 znakow w wierszu na pieciu podstronach.

   #wspoldzielczosc wystepuje na dwoch stronach - /wspoldzielczosc/
   oraz /35-lat-novum/, ktore dzieli z nia szablon karty. */
#o_wydarzeniu > article > p,
#wspoldzielczosc > article > p,
#program-wstep p,
#prelegenci-wstep p,

/* Tekst zgod przy rejestracji: 124 znaki. Tresc formalna czyta sie najtrudniej
   ze wszystkich, wiec akurat ona nie powinna byc najszersza na stronie. */
#checkbox-wrap > p,

/* REGULAMIN - najgorsze miejsce w serwisie: 243 ZNAKI w wierszu, przy 40
   wierszach tekstu prawnego i braku jakiegokolwiek ograniczenia szerokosci.
   Tresc idzie z edytora blokow, wiec celujemy w kontener, nie w klasy blokow. */
#regulamin > article > p,
#regulamin > article > ol,
#regulamin > article > ul {
	max-width: 58ch;
}

/* Tekst wpisu byl WYSRODKOWANY w karcie, podczas gdy data, tytul i zdjecie
   stoja przy lewej krawedzi - jedna kolumna plywala w srodku bieli. Robilo to
   wrazenie ukladu niezgodnego z reszta serwisu, bo nim bylo: wpis byl jedyna
   dluga trescia bez ukladu dwukolumnowego.

   Teraz wpis ma dwie kolumny jak pozostale dlugie teksty (patrz elements.css),
   a blok tekstu zaczyna sie tam, gdzie tytul. Srodkowanie jest wiec zbedne
   i zostalo zdjete. */
#single-aktualnosc > article > p,
#single-aktualnosc > article > ul,
#single-aktualnosc > article > ol {
	margin-left: 0;
	margin-right: 0;
}

/* Sekcja na stronie glownej jest wyrownana do srodka, wiec po ograniczeniu
   szerokosci akapit musi zostac wysrodkowany, a nie przykleic sie do lewej. */
#home-wspoldzieczosc .iwrap > p {
	max-width: 58ch;
	margin-left: auto;
	margin-right: auto;
}

.fc-gradient {
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: var(--marka-gradient);	
}

.ta-center {text-align: center}

strong {font-weight: 700}

em {font-style: italic}

h1 {
	font-family: "Sora", sans-serif;
	font-size: 42px;
	line-height: 42px;
	letter-spacing: 2px;
	word-spacing: 2px;
	font-weight: 900;
	margin-bottom: 40px;
	color: var(--kolor-granat);
}

h2 {
	font-family: "Sora", sans-serif;
	color: var(--kolor-granat);
	font-size: 42px;
	line-height: 42px;
	letter-spacing: 2px;
	word-spacing: 2px;
	font-weight: 900;
	margin-bottom: 40px;
}

h3 {
	font-family: "Sora", sans-serif;
	color: var(--kolor-granat);
	font-size: 26px;
	line-height: 32px;
	letter-spacing: 2px;
	word-spacing: 2px;	
	font-weight: 900;
	margin-bottom: 25px;
}

/* Nadtytul niesie dwie warstwy tla: gradient markowy (wyglad spoczynkowy,
   bez zmian) oraz waskie pasmo swiatla, ktore w spoczynku stoi poza kadrem
   po lewej. Przy wejsciu sekcji przejezdza raz przez litery - "prad dociera
   do tej sekcji". Bez klasy .is-charged nadtytul wyglada dokladnie tak,
   jak wygladal. */
h4 {
	font-family: "Nunito Sans", sans-serif;
	display: table;
	position: relative;
	margin-bottom: 25px;
	font-size: 22px;
	line-height: 24px;
	font-weight: 800;
	letter-spacing: 2px;
	word-spacing: 2px;
	-webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image:
        linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%),
        var(--marka-gradient);
    background-size: 40% 100%, 100% 100%;
    background-position: -60% 0, 0 0;
    background-repeat: no-repeat;
}

/* Ruch prawie liniowy, jak w sekwencji hero. Krzywa wyhamowujaca przerzucala
   pasmo na koniec liter w pierwszej cwiartce czasu, wiec przejazd byl krotszy
   niz deklarowany czas trwania. */
h4.is-charged {
	animation: naglowek-ladowanie 1150ms cubic-bezier(0.35, 0.15, 0.55, 0.9) both;
}

@keyframes naglowek-ladowanie {
	from {background-position: -60% 0, 0 0}
	to   {background-position: 160% 0, 0 0}
}
h4.fc-black {
	-webkit-text-fill-color: var(--kolor-tekst);
    background-image: none;	
}
.ta-center h4 {
	margin-left: auto;
	margin-right: auto;
}

small {
	font-size: 15px;
    line-height: 18px;
}

.link-box {
	display: table;
	padding: 17px 30px 15px;
	position: relative;  
	margin-top: 75px;
	font-size: 18px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 2px;
	word-spacing: 2px;
	background: transparent;
	overflow: hidden;
	opacity: 1 !important;
}
.link-box:before {
	content:"";
	position: absolute;
	inset: 0;
	padding: var(--kreska-gruba); /* grubosc ramki gradientowej */
	background: var(--marka-gradient);
	border-radius: inherit;
	--m:conic-gradient(#000 0 0);
	mask: var(--m) content-box exclude,var(--m);
	pointer-events: none;
}

.link-box p {position: relative}
/* Wypelnienie przycisku. transform: scaleY zamiast height - identyczny efekt
   wizualny, ale liczony przez kompozytor zamiast wymuszac przeliczenie ukladu.
   transform-origin: bottom utrzymuje kierunek "prad wchodzi od dolu". */
.link-box figure {
	position: absolute;
	inset: 0;
	background: var(--marka-gradient);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--ruch-wypelnienie) var(--ruch-krzywa);
}
.link-box:hover figure {transform: scaleY(1)}

/* Potwierdzenie dzialania. Ponizej 1024px hover jest wylaczony, wiec bez tego
   dotkniecie przycisku wyglada dokladnie tak samo jak jego brak.
   120ms zamiast 500 - to potwierdzenie, nie sekwencja. */
a.link-box:active figure,
a.link-box:active > figure {
	transform: scaleY(1);
	transition-duration: var(--ruch-odpowiedz);
}

.link-box.black {transition: color var(--ruch-wypelnienie)}
.link-box.black:before {background: linear-gradient(45deg,black,black)}
.link-box.black figure {background: linear-gradient(45deg,black,black)}
.link-box.black:hover {color: white}

.ta-center .link-box {
	margin-left: auto;
	margin-right: auto;
}



.link-more a, a.link-more {
	display: table;
	font-family: "Nunito Sans", sans-serif;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 2px;
	word-spacing: 2px;
	margin-top: 25px;
	transition: color var(--ruch-stan);
}
.link-more a:hover, a.link-more:hover {color: var(--kolor-akcent) !important}

#menu {
	position: absolute;
	z-index: 100;
	width: 100%;
	box-sizing: border-box;
	left: 0;
}

.hamburger {
	position: absolute;
	z-index: 90;
	width: 28px;
	height: 28px;
	top: 86px;
	left: 100px
}

/* TRWALA NAWIGACJA
   Hamburger i przycisk rejestracji byly absolutne, wiec znikaly po ~110px
   przewiniecia i nie wracaly przez pozostale 98% wysokosci strony. Sa to
   jedyne dwa elementy nawigacyjne, wiec dostaja position: fixed - wszystkie
   wartosci top/left zostaja bez zmian, bo lockup jest juz zaprojektowany
   na marginesie ramy. Ikony social i kontaktu zostaja absolutne: sa
   umeblowaniem hero, a nie nawigacja (kontakt jest wrecz zakotwiczony
   do dolu pierwszego ekranu). */
body > .hamburger {position: fixed}

/* Para jest biala, bo projektowano ja na granatowe hero. Zamiast przelaczac
   jej kolor pod kazde mijane tlo - co i tak zawodzi nad fotografiami, gdzie
   jasnosc zmienia sie w obrebie jednego elementu - para dostaje po przewinieciu
   wlasny grunt: waski granatowy pasek przy gornej krawedzi. Czytelnosc
   przestaje zalezec od tego, co akurat jest pod spodem.

   Pasek jest prostokatny, bez cienia i bez krawedzi - sam granat wystarcza
   za oddzielenie od tresci. */
#chrome-dock {
	position: fixed;
	z-index: 89;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: var(--kolor-granat);
	transform: translateY(-100%);
	transition: transform var(--ruch-dok);
	pointer-events: none;
}

body.chrome-docked #chrome-dock {transform: translateY(0)}

/* Czujnik progu: znika z kadru po przewinieciu ponizej pierwotnej pozycji
   lockupu, co jest momentem, w ktorym stara nawigacja przestawala istniec. */
#chrome-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 130px;
	pointer-events: none;
}

/* Zadokowana para siada wyzej - wysrodkowana w pasku zamiast wisiec
   na marginesie ramy hero. Wartosci left/right zostaja bez zmian. */
body.chrome-docked > .hamburger {top: 21px}
body.chrome-docked #menu-rejestracja {top: 10px}

body > .hamburger,
#menu-rejestracja {transition: top var(--ruch-dok)}

.hamburger > span {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	height: 4px;
	background: white;
	margin: auto;
	transition: all var(--ruch-stan);
}
.hamburger > span:nth-of-type(1) {top: 0}
.hamburger > span:nth-of-type(2) {
	top: 0;
	bottom: 0;
	width: 60%;
}
.hamburger > span:nth-of-type(3) {bottom: 0}

.hamburger:hover > span:nth-of-type(2) {width: 100%}

#menu-rejestracja {
	position: fixed; /* patrz TRWALA NAWIGACJA wyzej */
	top: 75px;
	left: 250px;
	color: white;
	margin-top: 0;
}

#menu-contact {
	position: absolute;
	display: block;
	width: 50px;
	top: calc(50vh - 50px);
	left: 100px;
}
.home #menu-contact {top: calc(100vh - 150px)}

#menu-contact img {
	display: block;
	width: 100%;
}

#menu-sociale {
	position: absolute;
	top: 200px;
	left: 100px;
}

#menu-sociale a {
	display: block;
	width: 20px;
	height: 20px;
	margin-bottom: 10px
}

#menu-sociale a img {
	display: block;
	width: 100%;
}

#menu-cont {
	position: fixed;
	top: 0;
	left: 0;
	width: 45vw;
	min-height: calc(var(--vh, 1vh)* 100);
	z-index: 110;
	display: none;
}

#menu-cont .hamburger > span:nth-of-type(1) {
    transform: rotate(45deg);
    bottom: 0;
}
#menu-cont .hamburger > span:nth-of-type(2) {display: none}
#menu-cont .hamburger > span:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 0;
}

#menu-cont > div {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/menu-bg.webp);
	box-sizing: border-box;
	padding: 75px 0px 75px 250px;
	color: white;
	display: flex;
	flex-wrap: wrap;
	align-content: space-between;
	overflow: hidden;
}

#menu-cont-rejestracja {margin-top: 0}

#menu-cont > div > img {
	position: absolute;
	display: block;
	left: 50px;
	bottom: 250px;
    width: 250px;
	opacity: 0.20;
}

#menu-cont a {color: white}

#menu-cont .link-box {color: white !important}

#menu-cont > div > div {
	width: 100%;
	position: relative;
}

#menu-cont ul {
	list-style: none;
	margin-bottom: -1.5vh
}

#menu-cont li {
	margin-bottom: 1.5vh;
	position: relative;
}

#menu-cont ul a {
	font-family: "Sora", sans-serif;
	font-size: 26px;
	line-height: 26px;
	letter-spacing: 2px;
	word-spacing: 2px;	
	text-transform: uppercase;
	transition: color var(--ruch-stan);
}

#menu-cont ul .current-menu-item a {
	font-weight: 600;
	-webkit-background-clip: text;
    background-clip: text;
	-webkit-text-fill-color: transparent;
	background-image: var(--marka-gradient);
}

#menu-cont ul a:hover {color: var(--kolor-akcent)}

#menu-cont > div > div:last-of-type a {transition: color var(--ruch-stan)}
#menu-cont > div > div:last-of-type a:hover {color: var(--kolor-akcent)}

/* Stopka nie uzywa juz zadnej bitmapy. Sklada sie z dwoch warstw:

   1. tlo - wylacznie gradienty CSS w barwach marki,
   2. pole 203 kwadratow jako SVG wstawiony w dokument - patrz
      stopka-piksele.php.

   Tlo odtwarza uklad swiatla z poprzedniej grafiki, ale wartosciami z systemu,
   a nie zapieczonymi w pliku: granat jako podloze, blekitne rozswietlenie
   u gory po lewej i zielone przy dolnej krawedzi po lewej - czyli ta sama os
   zielen-blekit, po ktorej biegnie gradient markowy. Zmierzone punkty dawnej
   bitmapy: najjasniejszy #00346e u gory, #004733 w lewym dolnym rogu,
   #000911 w prawym dolnym.

   Zysk poza waga: barwy stopki podazaja teraz za paleta marki. Do tej pory
   byly jedynym miejscem w systemie, w ktorym nie mogly. */
#footer {
	text-align: center;
	background-color: var(--kolor-granat);
	background-image:
		radial-gradient(90% 120% at 6% 108%,  rgba(0, 235, 150, 0.30) 0%, rgba(0, 235, 150, 0) 60%),
		radial-gradient(80% 130% at 22% -20%, rgba(0, 190, 245, 0.34) 0%, rgba(0, 190, 245, 0) 62%),
		linear-gradient(115deg, rgba(0, 190, 245, 0.18) 0%, rgba(0, 190, 245, 0) 55%);
	padding-top: 75px;
	padding-bottom: 50px;
	color: white;
	position: relative;

	/* Bez overflow: hidden - pole pikseli ma wychodzic ponad gorna krawedz.
	   Przycinaniem zajmuje sie clip-path na samym SVG, nizej.

	   Dodatni z-index podnosi CALA stopke ponad sekcje poprzedzajaca, zeby
	   wypust mial na co nachodzic. Wewnatrz stopki kolejnosc ustawiaja juz
	   wlasne wartosci: pole 0, tresc 1. Wartosc 3 zostaje daleko ponizej
	   trwalej nawigacji (89) i przycisku powrotu (101). */
	z-index: 3;

	--wyplyw: 64px;      /* jak wysoko pole wychodzi ponad stopke */
	--wyplyw-szer: 38%;  /* jak szeroki jest ten wypust, liczac od lewej */
}

/* Pole pikseli lezy nad gradientem, ale pod trescia. Dekoracja nie lapie
   zdarzen wskaznika (Regula Nieaktywnej Dekoracji).

   WYPUST PONAD STOPKE. Pole jest wyzsze od stopki o --wyplyw i o tyle
   wysuniete do gory, wiec kwadraty z gornej krawedzi grafiki wychodza nad
   nia i lekko nachodza na sekcje powyzej. Robia to WYLACZNIE po lewej,
   gdzie deseń jest najgestszy - po prawej stopka konczy sie prosta linia.

   clip-path rysuje ksztalt litery L: pelna szerokosc od poziomu gornej
   krawedzi stopki w dol, plus waski pas po lewej siegajacy wyzej. Dzieki
   temu nie trzeba zadnego drugiego SVG ani duplikatu ksztaltow.

   z-index dodatni, bo wypust musi znalezc sie NAD sekcja poprzedzajaca -
   na stronie glownej jest tam zdjecie Cukrowni, na podstronach jasne tlo. */
#stopka-piksele {
	position: absolute;
	left: 0;
	top: calc(-1 * var(--wyplyw));

	/* SVG jest elementem zastepowanym: samo left + right go NIE rozciaga,
	   tylko dobiera szerokosc z wymiarow wlasnych. Bez jawnego width element
	   mial stale 1088 px i przy oknie wezszym niz to powodowal przewijanie
	   poziome (zmierzone przy 1024 i 768 px). */
	width: 100%;
	height: calc(100% + var(--wyplyw));
	pointer-events: none;
	z-index: 0;
	clip-path: polygon(
		0                  0,
		var(--wyplyw-szer) 0,
		var(--wyplyw-szer) var(--wyplyw),
		100%               var(--wyplyw),
		100%               100%,
		0                  100%
	);
}

/* GLEBIA
   ------------------------------------------------------------------------
   --mx i --my sa pisane przez skrypt jako liczby z zakresu -1..1: polozenie
   wskaznika wzgledem srodka stopki. --z to glebia warstwy.

   Przesuniecie jest UJEMNE wzgledem wskaznika, tak jak przy przesunieciu
   glowy: patrzac w prawo, widzisz blizsze obiekty uciekajace w lewo mocniej
   niz dalsze. Odwrotny znak dalby wrazenie plywania, nie przestrzeni.

   Wartosci sa w jednostkach uzytkownika SVG (viewBox 1920 szerokosci), wiec
   przy 1440 px skaluja sie razy 0,75: zasieg 22 daje okolo 16 px realnego
   ruchu dla warstwy najblizszej i okolo 2 px dla najdalszej. Wiecej czyta sie
   jak gadzet, mniej jak przypadek.

   W spoczynku --mx i --my nie istnieja, wiec podstawiane jest 0 i stopka
   wyglada dokladnie tak, jak zostala zaprojektowana. */
#stopka-piksele .pw {
	transform: translate3d(
		calc(var(--mx, 0) * var(--z) * -22px),
		calc(var(--my, 0) * var(--z) * -10px),
		0
	);
}

#stopka-piksele .pw[data-glebia="0"] {--z: 0.10}   /* najmniejsze - najdalej */
#stopka-piksele .pw[data-glebia="1"] {--z: 0.28}
#stopka-piksele .pw[data-glebia="2"] {--z: 0.50}
#stopka-piksele .pw[data-glebia="3"] {--z: 0.74}
#stopka-piksele .pw[data-glebia="4"] {--z: 1.00}   /* najwieksze - najblizej */

/* Podpowiedz dla kompozytora tylko wtedy, gdy stopka jest w kadrze.
   Na stale trzymalaby piec warstw w osobnych warstwach pamieci na kazdej
   podstronie, przez caly czas. */
#stopka-piksele.w-kadrze .pw {
	will-change: transform;
}

/* Ruch ekspresyjny. Paralaksa jest udokumentowanym wyzwalaczem dolegliwosci
   przedsionkowych, wiec przy ograniczonym ruchu nie ma jej wcale - skrypt
   sie nie uruchamia, a ta regula domyka sprawe takze wtedy, gdy zmienne
   zostaly juz zapisane. */
@media (prefers-reduced-motion: reduce) {
	#stopka-piksele .pw {
		transform: none;
		will-change: auto;
	}
}

#footer > article {
	position: relative;
	z-index: 1;
}

#footer a {color: white}

/* height: auto jest tu warunkiem, a nie kosmetyka: znacznik niesie width
   i height (500x500), zeby przegladarka znala proporcje przed wczytaniem
   pliku i zarezerwowala miejsce. Bez height: auto atrybut wysokosci
   zaczalby rzadzic ukladem i logo mialoby 150x500. Patrz komentarz
   przy tym obrazie w footer.php. */
#footer > article > img {
	display: block;
	max-width: 150px;
	height: auto;
	position: relative;
	margin: 0 auto 25px;
}

/* Strzalki karuzeli partnerow wychodza 75px poza galerie i przy pewnych
   pozycjach przewiniecia wchodza pod #scroll-top (zmierzone 25x22px przy
   1440px). Pierwszenstwo dostaje strzalka: jest osiagalna tylko wtedy, gdy
   pas partnerow jest w kadrze, podczas gdy powrot na gore mozna kliknac
   po przewinieciu o kilka pikseli w dowolnym innym miejscu. */
.slideshow-arrows {z-index: 100}

/* POWROT NA GORE
   ------------------------------------------------------------------------
   Kwadrat w gradiencie markowym ze strzalka w srodku - ten sam jezyk, co
   pole pikseli w stopce. Wczesniej byl trojkatem z napisem UP w bitmapie.

   --dol trzyma domyslny odstep od dolnej krawedzi okna i jest jedyna
   wartoscia zmieniana w progach responsywnych. --parking jest pisany przez
   skrypt i podnosi przycisk, gdy zbliza sie stopka; max() wybiera wieksza
   z dwoch, wiec dopoki stopki nie widac, obowiazuje --dol. Dzieki temu
   proga responsywne nie musza nic wiedziec o parkowaniu. */
#scroll-top {
	position: fixed;
	z-index: 99;
	--dol: 50px;
	bottom: max(var(--dol), var(--parking, 0px));
	right: 50px;
	width: 50px;
	height: 50px;
	display: none;
	background: var(--marka-gradient);
	overflow: hidden;
}

#scroll-top svg {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 13px;
	left: 13px;
	fill: none;
	stroke: var(--kolor-granat);   /* 7,8:1 na zieleni gradientu */
	stroke-width: 2.4;
	stroke-linecap: square;
	stroke-linejoin: miter;
	transition: top var(--ruch-stan);
}

/* Strzalka unosi sie w kwadracie, a nie caly przycisk - kwadrat jest tu
   ksztaltem systemu i ma stac w miejscu. */
#scroll-top:hover svg {top: 7px}

/* Biel, tak samo jak przy pauzie karuzeli: przycisk stoi na granacie stopki
   albo na ciemnych sekcjach, a gradient markowy jest zbyt jasny, zeby sam
   niosl wskaznik. Domyslna obwodka przegladarki (1px auto) ginela na
   gradiencie. Odsuniecie, zeby nie wchodzila w kwadrat. */
#scroll-top:focus-visible {
	outline: var(--kreska-gruba) solid var(--kolor-papier);
	outline-offset: 3px;
}



/*GRID: 1440px */
@media all and (max-width: 1440px) {
	
.wrap {--rama: 150px; padding: 100px var(--rama)}

.link-box {margin-top: 50px}

.hamburger {
	top: 71px;
	left: 60px
}

#menu-rejestracja {
	top: 60px;
	left: 185px;
}

#menu-contact {
	left: 60px;
}

.home #menu-contact {top: calc(100vh - 125px)}

#menu-sociale {
	position: absolute;
	top: 150px;
	left: 60px;
}

#menu-cont > div {padding: 60px 0px 60px 185px}

#menu-cont > div > img {
	bottom: 225px;
    width: 200px;
}
	
}



/*GRID: 1280px */
@media all and (max-width: 1280px) {
	
.wrap {--rama: 100px; padding: 100px var(--rama)}

h1 {
	font-size: 32px;
	line-height: 42px;
	margin-bottom: 25px;
}

h2 {
	font-size: 32px;
	line-height: 42px;
	margin-bottom: 25px;
}

h3 {
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 15px;
}

h4 {
	font-size: 18px;
	line-height: 18px;
	margin-bottom: 10px;
}

#scroll-top {right: 25px}

.link-box {margin-top: 35px}

#menu-cont > div > img {bottom: 200px}

#menu-contact {
	left: 50px;
	width: 40px;
	top: calc(50vh - 25px);
}

.home #menu-contact {top: calc(100vh - 100px)}
	
}



/*GRID: 1024px */
@media all and (max-width: 1024px) {
	
.opacity-hover a:hover, a.opacity-hover:hover {opacity: 1}
.black-to-blue a:hover, a.black-to-blue:hover {color: black}
.link-box:hover figure {transform: scaleY(0)}
.link-more a:hover, a.link-more:hover {color: black !important}
.hamburger:hover > span:nth-of-type(2) {width: 60%}
#menu-cont ul a:hover {color: white}
#menu-cont > div > div:last-of-type a:hover {color: white}	

/* h1 nalezy do tej reguly na rowni z pozostalymi naglowkami. Pominiety,
   powodowal przewijanie poziome ponizej ~331px: "Wspoldzielczosc." jest
   nielamliwe i przy 24px + 2px odstepu wymaga 250,8px, a przy oknie 320px
   kolumna hero daje 240px. Przy 1px miesci sie z zapasem. */
h1, h2, h3, h4 {
	letter-spacing: 1px;
	word-spacing: 1px;
}

.wrap {--rama: 50px;  padding: 50px var(--rama)}

#scroll-top {--dol: 25px}

.hamburger {
	top: 61px;
	left: 50px
}

#menu-rejestracja {
	top: 50px;
	left: 125px;
}

#menu-contact {top: 275px !important}

#menu-sociale {
	position: absolute;
	top: 150px;
	left: 50px;
}

#menu-cont {width: 50vw}

#menu-cont > div {padding: 50px 125px}

#menu-cont > div > img {bottom: 175px}

#menu-cont ul a {
	font-size: 20px;
	line-height: 20px;
}
	
}



/*GRID: 768px */
@media all and (max-width: 768px) {
	
#menu-rejestracja {
	left: auto;
	right: 50px;
}

#menu-cont {width: 100%}

#menu-cont > div {
	padding: 33vh 25px 50px;
	text-align: center;
}

#menu-cont > div h4, #menu-cont > div .link-box {
	margin-left: auto;
	margin-right: auto;
}

#menu-cont-rejestracja {
	position: absolute;
	top: 50px;
	right: 50px;
}

#menu-cont > div > img {
	left: 25px;
	bottom: auto;
	top: 25px;
    width: 300px;
}
	
}



/*GRID: 568px */
@media all and (max-width: 568px) {
	
.wrap {--rama: 25px;  padding: 50px var(--rama)}

h1 {
	font-size: 26px;
	line-height: 36px;
	margin-bottom: 20px;
}

h2 {
	font-size: 26px;
	line-height: 36px;
	margin-bottom: 20px;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 15px;
}

h4 {
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 10px;
}

small {
    font-size: 12px;
    line-height: 14px;
}

.link-box {
    padding: 12px 20px;
    margin-top: 25px;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
    word-spacing: 1px;
}

.link-more a, a.link-more {
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 1px;
	word-spacing: 1px;
	margin-top: 15px;
}

.hamburger {
	top: 40px;
	left: 40px
}

#menu-rejestracja {
	top: 40px;
	left: auto;
	right: 40px;
}

/* Przycisk jest tu nizszy (40px zamiast 50px), wiec pasek tez sie zweza. */
#chrome-dock {height: 56px}
body.chrome-docked > .hamburger {top: 14px}
body.chrome-docked #menu-rejestracja {top: 8px}

#menu-contact {
	width: 40px;
	top: 100px !important;
	left: 40px;
}

#menu-sociale {
	position: absolute;
	top: 160px;
	left: 40px;
}

#footer {
    padding-top: 50px;
    padding-bottom: 25px;
}

#footer > article > img {max-width: 125px}

#menu-cont-rejestracja {
	top: 40px;
	right: 40px;
}

}



/*GRID: 440px */
@media all and (max-width: 440px) {
	
h1 {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 20px;
}	

h2 {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 15px;
}

h4 {
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 10px;
}

	
.wrap {--rama: 20px;  padding: 40px var(--rama)}

#scroll-top {
	--dol: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
}

/* Mniejszy kwadrat - strzalka i jej odsuniecie schodza proporcjonalnie. */
#scroll-top svg {
	width: 20px;
	height: 20px;
	top: 10px;
	left: 10px;
}
#scroll-top:hover svg {top: 5px}

#menu-contact {width: 36px}

#menu-cont > div > img {width: 250px}
	
}

/* Przycisk pauzy karuzeli partnerow. Kwadrat, jak wszystko w systemie;
   dwie belki = pauza, trojkat = wznow. */
.slideshow-pause {
	position: absolute;
	z-index: 101;
	right: 0;
	bottom: -50px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: var(--kreska) solid rgba(255,255,255,0.5);
	background: transparent;
	border-radius: 0;
	cursor: pointer;
	transition: border-color var(--ruch-stan);
}
.slideshow-pause:hover {border-color: var(--kolor-papier)}
/* Biel, nie cyjan. Przycisk lezy na granatowym pasie partnerow, gdzie cyjan
   ma 1,25:1 - a Regula "Akcent nie jest wskaznikiem" zabrania opierania
   wskaznika stanu na kolorze akcentu. Biel daje tam 18,65:1. */
.slideshow-pause:focus-visible {
	outline: var(--kreska-gruba) solid var(--kolor-papier);
	outline-offset: 3px;
}

.slideshow-pause .slideshow-pause-mark {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 4px;
	height: 12px;
	background: var(--kolor-papier);
	box-shadow: 6px 0 0 var(--kolor-papier);
	transform: translateX(-3px);
}
/* Trojkat przez clip-path, nie przez obramowania: sztuczka z border-left
   jest nieczytelna przy czytaniu kodu i myli narzedzia analizujace CSS
   z dekoracyjna belka boczna. */
.slideshow-pause.is-paused .slideshow-pause-mark {
	width: 10px;
	height: 12px;
	background: var(--kolor-papier);
	box-shadow: none;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transform: translateX(1px);
}


/* Poszanowanie ustawienia systemowego: uzytkownik, ktory prosi o ograniczenie
   ruchu, dostaje te same tresci bez przejsc. Nie zerujemy czasu globalnie -
   to zabiloby takze informacyjne zmiany stanu - tylko skracamy je do progu
   nieodczuwalnego i wylaczamy animacje dekoracyjne. */
@media (prefers-reduced-motion: reduce) {

	/* Wersja intencjonalna, nie globalne wyzerowanie.

	   Uzytkownik prosi o ograniczenie ruchu, a nie o utrate informacji
	   o stanie. Wczesniejsza wersja skracala wszystkie przejscia do 0,01 ms,
	   przez co znikalo takze potwierdzenie dzialania: przycisk wypelnial sie
	   skokowo, karta przeskakiwala, a uzytkownik tracil jedyny sygnal,
	   ze cokolwiek sie wydarzylo.

	   Zasada: ruch ekspresyjny znika, ruch informacyjny zostaje - skrocony
	   do progu, na ktorym jest czytelny, ale juz nie odczuwalny jako ruch. */

	/* 1. Ekspresja - wylaczona calkowicie */
	.link-box figure,
	a.link-box:active figure,
	.link-box:hover figure {
		transition: none !important;
	}

	#aktualnosci-home > div a figcaption > * {
		transition: none !important;
		transform: none !important;
	}

	#scroll-top svg,
	.hamburger > span {
		transition: none !important;
	}

	/* 2. Informacja o stanie - zostaje, skrocona */
	a, button,
	.link-more a, a.link-more,
	#menu-cont ul a,
	#historia-cont > div,
	#menu-sociale a, #menu-contact, #scroll-top,
	.slideshow-arrows a, .slideshow-pause,
	.prelegent-excerpt > div > figcaption,
	#chrome-dock, .skip-link,
	body > .hamburger, #menu-rejestracja {
		transition-duration: 0.1s !important;
	}

	/* 3. Przewijanie i animacje deklaratywne */
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}


/* POTWIERDZENIE DZIALANIA

   Ponizej 1024px system wylacza wszystkie efekty hover, zakladajac urzadzenie
   dotykowe. Skutek uboczny byl taki, ze na telefonie dotkniecie kontrolki
   wygladalo dokladnie tak samo jak jego brak - strona nie odpowiadala
   na nic. Stany :active dzialaja niezaleznie od rodzaju wskaznika i sa
   jedynym potwierdzeniem, jakie dostaje uzytkownik dotyku.

   Czas 120ms: to ma byc odpowiedz, nie animacja. Wszystko, co dluzsze,
   czyta sie jako opoznienie. */

.link-more a:active, a.link-more:active,
#menu-cont ul a:active,
#historia-cont > div:active {
	color: var(--kolor-akcent);
	transition-duration: var(--ruch-odpowiedz);
}

#menu-sociale a:active,
#menu-contact:active,
#scroll-top:active,
.prelegent-excerpt > div > nav div a:active,
#prelegenci-single > figure nav a:active,
#single-aktualnosc .share a:active,
.slideshow-arrows a:active {
	opacity: 0.55;
	transition-duration: var(--ruch-odpowiedz);
}

.slideshow-pause:active {
	border-color: var(--kolor-papier);
	transition-duration: var(--ruch-odpowiedz);
}

/* Hamburger: srodkowa belka rozciaga sie do pelnej szerokosci - ta sama
   mikroreakcja, ktora na desktopie zapowiada rozwiniecie menu. */
.hamburger:active > span:nth-of-type(2) {
	width: 100%;
	transition-duration: var(--ruch-odpowiedz);
}


/* GRUBOSC KRESKI W RYSUNKACH SVG
   ------------------------------------------------------------------------
   vector-effect: non-scaling-stroke sprawia, ze grubosc jest liczona
   w finalnej przestrzeni ekranu, a nie w jednostkach viewBox. Bez tego
   ta sama deklaracja dawala 1,5 px w stopce i 6,4 px w ozdobniku, bo oba
   rysunki sa inaczej przeskalowane - i to byla polowa balaganu w obwodkach.

   Druga polowa brala sie z liczenia grubosci proporcjonalnie do wielkosci
   kwadratu. Teraz kwadrat wybiera JEDEN z trzech stopni skali, zaleznie
   od tego, jak duzy jest - a nie wlasny, unikalny ulamek. */
.k-wlos, .k, .k-gruba {
	vector-effect: non-scaling-stroke;
}

.k-wlos  {stroke-width: var(--kreska-wlos)}
.k       {stroke-width: var(--kreska)}
.k-gruba {stroke-width: var(--kreska-gruba)}


/* GLEBIA ELEMENTOW DEKORACYJNYCH
   ------------------------------------------------------------------------
   --gx i --gy pisze skrypt na <html>: polozenie wskaznika wzgledem srodka
   OKNA, w zakresie -1..1. Punkt odniesienia jest tu inny niz w stopce
   i celowo - patrz komentarz w general.js.

   Przesuniecie jest ujemne wzgledem wskaznika, tak samo jak w stopce:
   patrzac w prawo, blizsze obiekty uciekaja w lewo. Odwrotny znak dalby
   wrazenie plywania, nie przestrzeni.

   W spoczynku --gx i --gy nie istnieja, wiec podstawiane jest 0 i wszystko
   stoi dokladnie tam, gdzie zostalo zaprojektowane. */
.glebia {
	transform: translate3d(
		calc(var(--gx, 0) * var(--z, 1) * -32px),
		calc(var(--gy, 0) * var(--z, 1) * -18px),
		0
	);
}

/* Podpowiedz dla kompozytora wylacznie dla elementow w kadrze. */
.glebia.w-kadrze {
	will-change: transform;
}

/* Ruch ekspresyjny. Skrypt sie nie uruchamia przy ograniczonym ruchu,
   a ta regula domyka sprawe takze wtedy, gdy zmienne zostaly juz zapisane. */
@media (prefers-reduced-motion: reduce) {
	.glebia {
		transform: none;
		will-change: auto;
	}
}


/* HERO: POSWIATA I PLYNACY PRAD
   ------------------------------------------------------------------------
   Poswiata. W zrodle byla gradientami z przezroczystoscia, ktore SVG 1.1 umie
   wyrazic tylko przez rasteryzacje - konwersja robila z nich 39 bitmap.
   Zamiast tego drop-shadow: liczone raz przy rasteryzacji warstwy, ostre
   na kazdym ekranie i podazajace za barwami z tokenow.

   Dwa promienie, bo to dwa rodzaje swiatla: linie sa cienkie i maja swiecic
   waskim halo, kwadraty sa plaskimi plamami i potrzebuja mniej. */
   Poswiata siedzi na WLASNYM rysunku, nie na tym z liniami. Odkad drzewo
   samo jest warstwa glebi i sie porusza, filtr na wspolnej powierzchni
   kazal Firefoksowi przeliczac go w kazdej klatce - 67 zgubionych klatek
   na 170. Rozdzielony: 1. Patrz naglowek hero-drzewo.php. */
#hero-poswiata .prad {
	filter: drop-shadow(0 0 7px rgba(0, 235, 150, 0.55))
	        drop-shadow(0 0 18px rgba(0, 190, 245, 0.35));
}

/* Kwadraty NIE dostaja poswiaty, a impuls NIE uzywa mix-blend-mode - obie
   rzeczy zdjete z powodu wydajnosci i obie musialy pojsc razem. Same linie
   swieca i to wystarcza; kwadraty leza na nich i tak sa jasne.

   Pomiar przy prądzie, glebi i ruchu myszy: 27,5 ms i 52 zgubione klatki
   na 100. Po zdjeciu samej poswiaty kwadratow 22,5, po zdjeciu samego
   trybu mieszania 29,7 - czyli osobno nie pomaga zadne. Razem: 16,9 ms
   i jedna zgubiona klatka.

   Przyczyna: warstwa, ktora sie rusza, pod warstwa z maska i trybem
   mieszania wymusza ponowne zlozenie calego kadru w kazdej klatce.
   Filtr na ruchomej warstwie dokłada do tego wlasne przeliczenie. */

/* PRAD. Pasmo przejezdza przez maske od dolu do gory, wiec impuls wychodzi
   ze strumieni, wchodzi w pien i gasnie w koronie. Ruch jest transformem,
   czyli po stronie kompozytora - nie przelicza sie geometrii 2249 punktow.

   Liniowo, bo to ma byc zjawisko w tle, nie zdarzenie. Krzywa z przyspieszeniem
   zrobilaby z tego animacje, ktora domaga sie uwagi.

   Czas cyklu steruje OBIEMA rzeczami naraz i nie da sie ich tu rozdzielic:
   droga pasma jest stala (1500 px), wiec skrocenie cyklu w tej samej mierze
   zageszcza przejazdy i przyspiesza sam impuls. 5 s to 300 px/s; wczesniej
   bylo 9 s i 166,7 px/s, czyli jedno i drugie wzroslo 1,8 raza. Gdyby kiedys
   trzeba bylo zmienic tylko jedno, trzeba dolozyc przerwe w klatkach
   kluczowych albo skrocic droge pasma. */
/* Biel, nie cyjan: impuls w barwie akcentu na liniach, ktore SAME sa
   cyjanowe, podnosil jasnosc o niecale 40/255, czyli byl niewidoczny.

   Bez mix-blend-mode - zdjete razem z poswiata kwadratow, patrz komentarz
   przy .piksele. Zwykle krycie 0,9 daje w tym ukladzie prawie to samo
   (zmierzona widocznosc 104/255 wobec 115 przy screen), a jest tanie. */
#hero-impuls .prad-impuls {
	opacity: 0.9;
}

/* will-change na pasmie, a NIE filtr na warstwie impulsu. Drop-shadow
   przeliczany razem z maska w kazdej klatce byl w Firefoksie nie do udzwigniecia.
   Poswiata ma wlasny rysunek, hero-poswiata - patrz naglowek hero-drzewo.php. */
#hero-impuls .pasmo {
	will-change: transform;
}

#hero-impuls .pasmo {
	animation: hero-prad-plynie 5s linear infinite;
}

@keyframes hero-prad-plynie {
	from {transform: translateY(0)}
	to   {transform: translateY(-1500px)}
}

/* Ruch ekspresyjny: przy ograniczonym ruchu prad stoi. Poswiata zostaje,
   bo nie jest ruchem. */
@media (prefers-reduced-motion: reduce) {
	#hero-impuls .pasmo {animation: none}
	#hero-impuls .prad-impuls {display: none}
}




/* GLEBIA W HERO
   ------------------------------------------------------------------------
   Szesc warstw, nie piec: kwadraty ida wedlug wielkosci, a SAMO DRZEWO jest
   jedna z nich - wewnetrzna. Dwie najdalsze warstwy kwadratow leza za nim,
   cztery blizsze przed. Wieksze czytaja sie jako blizsze i jada mocniej.

   Ruch drzewa nie tylko poglebia scene, ale ZMNIEJSZA rozjazd. Dopoki drzewo
   stalo, kwadrat najblizszej warstwy odjezdzal od swojej galezi o pelne
   22,7 px. Teraz najwiekszy dystans miedzy drzewem a jakakolwiek warstwa
   lisci to 13,8 px w poziomie i 7,3 px w pionie.

   .glebia-t nosza trzy rysunki drzewa - poswiata, linie i impuls - i wszystkie
   maja ten sam wspolczynnik. Musza, bo inaczej swiatlo odkleja sie od galezi,
   w ktorej biegnie.

   Wartosci sa w jednostkach viewBox SVG. Warstwy kwadratow NIE dziedzicza
   skali grupy drzewa (maja ja wtopiona we wspolrzedne), wiec amplituda jest
   przemnozona przez te skale - 1,3335. Warstwy .glebia-t leza NAD grupa
   z atrybutem transform, wiec dziala na nie ta sama amplituda w tych samych
   jednostkach.

   Impuls przechodzi wylacznie po liniach. Iskrzace kwadraty musialy odpasc:
   naleza do ruchomej warstwy, a ruch WEWNATRZ maski wymusza jej przeliczanie
   w kazdej klatce. Patrz komentarz przy .prad-impuls w hero-drzewo.php. */
.glebia-h,
.glebia-t {
	transform: translate3d(
		calc(var(--gx, 0) * var(--zh, 1) * -22.7px),
		calc(var(--gy, 0) * var(--zh, 1) * -12px),
		0
	);
}

.glebia-h[data-glebia="0"] {--zh: 0.10}   /* najmniejsze kwadraty - najdalej */
.glebia-h[data-glebia="1"] {--zh: 0.28}
.glebia-t                  {--zh: 0.39}   /* drzewo: poswiata, linie, impuls */
.glebia-h[data-glebia="2"] {--zh: 0.50}
.glebia-h[data-glebia="3"] {--zh: 0.74}
.glebia-h[data-glebia="4"] {--zh: 1.00}   /* najwieksze - najblizej */

/* Podpowiedz dla kompozytora tylko wtedy, gdy rysunek jest w kadrze - tak samo,
   jak w stopce. Klase nosi korzen svg, bo obserwator patrzy na niego, a nie na
   grupy: patrz komentarz przy sterowniku glebi w js/general.js. */
.warstwa-hero.w-kadrze .glebia-h,
.warstwa-hero.w-kadrze .glebia-t {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.glebia-h, .glebia-t {transform: none}
}