/**
 * PMedia ScrollTrigger FX — front-end base styles.
 *
 * NOTE: these rules style the section the SHORTCODE ITSELF prints. They are
 * intentionally minimal. The rules your page-builder ROW/COLUMN around the
 * shortcode needs are documented in README.md under "Housing CSS" — that
 * outer wrapper is what most commonly needs attention, not this file.
 */

.stfx-section {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	box-sizing: border-box;
}

.stfx-section * {
	box-sizing: border-box;
}

.stfx-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.stfx-bg-zoom {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	transform-origin: 50% 50%;
	will-change: transform, clip-path;
	z-index: 0;
}

/* ---- Horizontal layout mode: a flex "track" of full-width "panels" ---- */
.stfx-track {
	position: relative;
	display: flex;
	height: 100%;
	will-change: transform;
}

.stfx-panel {
	position: relative;
	flex: 0 0 auto;
	height: 100%;
}

.stfx-panel-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.stfx-layer {
	position: absolute;
	transform-origin: 50% 50%;
	backface-visibility: hidden;
}

img.stfx-layer-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stfx-layer-bgimage {
	background-repeat: no-repeat;
}

.stfx-layer-shape svg {
	display: block;
	width: 100%;
	height: 100%;
}

.stfx-layer-text {
	line-height: 1.4;
}

/* Respect users who've asked their OS for reduced motion: the JS already
   skips the scrub/pin timeline for them, this just guarantees no residual
   CSS transitions fight it. */
@media ( prefers-reduced-motion: reduce ) {
	.stfx-layer {
		transition: none !important;
	}
}