/* PW Motion — hero scroll stage, globe canvases and ambient traces. */

/* --- ambient signal traces -----------------------------------------------
 * Disabled: PW Motion ships with ambient = 0, so no canvas is created.
 * Kept here so the layer can be switched back on from the plugin config.
 * ------------------------------------------------------------------------ */
.pw-ambient{
	position:fixed;
	inset:0;
	width:100vw;
	height:100vh;
	z-index:0;
	pointer-events:none;
}

/* --- hero stage --------------------------------------------------------- */
.pw-stage{overflow:visible}

.pw-stage-on .pw-stage-inner{
	position:sticky;
	top:0;
	height:100vh;
	min-height:0;
	padding:0;
	display:block;
	overflow:hidden;
}

/* Drugie przejście gradientu, jak w oryginale. Wchodzi tylko wtedy, gdy scena
   naprawdę działa: bez tego na telefonie zostałaby sama zasłona, która bez ruchu
   wygląda jak przygaszony ekran. */
.pw-stage-on .pw-stage-inner::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events:none;
	background:linear-gradient(180deg,rgba(3,7,11,.85) 0%,rgba(3,7,11,0) 26%,rgba(3,7,11,0) 62%,#03070B 100%);
}

.pw-stage-on .pw-stage-holder{
	position:absolute;
	left:0;
	right:0;
	top:74px;
	bottom:0;
	z-index:2;
	display:grid;
	align-items:center;
	gap:0;
	perspective:1100px;
	perspective-origin:38% 50%;
}

.pw-stage-on .pw-panel{
	grid-area:1 / 1;
	width:100%;
	will-change:transform,opacity,filter;
	transform-style:preserve-3d;
	backface-visibility:hidden;
}

/* scrubbed frame sequence */
.pw-frames{
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	transform:translate(-50%,-50%) scale(1.18);
	opacity:0;
	pointer-events:none;
	transition:opacity .5s cubic-bezier(.22,1,.36,1);
}
.pw-frames.is-on{opacity:.62}

/* scroll hint */
.pw-stage-on .pw-hint{
	position:absolute;
	right:clamp(20px,5vw,80px);
	bottom:26px;
	z-index:3;
	width:auto;
	transition:opacity .3s ease;
}

/* --- globe -------------------------------------------------------------- */
.pw-globe{aspect-ratio:1 / 1}
.pw-globe-canvas{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
}

/* Globus w sekcji zamykającej. Rozmiar dobrany tak, żeby wraz z zewnętrzną
   obręczą (1.46 promienia kuli) mieścił się w wysokości sekcji — inaczej
   overflow:hidden ucinałby łuki równą kreską przy krawędzi. */
.pw-globe-cta{
	position:absolute !important;
	top:50%;
	left:50%;
	width:min(92vw,660px);
	height:min(92vw,660px);
	transform:translate(-50%,-50%);
	opacity:.8;
	pointer-events:none;
	z-index:0;
}

/* Treść sekcji zawsze nad globusem: płótno jest pozycjonowane, więc bez tego
   malowałoby się po tekście, a nie za nim. */
.pw-globe-cta ~ .e-con,
.pw-globe-cta ~ .elementor-element{
	position:relative;
	z-index:1;
}

@media(max-width:1000px){
	.pw-globe:not(.pw-globe-cta){opacity:.32}
	.pw-globe-cta{
		width:min(120vw,520px);
		height:min(120vw,520px);
		opacity:.6;
	}
}

/* --- graceful fallback below the stage breakpoint ----------------------- */
@media(max-width:767px){
	.pw-stage.pw-stage-on{height:auto !important}
	.pw-stage-on .pw-stage-inner{position:static;height:auto;overflow:visible}
	.pw-stage-on .pw-stage-holder{
		position:static;
		display:flex;
		flex-direction:column;
		gap:56px;
		perspective:none;
	}
	.pw-stage-on .pw-panel{
		transform:none !important;
		opacity:1 !important;
		filter:none !important;
		visibility:visible !important;
	}
	/* Podpowiedź „przewiń” znika niezależnie od tego, czy scena wystartowała —
	   na telefonie i tak nie ma czego przewijać w poziomie. */
	.pw-hint{display:none !important}
}

@media (prefers-reduced-motion:reduce){
	.pw-frames{transition:none}
	.pw-globe-canvas{opacity:.8}
}