/* ============================================================
   Scale Hero Frame Scroll — Frontend CSS (scoped: .shfs-*)
   ============================================================ */

/* ── Elementor wrapper compatibility ─────────────────────── */
/* Elementor injects height:100% on .elementor-widget-container.
   That can create an implicit height ceiling that clips our tall
   sticky section.  Force auto so our section drives the height. */
.elementor-widget-shfs_hero,
.elementor-widget-shfs_hero > .elementor-widget-container {
	overflow: visible !important;
	height:   auto    !important;
}

/* ── Section ─────────────────────────────────────────────── */
.shfs-section {
	position: relative;
	width: 100%;
	height: 320vh; /* overridden by Elementor selector when user changes value */
	background: #000;
	color: #fff;
}
.shfs-sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
.shfs-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Vignette / fade ─────────────────────────────────────── */
.shfs-vignette {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		radial-gradient(ellipse 70% 60% at 18% 50%, rgba(0,0,0,0.55) 0%, transparent 70%),
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 30%, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.shfs-bottom-fade {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 180px;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent, #000);
}

/* ── Phase wrapper (one per repeater row) ────────────────── */
.shfs-phase {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 min(6vw, 80px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--shfs-duration, 550ms) cubic-bezier(0.25, 0, 0, 1),
	            transform var(--shfs-duration, 550ms) cubic-bezier(0.25, 0, 0, 1),
	            filter var(--shfs-duration, 550ms) cubic-bezier(0.25, 0, 0, 1);
}
.shfs-phase::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: transparent;
	opacity: 0;
	transition: opacity var(--shfs-duration, 550ms);
}
.shfs-phase.shfs-in {
	opacity: 1;
	transform: none;
	filter: none;
	pointer-events: auto;
}

.shfs-phase-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 1.25rem;
	position: relative;
	/* Default: stretch children to full width.
	   Overridden per-phase by Elementor's align-items selector.   */
}

/* ── Layout presets ──────────────────────────────────────── */
.shfs-layout-centered {
	text-align: center;
}
.shfs-layout-centered .shfs-phase-inner {
	max-width: 900px;
	margin-inline: auto;
	align-items: center;
}

.shfs-layout-split-left-right {
	align-items: stretch;
	justify-content: flex-end;
	padding-bottom: 10vh;
}
/*
 * The phase-inner uses a 2-column grid ONLY when both column wrappers exist
 * (.shfs-split-col-1 + .shfs-split-col-2). When only one side has elements,
 * the PHP falls back to a flat list (adds .shfs-flat) and the grid is skipped.
 */
.shfs-layout-split-left-right .shfs-phase-inner:not(.shfs-flat) {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	align-items: end;
	gap: 2rem;
	max-width: none;
}
/* Flat fallback: single-column flex, respects the parent's align-items */
.shfs-layout-split-left-right .shfs-phase-inner.shfs-flat {
	display: flex;
	flex-direction: column;
}

/* ── Column wrappers ────────────────────────────────── */
.shfs-split-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}
.shfs-split-col-1 {
	grid-column: 1;
	text-align: var(--shfs-col1-align, left);
	align-items: flex-start;
}
.shfs-split-col-2 {
	grid-column: 2;
	text-align: var(--shfs-col2-align, right);
	align-items: flex-end;
}

/* ── Full-width elements (below both columns) ─────── */
.shfs-layout-split-left-right .shfs-phase-inner > .shfs-el {
	grid-column: 1 / -1;
}

/* ── Flipped: col-1 appears on right, col-2 on left ── */
.shfs-split-flipped .shfs-split-col-1 {
	grid-column: 2;
	text-align: var(--shfs-col2-align, right);
	align-items: flex-end;
}
.shfs-split-flipped .shfs-split-col-2 {
	grid-column: 1;
	text-align: var(--shfs-col1-align, left);
	align-items: flex-start;
}

.shfs-layout-top-banner {
	justify-content: flex-start;
	padding-top: 12vh;
}
.shfs-layout-top-banner .shfs-phase-inner {
	max-width: 1100px;
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.shfs-layout-bottom-banner {
	justify-content: flex-end;
	padding-bottom: 10vh;
}
.shfs-layout-bottom-banner .shfs-phase-inner {
	max-width: 1100px;
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.shfs-layout-freeform .shfs-phase-inner {
	display: block;
	max-width: none;
}

/* ── Element base ────────────────────────────────────────── */
.shfs-el {
	display: block;
	position: relative;
}
.shfs-el-text {
	display: inline-block;
	margin: 0;
}
.shfs-el-heading .shfs-el-text,
.shfs-el-paragraph .shfs-el-text {
	display: block;
}

/* Eyebrow */
.shfs-el-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.shfs-el-eyebrow .shfs-eyebrow-line {
	display: block;
	width: 24px;
	height: 1px;
	background: #C8965A;
	flex-shrink: 0;
}
.shfs-el-eyebrow .shfs-el-text {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C8965A;
}

/* Headings (defaults — can be overridden by typography control) */
.shfs-el-heading .shfs-el-text {
	font-family: 'DM Serif Display', Georgia, serif;
	font-weight: 400;
	font-size: clamp(2rem, 6vw, 5rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: #fff;
}
.shfs-el-heading em {
	font-style: italic;
	color: rgba(255,255,255,0.6);
}

/* Paragraph */
.shfs-el-paragraph .shfs-el-text {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.92rem;
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255,255,255,0.7);
	max-width: 38ch;
}

/* Image */
.shfs-el-img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Icon */
.shfs-el-icon svg {
	display: inline-block;
	color: currentColor;
}

/* Divider */
.shfs-el-divider {
	display: block;
	background: rgba(255,255,255,0.2);
	width: 60px;
	height: 1px;
}

/* HTML wrapper passthrough */
.shfs-el-html { all: revert; display: block; }

/* ── Buttons ─────────────────────────────────────────────── */
.shfs-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.78rem 1.5rem;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	border-radius: 8px;
	letter-spacing: 0.01em;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: transform 0.2s cubic-bezier(0.25,0,0,1),
	            background 0.2s,
	            color 0.2s,
	            border-color 0.2s,
	            box-shadow 0.2s;
}
.shfs-btn-fill {
	background: #fff;
	color: #000;
	border-color: #fff;
}
.shfs-btn-fill:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(255,255,255,0.15);
}
.shfs-btn-outline {
	background: transparent;
	color: rgba(255,255,255,0.6);
	border-color: rgba(255,255,255,0.2);
}
.shfs-btn-outline:hover {
	color: #fff;
	border-color: rgba(255,255,255,0.45);
	transform: translateY(-1px);
}
.shfs-btn-ghost {
	background: rgba(255,255,255,0.08);
	color: #fff;
	border-color: transparent;
}
.shfs-btn-ghost:hover { background: rgba(255,255,255,0.16); }
.shfs-btn-link {
	background: transparent;
	color: #fff;
	border: none;
	padding: 0.4rem 0;
	border-radius: 0;
	border-bottom: 1px solid currentColor;
}

/* ── Position: absolute (freeform) ───────────────────────── */
.shfs-pos-absolute {
	position: absolute;
	transform: translate(var(--shfs-x, 0), var(--shfs-y, 0));
}

/* Anchor offsets — combined with --shfs-x / --shfs-y */
.shfs-anchor-top-left      { top: 0;   left: 0; }
.shfs-anchor-top-center    { top: 0;   left: 50%; transform: translate(calc(-50% + var(--shfs-x, 0)), var(--shfs-y, 0)); }
.shfs-anchor-top-right     { top: 0;   right: 0; transform: translate(calc(-1 * var(--shfs-x, 0)), var(--shfs-y, 0)); }
.shfs-anchor-center-left   { top: 50%; left: 0;  transform: translate(var(--shfs-x, 0), calc(-50% + var(--shfs-y, 0))); }
.shfs-anchor-center-center { top: 50%; left: 50%; transform: translate(calc(-50% + var(--shfs-x, 0)), calc(-50% + var(--shfs-y, 0))); }
.shfs-anchor-center-right  { top: 50%; right: 0; transform: translate(calc(-1 * var(--shfs-x, 0)), calc(-50% + var(--shfs-y, 0))); }
.shfs-anchor-bottom-left   { bottom: 0; left: 0;  transform: translate(var(--shfs-x, 0), calc(-1 * var(--shfs-y, 0))); }
.shfs-anchor-bottom-center { bottom: 0; left: 50%; transform: translate(calc(-50% + var(--shfs-x, 0)), calc(-1 * var(--shfs-y, 0))); }
.shfs-anchor-bottom-right  { bottom: 0; right: 0; transform: translate(calc(-1 * var(--shfs-x, 0)), calc(-1 * var(--shfs-y, 0))); }

/* ── Animations: starting state per phase ───────────────── */
/* IMPORTANT: must include :not(.shfs-in) so the same-specificity attribute
   selector doesn't override .shfs-phase.shfs-in { opacity:1 } below.       */
.shfs-phase:not(.shfs-in)[data-shfs-enter="fade"]       { opacity: 0; }
.shfs-phase:not(.shfs-in)[data-shfs-enter="fade-up"]    { opacity: 0; transform: translateY(24px); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="fade-down"]  { opacity: 0; transform: translateY(-24px); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="fade-left"]  { opacity: 0; transform: translateX(24px); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="fade-right"] { opacity: 0; transform: translateX(-24px); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="scale"]      { opacity: 0; transform: scale(0.96); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="zoom"]       { opacity: 0; transform: scale(1.06); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="blur"]       { opacity: 0; filter: blur(12px); }
.shfs-phase:not(.shfs-in)[data-shfs-enter="none"]       { opacity: 0; }

/* When .shfs-in is added, all visual props reset to defaults via the base rule above */

/* Per-element animation overrides (applied independently of phase) */
.shfs-el.shfs-anim-fade,
.shfs-el.shfs-anim-fade-up,
.shfs-el.shfs-anim-fade-down,
.shfs-el.shfs-anim-fade-left,
.shfs-el.shfs-anim-fade-right,
.shfs-el.shfs-anim-scale,
.shfs-el.shfs-anim-zoom,
.shfs-el.shfs-anim-blur {
	transition: opacity 600ms cubic-bezier(0.25,0,0,1) var(--shfs-el-delay, 0ms),
	            transform 600ms cubic-bezier(0.25,0,0,1) var(--shfs-el-delay, 0ms),
	            filter 600ms cubic-bezier(0.25,0,0,1) var(--shfs-el-delay, 0ms);
}
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-fade       { opacity: 0; }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-fade-up    { opacity: 0; transform: translateY(24px); }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-fade-down  { opacity: 0; transform: translateY(-24px); }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-fade-left  { opacity: 0; transform: translateX(24px); }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-fade-right { opacity: 0; transform: translateX(-24px); }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-scale      { opacity: 0; transform: scale(0.96); }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-zoom       { opacity: 0; transform: scale(1.06); }
.shfs-phase:not(.shfs-in) .shfs-el.shfs-anim-blur       { opacity: 0; filter: blur(12px); }

/* ── Sticky logo / branding ──────────────────────────────── */
.shfs-sticky-logo {
	position: absolute;
	z-index: 10;          /* above phases */
	pointer-events: auto;
	line-height: 0;       /* remove inline-block gap */
}
.shfs-sticky-logo img {
	display: block;
	height: auto;
	width: 100%;
	max-width: var(--shfs-logo-w, 120px);
}
.shfs-sticky-logo a {
	display: block;
	line-height: 0;
}

/* Position variants — offset controlled via --shfs-logo-x / --shfs-logo-y */
.shfs-logo-pos-top-left {
	top:  var(--shfs-logo-y, 2rem);
	left: var(--shfs-logo-x, 3vw);
}
.shfs-logo-pos-top-center {
	top:  var(--shfs-logo-y, 2rem);
	left: 50%;
	transform: translateX(-50%);
}
.shfs-logo-pos-top-right {
	top:   var(--shfs-logo-y, 2rem);
	right: var(--shfs-logo-x, 3vw);
}
.shfs-logo-pos-bottom-left {
	bottom: var(--shfs-logo-y, 2rem);
	left:   var(--shfs-logo-x, 3vw);
}
.shfs-logo-pos-bottom-center {
	bottom: var(--shfs-logo-y, 2rem);
	left:   50%;
	transform: translateX(-50%);
}
.shfs-logo-pos-bottom-right {
	bottom: var(--shfs-logo-y, 2rem);
	right:  var(--shfs-logo-x, 3vw);
}

/* ── Scroll cue ──────────────────────────────────────────── */
.shfs-scroll-cue {
	position: absolute;
	bottom: 2.2rem;
	left: 6vw;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	opacity: 0.4;
	pointer-events: none;
}
.shfs-cue-bar {
	display: block;
	width: 22px;
	height: 1px;
	background: #fff;
	transform-origin: left;
	animation: shfs-cue-breathe 2.4s ease-in-out infinite;
}
@keyframes shfs-cue-breathe {
	0%, 100% { transform: scaleX(1);   opacity: 0.45; }
	50%      { transform: scaleX(1.6); opacity: 0.95; }
}
.shfs-cue-text {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

/* ── Editor banner ───────────────────────────────────────── */
/* Keep normal phase visibility logic in editor too, otherwise all phases
   stack and look broken while editing. */
.shfs-editor-mode .shfs-phase { pointer-events: none; }
.shfs-editor-mode .shfs-phase.shfs-in { pointer-events: auto; }
.shfs-editor-banner {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 50;
	background: rgba(0,0,0,0.78);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 8px;
	padding: 0.85rem 1rem;
	color: #fff;
	font-family: system-ui, sans-serif;
	font-size: 0.78rem;
	max-width: 280px;
	backdrop-filter: blur(8px);
}
.shfs-editor-banner strong { display: block; margin-bottom: 0.3rem; }
.shfs-editor-banner p { margin: 0.25rem 0; opacity: 0.8; }
.shfs-editor-scrub {
	width: 100%;
	margin-top: 0.5rem;
	accent-color: #C8965A;
}

/* No-frames placeholder */
.shfs-noframes .shfs-sticky {
	display: flex;
	align-items: center;
	justify-content: center;
}
.shfs-noframes .shfs-sticky::after {
	content: "Hero scroll: configure a frame source";
	color: rgba(255,255,255,0.4);
	font-family: system-ui, sans-serif;
}

/* Hidden until ready (when pause_until_loaded is on) */
.shfs-section.shfs-loading-pause {
	opacity: 0;
	transition: opacity 400ms;
}
.shfs-section.shfs-ready {
	opacity: 1;
}

/* Disabled (mobile fallback) */
.shfs-disabled .shfs-canvas { display: none; }
.shfs-disabled .shfs-sticky { background: #000; }

/* Reduced motion */
.shfs-reduced .shfs-phase { transition: none; }

/* No-script fallback image */
.shfs-noscript-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

/* ── Responsive visibility ───────────────────────────────── */
@media (max-width: 1024px) {
	.shfs-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	.shfs-hide-mobile { display: none !important; }
	.shfs-layout-split-left-right .shfs-phase-inner {
		grid-template-columns: 1fr;
	}
	.shfs-layout-split-left-right .shfs-phase-inner > .shfs-el-paragraph,
	.shfs-layout-split-left-right .shfs-phase-inner > .shfs-el-button,
	.shfs-layout-split-left-right .shfs-phase-inner > .shfs-el-icon,
	.shfs-layout-split-left-right .shfs-phase-inner > .shfs-el-divider,
	.shfs-layout-split-left-right .shfs-phase-inner > .shfs-el-html {
		grid-column: 1;
		justify-self: start;
		text-align: left;
	}
	.shfs-scroll-cue { display: none; }
}
@media (min-width: 1025px) {
	.shfs-hide-desktop { display: none !important; }
}

/* ── Debug overlay (visible only when ?shfs_debug=1) ─────── */
.shfs-debug-overlay {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 999999;
	background: rgba(0,0,0,0.85);
	color: #0f0;
	font: 11px/1.6 'Courier New', monospace;
	padding: 0.6rem 0.9rem;
	border-radius: 6px;
	pointer-events: none;
	white-space: pre;
	border: 1px solid rgba(0,255,0,0.3);
	max-width: 260px;
}