/* Tla z weglem w sekcjach strony glownej (rodzina tel z 2026-10-11, pliki assets/img/tla/,
   wybor wariantow i mapa sekcji: analizy/frontend/2026-10-11-tla-wegla.md).

   Obraz lezy pod trescia sekcji (tomex_backdrop() w inc/home.php). Na telefonie i pionowym
   tablecie przegladarka bierze kadr pionowy 9:16, wyzej poziomy 16:9, i pobiera go dopiero,
   gdy sekcja zbliza sie do ekranu (loading="lazy"). Gora i dol sekcji przechodza w jej kolor,
   wiec na granicy z sasiednia sekcja nie ma twardej krawedzi w polowie bryly.

   Wariant --window: tlo stoi w miejscu, a tresc sekcji przewija sie po nim, jak za oknem.
   Kadr wysokosci ekranu jest przyklejony (sticky) do gory ekranu w pojemniku, ktory siega
   o wysokosc ekranu ponad i pod sekcje; sekcja przycina wszystko do swoich granic. Bez
   position: fixed i bez background-attachment: fixed (nie dziala na iPhone'ach). Przy
   ograniczonym ruchu tlo zostaje zwyklym, nieruchomym obrazem sekcji. */

.th-home .th-has-backdrop {
	--th-bd-ext: 0px;
	--th-bd-bg: var(--tx-coal-950);
	--th-bd-fade: clamp(56px, 7vw, 120px);
	position: relative;
	isolation: isolate;
}

.th-home .th-backdrop {
	position: absolute;
	top: calc(var(--th-bd-ext) * -1);
	right: 0;
	bottom: calc(var(--th-bd-ext) * -1);
	left: 0;
	z-index: -1;
	pointer-events: none;
}

.th-home .th-backdrop__frame {
	position: relative;
	height: 100%;
}

.th-home .th-backdrop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Przejscie w kolor sekcji u gory i u dolu (polozone na granicach sekcji, nie kadru). */
.th-home .th-backdrop::before,
.th-home .th-backdrop::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	z-index: 1;
	height: var(--th-bd-fade);
}

.th-home .th-backdrop::before {
	top: var(--th-bd-ext);
	background: linear-gradient(180deg, var(--th-bd-bg), transparent);
}

.th-home .th-backdrop::after {
	bottom: var(--th-bd-ext);
	background: linear-gradient(0deg, var(--th-bd-bg), transparent);
}

.th-home .th-social.th-has-backdrop {
	--th-bd-bg: var(--tx-coal-900);
}

@supports (overflow: clip) {
	@media (prefers-reduced-motion: no-preference) {
		.th-home .th-has-backdrop--window {
			--th-bd-ext: 100vh;
			overflow: clip;
		}

		.th-home .th-has-backdrop--window .th-backdrop__frame {
			position: sticky;
			top: 0;
			height: 100vh;
		}

		/* Najwieksza wysokosc ekranu telefonu (pasek adresu schowany): kadr nie konczy
		   sie nad dolna krawedzia, kiedy pasek znika w trakcie przewijania. */
		@supports (height: 100lvh) {
			.th-home .th-has-backdrop--window {
				--th-bd-ext: 100lvh;
			}

			.th-home .th-has-backdrop--window .th-backdrop__frame {
				height: 100lvh;
			}
		}
	}
}