/**
 * PW Motion — karuzela realizacji sterowana przewijaniem (klasa pw-reel).
 *
 * Sekcja przykleja się na czas przewijania: nagłówek stoi w miejscu, a nagrania
 * wjeżdżają po łuku z prawego dolnego rogu, zatrzymują się na środku i tym samym
 * ruchem odjeżdżają w lewo w górę, ustępując miejsca kolejnemu.
 *
 * Bez JavaScriptu (albo przy systemowej preferencji ograniczenia ruchu) zostaje
 * zwykła, statyczna lista kart — treść jest wtedy dostępna w całości od razu.
 */

/* ------------------------------------------------------------------ scena */

.pw-reel-track {
	position: relative;
}

.pw-reel-item {
	width: 100%;
	max-width: 760px;
}

/* Ramka okna przeglądarki — ten sam detal co przy zrzutach na /edit/. */
.pw-reel-frame {
	overflow: hidden;
}

.pw-reel-frame video,
.pw-reel-frame .elementor-video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #050B12;
}

.pw-reel-frame .elementor-wrapper {
	line-height: 0;
}

/* Zrzut i nagranie żyją w karcie obok siebie; widać zawsze jedno z nich.
   Wąski ekran dostaje sam obraz — nie ma powodu pobierać tam pliku wideo. */
.pw-reel-film {
	display: none;
}

.pw-reel-still {
	display: block;
}

.pw-reel-frame .pw-reel-still img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 0;
}

@media (min-width: 1025px) {
	.pw-reel-film {
		display: block;
	}

	.pw-reel-still {
		display: none;
	}
}

/* ------------------------------------------------ tryb przypięty (włącza JS) */

.pw-reel.pw-reel-on {
	/* Sekcja staje się zwykłym blokiem: przyklejone dziecko zachowuje się
	   wtedy przewidywalnie, bez rozciągania przez układ flex rodzica. */
	display: block !important;
	--display: block;
	min-height: var(--pw-reel-len, 260vh);
}

.pw-reel.pw-reel-on > .pw-reel-stage {
	--position: sticky;
	position: sticky !important;
	top: 0;
	height: 100vh;
	min-height: 560px;
	/* Bez tego flex rodzica rozciągnąłby scenę na całą wysokość sekcji. */
	flex: 0 0 auto;
	--flex-grow: 0;
	--flex-shrink: 0;
}

.pw-reel.pw-reel-on .pw-reel-intro {
	position: relative;
	/* Nagłówek zostaje na wierzchu — karty przejeżdżają za nim, nie po nim. */
	z-index: 2;
}

.pw-reel.pw-reel-on .pw-reel-track {
	z-index: 1;
	perspective: 1500px;
	perspective-origin: 62% 46%;
	min-height: min(58vh, 430px);
	align-self: center;
}

.pw-reel.pw-reel-on .pw-reel-item {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	transform-origin: 50% 50%;
	/* Bez will-change: translate3d i tak promuje warstwę, a stała deklaracja
	   trzyma duże powierzchnie kompozytora także wtedy, gdy nic się nie rusza. */
	backface-visibility: hidden;
	pointer-events: none;
}

/* Karta stojąca na środku znów przyjmuje kliknięcia. */
.pw-reel.pw-reel-on .pw-reel-item.pw-reel-live {
	pointer-events: auto;
}

/* Podpis pod ramką wjeżdża razem z kartą, więc nie potrzebuje własnej animacji. */
.pw-reel-cap {
	opacity: 0.9;
}

@media (max-width: 1024px) {
	.pw-reel.pw-reel-on .pw-reel-track {
		perspective: 1100px;
		perspective-origin: 50% 50%;
		min-height: min(46vh, 330px);
	}
}

@media (max-width: 767px) {
	.pw-reel.pw-reel-on > .pw-reel-stage {
		min-height: 620px;
	}

	.pw-reel.pw-reel-on .pw-reel-track {
		min-height: min(40vh, 260px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pw-reel.pw-reel-on {
		min-height: 0;
	}

	.pw-reel.pw-reel-on > .pw-reel-stage {
		position: static !important;
		height: auto;
	}

	.pw-reel.pw-reel-on .pw-reel-item {
		position: relative;
		top: auto;
		left: auto;
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
		pointer-events: auto;
	}
}