/**
 * Scroll Storytelling Module Styles
 *
 * @package LandTechExtras
 * @since   3.5.0
 */

/* ========================================================================
   CSS Custom Properties
   ======================================================================== */

:root {
	--ltxe-scroll-story-snap-duration: 0.3s;
	--ltxe-scroll-story-nav-size: 12px;
	--ltxe-scroll-story-nav-color: rgba(0, 0, 0, 0.3);
	--ltxe-scroll-story-nav-active-color: rgba(0, 0, 0, 0.8);
	--ltxe-scroll-story-progress-width: 4px;
	--ltxe-scroll-story-progress-color: #3498db;
	--ltxe-scroll-story-progress-bg: rgba(0, 0, 0, 0.1);
}

/* ========================================================================
   Scroll Reveal Base
   ======================================================================== */

.ltxe-scroll-reveal {
	opacity: 0;
	visibility: hidden;
}

.ltxe-scroll-reveal.ltxe-revealed {
	opacity: 1;
	visibility: visible;
}

/* ========================================================================
   Horizontal Scroll Container
   ======================================================================== */

.ltxe-horizontal-scroll {
	position: relative;
	width: 100%;
}

.ltxe-horizontal-scroll__track {
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.ltxe-horizontal-scroll__track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Each slide is a nested Elementor container, so the snap behaviour is applied to
   the track's direct children. The width comes from a custom property the widget
   sets on the track, which keeps editor and front-end markup identical. */
.ltxe-horizontal-scroll__section,
.ltxe-horizontal-scroll__track > .e-con {
	flex: 0 0 var( --ltxe-hs-slide-width, 100vw );
	width: var( --ltxe-hs-slide-width, 100vw );
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Navigation dots */
.ltxe-horizontal-scroll__nav {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.ltxe-horizontal-scroll__dot {
	width: var(--ltxe-scroll-story-nav-size);
	height: var(--ltxe-scroll-story-nav-size);
	border-radius: 50%;
	background: var(--ltxe-scroll-story-nav-color);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease;
	border: none;
	padding: 0;
}

.ltxe-horizontal-scroll__dot:hover {
	transform: scale(1.2);
}

.ltxe-horizontal-scroll__dot.active {
	background: var(--ltxe-scroll-story-nav-active-color);
}

/* Navigation arrows */
.ltxe-horizontal-scroll__arrows {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	z-index: 10;
	padding: 0 20px;
}

.ltxe-horizontal-scroll__arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	transition: background 0.2s ease, transform 0.2s ease;
	font-size: 20px;
	line-height: 1;
}

.ltxe-horizontal-scroll__arrow:hover {
	background: #fff;
	transform: scale(1.1);
}

.ltxe-horizontal-scroll__arrow:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* ========================================================================
   Scroll Snap Container (Vertical)
   ======================================================================== */

.ltxe-snap-container {
	position: relative;
	height: 100vh;
	/* Mobile browsers resolve 100vh against the largest viewport, with the address bar
	   hidden, so each section ends up taller than the visible area and snapping drifts as
	   the bar shows and hides. dvh tracks the visible viewport; the vh above is the
	   fallback for browsers without dvh support. */
	height: 100dvh;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.ltxe-snap-container--horizontal {
	display: flex;
	height: auto;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
}

/* Each section is a nested Elementor container, so the snap behaviour is applied
   to the container's direct children. */
.ltxe-snap-container__section,
.ltxe-snap-container > .e-con {
	min-height: 100vh;
	min-height: 100dvh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.ltxe-snap-container--horizontal .ltxe-snap-container__section,
.ltxe-snap-container--horizontal > .e-con {
	min-height: auto;
	min-width: 100vw;
}

/* Progress indicator */
.ltxe-snap-container__progress {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Fixed to the viewport, so the engine only reveals it while the matching snap
	   container is on screen. The dots themselves are generated by the engine. */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ltxe-snap-container__progress--visible {
	opacity: 1;
	pointer-events: auto;
}

.ltxe-snap-container__progress-dot {
	width: var(--ltxe-scroll-story-nav-size);
	height: var(--ltxe-scroll-story-nav-size);
	border-radius: 50%;
	background: var(--ltxe-scroll-story-progress-bg);
	border: 2px solid var(--ltxe-scroll-story-progress-color);
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease;
	/* Themes give buttons padding and content-box sizing, which turns the dots into
	   ovals. Keep the rendered size equal to the nav size variable. */
	padding: 0;
	box-sizing: border-box;
}

.ltxe-snap-container__progress-dot:hover {
	transform: scale(1.2);
}

.ltxe-snap-container__progress-dot.active {
	background: var(--ltxe-scroll-story-progress-color);
}

/* ========================================================================
   Parallax Story Layers
   ======================================================================== */

.ltxe-parallax-story {
	position: relative;
	overflow: hidden;
}

.ltxe-parallax-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: transform;
}

.ltxe-parallax-layer--background {
	z-index: 1;
}

.ltxe-parallax-layer--midground {
	z-index: 2;
}

.ltxe-parallax-layer--foreground {
	z-index: 3;
	position: relative;
	/* This layer sets the scene height, so its content is centred vertically instead of
	   sitting against the top edge. The Text Align and Padding controls still apply. */
	display: flex;
	align-items: center;
}

/* Full width so the widget's Text Align control spans the whole scene. */
.ltxe-parallax-layer--foreground .ltxe-parallax-layer__content {
	width: 100%;
}

/* The Text Color control sets `color` on the layer, but most themes set an explicit
   colour on headings and paragraphs, which would otherwise win over inheritance. */
.ltxe-parallax-layer--foreground .ltxe-parallax-layer__content,
.ltxe-parallax-layer--foreground h2,
.ltxe-parallax-layer--foreground p {
	color: inherit;
}

/* Background image optimization.
   The layer is scoped into the selector so this outranks Elementor's `.elementor img`
   rule, which would otherwise force `height: auto` and leave the image aspect-sized.
   The engine shifts a layer by at most 30% of the scene height (at the maximum speed of
   2), so the image bleeds 30% past the layer on both sides and never exposes an edge. */
.ltxe-parallax-layer .ltxe-parallax-layer__bg {
	position: absolute;
	top: -30%;
	left: 0;
	width: 100%;
	height: 160%;
	object-fit: cover;
	will-change: transform;
}

/* ========================================================================
   Responsive Adjustments
   ======================================================================== */

@media (max-width: 768px) {
	/* Slides fill the screen on phones, where a partial-width preset leaves too little
	   room for content. This is scoped to the preset marker class so the responsive
	   Custom Width control stays authoritative whenever it is the one in use. */
	.ltxe-horizontal-scroll__track--preset-width > .ltxe-horizontal-scroll__section,
	.ltxe-horizontal-scroll__track--preset-width > .e-con {
		flex-basis: 100vw;
		width: 100vw;
	}

	.ltxe-horizontal-scroll__arrows {
		display: none;
	}

	.ltxe-snap-container__progress {
		right: 10px;
	}

	.ltxe-snap-container__progress-dot {
		width: 8px;
		height: 8px;
	}

	/* Once the arrows are hidden the dots are the only navigation, so their hit area is
	   expanded to the 24px WCAG 2.5.8 minimum while the dot itself stays small. The gaps
	   are widened to match so neighbouring hit areas cannot overlap. */
	.ltxe-horizontal-scroll__nav,
	.ltxe-snap-container__progress {
		gap: 14px;
	}

	.ltxe-horizontal-scroll__dot,
	.ltxe-snap-container__progress-dot {
		position: relative;
	}

	.ltxe-horizontal-scroll__dot::after,
	.ltxe-snap-container__progress-dot::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 24px;
		height: 24px;
		transform: translate(-50%, -50%);
	}
}

/* ========================================================================
   Reduced Motion
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ltxe-scroll-reveal {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	.ltxe-horizontal-scroll__track,
	.ltxe-snap-container {
		scroll-behavior: auto;
	}

	.ltxe-parallax-layer {
		will-change: auto;
		transform: none !important;
	}
}

/* ========================================================================
   Elementor Editor Compatibility
   ======================================================================== */

.elementor-editor-active .ltxe-scroll-reveal {
	opacity: 1;
	visibility: visible;
}

.elementor-editor-active .ltxe-horizontal-scroll__track {
	overflow-x: visible;
}

.elementor-editor-active .ltxe-snap-container {
	height: auto;
	overflow: visible;
}