/*
 * Ruch: pojawianie się bloków (na telefonie krótkie i lekkie), stojące zdjęcie w nagłówku podstrony
 * i stałe tło sekcji (.c-tlo-stale). Bez płynnego przewijania.
 * Warstwa components (do 22.10.2026 poza warstwą): style bloków rdzenia stoją w warstwie `wp`, więc nie wygrywają z przejściem.
 * Klasy pojawiania dodaje wyłącznie skrypt (assets/js/ruch.js), więc bez JavaScriptu treść jest widoczna;
 * stojące zdjęcie i stałe tło to samo CSS.
 * Tylko opacity i transform. Wyjście wykładnicze, bez odbicia. Przy prefers-reduced-motion nic z tego.
 */

@layer components {
	@media (prefers-reduced-motion: no-preference) {
		/* Bez płynnego przewijania (Marcin 12.10: na telefonie źle się czyta), kotwice skaczą od razu. */

		/* Wyraźnie odczuwalny ruch („aplikacyjny look”, Marcin 12.10): przesuw 48 px z lekkim powiększeniem,
		   zdjęcia wyraźniej się przybliżają. Wyjście wykładnicze, więc ruch kończy się miękko, bez odbicia. */
		.ruch .ruch-czeka {
			opacity: 0;
			transform: translate3d(0, 48px, 0) scale(0.97);
		}
		.ruch .ruch-czeka:is(figure, .wp-block-image) {
			transform: translate3d(0, 32px, 0) scale(0.92);
		}
		.ruch .ruch-czeka.ruch-widoczne,
		.ruch .ruch-czeka:focus-within {
			opacity: 1;
			transform: none;
			transition:
				opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--ruch-opoznienie, 0ms),
				transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--ruch-opoznienie, 0ms);
		}
		/* Telefon: krótko i blisko, żeby tekst nie odjeżdżał przy czytaniu (Marcin 12.10). */
		@media (max-width: 47.999em) {
			.ruch .ruch-czeka,
			.ruch .ruch-czeka:is(figure, .wp-block-image) { transform: translate3d(0, 12px, 0); }
			.ruch .ruch-czeka.ruch-widoczne,
			.ruch .ruch-czeka:focus-within { transition-duration: 0.35s; }
		}
	}

	/* Wydruk i zapis strony: zawsze całość. */
	@media print {
		.ruch .ruch-czeka {
			opacity: 1 !important;
			transform: none !important;
		}
	}

	/*
	 * Stojące zdjęcie nagłówka podstrony (zasada 70; Marcin 30.09 „fixed”, wzór SRKT 20.10 bez przeskoku): strona
	 * przesuwa się nad nieruchomym zdjęciem. Samo CSS, bez skryptu, więc nic nie przestawia zdjęcia po wczytaniu
	 * (dawna paralaksa ze skryptu dawała przeskok przy każdym wczytaniu). Zdjęcie position: fixed od góry okna,
	 * na szerokość okna (pas jest na całą szerokość) i 46rem (736 px) wysokości: sięga za dolną krawędź pasa 448 px
	 * także z nagłówkiem 122 px, okruszkami i paskiem administratora (dół pasa ok. 650 px), a przy powiększonym
	 * tekście rośnie razem z nimi (wszystko w rem). Stała wysokość,
	 * nigdy wysokość okna: przy zdjęciu poziomym skala jest ta sama co w pasie, zmienia się tylko pionowy kadr.
	 * clip-path na kadrze przycina zdjęcie do pasa (overflow nie przycina elementów fixed). Pas nie może mieć
	 * przodka z transform, filter ani contain (wtedy fixed staje się zwykłym absolute); ruch.js go nie rusza,
	 * bo przy wczytaniu leży w oknie. Kadr ze skosem (Alfa) potrzebuje wymiarów ze skryptu; tu skosu nie ma.
	 * Telefon (zdjęcie nad panelem), prefers-reduced-motion i tryb kontrastu: zwykłe zdjęcie w kadrze.
	 */
	@media screen and (min-width: 48em) and (prefers-reduced-motion: no-preference) {
		:root:not([data-kontrast="wysoki"]) .c-page-head--photo .c-page-head__media {
			clip-path: inset(0);
		}
		:root:not([data-kontrast="wysoki"]) .c-page-head--photo .c-page-head__img {
			position: fixed;
			inset: 0 0 auto;
			width: 100%;
			height: 46rem;
		}
	}

	/*
	 * Stałe tło sekcji: sekcja przesuwa się nad nieruchomym zdjęciem. Klasa c-tlo-stale na sekcji,
	 * zdjęcie w zmiennej --tlo-stale (np. url(...)), kadr w --tlo-stale-pozycja.
	 * Technika: warstwa position: fixed w ::before, przycięta przez clip-path sekcji (clip-path przycina też
	 * potomków ze stałą pozycją, overflow nie). Warstwa ma własną kompozycję, więc przewijanie nie maluje
	 * zdjęcia od nowa, jak przy background-attachment: fixed, który do tego nie działa na iOS.
	 * Tylko od 64em: na telefonie i tablecie pasek adresu zmienia wysokość okna i tło by skakało.
	 * Sekcja nie może mieć przodka z transform, filter ani contain, bo wtedy fixed staje się zwykłym absolute.
	 * Własne tło sekcji zostaje jako zapas (telefon, tryb kontrastu, reduced-motion).
	 */
	@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
		.c-tlo-stale {
			clip-path: inset(0);
		}
		.c-tlo-stale::before {
			content: "";
			position: fixed;
			inset: 0;
			z-index: -1;
			background: var(--tlo-stale, none) no-repeat var(--tlo-stale-pozycja, center) / cover;
			pointer-events: none;
		}
		:root[data-kontrast="wysoki"] .c-tlo-stale::before { display: none; }
	}
}