/* Northern Sky - Hero Split Scroll
   Structural / layout CSS only. Colors, typography, spacing and positions
   come from the Elementor Style tab (see class-hero-split-scroll-widget.php).

   Mechanic: hero-split-scroll.js writes one number, --nsm-hs-p (0 to 1,
   already eased), onto .nsm-hs as the visitor scrolls through the pinned
   section. Every animated value below is a plain calc()/clamp() formula
   built from --nsm-hs-p plus a couple of Style-tab custom properties, so
   nothing is hardcoded and the whole thing stays responsive per
   breakpoint - the JS never touches individual element styles itself. */

.nsm-hs,
.nsm-hs *,
.nsm-hs *::before,
.nsm-hs *::after {
	box-sizing: border-box;
}

.nsm-hs {
	position: relative;
	width: 100%;
	/* Shared "how far into the compact-title reveal are we" curve (0 to 1),
	   starting a bit after the scroll begins and finishing at full scroll -
	   both the title bar's growth and the image being pushed down read off
	   this same number so they always stay in lockstep. */
	--nsm-hs-bp: clamp( 0, calc( ( var( --nsm-hs-p, 0 ) - 0.3 ) / 0.7 ), 1 );
}

.nsm-hs-pin {
	position: sticky;
	top: 0;
	overflow: hidden;
	width: 100%;
}

.nsm-hs.nsm-hs-no-pin .nsm-hs-pin {
	position: relative;
}

/* ---------------------------------------------------------
 * Image layer - anchored to the right edge, widens leftward
 * as --nsm-hs-p goes from 0 to 1 (starting gap = the Text
 * Column Width control, finishing flush at 100%). Its top
 * edge is also pushed down by the title bar's growing height
 * (--nsm-hs-bp) so the two never overlap - the title ends up
 * outside/above the image, not printed on top of it.
 * ------------------------------------------------------- */

.nsm-hs-media {
	position: absolute;
	top: calc( var( --nsm-hs-compact-bar-h, 110px ) * var( --nsm-hs-bp, 0 ) );
	right: 0;
	bottom: 0;
	z-index: 1;
	overflow: hidden;
	width: calc( ( 100 - var( --nsm-hs-text-w, 38 ) + var( --nsm-hs-text-w, 38 ) * var( --nsm-hs-p, 0 ) ) * 1% );
	border-radius: calc( var( --nsm-hs-image-radius, 0px ) * ( 1 - var( --nsm-hs-p, 0 ) ) );
}

.nsm-hs-image {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.nsm-hs-image-mobile {
	display: none;
}

.nsm-hs-has-mobile-image .nsm-hs-image-desktop {
	display: none;
}

.nsm-hs-has-mobile-image .nsm-hs-image-mobile {
	display: block;
}

.nsm-hs-media-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------
 * Text column - the "before scroll" heading + description.
 * Stays put (it has no background of its own); it just fades
 * out of the way as the image grows behind/under it.
 * ------------------------------------------------------- */

.nsm-hs-text {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: calc( var( --nsm-hs-text-w, 38 ) * 1% );
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.nsm-hs-title-expanded {
	margin: 0;
	/* Plain fallback in case the Style tab's "Space Below" control (see
	   class-hero-split-scroll-widget.php) doesn't end up applying for any
	   reason - keeps the heading's last line from sitting flush against
	   the description below it. The Style control's own !important rule
	   normally wins over this. */
	margin-bottom: 48px;
	display: flex;
	flex-direction: column;
	will-change: opacity, transform;
	opacity: clamp( 0, calc( 1 - var( --nsm-hs-p, 0 ) * 1.6 ), 1 );
	transform: translateY( calc( var( --nsm-hs-p, 0 ) * -24px ) );
}

.nsm-hs-title-line {
	display: block;
}

.nsm-hs-desc p {
	margin: 0;
}

/* The block itself always fades out of the way by the "Hidden By" point
   (--nsm-hs-desc-fade), in BOTH Scroll Animation styles, so it is never
   left sitting on top of the now fully-widened image underneath it. */
.nsm-hs-desc {
	will-change: opacity;
	opacity: clamp( 0, calc( 1 - var( --nsm-hs-p, 0 ) / var( --nsm-hs-desc-fade, 0.7 ) ), 1 );
}

.nsm-hs.nsm-hs-desc-persist .nsm-hs-desc {
	opacity: 1;
}

/* "Word Color Fill" mode additionally/independently eases each word from
   the Dim Color to the Active Color as hero-split-scroll.js advances
   --nsm-hs-p (up to the earlier "Fill Completes By" point) - exactly the
   same word-by-word reveal as the Intro Text + Button widget's
   .nsm-intro-word / .nsm-word-active. The block's own opacity fade above
   still applies on top of this, so the fully-colored text is readable for
   a beat and then the whole block hides right on schedule. */
.nsm-hs-desc-word {
	display: inline-block;
	transition-property: color;
	transition-timing-function: ease;
}

/* Once fully faded, take both layers out of the tab/hit-test order
   instead of leaving invisible interactive text sitting on top of the
   image - toggled by hero-split-scroll.js at the same thresholds the
   opacity formulas above use. */
.nsm-hs-title-expanded.nsm-hs-is-hidden,
.nsm-hs-desc.nsm-hs-is-hidden {
	pointer-events: none;
}

/* ---------------------------------------------------------
 * Compact title - a full-width bar that grows in ABOVE the
 * image (outside/on top of the layout, not overlaid on the
 * photo itself) as the section scrolls; .nsm-hs-media's own
 * top offset (above) grows by the same amount so the image
 * is pushed down to sit flush under it, never behind it.
 * ------------------------------------------------------- */

.nsm-hs-title-compact {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	margin: 0;
	display: flex;
	align-items: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	will-change: height, opacity;
	pointer-events: none;
	height: calc( var( --nsm-hs-compact-bar-h, 110px ) * var( --nsm-hs-bp, 0 ) );
	opacity: var( --nsm-hs-bp, 0 );
}

@media (prefers-reduced-motion: reduce) {
	.nsm-hs-title-expanded,
	.nsm-hs-desc,
	.nsm-hs-desc-word,
	.nsm-hs-title-compact,
	.nsm-hs-media {
		transition: none !important;
	}
}

/* ---------------------------------------------------------
 * Mobile - no scroll-jacking on small screens by default
 * (see the "Disable Pin/Morph on Mobile" control). Falls back
 * to a plain stacked layout: full heading, description, then
 * a full-width image, no pin/morph and no compact overlay.
 * ------------------------------------------------------- */

@media (max-width: 767px) {
	.nsm-hs-mobile-static.nsm-hs {
		height: auto !important;
	}

	.nsm-hs-mobile-static .nsm-hs-pin {
		position: relative !important;
		height: auto !important;
		display: flex;
		flex-direction: column;
	}

	.nsm-hs-mobile-static .nsm-hs-text {
		position: relative !important;
		top: auto;
		left: auto;
		bottom: auto;
		width: 100% !important;
		order: 1;
	}

	.nsm-hs-mobile-static .nsm-hs-title-expanded {
		opacity: 1 !important;
		transform: none !important;
	}

	.nsm-hs-mobile-static .nsm-hs-desc {
		opacity: 1 !important;
	}

	.nsm-hs-mobile-static .nsm-hs-media {
		position: relative !important;
		inset: auto;
		top: auto;
		right: auto;
		bottom: auto;
		width: 100% !important;
		height: var( --nsm-hs-min-height, 60vh );
		order: 2;
	}

	.nsm-hs-mobile-static .nsm-hs-title-compact {
		display: none !important;
	}
}