/* Sliding Stacking Cards 1.10.15

   .pwf-stkc          root; one edge-anchored flex column that defines
                      the shared edge and alignment once
   .pwf-stkc__card    sticky shell per card; a pure wrapper with no
                      visual opinion — all card styling is the native
                      Elementor container inside
   .pwf-stkc__inner   flex host; alignment control pins narrower
                      containers to the shared edge

   Variables written by controls:
   --pwf-stkc-top     stick top offset; a card taller than the space
                      below it gets its own inline top from the runtime
                      so it scrolls through before pinning
   --pwf-stkc-gap     space between cards in flow (arrival runway)
   --pwf-stkc-scale   buried scale amount, 0..0.3
   --pwf-stkc-dim     buried dim opacity, 0..1
   --pwf-stkc-dimc    dim color
   --pwf-stkc-blur    buried blur, px

   Variable written by the runtime (only when a treatment is on):
   --pwf-stkc-p       per-card burial progress, 0..1
*/

.pwf-stkc {
	display: flex;
	flex-direction: column;
	row-gap: var(--pwf-stkc-gap, 0px);
}

.pwf-stkc__card {
	position: sticky;
	position: -webkit-sticky;
	top: var(--pwf-stkc-top, 0px);
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	transform-origin: 50% 0%;
}

.pwf-stkc__inner {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.pwf-stkc__inner > .e-con {
	flex: 1;
	max-width: 100%;
}

/* Buried-card treatments. Applied only when enabled, so the plain
   stack never pays for a stacking context or a filter. The last card
   never receives progress, so it stays untouched by construction. */

.pwf-stkc--fx .pwf-stkc__card {
	transform: scale(calc(1 - var(--pwf-stkc-p, 0) * var(--pwf-stkc-scale, 0)));
	filter: blur(calc(var(--pwf-stkc-p, 0) * var(--pwf-stkc-blur, 0px)));
	will-change: transform, filter;
}

/* A tall card pins with its bottom on screen, so it recedes toward
   that edge instead of its offscreen top. */
.pwf-stkc--fx .pwf-stkc__card--tall {
	transform-origin: 50% 100%;
}

/* The dim overlay lives on the card's own container and inherits its
   corner radius, so dimming a rounded card never paints square
   corners. Elementor uses the container's ::before for its background
   overlay; ::after is free. */

.pwf-stkc--dim .pwf-stkc__card > .pwf-stkc__inner > .e-con {
	position: relative;
}

.pwf-stkc--dim .pwf-stkc__card > .pwf-stkc__inner > .e-con::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	background: var(--pwf-stkc-dimc, #000);
	opacity: calc(var(--pwf-stkc-p, 0) * var(--pwf-stkc-dim, 0));
	pointer-events: none;
	border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.pwf-stkc--fx .pwf-stkc__card {
		transform: none;
		filter: none;
		will-change: auto;
	}

	.pwf-stkc--dim .pwf-stkc__card > .pwf-stkc__inner > .e-con::after {
		opacity: 0;
	}
}

/* ------------------------------------------------------ editor */

/* Cards stack in flow as plain native containers, fully editable in
   place. Stickiness is not simulated on the canvas. */

.elementor-editor-active .pwf-stkc--editor {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: var(--pwf-stkc-gap, 0px);
	width: 100%;
}

.elementor-editor-active .pwf-stkc--editor > .e-con {
	max-width: 100%;
}

/* Chrome's scroll anchoring silently adjusts the scroll position when
   content near its anchor node moves — and a scroll-driven engine
   moves content every frame, so anchoring fires exactly when the
   choreography starts and reads as a sudden jog. Standard equipment
   for scroll-linked work: disable it while this widget is on the
   page. */
html:has(.pwf-stkc) {
	overflow-anchor: none;
}