/**
 * PW Motion — okna przegladarki w sekcjach startowych.
 *
 * Makiety okien rozsuwaja sie przy wejsciu na strone: kazda warstwa nadjezdza
 * z dolu i z prawej, z lekkim opoznieniem wzgledem poprzedniej, po czym
 * zatrzymuje sie w swoim miejscu. Potem caly czas powoli unosi sie i opada.
 *
 * Rozsuwanie i plywanie siedza na dwoch roznych elementach: zewnetrzna warstwa
 * odpowiada za wjazd, wewnetrzna za ruch w gore i w dol. Gdyby obie animacje
 * dzialaly na tym samym elemencie, druga nadpisalaby transformacje pierwszej.
 */

.pw-frames{
	position:relative;
}

.pw-frame{
	animation:pw-frame-rozsun 1.15s cubic-bezier(.22,1,.36,1) both;
}

.pw-frames > .pw-frame:nth-child(2){
	animation-delay:.13s;
}

.pw-frames > .pw-frame:nth-child(3){
	animation-delay:.26s;
}

@keyframes pw-frame-rozsun{
	from{
		transform:translate3d(32px,18px,0) scale(.965);
		opacity:0;
	}
	to{
		transform:none;
		opacity:1;
	}
}

/* Spokojny ruch w gore i w dol. Ujemne opoznienia rozsynchronizowuja warstwy
   od pierwszej klatki, zeby nie plywaly zgodnie jak jeden blok. */
.pw-frame-float{
	animation:pw-frame-plyw 7.6s ease-in-out infinite;
	will-change:transform;
}

.pw-frames > .pw-frame:nth-child(2) .pw-frame-float{
	animation-duration:8.8s;
	animation-delay:-2.6s;
}

.pw-frames > .pw-frame:nth-child(3) .pw-frame-float{
	animation-duration:9.6s;
	animation-delay:-5.1s;
}

@keyframes pw-frame-plyw{
	0%,100%{transform:translate3d(0,-9px,0)}
	50%{transform:translate3d(0,8px,0)}
}

@media (prefers-reduced-motion:reduce){
	.pw-frame,
	.pw-frame-float{
		animation:none;
		opacity:1;
		transform:none;
	}
}
/* ----------------------------------------------------------------------------
 * Szklane okna ustawione pod katem — wariant dla sekcji startowej kontaktu.
 *
 * Caly rysunek powstaje tutaj, a nie z kontenerow Elementora: trzy warstwy sa
 * ustawione bezwzglednie wzgledem sceny, maja stale proporcje i wlasne paski
 * okien rysowane warstwami ::before i ::after. Dzieki temu nic nie rozpycha
 * strony w bok i wyglada tak samo na kazdej szerokosci.
 * ------------------------------------------------------------------------- */

.pw-frame-tilt{
	position:relative;
	perspective:1200px;
	min-height:380px;
}

.pw-frame-tilt .pw-frame{
	position:absolute;
	margin:0 !important;
}

.pw-frame-tilt .pw-frame-a{
	top:0;
	left:2%;
	width:74%;
	z-index:1;
}

.pw-frame-tilt .pw-frame-b{
	top:74px;
	left:12%;
	width:68%;
	z-index:2;
}

.pw-frame-tilt .pw-frame-c{
	top:152px;
	left:22%;
	width:62%;
	z-index:3;
}

.pw-frame-tilt .pw-frame-float{
	position:relative;
	min-height:132px;
	padding:38px 20px 22px !important;
	border:1px solid rgba(120,200,255,.22);
	border-radius:14px;
	background:linear-gradient(150deg,rgba(16,34,52,.78),rgba(7,15,24,.60));
	box-shadow:0 28px 64px rgba(0,0,0,.48);
	animation-name:pw-frame-plyw-3d;
}

/* Pasek okna: trzy kropki w lewym gornym rogu. */
.pw-frame-tilt .pw-frame-float::before{
	content:"";
	position:absolute;
	top:15px;
	left:16px;
	width:7px;
	height:7px;
	border-radius:50%;
	background:rgba(120,200,255,.34);
	box-shadow:12px 0 0 rgba(120,200,255,.22),24px 0 0 rgba(120,200,255,.14);
}

/* Dwa tylne okna dostaja zamiast tresci kilka przygaszonych wierszy. */
.pw-frame-a .pw-frame-float::after,
.pw-frame-b .pw-frame-float::after{
	content:"";
	position:absolute;
	left:20px;
	right:34%;
	top:44px;
	height:52px;
	background:repeating-linear-gradient(
		to bottom,
		rgba(120,200,255,.16) 0 5px,
		transparent 5px 18px
	);
	border-radius:3px;
}

.pw-frame-b .pw-frame-float::after{
	right:22%;
}

@keyframes pw-frame-plyw-3d{
	0%,100%{transform:rotateY(-16deg) rotateX(5deg) translate3d(0,-8px,0)}
	50%{transform:rotateY(-16deg) rotateX(5deg) translate3d(0,7px,0)}
}

@media (max-width:1024px){
	.pw-frame-tilt{
		min-height:330px;
		perspective:1000px;
	}

	.pw-frame-tilt .pw-frame-b{top:64px}
	.pw-frame-tilt .pw-frame-c{top:132px}
}

@media (max-width:767px){
	.pw-frame-tilt{
		min-height:300px;
	}

	.pw-frame-tilt .pw-frame-a{width:80%}
	.pw-frame-tilt .pw-frame-b{top:58px;width:74%}
	.pw-frame-tilt .pw-frame-c{top:120px;width:70%;left:24%}

	.pw-frame-tilt .pw-frame-float{
		min-height:112px;
		padding:34px 16px 18px !important;
	}
}

@media (prefers-reduced-motion:reduce){
	.pw-frame-tilt .pw-frame-float{
		animation:none;
		transform:rotateY(-16deg) rotateX(5deg);
	}
}
/* ----------------------------------------------------------------------------
 * Odreczne dopiski i strzalki miedzy krokami — drobne akcenty z projektu.
 * ------------------------------------------------------------------------- */

/* Dopisek trzyma sie prawej krawedzi kolumny i znika na waskim ekranie,
   gdzie tylko dokladalby szumu. */
.pw-note{
	opacity:.9;
}

@media (max-width:767px){
	.pw-note{
		display:none !important;
	}
}

/* Strzalka w przerwie miedzy kolejnymi krokami procesu.

   Znak wiekszosci pisany ta sama krecha co wielkie numery kart: samo
   wypelnienie znika, zostaje cienki obrys. Srodek znaku lezy dokladnie na
   linii podzialu miedzy kartami — stad translate(-50%,-50%) przy left:0.

   isolation tworzy wlasny kontekst nakladania. Bez niego pseudoelement
   z ujemnym z-index chowa sie pod nieprzezroczystym tlem karty. */
@media (min-width:1025px){
	.pw-flowline > .e-con{
		position:relative;
		isolation:isolate;
	}

	.pw-flowline > .e-con + .e-con::before{
		content:">";
		position:absolute;
		top:50%;
		left:0;
		/* Elementor trzyma na .e-con::before nakladke tla rozciagnieta na cala
		   karte. Bez zerowania tych wymiarow procentowe przesuniecie liczyloby
		   sie od szerokosci karty, a nie od samego znaku. */
		right:auto;
		bottom:auto;
		width:auto;
		height:auto;
		background:none;
		border:0;
		transform:translate(-50%,-52%);
		font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size:clamp(56px,5.2vw,76px);
		font-weight:700;
		line-height:1;
		color:transparent;
		-webkit-text-stroke:2px rgba(148,176,200,.22);
		text-shadow:none;
		z-index:-1;
		pointer-events:none;
		user-select:none;
	}

	/* Przegladarka bez obrysu tekstu dostaje wersje wypelniona, tylko stlumiona. */
	@supports not (-webkit-text-stroke:1px black){
		.pw-flowline > .e-con + .e-con::before{
			color:rgba(148,176,200,.13);
		}
	}
}