/**
 * Ozdoby sezonowe: śnieg, światełka pod menu, ozdoba na logo.
 *
 * Arkusz wczytuje się WYŁĄCZNIE wtedy, gdy któraś ozdoba jest włączona w
 * Wygląd → Dostosuj → Ozdoby sezonowe. Przez jedenaście miesięcy w roku
 * nie ma go w kodzie strony.
 *
 * JEDEN WYŁĄCZNIK: PRZYCISK „ZATRZYMAJ RUCH” NA PASKU DOSTĘPNOŚCI
 *
 * Decyzja właściciela z 11 sierpnia. Pierwsza wersja gasiła ozdoby także przy
 * systemowym `prefers-reduced-motion` — i na maszynie, na której Windows ma
 * wyłączone efekty animacji, ozdoby znikały, choć ilustracje banera dalej się
 * ruszały. Ta niespójność nie była winą banera: cały serwis od początku
 * traktuje WŁASNY przycisk jako ostatnie słowo użytkownika (patrz reguły
 * `!important` w `pages.css` gaszące animacje wewnątrz rysunków SVG — one też
 * słuchają wyłącznie `html.klucz-bez-ruchu`).
 *
 * Ozdoby robią więc to samo, co reszta serwisu: domyślnie ruch jest włączony,
 * a gasi go klasa `html.klucz-bez-ruchu`. Świadomy koszt: osoba z ograniczeniem
 * ruchu ustawionym w systemie zobaczy śnieg, dopóki nie kliknie przycisku —
 * dokładnie tak, jak dziś widzi animowany baner.
 *
 * Przy śniegu nie wystarczy zatrzymać animacji: nieruchome kropki na całym
 * ekranie wyglądają na usterkę. Znika cały.
 *
 * NIC TU NIE ŁAPIE KLIKNIĘĆ
 * Wszystkie ozdoby mają `pointer-events: none` i `aria-hidden` w znaczniku.
 * Ozdoba, przez którą nie da się kliknąć przycisku, jest awarią, nie ozdobą.
 */

/* ------------------------------------------------------------------- śnieg */

/*
 * Warstwa na całym oknie. `position: fixed`, żeby płatki nie przewijały się
 * razem ze stroną — śnieg pada niezależnie od tego, gdzie jesteśmy.
 *
 * `z-index: 500` — wartość ZMIERZONA, nie zgadnięta. Pierwsza wersja miała 1
 * i śnieg leciał ZA treścią: ilustracje slidera mają 2, plakietki pakietów 2,
 * strzałki karuzeli 99. Płatki chowały się za wszystkim, co ma tło.
 *
 * Pełna mapa warstw tej strony, odczytana z wyrenderowanego dokumentu:
 *
 * |  z | co |
 * |---|---|
 * | 1 | `.tab-buttons`, `.gallery-why-klucz` |
 * | 2 | ilustracje slidera |
 * | 5 | `.pakiet-plakietka` — nad panelem szczegółów (3) i krzyżykiem (4) |
 * | 99 | strzałki karuzeli |
 * | 500 | **śnieg** |
 * | 99999 | nagłówek |
 * | 100000 | odsyłacz pomijający |
 *
 * Nagłówek tworzy własny kontekst układania, więc wszystko w środku — menu
 * rozwijane, pasek ułatwień dostępu — jest nad śniegiem niezależnie od tej
 * liczby. O to chodzi: płatek przelatujący nad otwartym menu utrudnia czytanie.
 */
.klucz-snieg {
	position: fixed;
	inset: 0;
	z-index: 500;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Trzy różne kształty płatka, na zmianę. Jeden kształt powtórzony czternaście
 * razy widać od razu — oko wyłapuje powtórzenie szybciej niż ruch.
 *
 * Rysunki są w plikach SVG, nie w CSS: sześcioramienny płatek z odnogami to
 * kilkanaście linii, a w CSS wychodziłby ze skrzyżowanych pseudoelementów,
 * których i tak nie starczy na trzy warianty.
 *
 * Kreska jest niebieskoszara, nie biała. Biały płatek na jasnym tle serwisu
 * znika, a dokładanie mu cienia albo filtra kosztuje przy każdej klatce.
 */
.klucz-snieg__platek {
	position: absolute;
	top: -1.5rem;
	width: 0.75rem;
	height: 0.75rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	animation: klucz-snieg-spada linear infinite;
}

.klucz-snieg__platek:nth-child(3n + 1) { background-image: url("../img/ozdoby/platek-1.svg"); }
.klucz-snieg__platek:nth-child(3n + 2) { background-image: url("../img/ozdoby/platek-2.svg"); }
.klucz-snieg__platek:nth-child(3n)     { background-image: url("../img/ozdoby/platek-3.svg"); }

/*
 * Każdy płatek dostaje własne położenie, czas i opóźnienie. Bez tego wszystkie
 * spadałyby równo, w jednej linii — a to nie wygląda na śnieg, tylko na deszcz
 * z tabeli. Wartości dobrane tak, żeby nie było widać powtórzenia.
 */
.klucz-snieg__platek:nth-child(1)  { left: 4%;  width: .70rem; height: .70rem; animation-duration: 13s; animation-delay: 0s; }
.klucz-snieg__platek:nth-child(2)  { left: 11%; width: 1.0rem; height: 1.0rem; animation-duration:  9s; animation-delay: 2s; }
.klucz-snieg__platek:nth-child(3)  { left: 18%; width: .55rem; height: .55rem; animation-duration: 16s; animation-delay: 4s; }
.klucz-snieg__platek:nth-child(4)  { left: 25%; width: .85rem; height: .85rem; animation-duration: 11s; animation-delay: 1s; }
.klucz-snieg__platek:nth-child(5)  { left: 32%; width: .60rem; height: .60rem; animation-duration: 14s; animation-delay: 6s; }
.klucz-snieg__platek:nth-child(6)  { left: 39%; width: 1.1rem; height: 1.1rem; animation-duration: 10s; animation-delay: 3s; }
.klucz-snieg__platek:nth-child(7)  { left: 46%; width: .55rem; height: .55rem; animation-duration: 15s; animation-delay: 7s; }
.klucz-snieg__platek:nth-child(8)  { left: 53%; width: .80rem; height: .80rem; animation-duration: 12s; animation-delay: 5s; }
.klucz-snieg__platek:nth-child(9)  { left: 60%; width: .95rem; height: .95rem; animation-duration:  9s; animation-delay: 8s; }
.klucz-snieg__platek:nth-child(10) { left: 67%; width: .60rem; height: .60rem; animation-duration: 17s; animation-delay: 2s; }
.klucz-snieg__platek:nth-child(11) { left: 74%; width: .85rem; height: .85rem; animation-duration: 11s; animation-delay: 9s; }
.klucz-snieg__platek:nth-child(12) { left: 81%; width: .55rem; height: .55rem; animation-duration: 14s; animation-delay: 4s; }
.klucz-snieg__platek:nth-child(13) { left: 88%; width: 1.0rem; height: 1.0rem; animation-duration: 10s; animation-delay: 6s; }
.klucz-snieg__platek:nth-child(14) { left: 95%; width: .70rem; height: .70rem; animation-duration: 13s; animation-delay: 1s; }

/* Co drugi płatek kręci się w drugą stronę i znosi go w lewo, a nie w prawo.
   Bez tego czternaście płatków leci równolegle jak sznurek koralików. */
.klucz-snieg__platek:nth-child(even) {
	animation-name: klucz-snieg-spada-lewo;
}

/*
 * Ruch w dół i lekko na boki. `translate3d` zamiast `top` — przeglądarka liczy
 * to na karcie graficznej i nie przelicza układu strony przy każdej klatce.
 * Przy czternastu płatkach i tak byłoby to niewiele, ale ta strona ma działać
 * też na starszym telefonie.
 */
@keyframes klucz-snieg-spada {
	0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
	10%  { opacity: .9; }
	90%  { opacity: .9; }
	100% { opacity: 0;   transform: translate3d(2.5rem, 105vh, 0) rotate(220deg); }
}

@keyframes klucz-snieg-spada-lewo {
	0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
	10%  { opacity: .9; }
	90%  { opacity: .9; }
	100% { opacity: 0;   transform: translate3d(-2rem, 105vh, 0) rotate(-180deg); }
}

/* Na wąskim ekranie mniej płatków: mniej miejsca, słabszy procesor, a przy
   dziesięciu i tak nie widać, że jest ich mniej. */
@media (max-width: 600px) {
	.klucz-snieg__platek:nth-child(n + 9) {
		display: none;
	}
}

/* ------------------------------------------------------------- światełka */

/*
 * Sznur na samej górze strony, NAD nagłówkiem.
 *
 * Zajmuje miejsce w toku, a nie wisi nad treścią. Wersja pływająca nakładałaby
 * się na logo — nagłówek ma 97 px wysokości, a samo logo 87, więc nad nim nie
 * ma wolnego pasa. Włączenie ozdób zsuwa więc stronę o te 22 px w dół, co przy
 * girlandzie na górze jest zachowaniem oczekiwanym, a nie usterką.
 */
/*
 * PIERWSZA WERSJA WYGLĄDAŁA JAK ROZSYPANE KROPKI, nie jak girlanda. Powody były
 * trzy i wszystkie wynikały z tej samej pomyłki — sznur był rysowany „mniej
 * więcej”, zamiast mieć jedną, wspólną miarę:
 *
 *   1. kabel był prostą kreską 1 px, a prawdziwy sznur zwisa między punktami;
 *   2. żarówki rozkładał `space-between`, więc przy 1280 px stały 64 px od
 *      siebie i nic ich ze sobą nie wiązało;
 *   3. były okrągłe i płaskie, bez oprawki i bez świecenia.
 *
 * Teraz miarą jest ODCINEK 48 px. Kabel to obrazek jednego zwisu powtarzany
 * w poziomie, a każda żarówka zajmuje dokładnie jeden taki odcinek i wisi na
 * jego środku, czyli w najniższym punkcie zwisu. Dzięki temu sznur i żarówki
 * nie mogą się rozjechać przy żadnej szerokości okna.
 *
 * Wymiary są tu w pikselach, nie w rem: dopasowanie żarówki do zwisu musi być
 * co do piksela, a girlanda jest ozdobą i nie ma powodu, żeby rosła razem
 * z powiększeniem tekstu.
 */
/* Wysokość pasa to rachunek, nie estetyka: bańka kończy się 22 px od góry,
   a jej poświata (rozmycie 11 px + rozszerzenie 1 px) sięga 12 px dalej.
   `overflow: hidden` — potrzebny do przycinania nadmiaru żarówek w POZIOMIE —
   przycina też pion, więc przy 26 px poświata ucinała się równo na krawędzi
   i wyglądała jak przycięta naklejka. 34 px to dokładnie miejsce, w którym
   światło samo gaśnie do zera. */
.klucz-swiatelka {
	position: relative;
	display: flex;
	height: 34px;
	overflow: hidden;
	background-image: url("../img/ozdoby/sznur.svg");
	background-repeat: repeat-x;
	background-position: left top;
	pointer-events: none;
}

/*
 * Żarówka: oprawka u góry, bańka pod nią, światło dookoła.
 *
 * `flex: 0 0 48px` to ta sama miara co odcinek kabla. `margin-top: 9px` sadza
 * oprawkę na najniższym punkcie zwisu — krzywa kabla ma tam wierzchołek na
 * wysokości 11,5 px, a oprawka jest wysoka na 3 px.
 *
 * Barwa idzie przez `color`, a nie `background`, bo `currentColor` obsługuje
 * jednocześnie bańkę i poświatę. Inaczej każda z czterech barw wymagałaby
 * dwóch reguł zamiast jednej.
 */
.klucz-swiatelka__zarowka {
	position: relative;
	flex: 0 0 48px;
	height: 12px;
	margin-top: 9px;
	animation: klucz-swiatelka-puls 2.4s ease-in-out infinite;
}

.klucz-swiatelka__zarowka::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 5px;
	height: 3px;
	margin-left: -2.5px;
	border-radius: 1px;
	background: #4a4a4a;
}

/* Bańka: kropla, czyli okrąg u dołu i zwężenie ku oprawce. Poświata dwiema
   warstwami — bliską i szeroką — żeby światło miało miękką krawędź. */
.klucz-swiatelka__zarowka::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 50%;
	width: 9px;
	height: 11px;
	margin-left: -4.5px;
	border-radius: 45% 45% 50% 50% / 35% 35% 60% 60%;
	background: currentColor;
	box-shadow: 0 0 5px 0 currentColor, 0 0 11px 1px currentColor;
}

.klucz-swiatelka__zarowka:nth-child(4n + 1) { color: #e8413f; }
.klucz-swiatelka__zarowka:nth-child(4n + 2) { color: #f2a325; }
.klucz-swiatelka__zarowka:nth-child(4n + 3) { color: #58ab1f; }
.klucz-swiatelka__zarowka:nth-child(4n + 4) { color: #2f8ae8; }

/*
 * Zapalanie po kolei, nie wszystkie naraz. Pięć różnych opóźnień rozłożonych
 * co 0,48 s daje wrażenie światła biegnącego wzdłuż sznura — a że barwy idą
 * co cztery, a opóźnienia co pięć, wzór nie powtarza się na całej długości.
 *
 * Puls siedzi na ::after, czyli na samej bańce. Pierwsza wersja przygaszała
 * cały element — razem z oprawką, a oprawka gasnąca ze światłem wygląda jak
 * dziura w sznurze. Żarówka przygasa do 45%, nie znika: zgaszona całkiem
 * zostawia po sobie pusty odcinek kabla.
 */
.klucz-swiatelka__zarowka {
	animation: none;
}

.klucz-swiatelka__zarowka::after {
	animation: klucz-swiatelka-puls 2.4s ease-in-out infinite;
}

.klucz-swiatelka__zarowka:nth-child(5n + 1)::after { animation-delay: 0s; }
.klucz-swiatelka__zarowka:nth-child(5n + 2)::after { animation-delay: .48s; }
.klucz-swiatelka__zarowka:nth-child(5n + 3)::after { animation-delay: .96s; }
.klucz-swiatelka__zarowka:nth-child(5n + 4)::after { animation-delay: 1.44s; }
.klucz-swiatelka__zarowka:nth-child(5n)::after     { animation-delay: 1.92s; }

@keyframes klucz-swiatelka-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* ------------------------------------------------------------- konfetti */

/*
 * Konfetti leci RAZ, przy wejściu na stronę, i znika.
 *
 * Bez skryptu: animacja CSS z jednym przebiegiem (`iteration-count: 1`) rusza
 * przy wczytaniu i po niecałych ośmiu sekundach kończy się na `opacity: 0`.
 * `forwards` trzyma ten stan końcowy — bez tego kawałki wróciłyby na górę ekranu
 * i tam zawisły.
 *
 * Delikatnie znaczy: małe prostokąciki, przygaszone barwy, wolny opad
 * i tylko osiemnaście sztuk. Konfetti sypiące się bez końca jest natrętne,
 * a to ma być gest powitania, nie efekt.
 */
.klucz-konfetti {
	position: fixed;
	inset: 0;
	z-index: 500;
	overflow: hidden;
	pointer-events: none;
}

.klucz-konfetti__kawalek {
	position: absolute;
	top: -2rem;
	width: 0.4rem;
	height: 0.7rem;
	border-radius: 1px;
	opacity: 0;
	animation: klucz-konfetti-opada cubic-bezier(.35, 0, .6, 1) 1 forwards;
}

.klucz-konfetti__kawalek:nth-child(4n + 1) { background: #e0736f; }
.klucz-konfetti__kawalek:nth-child(4n + 2) { background: #e8b04b; }
.klucz-konfetti__kawalek:nth-child(4n + 3) { background: #5aa37f; }
.klucz-konfetti__kawalek:nth-child(4n)     { background: #6f9fd0; }

.klucz-konfetti__kawalek:nth-child(1)  { left: 6%;  animation-duration: 6.5s; animation-delay: .1s; }
.klucz-konfetti__kawalek:nth-child(2)  { left: 12%; animation-duration: 5.4s; animation-delay: .9s; }
.klucz-konfetti__kawalek:nth-child(3)  { left: 18%; animation-duration: 7.2s; animation-delay: .3s; }
.klucz-konfetti__kawalek:nth-child(4)  { left: 24%; animation-duration: 6.0s; animation-delay: 1.4s; }
.klucz-konfetti__kawalek:nth-child(5)  { left: 30%; animation-duration: 7.6s; animation-delay: .6s; }
.klucz-konfetti__kawalek:nth-child(6)  { left: 36%; animation-duration: 5.8s; animation-delay: 1.8s; }
.klucz-konfetti__kawalek:nth-child(7)  { left: 42%; animation-duration: 6.8s; animation-delay: .2s; }
.klucz-konfetti__kawalek:nth-child(8)  { left: 48%; animation-duration: 7.0s; animation-delay: 1.1s; }
.klucz-konfetti__kawalek:nth-child(9)  { left: 54%; animation-duration: 5.6s; animation-delay: .5s; }
.klucz-konfetti__kawalek:nth-child(10) { left: 60%; animation-duration: 7.4s; animation-delay: 1.6s; }
.klucz-konfetti__kawalek:nth-child(11) { left: 66%; animation-duration: 6.2s; animation-delay: .8s; }
.klucz-konfetti__kawalek:nth-child(12) { left: 72%; animation-duration: 5.9s; animation-delay: 2.0s; }
.klucz-konfetti__kawalek:nth-child(13) { left: 78%; animation-duration: 7.1s; animation-delay: .4s; }
.klucz-konfetti__kawalek:nth-child(14) { left: 84%; animation-duration: 6.4s; animation-delay: 1.3s; }
.klucz-konfetti__kawalek:nth-child(15) { left: 90%; animation-duration: 5.7s; animation-delay: .7s; }
.klucz-konfetti__kawalek:nth-child(16) { left: 96%; animation-duration: 7.3s; animation-delay: 1.9s; }
.klucz-konfetti__kawalek:nth-child(17) { left: 3%;  animation-duration: 6.6s; animation-delay: 2.3s; }
.klucz-konfetti__kawalek:nth-child(18) { left: 51%; animation-duration: 6.1s; animation-delay: 2.6s; }

/* Co drugi kawałek znosi w drugą stronę i kręci się przeciwnie — inaczej całość
   opada równolegle i wygląda jak deszcz z kolorowych kresek. */
.klucz-konfetti__kawalek:nth-child(even) {
	animation-name: klucz-konfetti-opada-lewo;
}

@keyframes klucz-konfetti-opada {
	0%   { opacity: 0;  transform: translate3d(0, 0, 0) rotate(0deg); }
	8%   { opacity: .95; }
	85%  { opacity: .95; }
	100% { opacity: 0;  transform: translate3d(4rem, 105vh, 0) rotate(540deg); }
}

@keyframes klucz-konfetti-opada-lewo {
	0%   { opacity: 0;  transform: translate3d(0, 0, 0) rotate(0deg); }
	8%   { opacity: .95; }
	85%  { opacity: .95; }
	100% { opacity: 0;  transform: translate3d(-3.5rem, 105vh, 0) rotate(-480deg); }
}

/* ----------------------------------------------------------- wędrowiec */

/*
 * Postać tocząca kulę wzdłuż dolnej krawędzi nagłówka, tam i z powrotem.
 *
 * Pas jest wąski i przycinający (`overflow: hidden`), więc postać nie wychodzi
 * na treść ani nie rozpycha nagłówka. Leży w toku na dole `<header>`, a jego
 * `position: relative` ustawia `naglowek.css`.
 */
.klucz-wedrowiec {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	/* Wysokość postaci plus zapas na człapanie — uniesiona w górnej klatce
	   kołysania postać nie może być ścinana przez `overflow: hidden`. */
	height: 2.9rem;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Grupa niesie ruch w poziomie i obrót w miejscu zawracania.
 *
 * Obrót (`scaleX`) siedzi w TYCH SAMYCH klatkach co przesunięcie, a nie
 * w osobnej animacji: przy dwóch animacjach o tej samej długości przeglądarka
 * nie gwarantuje, że przełączą się w tej samej klatce, i postać potrafi wracać
 * tyłem przez pół szerokości ekranu.
 *
 * Zawracanie jest natychmiastowe (49% → 50%), bo obrót rozciągnięty w czasie
 * wygląda jak spłaszczanie postaci, nie jak odwrócenie się.
 */
/* Tempo zwolnione z 34 s na 60 s po uwadze właściciela — spacer, nie sprint.
   Przy 1280 px to około 21 px/s w jedną stronę.

   `will-change: transform` nie jest tu przezornością, tylko odpowiedzią na
   zgłoszone szarpanie: bez własnej warstwy kompozytora przeglądarka potrafi
   przerysowywać postać przy każdej klatce wolnego przesuwu, i to właśnie
   widać jako brak płynności. Element jest jeden i animuje się bez przerwy,
   więc stała warstwa jest tu użyciem zgodnym z przeznaczeniem, a nie
   zaklinaniem wydajności. */
.klucz-wedrowiec__grupa {
	position: absolute;
	bottom: 0.15rem;
	left: 0;
	display: flex;
	align-items: flex-end;
	gap: 0.15rem;
	will-change: transform;
	animation: klucz-wedruje 84s linear infinite;
}

/*
 * Człapanie — postać nie sunie jak naklejka, tylko kołysze się w rytmie kroków.
 *
 * `transform-origin` na dole: postać buja się na stopach, a nie obraca wokół
 * brzucha. `alternate` robi z jednego przechyłu tam-i-z-powrotem, więc klatek
 * są dwie zamiast czterech.
 */
/* Postać jest rysunkiem SVG wklejonym w stronę, nie obrazkiem z tła — obrazek
   z tła nie ma części ruchomych, a tu nogi, ręce i balony są osobnymi grupami
   animowanymi z arkusza. */
.klucz-wedrowiec__postac {
	display: block;
	width: 2.25rem;
	height: 2.5rem;
	transform-origin: 50% 100%;
	will-change: transform;
	animation: klucz-czlapie .9s ease-in-out infinite alternate;
}

@keyframes klucz-czlapie {
	from { transform: translateY(0) rotate(-2.5deg); }
	to   { transform: translateY(-0.1rem) rotate(2.5deg); }
}

/* Kula jedzie na TEJ SAMEJ osi czasu co wędrówka (84 s): obrót przyrasta
   w odcinkach marszu i stoi w oknach postojów — kula wirująca, gdy Mikołaj
   macha do nas ręką, zdradzałaby całą sztuczkę. Wartości w pełnych obrotach,
   a końcowa jest liczbą całkowitą, więc pętla domyka się bez skoku. */
.klucz-wedrowiec__kula {
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	animation: klucz-kula-toczy 84s linear infinite;
}

/* Rysunki postaci są w znaczniku (patrz functions.php); z tła idą tylko kule —
   one nie mają części ruchomych. */
.klucz-wedrowiec--mikolaj .klucz-wedrowiec__kula { background-image: url("../img/ozdoby/kula-sniegowa.svg"); }
.klucz-wedrowiec--krolik .klucz-wedrowiec__kula  { background-image: url("../img/ozdoby/pisanka.svg"); }

/*
 * Człowieczek z balonami. Balony są W RYSUNKU, nie osobnym elementem: sznurki
 * muszą trzymać się dłoni, a dwa niezależnie animowane elementy rozjeżdżają się
 * przy pierwszej zmianie szerokości okna. Rysunek przerobiony po uwadze
 * właściciela — pierwszy był za wysoki (62 jednostki na tułów jak patyk);
 * teraz te same proporcje maskotki co Mikołaj i królik, plus balony nad głową.
 *
 * Nie toczy niczego, więc kula znika. Zamiast człapania podskakuje — balony
 * to lekkość, a ta sama animacja na trzech postaciach robiłaby z nich sztancę.
 */
.klucz-wedrowiec--balony .klucz-wedrowiec__postac {
	width: 2.5rem;
	height: 3.25rem;
	animation: klucz-podskok 1s ease-in-out infinite;
}

.klucz-wedrowiec--balony .klucz-wedrowiec__kula {
	display: none;
}

.klucz-wedrowiec--balony {
	height: 3.4rem;
}

@keyframes klucz-podskok {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-0.18rem); }
}

/*
 * Oś czasu wędrówki: marsz → przystanek z machaniem → marsz → obrót przy
 * krawędzi → to samo w drodze powrotnej. 84 s pełnego cyklu.
 *
 * Przystanki NIE są osobnym mechanizmem: dwa sąsiednie klucze o tej samej
 * wartości (19% i 24%, 73,5% i 78%) dają postój, bo linearna interpolacja
 * między równymi wartościami stoi w miejscu. W tych samych oknach czasowych
 * druga animacja (`klucz-poza-*`) podmienia pozę boczną na frontalną
 * z machaniem — obie mają 84 s i startują razem, więc nie mogą się rozjechać.
 *
 * O płynności decydują: `translate3d` + `will-change` (ruch na karcie
 * graficznej) i `step-end` na nawrotach — obrót dzieje się MIĘDZY klatkami,
 * zamiast zgniatać postać przejściem scaleX przez zero.
 */
@keyframes klucz-wedruje {
	0%    { transform: translate3d(0, 0, 0) scaleX(1); animation-timing-function: linear; }
	19%   { transform: translate3d(calc((100vw - 4rem) * .42), 0, 0) scaleX(1); }
	24%   { transform: translate3d(calc((100vw - 4rem) * .42), 0, 0) scaleX(1); }
	47.5% { transform: translate3d(calc(100vw - 4rem), 0, 0) scaleX(1); animation-timing-function: step-end; }
	50%   { transform: translate3d(calc(100vw - 4rem), 0, 0) scaleX(-1); animation-timing-function: linear; }
	73.5% { transform: translate3d(calc((100vw - 4rem) * .5), 0, 0) scaleX(-1); }
	78%   { transform: translate3d(calc((100vw - 4rem) * .5), 0, 0) scaleX(-1); }
	97.5% { transform: translate3d(0, 0, 0) scaleX(-1); animation-timing-function: step-end; }
	100%  { transform: translate3d(0, 0, 0) scaleX(1); }
}

/*
 * Podmiana pozy: boczna (marsz) i frontalna (postój z machaniem) to dwie grupy
 * w JEDNYM rysunku SVG, przełączane przezroczystością w oknach postojów.
 * Przenikanie trwa 0,05% (ok. 40 ms) — na oko natychmiastowe, bez mrugnięcia.
 *
 * Kończyny animują się bez przerwy w krótkich pętlach i nie wymagają
 * synchronizacji: gdy poza jest schowana, jej ruch jest niewidoczny.
 */
@keyframes klucz-poza-przod {
	0%, 19% { opacity: 0; }
	19.05%, 23.95% { opacity: 1; }
	24%, 73.5% { opacity: 0; }
	73.55%, 77.95% { opacity: 1; }
	78%, 100% { opacity: 0; }
}

@keyframes klucz-poza-bok {
	0%, 19% { opacity: 1; }
	19.05%, 23.95% { opacity: 0; }
	24%, 73.5% { opacity: 1; }
	73.55%, 77.95% { opacity: 0; }
	78%, 100% { opacity: 1; }
}

.klucz-wedrowiec__postac .w-bok {
	animation: klucz-poza-bok 84s linear infinite;
}

.klucz-wedrowiec__postac .w-przod {
	animation: klucz-poza-przod 84s linear infinite;
}

/* Kończyny. `transform-box: view-box` sprawia, że `transform-origin` liczy się
   w jednostkach rysunku — punkty obrotu (bark, biodro) są wtedy stałymi
   z rysunku, a nie procentami ramki, która zmienia się z rozmiarem postaci. */
.klucz-wedrowiec__postac g {
	transform-box: view-box;
}

@keyframes klucz-krok {
	from { transform: rotate(13deg); }
	to   { transform: rotate(-13deg); }
}

@keyframes klucz-pchanie {
	0%, 100% { transform: rotate(0deg); }
	50%      { transform: rotate(6deg); }
}

@keyframes klucz-machanie {
	from { transform: rotate(6deg); }
	to   { transform: rotate(34deg); }
}

@keyframes klucz-balony-kolysanie {
	from { transform: rotate(-3deg); }
	to   { transform: rotate(3deg); }
}

.klucz-wedrowiec__postac .w-noga-a { animation: klucz-krok .6s ease-in-out infinite alternate; }
.klucz-wedrowiec__postac .w-noga-b { animation: klucz-krok .6s ease-in-out infinite alternate; animation-delay: -.3s; }
.klucz-wedrowiec__postac .w-reka-tyl { animation: klucz-krok .6s ease-in-out infinite alternate; animation-delay: -.3s; }
.klucz-wedrowiec__postac .w-reka-przod { animation: klucz-pchanie 1.2s ease-in-out infinite; }
.klucz-wedrowiec__postac .w-machanie { animation: klucz-machanie .55s ease-in-out infinite alternate; }
.klucz-wedrowiec__postac .w-balony { animation: klucz-balony-kolysanie 3.2s ease-in-out infinite alternate; }

/* Punkty obrotu kończyn — współrzędne barków i bioder z rysunków.
   Poza marszowa używa tej samej głowy i tułowia co postojowa (rysunek, który
   właściciel zaakceptował) — profil składany z elips w 30 pikselach zawsze
   wychodził jako kula zamiast brody. Kierunek marszu niosą nogi, ręka z kulą
   i sam ruch, jak u duszków w grach 2D. */
.klucz-wedrowiec--mikolaj .w-noga-a { transform-origin: 17.7px 38px; }
.klucz-wedrowiec--mikolaj .w-noga-b { transform-origin: 22.3px 38px; }
.klucz-wedrowiec--mikolaj .w-reka-tyl { transform-origin: 13.5px 30.5px; }
.klucz-wedrowiec--mikolaj .w-reka-przod { transform-origin: 26.5px 30.5px; }
.klucz-wedrowiec--mikolaj .w-machanie { transform-origin: 26.5px 30.5px; }

.klucz-wedrowiec--krolik .w-noga-a { transform-origin: 16px 40.5px; }
.klucz-wedrowiec--krolik .w-noga-b { transform-origin: 24px 40.5px; }
.klucz-wedrowiec--krolik .w-reka-przod { transform-origin: 27px 31px; }
.klucz-wedrowiec--krolik .w-machanie { transform-origin: 27px 31px; }

.klucz-wedrowiec--balony .w-balony { transform-origin: 27px 28px; }

@keyframes klucz-kula-toczy {
	0%    { transform: rotate(0turn); }
	19%   { transform: rotate(3.4turn); }
	24%   { transform: rotate(3.4turn); }
	47.5% { transform: rotate(8turn); }
	50%   { transform: rotate(8turn); }
	73.5% { transform: rotate(11.6turn); }
	78%   { transform: rotate(11.6turn); }
	97.5% { transform: rotate(16turn); }
	100%  { transform: rotate(16turn); }
}

@media (max-width: 600px) {
	.klucz-wedrowiec {
		height: 2.4rem;
	}

	.klucz-wedrowiec__postac {
		width: 1.75rem;
		height: 2rem;
	}

	.klucz-wedrowiec__kula {
		width: 0.9rem;
		height: 0.9rem;
	}

	/* Balony osobno, bo ich reguły spoza zapytania są szczegółowsze od ogólnych
	   TU — bez tych dwóch wpisów człowieczek zostawałby pełnowymiarowy na pasie
	   ściętym do 2,4 rem i traciłby balony za górną krawędzią. */
	.klucz-wedrowiec--balony {
		height: 2.75rem;
	}

	.klucz-wedrowiec--balony .klucz-wedrowiec__postac {
		width: 2rem;
		height: 2.6rem;
	}
}

/* --------------------------------------------------------- nocne niebo */

/*
 * Baner w nocy: granatowe niebo z gwiazdami i księżycem, na zimowy tryb świąt.
 *
 * JEDEN ZASIĘG ZMIENNYCH ZAMIAST DZIESIĄTEK NADPISAŃ
 * Cały baner czerpie barwy z rodziny `--pakiet-*`, więc noc to przestrojenie
 * czterech zmiennych na `.slider` — każda reguła slidera podnosi nowe wartości
 * sama. Poza zasięgiem slidera nic się nie zmienia, więc reszta strony nie
 * wie o nocy.
 *
 * KONTRAST POLICZONY, NIE ZGADNIĘTY (tło #0d1730):
 *
 * | rola | dzień | noc | kontrast na tle |
 * |---|---|---|---|
 * | pismo główne | #515555 | #f2f5fa | 16,2:1 |
 * | pismo drugorzędne | #6f6b68 | #b9c6dc | 10,3:1 |
 * | akcent jako TEKST | #c94d4d | #f28b7d | 7,4:1 |
 * | linie i kropki | #ded9d2 | #7c8cb5 | 5,0:1 |
 *
 * Rozjaśniona czerwień psułaby jednak miejsca, gdzie akcent NIE leży na niebie:
 * biały przycisk, biała plakietka kodu i białe kółka strzałek dostałyby koral
 * na bieli (2,4:1). Te cztery miejsca mają niżej przypięte dzienne wartości —
 * dlatego są tu wymienione co do selektora, a nie „na wszelki wypadek”.
 */
/*
 * Niebo obejmuje DWA elementy, bo baner składa się z dwóch: `.slider` z treścią
 * slajdu i `.slider-dots` — osobny pas z kropkami, będący jego RODZEŃSTWEM,
 * nie dzieckiem. Zmierzone: slider kończy się na 1405 px, a pas kropek sięga
 * 1477 px. Bez drugiej reguły pod granatem zostawał kremowy pasek, w którym
 * wisiały jeszcze strzałki (wystają poza obrys slidera na `bottom: -41px`).
 *
 * Kafelek gwiazd startuje w obu pasach od własnej góry, więc na styku zmienia
 * się układ gwiazd. Nie widać tego jako szwu: kafelek nie ma linii ani wzoru,
 * który przechodziłby przez krawędź — są tylko rozrzucone punkty.
 */
body.klucz-nocne-niebo .slider,
body.klucz-nocne-niebo .slider-dots {
	--pakiet-ink: #f2f5fa;
	--pakiet-muted: #b9c6dc;
	--pakiet-red: #f28b7d;
	--pakiet-line: #7c8cb5;
	background-color: #0d1730;
	background-image: url("../img/ozdoby/niebo.svg");
	background-repeat: repeat;
	background-size: 280px 200px;
}

/* Czerwone TŁO przycisku zostaje dzienne — biały napis ma na nim 4,5:1,
   a na rozjaśnionym koralu miałby 2,4:1. */
body.klucz-nocne-niebo .slajd-przycisk {
	background: var(--pakiet-red);
}

/* Plakietka kodu USSD jest białym polem, więc jej pismo wraca do dziennej
   czerwieni; ramka jaśnieje, bo leży na niebie. */
body.klucz-nocne-niebo .slajd-kod {
	border-color: rgba(255, 255, 255, .35);
	color: var(--pakiet-red);
}

/* Plakietka to biała pigułka, tak samo jak plakietka kodu wyżej — jej pismo
   wraca więc do dziennej czerwieni. Bez tego wzięłaby nocny koral, który na
   bieli daje 2,4:1. */
body.klucz-nocne-niebo .slajd-plakietka {
	color: var(--pakiet-red);
}

/* Strzałki: biały krążek, więc znak w środku wraca do dziennej czerwieni —
   razem z tłem najazdu, na którym stoi biały znak. */
body.klucz-nocne-niebo .slider .prev,
body.klucz-nocne-niebo .slider .next {
	color: var(--pakiet-red);
}

body.klucz-nocne-niebo .slider .prev:hover,
body.klucz-nocne-niebo .slider .next:hover {
	border-color: var(--pakiet-red);
	background-color: var(--pakiet-red);
	color: #fff;
}

/*
 * Nagłówek dołącza do nocy. Zgłoszone przez właściciela: przy granatowym
 * banerze menu zostawało białym pasem między girlandą a niebem. Nagłówek
 * bierze tło ze zmiennej `--kolor-naglowek`, a odsyłacze z `--pakiet-ink` —
 * więc noc to znów przestrojenie zmiennych, nie przepisywanie reguł.
 */
body.klucz-nocne-niebo .site-header {
	--kolor-naglowek: #0d1730;
	--pakiet-ink: #e8edf6;
}

/* Stany menu: dzienne #dd4a25 i akcent z panelu mają na granacie ok. 3,8:1 — za mało na
   tekst. Koral z palety nocy daje 7,4:1. */
body.klucz-nocne-niebo .main-navigation .menu > li:not([class*="current-menu-"]):hover > a,
body.klucz-nocne-niebo .main-navigation .menu > li:not([class*="current-menu-"]):focus-within > a,
body.klucz-nocne-niebo .main-navigation .menu li[class*="current-menu-"] > a {
	color: #f28b7d;
}

/* Rozwijana karta podmenu ZOSTAJE biała — ale jej odsyłacze czerpią z tej samej
   przestrojonej zmiennej, więc bez przypięcia byłyby jasne na białym. Wracają
   do dziennych wartości co do selektora. */
body.klucz-nocne-niebo .main-navigation .sub-menu {
	border-color: rgba(255, 255, 255, .28);
}

body.klucz-nocne-niebo .main-navigation .sub-menu a {
	color: #515555;
}

body.klucz-nocne-niebo .main-navigation .sub-menu a:hover,
body.klucz-nocne-niebo .main-navigation .sub-menu a:focus {
	color: var(--kolor-menu-akcent);
}

/* Znak firmowy ma ciemnoszare litery — na granacie by zniknął. Biała podkładka
   jak naklejka; wymiar znaku bez zmian, więc nagłówek nie zmienia wysokości. */
body.klucz-nocne-niebo .site-logo img {
	padding: 5px 9px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .94);
}

/* Girlanda stoi wtedy na nocy razem z nagłówkiem, a kabel jaśnieje —
   ciemnoszary ginął na granacie. */
body.klucz-nocne-niebo .klucz-swiatelka {
	background-color: #0d1730;
	background-image: url("../img/ozdoby/sznur-noc.svg");
}

/* W trybie wysokiego kontrastu niebo gaśnie: gwiazdki pod tekstem działają
   dokładnie przeciwnie do celu tego trybu. Barwy i tak przejmuje dostepnosc.css. */
html.klucz-kontrast body.klucz-nocne-niebo .slider,
html.klucz-kontrast body.klucz-nocne-niebo .slider-dots {
	background-image: none;
}

/* Rozbłyski gwiazd (SMIL w niebo.svg) nie słyszą przycisku „Zatrzymaj ruch",
   bo animacja żyje wewnątrz obrazka tła. Podmieniamy więc cały obrazek na
   nieruchomą kopię. */
html.klucz-bez-ruchu body.klucz-nocne-niebo .slider,
html.klucz-bez-ruchu body.klucz-nocne-niebo .slider-dots {
	background-image: url("../img/ozdoby/niebo-stale.svg");
}

/* ---------------------------------------------------- Halloween: niebo */

/*
 * Ten sam mechanizm co nocne niebo — przestrojenie zmiennych `--pakiet-*`
 * w zasięgu `.slider` i `.slider-dots` — ale w dwóch charakterach, więc
 * wartości idą przez zmienne `--hw-*` ustawione na `<body>`. Oba nieba naraz
 * się nie zdarzą: przy włączonym halloweenowym PHP nie dokłada klasy nocnego.
 *
 * KONTRAST POLICZONY, NIE ZGADNIĘTY:
 *
 * | rola | bajkowy (tło #2a1740) | straszny (tło #120d16) |
 * |---|---|---|
 * | pismo główne | #f4eefa — 14,3:1 | #e8d9b8 — 13,7:1 |
 * | pismo drugorzędne | #d8c8ea — 10,3:1 | #bfb3a6 — 9,3:1 |
 * | akcent jako TEKST | #ffad5c — 8,8:1 | #ff8a3d — 8,2:1 |
 * | linie i kropki | #9a86c2 — 5,1:1 | #8a7a99 — 4,9:1 |
 *
 * Białe pola (przycisk, plakietki, krążki strzałek, karta podmenu) dostają
 * ciemną dynię #b34d12 — 5,3:1 na bieli i 5,3:1 białego pisma na niej.
 * Jasny akcent z tabeli dałby na bieli poniżej 2:1.
 */
body.klucz-halloween-niebo {
	--hw-tlo: #2a1740;
	--hw-ink: #f4eefa;
	--hw-muted: #d8c8ea;
	--hw-akcent: #ffad5c;
	--hw-linia: #9a86c2;
	--hw-dynia: #b34d12;
	--hw-dynia-ciemna: #8f3d0e;
	--hw-ksiezyc: url("../img/ozdoby/halloween-ksiezyc-mily.svg");
	--hw-pajeczyna: none;
	--hw-gwiazdy: url("../img/ozdoby/niebo.svg");
	/* Dzienne pismo ZAPAMIĘTANE przed przestrojeniem nagłówka — z `:root`, więc
	   razem z barwą ustawioną w panelu. Białe karty w nagłówku wracają do niego
	   (niżej); literał #515555 unieważniłby panel bez śladu. */
	--hw-ink-dzien: var(--pakiet-ink);
}

body.klucz-halloween-niebo.klucz-halloween-straszny {
	--hw-tlo: #120d16;
	--hw-ink: #e8d9b8;
	--hw-muted: #bfb3a6;
	--hw-akcent: #ff8a3d;
	--hw-linia: #8a7a99;
	--hw-ksiezyc: url("../img/ozdoby/halloween-ksiezyc-straszny.svg");
	--hw-pajeczyna: url("../img/ozdoby/pajeczyna.svg");
}

body.klucz-halloween-niebo .slider,
body.klucz-halloween-niebo .slider-dots {
	--pakiet-ink: var(--hw-ink);
	--pakiet-muted: var(--hw-muted);
	--pakiet-red: var(--hw-akcent);
	--pakiet-line: var(--hw-linia);
	background-color: var(--hw-tlo);
	background-image: var(--hw-gwiazdy);
	background-repeat: repeat;
	background-size: 280px 200px;
}

/* Księżyc i pajęczyna tylko w samym slajdzie, nie w pasie kropek — tam byłyby
   ucięte w pół. Warstwy od wierzchu: księżyc, pajęczyna (albo `none`), gwiazdy. */
body.klucz-halloween-niebo .slider {
	background-image: var(--hw-ksiezyc), var(--hw-pajeczyna), var(--hw-gwiazdy);
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: right 3% top 10px, left top, left top;
	background-size: auto, 130px 130px, 280px 200px;
}

/*
 * Szwy. Nagłówek, slajd i pas kropek to trzy osobne ciemne pudełka na białej
 * stronie. Chrome na Androidzie (skala ekranu ułamkowa, np. 2,625) po
 * zakończeniu przewijania potrafi postawić ich styk w pół piksela urządzenia
 * i przez szczelinę prześwituje biel — jasna kreska pod nagłówkiem i pod
 * strzałkami (zrzut właściciela 31.10.2026; na komputerze się nie pokazuje).
 * Cień bez rozmycia w barwie nieba wystaje 1 px za slajd w górę i w dół,
 * a z pasa kropek w górę — pod szczeliną jest wtedy granat, nie biel.
 * Nagłówek i pas kropek leżą wyżej w kolejności rysowania, więc cień ich nie
 * przykrywa.
 */
body.klucz-halloween-niebo .slider {
	box-shadow: 0 -1px 0 var(--hw-tlo), 0 1px 0 var(--hw-tlo);
}

body.klucz-halloween-niebo .slider-dots {
	box-shadow: 0 -1px 0 var(--hw-tlo);
}

/*
 * Dół banera: pas ziemi przez całą szerokość (tło) i dwie grządki dyń-lampionów
 * — po lewej trzy (duża, średnia, mała), po prawej dwie i nagrobek albo dynia
 * bez twarzy. Każda ma inną twarz i migocze własnym rytmem.
 *
 * Grządki to rysunki wstawione WPROST w pas kropek (`klucz_motyw_slajdy_halloween`
 * w functions.php), nie tło — tło nie reaguje na kursor, a dynia po najechaniu
 * podskakuje, rozjaśnia się i mówi swoje zdanie w języku strony (prośby właściciela 30.10.2026).
 * Migotanie jest tutaj, w arkuszu, więc „Zatrzymaj ruch” gasi je zwykłą regułą
 * (niżej) — nieruchome kopie plików nie są potrzebne.
 *
 * Pas kropek ma zwykle 50 px (zmierzone 30.10.2026: rząd 46 px plus 26 px
 * dopełnienia przy `border-box`), a strzałki kończą się 32 px pod slajdem.
 * Przy niebie Halloween dopełnienie rośnie do 86 px: pas ma 110 px, czyli tyle
 * co grządki, a baner jest na te dni o 60 px wyższy. Dynie zaczynają się
 * ~32 px od góry pasa, więc nie wchodzą pod strzałki nawet na wąskim ekranie.
 * Warstwy tła od wierzchu: ziemia, gwiazdy.
 */
body.klucz-halloween-niebo {
	--hw-ziemia: url("../img/ozdoby/halloween-ziemia-mila.svg");
}

body.klucz-halloween-niebo.klucz-halloween-straszny {
	--hw-ziemia: url("../img/ozdoby/halloween-ziemia-straszna.svg");
}

body.klucz-halloween-niebo .slider-dots {
	position: relative;
	background-image: var(--hw-ziemia), var(--hw-gwiazdy);
	background-repeat: repeat-x, repeat;
	background-position: left bottom, left top;
	background-size: 120px 14px, 280px 200px;
	padding-bottom: 86px;
}

/* Grządka łapie kursor tylko samymi dyniami (z poświatą) — reszta jej pudełka
   przepuszcza kliknięcia, więc nie zasłoni strzałek ani kropek. */
.klucz-dynie {
	position: absolute;
	bottom: 0;
	height: 110px;
	pointer-events: none;
}

.klucz-dynie--lewe {
	left: 3%;
	width: 260px;
}

.klucz-dynie--prawe {
	right: 3%;
	width: 220px;
}

.klucz-dynie svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.klucz-dynie .hwdy-dynia {
	pointer-events: visiblePainted;
	cursor: default;
}

/* Na telefonie grządki w 70%: przy 375 px lewa kończy się na 189 px, prawa
   zaczyna na 210 px — nie nachodzą na siebie. */
@media (max-width: 600px) {
	.klucz-dynie {
		height: 77px;
	}

	.klucz-dynie--lewe {
		left: 2%;
		width: 182px;
	}

	.klucz-dynie--prawe {
		right: 2%;
		width: 154px;
	}
}

/* Świeca w środku (jej samej nie widać — uwaga właściciela 30.10.2026):
   poświata i wnętrze oddychają, wycięcia migoczą.
   Czas każdej dyni jest w atrybucie `style` (rozstrojenie), tu tylko kształt. */
.klucz-dynie .hwdy-posw,
.klucz-dynie .hwdy-wnetrze {
	animation: klucz-dynia-oddech 2.3s linear infinite;
}

.klucz-dynie .hwdy-plama {
	animation: klucz-dynia-plama 2.3s linear infinite;
}

.klucz-dynie .hwdy-migot {
	animation: klucz-dynia-migot 1.7s linear infinite;
}

@keyframes klucz-dynia-oddech {
	0%, 100% { opacity: .9; }
	17%      { opacity: .6; }
	33%      { opacity: .85; }
	50%      { opacity: .55; }
	67%      { opacity: .95; }
	83%      { opacity: .7; }
}

@keyframes klucz-dynia-plama {
	0%, 100% { opacity: .25; }
	25%      { opacity: .12; }
	50%      { opacity: .22; }
	75%      { opacity: .1; }
}

@keyframes klucz-dynia-migot {
	0%, 100% { opacity: .55; }
	17%      { opacity: .15; }
	33%      { opacity: .5; }
	50%      { opacity: .05; }
	67%      { opacity: .6; }
	83%      { opacity: .25; }
}

/* Najechanie: dynia podskakuje i kołysze się ze śmiechu, nad nią jej zdanie (wstawia je PHP). */
.klucz-dynie .hwdy-cialo {
	transform-box: fill-box;
	transform-origin: 50% 100%;
}

.klucz-dynie .hwdy-ha {
	opacity: 0;
}

.klucz-dynie .hwdy-dynia:hover .hwdy-cialo {
	animation: klucz-dynia-smiech .32s ease-in-out 4;
}

.klucz-dynie .hwdy-dynia:hover .hwdy-migot {
	animation: none;
	opacity: .9;
}

.klucz-dynie .hwdy-dynia:hover .hwdy-ha {
	animation: klucz-dynia-ha 1.4s ease-out forwards;
}

@keyframes klucz-dynia-smiech {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	30%      { transform: translateY(-4px) rotate(-5deg); }
	60%      { transform: translateY(-2px) rotate(5deg); }
}

@keyframes klucz-dynia-ha {
	0%   { opacity: 0; transform: translateY(4px); }
	15%  { opacity: 1; transform: translateY(0); }
	75%  { opacity: 1; transform: translateY(-6px); }
	100% { opacity: 0; transform: translateY(-9px); }
}

/*
 * Rysunek slajdu (przy niebie Halloween — duch) nad warstwą nietoperzy (500):
 * nietoperze latają nad całą stroną, ale POD duchem — prośba właściciela
 * 30.10.2026. `.slajd-obraz` ma własny poziom (1 w slider.css), więc wystarczy
 * go podnieść; menu (99999) dalej jest nad wszystkim.
 */
body.klucz-halloween-niebo .slajd-obraz {
	z-index: 501;
}

body.klucz-halloween-niebo .slajd-przycisk {
	background: var(--hw-dynia);
}

body.klucz-halloween-niebo .slajd-przycisk:hover,
body.klucz-halloween-niebo .slajd-przycisk:focus {
	background: var(--hw-dynia-ciemna);
}

body.klucz-halloween-niebo .slajd-kod {
	border-color: rgba(255, 255, 255, .35);
	color: var(--hw-dynia);
}

body.klucz-halloween-niebo .slajd-plakietka,
body.klucz-halloween-niebo .slider .prev,
body.klucz-halloween-niebo .slider .next {
	color: var(--hw-dynia);
}

body.klucz-halloween-niebo .slider .prev:hover,
body.klucz-halloween-niebo .slider .next:hover {
	border-color: var(--hw-dynia);
	background-color: var(--hw-dynia);
	color: #fff;
}

/* Nagłówek dołącza do nieba — z tych samych powodów co przy nocy. */
body.klucz-halloween-niebo .site-header {
	--kolor-naglowek: var(--hw-tlo);
	--pakiet-ink: var(--hw-ink);
}

body.klucz-halloween-niebo .main-navigation .menu > li:not([class*="current-menu-"]):hover > a,
body.klucz-halloween-niebo .main-navigation .menu > li:not([class*="current-menu-"]):focus-within > a,
body.klucz-halloween-niebo .main-navigation .menu li[class*="current-menu-"] > a {
	color: var(--hw-akcent);
}

/*
 * Białe karty W nagłówku: przycisk i panel dostępności oraz okienko menu na
 * telefonie. Dziedziczą przestrojone `--pakiet-ink`, więc bez tego miałyby
 * jasne pismo na bieli — zmierzone 30.10.2026 na przycisku „Dostępność”.
 * Blok dostępności `dostepnosc.js` przenosi z `.klucz-dostepnosc-miejsce`
 * do `.inside-header`, więc oba miejsca.
 */
body.klucz-halloween-niebo .klucz-dostepnosc-miejsce,
body.klucz-halloween-niebo .klucz-dostepnosc-blok,
body.klucz-halloween-niebo .main-navigation.toggled .inside-navigation {
	--pakiet-ink: var(--hw-ink-dzien);
}

body.klucz-halloween-niebo .main-navigation.toggled .menu > li:not([class*="current-menu-"]):hover > a,
body.klucz-halloween-niebo .main-navigation.toggled .menu > li:not([class*="current-menu-"]):focus-within > a {
	color: var(--kolor-menu-akcent);
}

body.klucz-halloween-niebo .main-navigation.toggled .menu li[class*="current-menu-"] > a {
	color: var(--pakiet-red);
}

body.klucz-halloween-niebo .main-navigation .sub-menu {
	border-color: rgba(255, 255, 255, .28);
}

body.klucz-halloween-niebo .main-navigation .sub-menu a {
	color: #515555;
}

body.klucz-halloween-niebo .main-navigation .sub-menu a:hover,
body.klucz-halloween-niebo .main-navigation .sub-menu a:focus {
	color: var(--kolor-menu-akcent);
}

/* Logo bez białej karty: PHP podmienia je na pomarańczowe
   (`klucz_motyw_logo_halloween()`), które stoi wprost na niebie. */

body.klucz-halloween-niebo .klucz-swiatelka {
	background-color: var(--hw-tlo);
	background-image: url("../img/ozdoby/sznur-noc.svg");
}

/* Na telefonie księżyc mniejszy i wyżej — tekst slajdu zajmuje całą szerokość. */
@media (max-width: 600px) {
	body.klucz-halloween-niebo .slider {
		background-position: right 2% top 4px, left top, left top;
		background-size: 150px auto, 90px 90px, 280px 200px;
	}
}

/* --------------------------------------------------- Halloween: duszek */

/*
 * Duszek nie ma nóg, więc zamiast człapania unosi się i kołysze. Toczy dynię
 * w charakterze wybranym dla całego Halloween.
 *
 * Większy od Mikołaja (jak człowieczek z balonami, z wyższym pasem): wielkie
 * oczy i buzia w 2,25 rem zlewały się w kropki — uwaga właściciela 30.10.2026.
 */
.klucz-wedrowiec--duszek {
	height: 3.5rem;
}

.klucz-wedrowiec--duszek .klucz-wedrowiec__postac {
	width: 2.9rem;
	height: 3.3rem;
	animation: klucz-unosi 1.4s ease-in-out infinite alternate;
}

.klucz-wedrowiec--duszek .klucz-wedrowiec__kula {
	width: 1.35rem;
	height: 1.35rem;
}

@media (max-width: 600px) {
	.klucz-wedrowiec--duszek {
		height: 2.8rem;
	}

	.klucz-wedrowiec--duszek .klucz-wedrowiec__postac {
		width: 2.2rem;
		height: 2.5rem;
	}

	.klucz-wedrowiec--duszek .klucz-wedrowiec__kula {
		width: 1.05rem;
		height: 1.05rem;
	}
}

@keyframes klucz-unosi {
	from { transform: translateY(0) rotate(-1.5deg); }
	to   { transform: translateY(-0.2rem) rotate(1.5deg); }
}

.klucz-wedrowiec--duszek .klucz-wedrowiec__kula { background-image: url("../img/ozdoby/dynia-mila.svg"); }
.klucz-halloween-straszny .klucz-wedrowiec--duszek .klucz-wedrowiec__kula { background-image: url("../img/ozdoby/dynia-straszna.svg"); }

.klucz-wedrowiec--duszek .w-reka-tyl { transform-origin: 14px 25.5px; }
.klucz-wedrowiec--duszek .w-reka-przod { transform-origin: 29.5px 24.5px; }
.klucz-wedrowiec--duszek .w-machanie { transform-origin: 27.5px 24.5px; }

/* ------------------------------------------- Halloween: liście, nietoperze */

/* Warstwy jak śnieg: całe okno, `z-index: 500`, nic nie łapie kliknięć. */
.klucz-liscie {
	position: fixed;
	inset: 0;
	z-index: 500;
	overflow: hidden;
	pointer-events: none;
}

/*
 * Nietoperze, jak pająki, leżą W DOKUMENCIE i przewijają się z treścią
 * (prośba właściciela 30.10.2026). Warstwa ma wysokość okna u góry strony,
 * a `nietoperze.js` liczy każdy przelot od miejsca, gdzie akurat jest widok.
 * W poziomie przycinamy (`clip` nie robi pola przewijania), w pionie tory
 * nie wychodzą poza wysokość okna, więc nie wydłużają strony.
 */
.klucz-nietoperze {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 500;
	height: 100vh;
	overflow-x: clip;
	overflow-y: visible;
	pointer-events: none;
}

/*
 * Warstwy pająków leżą W DOKUMENCIE, nie na oknie: zerowej wysokości pas
 * u góry strony, z którego pająk i nić (we współrzędnych dokumentu, liczonych
 * w pajaki.js) wystają w dół. Przewijają się więc razem z treścią w tej samej
 * klatce. Warstwa przypięta do okna, przesuwana skryptem o przewinięcie,
 * doganiała stronę z opóźnieniem — uwaga właściciela 30.10.2026.
 * W poziomie przycinamy (`clip` nie robi z warstwy pola przewijania), żeby
 * pająk wychodzący za prawą krawędź nie dawał poziomego paska; w pionie
 * pajaki.js pilnuje, żeby nic nie wyszło za koniec strony.
 */
.klucz-pajak,
.klucz-nic {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 500;
	height: 0;
	overflow-x: clip;
	overflow-y: visible;
	pointer-events: none;
}

/*
 * Liść nie spada prosto jak płatek — kołysze się na boki, obracając się
 * w rytmie kołysania. Dlatego `ease-in-out` i cztery klatki pośrednie.
 */
.klucz-liscie__lisc {
	position: absolute;
	top: -2.5rem;
	width: 1.6rem;
	height: 1.6rem;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0;
	animation: klucz-lisc-spada ease-in-out infinite;
}

.klucz-liscie__lisc:nth-child(3n + 1) { background-image: url("../img/ozdoby/lisc-1.svg"); }
.klucz-liscie__lisc:nth-child(3n + 2) { background-image: url("../img/ozdoby/lisc-2.svg"); }
.klucz-liscie__lisc:nth-child(3n)     { background-image: url("../img/ozdoby/lisc-3.svg"); }

.klucz-liscie__lisc:nth-child(1)  { left: 5%;  animation-duration: 15s; animation-delay: 0s; }
.klucz-liscie__lisc:nth-child(2)  { left: 13%; width: 1.9rem; height: 1.9rem; animation-duration: 12s; animation-delay: 4s; }
.klucz-liscie__lisc:nth-child(3)  { left: 22%; width: 1.3rem; height: 1.3rem; animation-duration: 17s; animation-delay: 8s; }
.klucz-liscie__lisc:nth-child(4)  { left: 30%; animation-duration: 14s; animation-delay: 2s; }
.klucz-liscie__lisc:nth-child(5)  { left: 39%; width: 1.9rem; height: 1.9rem; animation-duration: 16s; animation-delay: 10s; }
.klucz-liscie__lisc:nth-child(6)  { left: 47%; width: 1.3rem; height: 1.3rem; animation-duration: 13s; animation-delay: 6s; }
.klucz-liscie__lisc:nth-child(7)  { left: 56%; animation-duration: 18s; animation-delay: 1s; }
.klucz-liscie__lisc:nth-child(8)  { left: 64%; width: 1.7rem; height: 1.7rem; animation-duration: 12s; animation-delay: 9s; }
.klucz-liscie__lisc:nth-child(9)  { left: 72%; animation-duration: 15s; animation-delay: 5s; }
.klucz-liscie__lisc:nth-child(10) { left: 80%; width: 1.3rem; height: 1.3rem; animation-duration: 17s; animation-delay: 3s; }
.klucz-liscie__lisc:nth-child(11) { left: 88%; width: 1.9rem; height: 1.9rem; animation-duration: 13s; animation-delay: 11s; }
.klucz-liscie__lisc:nth-child(12) { left: 95%; animation-duration: 16s; animation-delay: 7s; }

.klucz-liscie__lisc:nth-child(even) {
	animation-name: klucz-lisc-spada-lewo;
}

@keyframes klucz-lisc-spada {
	0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
	10%  { opacity: .95; }
	25%  { transform: translate3d(2rem, 25vh, 0) rotate(60deg); }
	50%  { transform: translate3d(-1rem, 52vh, 0) rotate(-30deg); }
	75%  { transform: translate3d(2.2rem, 78vh, 0) rotate(80deg); }
	90%  { opacity: .95; }
	100% { opacity: 0;   transform: translate3d(.5rem, 105vh, 0) rotate(10deg); }
}

@keyframes klucz-lisc-spada-lewo {
	0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
	10%  { opacity: .95; }
	25%  { transform: translate3d(-2rem, 25vh, 0) rotate(-50deg); }
	50%  { transform: translate3d(1rem, 52vh, 0) rotate(40deg); }
	75%  { transform: translate3d(-2.2rem, 78vh, 0) rotate(-70deg); }
	90%  { opacity: .95; }
	100% { opacity: 0;   transform: translate3d(-.5rem, 105vh, 0) rotate(-10deg); }
}

/*
 * Nietoperze: tory, przechył i przerwy liczy `nietoperze.js` (gładka krzywa
 * próbkowana gęsto, przechył z kierunku lotu). Do 30.10.2026 tory były
 * klatkami arkusza z kilkoma punktami — lot był szarpany, a wpisany ręcznie
 * przechył nie zgadzał się z kierunkiem (uwagi właściciela). Tu zostaje
 * wygląd i rozmiar; bez skryptu nietoperzy nie widać (`opacity: 0`).
 *
 * Machanie skrzydłami jest w samym `nietoperz.svg` (SMIL). `translate`
 * centruje rysunek na punkcie toru — osobna własność, więc nie gryzie się
 * z `transform` animacji.
 */
.klucz-nietoperze__nietoperz {
	position: absolute;
	top: 0;
	left: 0;
	width: 4.6rem;
	height: 2.98rem;
	translate: -50% -50%;
	background: url("../img/ozdoby/nietoperz.svg") no-repeat center / contain;
	opacity: 0;
	will-change: transform, opacity;
}

/* Cztery nietoperze (było siedem mniejszych — „za małe i za dużo”), każdy
   trochę innej wielkości. Na telefonie dwa pierwsze. */
.klucz-nietoperze__nietoperz:nth-child(2) { width: 4rem; height: 2.6rem; }
.klucz-nietoperze__nietoperz:nth-child(3) { width: 3.8rem; height: 2.46rem; }
.klucz-nietoperze__nietoperz:nth-child(4) { width: 4.3rem; height: 2.78rem; }

@media (max-width: 600px) {
	.klucz-liscie__lisc:nth-child(n + 9),
	.klucz-nietoperze__nietoperz:nth-child(n + 3) {
		display: none;
	}

	.klucz-nietoperze__nietoperz:nth-child(n) {
		width: 3.2rem;
		height: 2.07rem;
	}
}

/* ------------------------------------------------- Halloween: pająki */

/*
 * Rysunki pająków wkleja PHP. Każda noga stoi w grupie przesuniętej do
 * biodra, więc `transform-origin: 0 0` to biodro — noga zamiata końcem łuk,
 * a nie przesuwa się w całości. Fazy `a` i `b` są przesunięte o pół kroku
 * (opóźnienie równe długości przebiegu przy `alternate`).
 */
.klucz-pajak__rysunek {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.klucz-pajak__rysunek .p-noga {
	transform-box: view-box;
	transform-origin: 0 0;
	animation: klucz-pajak-krok .34s ease-in-out infinite alternate;
}

.klucz-pajak__rysunek .p-noga-b { animation-delay: -.34s; }

/*
 * Pająki przebierają nogami tylko w marszu. Zasięg kroku mnoży
 * `--pajak-idzie`, które `pajaki.js` zeruje na przystankach — dzięki
 * `@property` i przejściu na elemencie pająka liczba płynnie opada, więc
 * pająk dochodzi do postoju, a nie zamiera w pół kroku. Przeglądarka bez
 * `@property` przełączy ją skokiem.
 */
@property --pajak-idzie {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

@keyframes klucz-pajak-krok {
	from { transform: rotate(calc(var(--pajak-idzie) * -11deg)); }
	to   { transform: rotate(calc(var(--pajak-idzie) * 11deg)); }
}

/*
 * Spacerowicz: drogę, obrót i ucieczkę przed kursorem liczy `pajaki.js`
 * (ten sam silnik co pająk z nicią, bez nici). Do 30.10.2026 chodził stałą
 * trasą z klatek arkusza, ale taka trasa nie zareaguje na mysz ani nie
 * przewinie się z treścią — o jedno i drugie prosił właściciel. Warstwa
 * zostaje na całe okno, a skrypt przesuwa pająka o przewinięcie strony.
 * Bez skryptu pająka nie widać (`visibility: hidden` do pierwszej klatki).
 *
 * Pod nagłówkiem (500 < 99999), więc nigdy nie wchodzi na menu.
 */
.klucz-pajak__droga {
	position: absolute;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 4.5rem;
	visibility: hidden;
	will-change: transform;
	transition: --pajak-idzie .3s linear;
}

/*
 * Pająki zwisające z górnej krawędzi banera. Pas leży w `.slider` (PHP dokleja
 * go do wyniku shortcode’u slajdów), zaczyna się na jego górnej krawędzi
 * i przycina (`overflow: hidden`) — nić to długa kreska NAD pająkiem, ucięta
 * równo na krawędzi banera, więc przy każdym zjeździe wygląda na do niej
 * przyczepioną. Zwykły trik zamiast liczenia długości nici w klatkach.
 * Pas przewija się z banerem — nie z przyklejonym nagłówkiem, jak na początku.
 * `z-index` nad slajdem: slajdy mają własne pozycjonowanie i bez tego
 * zakrywałyby pająki zjeżdżające na ilustrację.
 */
.klucz-pajaki {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 2;
	height: 9rem;
	overflow: hidden;
	pointer-events: none;
}

.klucz-pajaki__pajak {
	position: absolute;
	top: 0;
	width: 3.3rem;
	height: 2.75rem;
	transform: translateY(2.5rem);
	transform-origin: 50% -6rem;
	animation: klucz-pajak-zjazd 7s ease-in-out infinite alternate;
}

/* Nić wchodzi w czubek odwłoka: 13% wysokości rysunku (6,5 z 50). */
.klucz-pajaki__pajak::before {
	content: "";
	position: absolute;
	bottom: 87%;
	left: 50%;
	width: 1px;
	height: 12rem;
	margin-left: -.5px;
	background: rgba(150, 140, 170, .9);
}

/* Wiszący pająk nie idzie, tylko leniwie porusza nogami. */
.klucz-pajaki .p-noga {
	animation-name: klucz-pajak-wisi;
	animation-duration: 1.7s;
}

.klucz-pajaki .p-noga-b { animation-delay: -1.7s; }

@keyframes klucz-pajak-wisi {
	from { transform: rotate(-5deg); }
	to   { transform: rotate(5deg); }
}

/* Prawa połowa: lewą zajmuje tytuł slajdu, a pająk zjeżdżający na tytuł
   zasłania go co kilka sekund. Księżyc stoi przy 84–96%, więc tam też nie. */
.klucz-pajaki__pajak:nth-child(1) { left: 46%; animation-duration: 7s; animation-delay: -2s; }
.klucz-pajaki__pajak:nth-child(2) { left: 63%; animation-duration: 9s; animation-delay: -5s; }
.klucz-pajaki__pajak:nth-child(3) { left: 77%; animation-duration: 8s; animation-delay: 0s; }

@keyframes klucz-pajak-zjazd {
	0%   { transform: translateY(.4rem) rotate(0deg); }
	60%  { transform: translateY(5.5rem) rotate(3deg); }
	100% { transform: translateY(4.5rem) rotate(-2deg); }
}

/*
 * Na niebie Halloween ciemne stworki znikają (czarna wdowa #141016 na tle
 * #120d16), więc dostają poświatę: księżycową w bajkowym, pomarańczową
 * w strasznym. Filtr siedzi na pojedynczych stworkach, nie na warstwach
 * całego okna — filtr na warstwie pełnoekranowej przerysowywałby cały ekran
 * w każdej klatce.
 */
body.klucz-halloween-niebo .klucz-pajak__droga,
body.klucz-halloween-niebo .klucz-nic__pajak,
body.klucz-halloween-niebo .klucz-pajaki__pajak .klucz-pajak__rysunek,
body.klucz-halloween-niebo .klucz-nietoperze__nietoperz {
	filter: drop-shadow(0 0 2px rgba(255, 231, 168, .75));
}

body.klucz-halloween-niebo.klucz-halloween-straszny .klucz-pajak__droga,
body.klucz-halloween-niebo.klucz-halloween-straszny .klucz-nic__pajak,
body.klucz-halloween-niebo.klucz-halloween-straszny .klucz-pajaki__pajak .klucz-pajak__rysunek,
body.klucz-halloween-niebo.klucz-halloween-straszny .klucz-nietoperze__nietoperz {
	filter: drop-shadow(0 0 2px rgba(255, 138, 61, .8));
}

/* Nietoperze to jedyne stworki, które przecinają całe ciemne niebo — mocniejsza
   poświata, inaczej czarne na czarnym znikały (uwaga właściciela 30.10.2026). */
body.klucz-halloween-niebo.klucz-halloween-straszny .klucz-nietoperze__nietoperz {
	filter: drop-shadow(0 0 3px rgba(255, 138, 61, .95)) drop-shadow(0 0 8px rgba(255, 138, 61, .45));
}

@media (max-width: 600px) {
	.klucz-pajak__droga {
		width: 3.2rem;
		height: 3.2rem;
	}

	/* Na telefonie tytuł slajdu zajmuje całą szerokość, więc pająki stoją
	   przy prawej krawędzi i zjeżdżają płycej — do górnej linii tytułu. */
	.klucz-pajaki__pajak {
		width: 2.5rem;
		height: 2.1rem;
		animation-name: klucz-pajak-zjazd-plytki;
	}

	.klucz-pajaki__pajak:nth-child(1) { left: 64%; }
	.klucz-pajaki__pajak:nth-child(2) { display: none; }
	.klucz-pajaki__pajak:nth-child(3) { left: 85%; }
}

@keyframes klucz-pajak-zjazd-plytki {
	0%   { transform: translateY(.3rem) rotate(0deg); }
	60%  { transform: translateY(2.6rem) rotate(3deg); }
	100% { transform: translateY(2.1rem) rotate(-2deg); }
}

/*
 * Pająk ciągnący nić. Drogę, obrót i nić liczy `pajaki.js` (droga jest
 * losowana, nić idzie za pająkiem — tego klatki nie opiszą); arkusz daje
 * tylko warstwę, rozmiar i wygląd nici. Warstwa jak u spacerowicza (w dokumencie,
 * wyżej): `z-index: 500`, pod nagłówkiem, nic nie łapie kliknięć.
 *
 * Nogi chodzą tą samą animacją co u spacerowicza; postoje ustawia skrypt
 * przez `--pajak-idzie`, a przejście robi z tego zwolnienie kroku, nie
 * zamarcie w pół ruchu.
 */
.klucz-nic__nici {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	overflow: visible;
	/* Jedna barwa na białą treść i na ciemne niebo Halloween — szarofioletowa
	   jak nić pająków spod menu, odrobinę grubsza, bo biegnie przez cały ekran. */
	stroke: rgba(135, 125, 160, .95);
	stroke-width: 1.2;
	fill: rgba(135, 125, 160, .95);
}

.klucz-nic__pajak {
	position: absolute;
	top: 0;
	left: 0;
	width: 4.5rem;
	height: 4.5rem;
	visibility: hidden;
	will-change: transform;
	transition: --pajak-idzie .3s linear;
}

@media (max-width: 600px) {
	.klucz-nic__pajak {
		width: 3.2rem;
		height: 3.2rem;
	}
}

/*
 * Duży pająk przebiegający przez ekran: dwa razy na wizytę nagle przebiega
 * zrywami z boku na bok. Tor, postoje i obrót liczy `przebiegacz.js`; tu
 * rozmiar i szybki krok — prawdziwy pająk w biegu przebiera nogami tak
 * szybko, że ledwo to widać. Bez poświaty, którą mają rysunkowe pająki na
 * ciemnym niebie — ten jest „żywy”, a żywy pająk nie świeci (uwaga właściciela).
 *
 * Warstwa — INACZEJ niż u pozostałych pająków — przypięta do OKNA, nie do
 * strony: przy przewijaniu pająk zostaje na ekranie, więc wygląda, jakby
 * biegał po samej szybie (prośba właściciela 30.10.2026).
 */
.klucz-przebiegacz {
	position: fixed;
	inset: 0;
	z-index: 500;
	overflow: hidden;
	pointer-events: none;
}

.klucz-przebiegacz__pajak {
	position: absolute;
	top: 0;
	left: 0;
	width: 11rem;
	height: 11rem;
	visibility: hidden;
	will-change: transform;
	transition: --pajak-idzie .08s linear;
}

.klucz-przebiegacz .p-noga {
	animation-duration: .12s;
}

.klucz-przebiegacz .p-noga-b {
	animation-delay: -.12s;
}

@media (max-width: 600px) {
	.klucz-przebiegacz__pajak {
		width: 7.5rem;
		height: 7.5rem;
	}
}

/* ------------------------------------------------ przycisk „Zatrzymaj ruch” */

/*
 * Śnieg, konfetti i wędrowiec ZNIKAJĄ, a nie stają: nieruchome płatki
 * rozsypane po ekranie wyglądają na usterkę renderowania, a stojący Mikołaj
 * na środku nagłówka — na błąd układu.
 *
 * Girlanda zostaje i tylko gaśnie jej puls: nieruchome światełka nie są ruchem.
 */
html.klucz-bez-ruchu .klucz-snieg,
html.klucz-bez-ruchu .klucz-konfetti,
html.klucz-bez-ruchu .klucz-wedrowiec,
html.klucz-bez-ruchu .klucz-liscie,
html.klucz-bez-ruchu .klucz-nietoperze,
html.klucz-bez-ruchu .klucz-pajak,
html.klucz-bez-ruchu .klucz-nic,
html.klucz-bez-ruchu .klucz-przebiegacz {
	display: none;
}

html.klucz-bez-ruchu .klucz-swiatelka__zarowka::after {
	animation: none;
}

/* Pająki w banerze zostają jak girlanda — wiszący nieruchomo pająk to nie
   ruch. Stają na wysokości z reguły podstawowej (2,5 rem). */
html.klucz-bez-ruchu .klucz-pajaki__pajak,
html.klucz-bez-ruchu .klucz-pajaki .p-noga {
	animation: none;
}

/* Księżyc i gwiazdy Halloween: nieruchome kopie, jak przy nocnym niebie. */
html.klucz-bez-ruchu body.klucz-halloween-niebo {
	--hw-ksiezyc: url("../img/ozdoby/halloween-ksiezyc-mily-stale.svg");
	--hw-gwiazdy: url("../img/ozdoby/niebo-stale.svg");
}

/* Dynie-lampiony: świece przestają migotać, dynie zostają — świecą równo. */
html.klucz-bez-ruchu .klucz-dynie * {
	animation: none !important;
}

html.klucz-bez-ruchu body.klucz-halloween-niebo.klucz-halloween-straszny {
	--hw-ksiezyc: url("../img/ozdoby/halloween-ksiezyc-straszny-stale.svg");
}

/* ------------------------------------------------------ wysoki kontrast */

/*
 * W trybie wysokiego kontrastu ozdoby milkną. Ten tryb istnieje po to, żeby
 * treść dała się przeczytać — kolorowe kropki nad tekstem działają dokładnie
 * przeciwnie. `dostepnosc.css` i tak wymusiłby na nich swoje barwy, więc
 * bez tej reguły zostałby rząd białych kółek bez znaczenia.
 */
html.klucz-kontrast .klucz-snieg,
html.klucz-kontrast .klucz-konfetti,
html.klucz-kontrast .klucz-swiatelka,
html.klucz-kontrast .klucz-wedrowiec,
html.klucz-kontrast .klucz-liscie,
html.klucz-kontrast .klucz-nietoperze,
html.klucz-kontrast .klucz-pajak,
html.klucz-kontrast .klucz-pajaki,
html.klucz-kontrast .klucz-przebiegacz,
html.klucz-kontrast .klucz-dynie,
html.klucz-kontrast .klucz-nic {
	display: none;
}

html.klucz-kontrast body.klucz-halloween-niebo .slider,
html.klucz-kontrast body.klucz-halloween-niebo .slider-dots {
	background-image: none;
}