/**
 * Premium Scroll Hero Section
 * 
 * Framer-style scroll scene with morphing text (like andfold.framer.website)
 * Works with Elementor FREE - no Pro features required
 *
 * @package Serenity_Base_Theme
 */

/* ============================================
   SCROLL SCENE CONTAINER
   ============================================ */

/* Outer section - provides scroll space */
.elementor-section.scroll-scene {
	min-height: 300vh;
	position: relative;
	overflow: hidden;
	background-color: #000;
}

/* ============================================
   PINNED CONTAINER (Sticky via CSS)
   ============================================ */

/* Inner column/container that pins */
.scroll-scene .scene-pin {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	overflow: hidden;
}

/* ============================================
   BACKGROUND VIDEO/IMAGE
   ============================================ */

/* Option 1: Section Background Video (Elementor's built-in background) */
.scroll-scene .elementor-background-video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	transform-origin: center center;
	will-change: transform;
}

.scroll-scene .elementor-background-video-container video,
.scroll-scene .elementor-background-video-container iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center center;
}

/* Option 2: Video Widget positioned absolutely (if not using section background) */
.scroll-scene .scene-pin .elementor-widget-video.video-mask,
.scroll-scene .scene-pin .video-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
	transform-origin: center center;
	will-change: transform;
	pointer-events: none;
}

/* Video widget container */
.scroll-scene .scene-pin .video-mask .elementor-widget-container,
.scroll-scene .scene-pin .video-mask .elementor-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

/* Actual video/iframe element */
.scroll-scene .scene-pin .video-mask video,
.scroll-scene .scene-pin .video-mask iframe,
.scroll-scene .scene-pin .video-mask .elementor-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: center center;
}

/* Background image alternative */
.scroll-scene .scene-pin .elementor-widget-image.video-mask img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform-origin: center center;
}

/* Section background image (Elementor's built-in) */
.scroll-scene .elementor-background-overlay,
.scroll-scene .elementor-background-slideshow {
	transform-origin: center center;
	will-change: transform;
}

.scroll-scene .elementor-background-overlay img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center center;
}

/* ============================================
   TEXT MORPHING (Viewport-Centered, Overlapping)
   ============================================ */

/* Text container wrapper - fixed to viewport center */
.scroll-scene .scene-pin .scene-text-wrapper {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 20;
	pointer-events: none;
	width: 90%;
	max-width: 1400px;
	text-align: center;
}

/* Individual text element - all overlap in same position */
.scroll-scene .scene-pin .scene-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0.8s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
	pointer-events: none;
}

/* Active text state - fully visible */
.scroll-scene .scene-pin .scene-text.is-active {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%);
}

/* Text entering (coming in) */
.scroll-scene .scene-pin .scene-text.is-entering {
	opacity: 0;
	transform: translate(-50%, -45%);
}

/* Text exiting (going out) */
.scroll-scene .scene-pin .scene-text.is-exiting {
	opacity: 0;
	transform: translate(-50%, -55%);
}

/* Text styling - customizable via Elementor */
.scroll-scene .scene-pin .scene-text .elementor-heading-title,
.scroll-scene .scene-pin .scene-text h1,
.scroll-scene .scene-pin .scene-text h2,
.scroll-scene .scene-pin .scene-text h3,
.scroll-scene .scene-pin .scene-text h4,
.scroll-scene .scene-pin .scene-text h5,
.scroll-scene .scene-pin .scene-text h6 {
	color: #ffffff;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
	margin: 0;
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
	.scroll-scene {
		min-height: 250vh;
	}
	
	.scroll-scene .scene-pin .scene-text-wrapper {
		width: 95%;
		padding: 0 40px;
	}
}

@media (max-width: 768px) {
	.scroll-scene {
		min-height: 200vh;
	}
	
	.scroll-scene .scene-pin .scene-text-wrapper {
		width: 100%;
		padding: 0 20px;
	}
	
	.scroll-scene .scene-pin .scene-text .elementor-heading-title,
	.scroll-scene .scene-pin .scene-text h1,
	.scroll-scene .scene-pin .scene-text h2,
	.scroll-scene .scene-pin .scene-text h3 {
		font-size: clamp(2rem, 8vw, 4rem);
	}
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.scroll-scene .scene-pin .scene-text {
		transition: none;
		transform: translate(-50%, -50%) !important;
	}
}