/**
 * Scroll Expand 1.10.15
 *
 * One pinned scene: a clipped frame interpolates between a control
 * sized box and full bleed while the media's zoom settles, Screen 1
 * rides over the whole stage and lifts away through mid travel, and
 * Screen 2 arrives inside the frame over the scrim. The runtime owns
 * clip-path, transforms, and opacity; this sheet owns the bones.
 *
 * Two lives: page mode pins the stage sticky inside a tall track
 * while the page scrolls past; box mode plays the whole move inside
 * a fixed-height scroller with a hidden scrollbar, page undisturbed.
 *
 * Stage Inset: the stage itself stays full screen so pinning never
 * shifts; the frame, both screens, and the hint sit on an inset
 * panel inside it (--pwf-sexp-in-t/r/b/l, written per breakpoint).
 * The frame's clip-path runs in percentages of that panel, so full
 * bleed means the panel and the framed box scales with it.
 *
 * Editor: no stage at all. Both ends of the journey render as
 * stacked stills in the order the visitor meets them, composed live
 * from the control variables, with each screen mapped onto its band
 * and styled standing still.
 */

.pwf-sexp {
	position: relative;
	width: 100%;
}

.pwf-sexp--boxed {
	height: var(--pwf-sexp-box, 560px);
}

.pwf-sexp__scroller {
	position: relative;
}

.pwf-sexp--boxed .pwf-sexp__scroller {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior: contain;
}

.pwf-sexp--boxed .pwf-sexp__scroller::-webkit-scrollbar {
	display: none;
}

.pwf-sexp__track {
	position: relative;
	width: 100%;
}

.pwf-sexp__stage {
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--pwf-sexp-vh, 100vh);
	height: var(--pwf-sexp-vh, 100svh);
	overflow: hidden;
}

/* ---------- frame, media, scrim, Screen 2 ---------- */

.pwf-sexp__frame {
	position: absolute;
	inset: var(--pwf-sexp-in-t, 0px) var(--pwf-sexp-in-r, 0px) var(--pwf-sexp-in-b, 0px) var(--pwf-sexp-in-l, 0px);
	z-index: 1;
	overflow: hidden;
	clip-path: inset(0 0 0 0 round 0px);
	will-change: clip-path;
}

/* Weighted to beat Elementor's .elementor img { height: auto }, so an
   image fills and crops like the video does. */
.pwf-sexp .pwf-sexp__mediabox {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transform-origin: center;
	will-change: transform;
}

.pwf-sexp .pwf-sexp__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform-origin: center;
	will-change: transform;
	user-select: none;
	-webkit-user-drag: none;
}

.pwf-sexp__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.35));
	opacity: 0;
}

.pwf-sexp__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	opacity: 0;
	pointer-events: none;
	will-change: opacity, transform;
}

/* ---------- Screen 1 over the whole stage ---------- */

.pwf-sexp__screen1 {
	position: absolute;
	inset: var(--pwf-sexp-in-t, 0px) var(--pwf-sexp-in-r, 0px) var(--pwf-sexp-in-b, 0px) var(--pwf-sexp-in-l, 0px);
	z-index: 3;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	will-change: opacity, transform;
}

/*
 * The screen containers fill their layer edge to edge, so container
 * alignment controls place content anywhere on the stage. Elementor's
 * container stylesheet loads after this one and ties on flex sizing,
 * hence the important.
 */
.pwf-sexp__overlay > *,
.pwf-sexp__screen1 > * {
	flex-grow: 1 !important;
	min-height: 0;
	pointer-events: auto;
}

.pwf-sexp__overlay.is-off,
.pwf-sexp__screen1.is-off {
	visibility: hidden;
}

/* ---------- scroll hint ---------- */

.pwf-sexp__hint {
	position: absolute;
	left: var(--pwf-sexp-in-l, 0px);
	right: var(--pwf-sexp-in-r, 0px);
	bottom: calc(var(--pwf-sexp-in-b, 0px) + 1.25rem);
	z-index: 5;
	text-align: center;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.55);
	pointer-events: none;
	will-change: opacity, transform;
}

/* ---------- Elementor editor preview ----------
   No scroll driving in the canvas: both ends of the journey render as
   stacked stills in the order the visitor meets them, so Direction
   also reorders the canvas. Screens are appended into one layer and
   mapped onto their bands, the Framed Screen over the framed box, the
   Full Bleed Screen over the full media, each styled standing still.
   Frame geometry, zoom, and scrim compose live from the control
   variables, so sliders preview without a re-render. */

.pwf-sexp--editor.pwf-sexp--boxed {
	height: auto;
}

.pwf-sexp--editor .pwf-sexp__edband {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.pwf-sexp--editor.pwf-sexp--boxed .pwf-sexp__edband {
	height: var(--pwf-sexp-box, 560px);
}

/* The editor bands mirror the stage: a full-size band with the inset
   panel inside it. The framed box is measured against the panel. */
.pwf-sexp--editor .pwf-sexp__edframe {
	position: absolute;
	top: calc(var(--pwf-sexp-in-t, 0px) + (100% - var(--pwf-sexp-in-t, 0px) - var(--pwf-sexp-in-b, 0px)) / 2);
	left: calc(var(--pwf-sexp-in-l, 0px) + (100% - var(--pwf-sexp-in-l, 0px) - var(--pwf-sexp-in-r, 0px)) / 2);
	width: calc((100% - var(--pwf-sexp-in-l, 0px) - var(--pwf-sexp-in-r, 0px)) * var(--pwf-sexp-sw, 42) / 100);
	height: calc((100% - var(--pwf-sexp-in-t, 0px) - var(--pwf-sexp-in-b, 0px)) * var(--pwf-sexp-sh, 37) / 100);
	transform: translate(-50%, -50%);
	border-radius: calc(var(--pwf-sexp-r0, 24) * 1px);
	overflow: hidden;
}

.pwf-sexp--editor .pwf-sexp__edframe .pwf-sexp__mediabox {
	transform: scale(var(--pwf-sexp-zoom, 1.35));
}

/* The full band's media and scrim fill the panel and carry the End
   Radius themselves, so the inset gap shows the page around them.
   Sized explicitly: a video or image never stretches between inset
   edges on its own, it falls back to its natural size. */
.pwf-sexp--editor .pwf-sexp__edband--full > .pwf-sexp__mediabox,
.pwf-sexp--editor .pwf-sexp__edband--full > .pwf-sexp__media,
.pwf-sexp--editor .pwf-sexp__edband--full > .pwf-sexp__scrim {
	top: var(--pwf-sexp-in-t, 0px);
	left: var(--pwf-sexp-in-l, 0px);
	right: auto;
	bottom: auto;
	width: calc(100% - var(--pwf-sexp-in-l, 0px) - var(--pwf-sexp-in-r, 0px));
	height: calc(100% - var(--pwf-sexp-in-t, 0px) - var(--pwf-sexp-in-b, 0px));
	border-radius: calc(var(--pwf-sexp-r1, 0) * 1px);
}

.pwf-sexp--editor .pwf-sexp__edband--full .pwf-sexp__scrim {
	opacity: var(--pwf-sexp-scrim, 0.45);
}

.pwf-sexp__edcap {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.75;
	pointer-events: none;
}

.pwf-sexp--editor .pwf-sexp__screens {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.pwf-sexp--editor .pwf-sexp__screens > .e-con {
	position: absolute;
	left: var(--pwf-sexp-in-l, 0px);
	right: var(--pwf-sexp-in-r, 0px);
	height: calc(50% - var(--pwf-sexp-in-t, 0px) - var(--pwf-sexp-in-b, 0px));
	pointer-events: auto;
	outline: 1px dashed rgba(127, 127, 127, 0.35);
	outline-offset: -1px;
}

/* Journey order: the top band is always the opening state, and
   Direction decides which screen that is. Rule order keeps a lone
   surviving child on the Framed Screen band. */
.pwf-sexp--editor[data-dir="expand"] .pwf-sexp__screens > :nth-last-child(1 of .e-con) {
	top: calc(50% + var(--pwf-sexp-in-t, 0px));
}

.pwf-sexp--editor[data-dir="expand"] .pwf-sexp__screens > :nth-child(1 of .e-con) {
	top: var(--pwf-sexp-in-t, 0px);
}

.pwf-sexp--editor[data-dir="contract"] .pwf-sexp__screens > :nth-last-child(1 of .e-con) {
	top: var(--pwf-sexp-in-t, 0px);
}

.pwf-sexp--editor[data-dir="contract"] .pwf-sexp__screens > :nth-child(1 of .e-con) {
	top: calc(50% + var(--pwf-sexp-in-t, 0px));
}