/* Sticky Scroll Showcase — base styles.
   Colors, sizes and typography are controlled from Elementor's Style tab;
   this file holds the structure the pinned-stage + blend effect relies on.

   Stacking rules that make the blend work (don't add transform, opacity,
   filter or z-index to .ssew-text-layer / .ssew-meta, or the heading will
   stop blending with the images):
   - .ssew-stage is the isolated stacking context and paints the background.
   - .ssew-track (images) comes first in the DOM, .ssew-text-layer after it,
     so the text paints on top without needing a z-index. */

.ssew-wrapper {
	--ssew-top: 0px;
	--ssew-overlap: 30; /* read by JS: % of image width allowed under the heading */
	/* Mobile browsers resize their address bar as you scroll, so plain
	   100vh is taller than what's actually visible and drifts as you
	   scroll — this is what makes the pin overshoot / mistime on phones.
	   dvh tracks the real, current visible height; vh stays as the
	   fallback for browsers that don't support dvh yet. */
	--ssew-vh: 100vh;
	position: relative;
	width: 100%;
	max-width: 100%;
	/* NOTE: don't put overflow-x: hidden here. .ssew-stage (the sticky
	   element) is this element's direct child, and overflow other than
	   visible on a sticky element's own parent breaks sticky entirely
	   (same rule as the "Overflow: Hidden" caveat in the readme, just one
	   level closer). The horizontal-overflow guard lives on .ssew-stage
	   itself instead, which is safe. */
}

@supports ( height: 100dvh ) {
	.ssew-wrapper {
		--ssew-vh: 100dvh;
	}
}

.ssew-wrapper *,
.ssew-wrapper *::before,
.ssew-wrapper *::after {
	box-sizing: border-box;
}

/* ---------- Stage ---------- */
.ssew-stage {
	position: relative;
	isolation: isolate;
	background-color: #ffffff;
	overflow: hidden; /* guard against horizontal overflow even before JS/pin activates */
	max-width: 100%;
}

/* Pinned mode (JS adds .ssew-ready once it can drive the track). Without JS
   the images simply sit in normal flow under the heading. */
.ssew-wrapper.ssew-ready .ssew-stage {
	position: -webkit-sticky;
	position: sticky;
	top: var(--ssew-top);
	height: calc(var(--ssew-vh) - var(--ssew-top));
}

/* ---------- Image track ---------- */
.ssew-track {
	position: relative;
	padding-top: var(--ssew-start, 30vh);
	padding-bottom: var(--ssew-end, 30vh);
}

/* Bottom entry: start the first image exactly one pinned-area height down,
   so it sits just below the stage when pinning begins and only rises into
   view after that. Uses the same height formula as the stage, so it follows
   the sticky offset at every breakpoint. */
.ssew-start-below .ssew-track {
	padding-top: calc(var(--ssew-vh) - var(--ssew-top) + var(--ssew-start-delay, 0px));
}

.ssew-wrapper.ssew-ready .ssew-track {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	will-change: transform;
}

.ssew-track-inner {
	--ssew-w: 36%;
	--ssew-gap: 70px;
	display: flow-root;
	width: 100%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 0 6%;
}

.ssew-item {
	/* --ssew-iw = per-image width override; otherwise global width x random scale. */
	--ssew-cw: var(--ssew-iw, calc(var(--ssew-w) * var(--ssew-s, 1)));
	position: relative;
	display: block;
	width: var(--ssew-cw);
	max-width: 100%;
	margin-left: calc((100% - var(--ssew-cw)) * var(--ssew-x, 0.5));
	color: inherit;
	text-decoration: none;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
}

.ssew-item + .ssew-item {
	margin-top: calc(var(--ssew-gap) * var(--ssew-gm, 1));
}

.ssew-media {
	position: relative;
	overflow: hidden;
}

.ssew-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Text layer (heading, description, button) ---------- */
.ssew-text-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: calc(var(--ssew-vh) - var(--ssew-top));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px;
	text-align: center;
	pointer-events: none;
}

.ssew-wrapper.ssew-ready .ssew-text-layer {
	height: 100%;
}

.ssew-heading {
	margin: 0;
	color: #ffffff;
	mix-blend-mode: difference;
	white-space: pre-line;
	overflow-wrap: normal;
}

.ssew-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	margin-top: 28px;
}

.ssew-description {
	max-width: 420px;
	color: #ffffff;
	mix-blend-mode: difference;
}

.ssew-description p {
	margin: 0 0 1em;
}

.ssew-description p:last-child {
	margin-bottom: 0;
}

.ssew-description a,
.ssew-button {
	pointer-events: auto;
}

.ssew-button-wrap {
	display: flex;
	justify-content: center;
}

.ssew-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 30px;
	border-radius: 100px;
	background-color: #111111;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.ssew-button-icon-before,
.ssew-button-icon-after {
	display: inline-flex;
	align-items: center;
}

.ssew-button-icon-after {
	margin-inline-start: 8px;
}

.ssew-button-icon-before {
	margin-inline-end: 8px;
}

.ssew-button svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Placement: description bottom-left, button bottom-right. */
.ssew-placement-corners .ssew-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 0;
	/* Sit inside the text area padding set in Style > Background. */
	padding: inherit;
	padding-top: 0;
}

.ssew-placement-corners .ssew-description {
	text-align: left;
}

.ssew-placement-corners .ssew-button-wrap {
	margin-left: auto;
}

/* ---------- Image name / label ---------- */
.ssew-image-name-wrap {
	display: flex;
	flex-direction: column;
}

.ssew-image-name {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0 0;
}

.ssew-item-name,
.ssew-item-subtitle {
	font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ssew-item-name {
	color: #111111;
}

.ssew-item-subtitle {
	color: #666666;
	white-space: nowrap;
}

/* Overlay label position */
.ssew-name-position-overlay .ssew-image-name-wrap {
	position: absolute;
	inset: 0;
	justify-content: flex-end;
	padding: 20px;
	pointer-events: none;
}

.ssew-name-position-overlay .ssew-image-name {
	padding: 0;
}

/* ---------- Small screens ---------- */
@media (max-width: 767px) {
	.ssew-placement-corners .ssew-meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.ssew-placement-corners .ssew-button-wrap {
		margin-left: 0;
	}
}

/* Respect users who prefer reduced motion: JS skips the entrance/parallax. */
@media (prefers-reduced-motion: reduce) {
	.ssew-media img {
		transition: none;
	}
}