/**
 * AT Elementor Elements — Creative Scroll Story CSS
 *
 * @package AT_Elementor_Elements
 * @version 3.0.8
 */

.at-scroll-story {
	--at-story-accent: var(--at-color-primary, #2563eb);
	--at-story-border: rgba(0, 0, 0, 0.08);
	--at-story-progress-bg: rgba(0, 0, 0, 0.12);
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.at-scroll-story-stage {
	position: relative;
	display: grid;
	grid-template-columns: 48% 52%;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

/* Layout Variations: Visual Left vs Right */
.at-scroll-story--visual-right .at-scroll-story-stage {
	grid-template-columns: 52% 48%;
}
.at-scroll-story--visual-right .at-scroll-story-media-col {
	order: 2;
}
.at-scroll-story--visual-right .at-scroll-story-copy {
	order: 1;
}

/* Media Column & Pinned Stage */
.at-scroll-story-media-col {
	position: relative;
	width: 100%;
	max-height: 100vh;
	box-sizing: border-box;
}

.at-scroll-story--pinned .at-scroll-story-media-col {
	position: -webkit-sticky;
	position: sticky;
	top: clamp(60px, 9vh, 90px);
	align-self: start;
	z-index: 5;
}

.at-scroll-story-media {
	position: relative;
	width: 100%;
	min-height: 440px;
	height: clamp(520px, 80vh, calc(100vh - 100px));
	max-height: 100vh;
	overflow: hidden;
	border-radius: 24px;
	box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.16);
	background: #0f172a;
}

.at-scroll-story-image {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
	border-radius: inherit;
	overflow: hidden;
	will-change: opacity, transform;
	display: flex;
	flex-direction: column;
}

.at-scroll-story-image.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

/* Visual Media Container */
.at-scroll-story-visual-media {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	flex-shrink: 0;
}

.at-scroll-story-visual-media img,
.at-scroll-story-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Visual Body / Large Text Container */
.at-scroll-story-visual-body {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(24px, 3.5vw, 44px);
	box-sizing: border-box;
	background: #0f172a;
	color: #ffffff;
	overflow-y: auto;
}

/* Split Layout: Both (Image 40%, Text 60%) */
.at-scroll-story-image--both .at-scroll-story-visual-media {
	height: 40%;
	flex: 0 0 40%;
}

.at-scroll-story-image--both .at-scroll-story-visual-body {
	height: 60%;
	flex: 0 0 60%;
	padding: clamp(16px, 2.5vw, 30px);
}

/* Mode: Text Only (100% Text) */
.at-scroll-story-image--text .at-scroll-story-visual-body {
	height: 100%;
	flex: 1 1 100%;
}

/* Mode: Image Only (100% Image) */
.at-scroll-story-image--image .at-scroll-story-visual-media {
	height: 100%;
	flex: 1 1 100%;
}

/* Large Text Typography & Badges */
.at-scroll-story-visual-tag {
	display: inline-flex;
	align-items: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--at-story-accent);
	margin-bottom: 10px;
}

.at-scroll-story-visual-title {
	margin: 0 0 10px 0;
	font-size: clamp(20px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.at-scroll-story-visual-text {
	margin: 0;
	font-size: clamp(14px, 1.35vw, 16px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}

/* Theme Adaptations for Large Text */
.at-scroll-story--theme-light .at-scroll-story-visual-body {
	background: #ffffff;
	color: var(--at-color-text, #475569);
	border-top: 1px solid var(--at-story-border);
}

.at-scroll-story--theme-light .at-scroll-story-image--text .at-scroll-story-visual-body {
	border-top: none;
}

.at-scroll-story--theme-light .at-scroll-story-visual-title {
	color: var(--at-color-heading, #0f172a);
}

.at-scroll-story--theme-light .at-scroll-story-visual-text {
	color: var(--at-color-text, #475569);
}

.at-scroll-story--theme-dark .at-scroll-story-visual-body {
	background: #0b1120;
	color: rgba(255, 255, 255, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.at-scroll-story--theme-dark .at-scroll-story-image--text .at-scroll-story-visual-body {
	border-top: none;
}

.at-scroll-story--theme-dark .at-scroll-story-visual-title {
	color: #ffffff;
}

.at-scroll-story--theme-dark .at-scroll-story-visual-text {
	color: rgba(255, 255, 255, 0.78);
}

/* Transitions fallback */
[data-transition="slide"] .at-scroll-story-image {
	transform: translateY(20px);
}
[data-transition="slide"] .at-scroll-story-image.is-active {
	transform: translateY(0);
}

[data-transition="scale"] .at-scroll-story-image {
	transform: scale(1.05);
}
[data-transition="scale"] .at-scroll-story-image.is-active {
	transform: scale(1);
}

[data-transition="clip"] .at-scroll-story-image {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.5s;
}
[data-transition="clip"] .at-scroll-story-image.is-active {
	clip-path: inset(0% 0 0 0);
}

/* Copy & Story Steps */
.at-scroll-story-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 4vh, 40px) 0;
}

.at-scroll-story-step {
	opacity: 0.32;
	cursor: pointer;
	outline: none;
	padding: clamp(36px, 7vh, 72px) 0;
	min-height: clamp(260px, 40vh, 440px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-bottom: 1px solid var(--at-story-border);
	transition: opacity 0.38s ease, transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
	box-sizing: border-box;
}

.at-scroll-story-step:first-child {
	padding-top: clamp(20px, 4vh, 40px);
}

.at-scroll-story-step:last-child {
	border-bottom: none;
	padding-bottom: clamp(60px, 12vh, 120px);
}

.at-scroll-story-step.is-active {
	opacity: 1;
	transform: translateX(6px);
}

.at-scroll-story--visual-right .at-scroll-story-step.is-active {
	transform: translateX(-6px);
}

.at-scroll-story-step:focus-visible {
	outline: 2px solid var(--at-story-accent);
	outline-offset: 6px;
	border-radius: 4px;
}

.at-scroll-story-number {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--at-story-accent);
	margin-bottom: 10px;
}

.at-scroll-story-title {
	margin: 0;
	font-size: clamp(24px, 3.8vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--at-color-heading, #0f172a);
}

.at-scroll-story-description {
	margin-top: 14px;
	max-width: 48ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--at-color-text, #475569);
}

/* Progress Indicator */
.at-scroll-story-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: var(--at-story-progress-bg);
	overflow: hidden;
	z-index: 6;
	border-bottom-left-radius: inherit;
	border-bottom-right-radius: inherit;
}

.at-scroll-story-progress span {
	display: block;
	width: 25%;
	height: 100%;
	background: var(--at-story-accent);
	transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Theme: Dark */
.at-scroll-story--theme-dark {
	--at-story-border: rgba(255, 255, 255, 0.12);
	--at-story-progress-bg: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}
.at-scroll-story--theme-dark .at-scroll-story-title {
	color: #ffffff;
}
.at-scroll-story--theme-dark .at-scroll-story-description {
	color: rgba(255, 255, 255, 0.75);
}

/* Elementor Editor State */
.elementor-editor-active .at-scroll-story-step,
.elementor-editor-preview .at-scroll-story-step {
	min-height: auto;
	padding: 24px 0;
}
.elementor-editor-active .at-scroll-story-media-col,
.elementor-editor-preview .at-scroll-story-media-col {
	position: -webkit-sticky;
	position: sticky;
	top: 80px;
}

/* Reduced Motion */
.at-scroll-story.at-reduced-motion .at-scroll-story-image {
	transition: none;
}
.at-scroll-story.at-reduced-motion .at-scroll-story-step {
	opacity: 1;
	transform: none;
}
.at-scroll-story.at-reduced-motion .at-scroll-story-progress {
	display: none;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
	.at-scroll-story-stage,
	.at-scroll-story--visual-right .at-scroll-story-stage {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.at-scroll-story-media-col,
	.at-scroll-story--visual-right .at-scroll-story-media-col {
		position: -webkit-sticky;
		position: sticky;
		top: 50px;
		z-index: 10;
		order: 1;
	}
	.at-scroll-story-media {
		min-height: 240px;
		aspect-ratio: 16 / 10;
		max-height: 42vh;
	}
	.at-scroll-story-copy,
	.at-scroll-story--visual-right .at-scroll-story-copy {
		padding: 16px 0;
		order: 2;
	}
	.at-scroll-story-step {
		min-height: auto;
		padding: 28px 0;
		opacity: 0.45;
	}
	.at-scroll-story-step.is-active {
		opacity: 1;
		transform: none;
	}
	.at-scroll-story-title {
		font-size: 24px;
	}
	.at-scroll-story-description {
		font-size: 14px;
	}
	.at-scroll-story-image--both .at-scroll-story-visual-body {
		padding: 12px 16px;
	}
	.at-scroll-story-image--text .at-scroll-story-visual-body {
		padding: 18px 20px;
	}
	.at-scroll-story-visual-title {
		font-size: 18px;
		margin-bottom: 6px;
	}
	.at-scroll-story-visual-text {
		font-size: 13px;
		line-height: 1.45;
	}
	.at-scroll-story-visual-tag {
		font-size: 10px;
		margin-bottom: 6px;
	}
}