/*
 * Who: JD and ChatGPT
 * When: August 25, 2026
 * Purpose: Style the reusable page-footer transition and expose documented
 * positioning variables for desktop and mobile overlap adjustments.
 */
.apex-page-footer-transition-elementor {
	/*
	 * Positioning controls — JD + ChatGPT, August 25, 2026.
	 * PURPOSE: Keep the reusable page transition easy to tune without editing
	 * Elementor data or the antler image.
	 *
	 * --apft-overlap: negative value moves the entire transition UP behind the
	 *                  final page section. More negative = more overlap.
	 * --apft-height: total height of the transition section. This creates the
	 *                breathing room below the preceding section.
	 * --apft-art-bottom: moves only the antler background vertically. 0px pins
	 *                    the bottom of the art to the transition/footer line.
	 * --apft-message-progress: fallback Good Luck position on pages without a
	 *                          preceding testimonial video button.
	 */
	--apft-overlap: clamp(-990px, -35vw, -675px);
	--apft-height: clamp(1000px, 68vw, 1200px);
	--apft-art-bottom: 0px;
	--apft-message-progress: 0.4;
	position: relative;
	top: var(--apft-overlap);
	z-index: 0;
	clear: both;
	margin: 0 0 var(--apft-overlap) !important;
	padding: 0 !important;
	background: #030303;
}

.apex-page-footer-transition-elementor::after {
	/*
	 * Who: JD + ChatGPT | When: August 25, 2026
	 * PURPOSE: Render the supplied antler artwork directly. Its own fade-to-black
	 * provides the transition; do not add a CSS gradient overlay above it.
	 */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: url("../images/page-footer-transition/antler-background.png") center calc(100% + var(--apft-art-bottom)) / max(1920px, 100%) auto no-repeat;
}

.apex-page-footer-transition-elementor > .elementor-container,
.apex-page-footer-transition-elementor .elementor-column,
.apex-page-footer-transition-elementor .elementor-widget-wrap,
.apex-page-footer-transition-elementor .elementor-widget-html,
.apex-page-footer-transition-elementor .elementor-widget-container {
	margin: 0 !important;
	padding: 0 !important;
}

.apex-page-content-last,
.elementor-top-section:has(+ .apex-page-footer-transition-elementor) {
	position: relative;
	z-index: 1;
}

.apex-page-footer-transition {
	position: relative;
	width: 100%;
	min-height: var(--apft-height);
	overflow: hidden;
	background: #030303;
	color: #aaa;
}

.apex-page-footer-transition__message {
	position: absolute;
	z-index: 4;
	top: var(--apft-message-top, 55%);
	left: 24px;
	right: 24px;
	margin: 0;
	text-align: center;
	font: 300 clamp(36px, 3.4vw, 64px) / 1.1 "Work Sans", Arial, sans-serif;
	letter-spacing: -0.025em;
	opacity: 0;
	transform: translate3d(0, 90px, 0);
	transition: opacity 850ms ease, transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
}

.apex-page-footer-transition__message em {
	font-weight: 300;
}

.apex-page-footer-transition.is-visible .apex-page-footer-transition__message {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

@media (max-width: 768px) {
	.apex-page-footer-transition-elementor {
		--apft-overlap: clamp(-360px, -48vw, -230px);
		--apft-height: clamp(400px, 98vw, 560px);
		--apft-art-bottom: 0px;
		--apft-message-progress: 0.5;
	}

	.apex-page-footer-transition-elementor::after {
		/* Keep the artwork scale independent from the taller section. */
		background-size: auto clamp(500px, 118vw, 760px);
		background-position: center calc(100% + var(--apft-art-bottom));
	}

	.apex-page-footer-transition__message {
		font-size: clamp(27px, 7.2vw, 44px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.apex-page-footer-transition__message {
		transition: none;
	}
}