/**
 * Emerald Scroll Sequence
 * All tunables arrive as inline custom properties from the shortcode,
 * so nothing here needs editing to restyle an instance.
 */

.et-seq {
	--seq-track: 340svh;
	--seq-bg: #101711;
	--seq-accent: #C4536A;
	--seq-fit: cover;
	--seq-fit-mobile: contain;
	--seq-focal: 50% 45%;
	--seq-radius: 0px;

	position: relative;
	height: var(--seq-track);
	background: var(--seq-bg);
}

.et-seq * {
	box-sizing: border-box;
}

.et-seq__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	display: grid;
	background: var(--seq-bg);
	border-radius: var(--seq-radius);
}

.et-seq__media {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.et-seq__video,
.et-seq__poster {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: var(--seq-fit);
	object-position: var(--seq-focal);
	display: block;
	margin: 0;
}

.et-seq__poster {
	position: absolute;
	inset: 0;
	filter: blur(12px) saturate(0.8);
	transform: scale(1.06);
	transition: opacity 0.5s ease;
}

.et-seq__video {
	position: relative;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.et-seq.is-ready .et-seq__video { opacity: 1; }
.et-seq.is-ready .et-seq__poster { opacity: 0; }

/* ---- Loading ---- */
.et-seq__loader {
	position: absolute;
	left: 50%;
	bottom: clamp(2rem, 8vh, 5rem);
	transform: translateX(-50%);
	width: min(220px, 42vw);
	display: grid;
	gap: 0.55rem;
	justify-items: center;
	color: #fff;
	z-index: 4;
	transition: opacity 0.4s ease;
}

.et-seq.is-ready .et-seq__loader,
.et-seq.is-idle .et-seq__loader {
	opacity: 0;
	pointer-events: none;
}

.et-seq__bar {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.28);
}

.et-seq__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--seq-accent);
	transition: width 0.18s linear;
}

.et-seq__loader span {
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ---- Captions ---- */
.et-seq__copy {
	position: relative;
	z-index: 2;
	display: grid;
	align-self: end;
	justify-self: start;
	margin: 0 clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 9vh, 5rem);
	max-width: min(30ch, 80vw);
	color: #fff;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

.et-seq__step {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	pointer-events: none;
}

.et-seq__step.is-active {
	opacity: 1;
	transform: none;
}

.et-seq__step em {
	display: block;
	font-style: normal;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--seq-accent);
	margin-bottom: 0.5rem;
}

.et-seq__step p {
	font-size: clamp(1.5rem, 4.2vw, 2.6rem);
	line-height: 1.12;
	margin: 0;
	color: inherit;
}

/* ---- Progress rail ---- */
.et-seq__rail {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.16);
	z-index: 3;
}

.et-seq__rail i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--seq-accent);
}

/* ---- Portrait: letterbox rather than crop ----
   A 16:9-ish source cropped to a phone's shape upscales roughly 5x
   and goes soft. Set fit_mobile="cover" on the shortcode to override. */
@media (max-aspect-ratio: 4 / 5) {
	.et-seq { --seq-fit: var(--seq-fit-mobile); }

	.et-seq__stage { grid-template-rows: 1fr auto; }

	.et-seq__media {
		position: relative;
		inset: auto;
		align-self: center;
	}

	.et-seq__copy {
		justify-self: stretch;
		max-width: none;
		margin-inline: clamp(1.25rem, 6vw, 2rem);
		margin-bottom: clamp(3rem, 12vh, 6rem);
	}
}

/* ---- Short landscape (phone turned sideways) ---- */
@media (max-height: 480px) and (orientation: landscape) {
	.et-seq__step p { font-size: clamp(1.1rem, 3.4vw, 1.5rem); }
	.et-seq__copy { margin-bottom: 1.75rem; }
}

/* ---- Reduced motion: hold on the poster, release the pin ---- */
@media (prefers-reduced-motion: reduce) {
	.et-seq { height: 100svh; }
	.et-seq__loader,
	.et-seq__rail { display: none; }
	.et-seq__copy { display: block; }
	.et-seq__step {
		position: static;
		opacity: 1;
		transform: none;
	}
	.et-seq__step + .et-seq__step { margin-top: 0.75rem; }
}

/* ---- Elementor editor: sticky misbehaves inside the canvas ---- */
body.elementor-editor-active .et-seq { height: 100svh; }
body.elementor-editor-active .et-seq__stage { position: relative; }