/* =========================================================
   HOME FOOTER CTA
   PREMIUM CINEMATIC 3D CONVERSION SECTION
   No blinking / no keyframes / no layout shift.
========================================================= */

.home-footer-cta {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 560px;
	overflow: hidden;
	box-sizing: border-box;

	padding: clamp(80px, 10vw, 140px) var(--container-padding-inline);

	background:
		radial-gradient(
			circle at 50% 45%,
			rgba(0, 184, 148, 0.12),
			transparent 38%
		),
		var(--color-background-dark);

	color: var(--color-text-inverse);
	text-align: center;

	/* 3D scene */
	perspective: 1400px;
}


/* ---------------------------------------------------------
   BACKGROUND MEDIA
--------------------------------------------------------- */

.home-footer-cta__media {
	position: absolute;
	inset: -8%;
	z-index: -3;
	overflow: hidden;
	pointer-events: none;

	transform:
		translate3d(
			calc(var(--cta-mouse-x, 0) * -28px),
			calc(var(--cta-mouse-y, 0) * -18px),
			0
		)
		scale(1.10);

	transition: transform 900ms cubic-bezier(.16,.8,.2,1);
	will-change: transform;
}

.home-footer-cta__background {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;

	filter:
		brightness(0.56)
		saturate(0.9)
		contrast(1.08);

	transform: scale(1.04);

	transition:
		transform 1200ms cubic-bezier(.16,.8,.2,1),
		filter 600ms ease;
}
/* ---------------------------------------------------------
   CINEMATIC OVERLAY
--------------------------------------------------------- */

.home-footer-cta__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;

	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.38) 0%,
			rgba(0, 0, 0, 0.58) 52%,
			rgba(0, 0, 0, 0.78) 100%
		);

	opacity: 1;
}


/* ---------------------------------------------------------
   AMBIENT TEAL LIGHT
--------------------------------------------------------- */

.home-footer-cta::before {
	content: "";
	position: absolute;
	z-index: -1;

	width: 520px;
	height: 520px;

	left: 50%;
	top: 50%;

	transform:
		translate(-50%, -50%)
		translate3d(
			calc(var(--cta-mouse-x, 0) * 18px),
			calc(var(--cta-mouse-y, 0) * 12px),
			0
		);

	border-radius: 50%;

	background:
		radial-gradient(
			circle,
			rgba(0, 184, 148, 0.18) 0%,
			rgba(0, 184, 148, 0.08) 28%,
			transparent 68%
		);

	filter: blur(12px);
	pointer-events: none;

	transition: transform 900ms cubic-bezier(.2,.7,.2,1);
}


/* ---------------------------------------------------------
   CINEMATIC VIGNETTE
--------------------------------------------------------- */

.home-footer-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;

	background:
		radial-gradient(
			ellipse at center,
			transparent 25%,
			rgba(0, 0, 0, 0.18) 58%,
			rgba(0, 0, 0, 0.5) 100%
		);
}


/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */

.home-footer-cta__content {
	position: relative;
	z-index: 5;

	display: flex;
	flex-direction: column;
	align-items: center;

	width: min(100%, 820px);

	gap: var(--space-lg);
	margin-inline: auto;

	transform:
		translate3d(
			calc(var(--cta-mouse-x, 0) * 14px),
			calc(var(--cta-mouse-y, 0) * 10px),
			35px
		);

	transition:
		transform 500ms cubic-bezier(.16,.8,.2,1);

	will-change: transform;
}


/* ---------------------------------------------------------
   EYEBROW
--------------------------------------------------------- */

.home-footer-cta__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: relative;

	padding: 9px 18px;

	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-full);

	background:
		rgba(255, 255, 255, 0.08);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	box-shadow:
		0 8px 30px rgba(0, 0, 0, 0.18),
		inset 0 1px 0 rgba(255, 255, 255, 0.14);

	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);

	letter-spacing: 0.09em;
	text-transform: uppercase;

	color: #ffffff;
}


/* Small teal indicator */

.home-footer-cta__eyebrow::before {
	content: "";

	width: 6px;
	height: 6px;

	margin-right: 9px;

	border-radius: 50%;

	background: var(--color-accent);

	box-shadow:
		0 0 0 5px rgba(0, 184, 148, 0.12),
		0 0 18px rgba(0, 184, 148, 0.65);
}


/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.home-footer-cta__heading {
	margin: 0;

	max-width: 820px;

	font-family: var(--font-family-heading);
	font-size: clamp(3rem, 6vw, 5.5rem);
	font-weight: var(--font-weight-semibold);
	line-height: 0.98;
	letter-spacing: -0.055em;

	color: #ffffff;

	text-wrap: balance;

	text-shadow:
		0 3px 0 rgba(0, 0, 0, 0.25),
		0 15px 35px rgba(0, 0, 0, 0.35);

	transform:
		translate3d(
			calc(var(--cta-mouse-x, 0) * 8px),
			calc(var(--cta-mouse-y, 0) * 5px),
			60px
		);

	transition:
		transform 500ms cubic-bezier(.16,.8,.2,1);

	will-change: transform;
}

/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.home-footer-cta__description {
	margin: 0;

	max-width: 650px;

	font-size: clamp(
		1rem,
		1.5vw,
		1.18rem
	);

	font-weight: var(--font-weight-regular);

	line-height: 1.75;

	color: rgba(255, 255, 255, 0.82);

	text-wrap: balance;

	text-shadow:
		0 2px 16px rgba(0, 0, 0, 0.35);
}


/* ---------------------------------------------------------
   CTA BUTTON
--------------------------------------------------------- */

.home-footer-cta__cta {
	position: relative;
	z-index: 10;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 220px;

	margin-top: var(--space-sm);
	padding: 17px 32px;

	border: 1px solid rgba(255,255,255,.22);
	border-radius: var(--radius-full);

	background:
		linear-gradient(
			135deg,
			#00d2aa 0%,
			#00b894 50%,
			#009e7d 100%
		);

	color: #fff;

	font-size: var(--font-size-md);
	font-weight: 700;

	text-decoration: none;

	box-shadow:
		0 18px 40px rgba(0,184,148,.32),
		0 7px 0 rgba(0,100,80,.7),
		inset 0 2px 0 rgba(255,255,255,.35);

	transform:
		translate3d(
			calc(var(--cta-mouse-x, 0) * 20px),
			calc(var(--cta-mouse-y, 0) * 14px),
			80px
		)
		scale(1);

	transition:
		transform 350ms cubic-bezier(.16,.8,.2,1),
		box-shadow 350ms ease;

	will-change: transform;
}
/* ---------------------------------------------------------
   BUTTON HOVER
--------------------------------------------------------- */

.home-footer-cta__cta:hover,
.home-footer-cta__cta:focus-visible,
.home-footer-cta__cta.is-active,
.home-footer-cta__cta.is-touched {

	transform:
		translate3d(
			calc(var(--cta-mouse-x, 0) * 20px),
			calc(var(--cta-mouse-y, 0) * 14px - 7px),
			80px
		)
		scale(1.055);

	box-shadow:
		0 25px 60px rgba(0,184,148,.48),
		0 9px 0 rgba(0,100,80,.55),
		inset 0 2px 0 rgba(255,255,255,.45);
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1280px) {

	.home-footer-cta {
		min-height: 620px;
	}

	.home-footer-cta__content {
		gap: var(--space-xl);
	}
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.home-footer-cta {
		min-height: 500px;
		padding-block: 90px;
	}

	.home-footer-cta__heading {
		font-size: clamp(2.8rem, 7vw, 4rem);
	}

	.home-footer-cta__description {
		max-width: 600px;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

	.home-footer-cta {
		min-height: 460px;

		padding-block: 80px;
		padding-inline: var(--space-md);

		perspective: none;
	}

	.home-footer-cta__media {
		inset: 0;
		transform: none !important;
	}

	.home-footer-cta__background {
		transform: scale(1.02);
	}

	.home-footer-cta__content {
		width: 100%;
		transform: none !important;
	}

	.home-footer-cta__heading {
		font-size: clamp(2.5rem, 13vw, 3.4rem);
		letter-spacing: -0.045em;
	}

	.home-footer-cta__description {
		font-size: 0.95rem;
		line-height: 1.65;
	}

	.home-footer-cta__cta {
		width: 100%;
		max-width: 320px;
	}

	.home-footer-cta::before {
		width: 360px;
		height: 360px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.home-footer-cta__media,
	.home-footer-cta__content,
	.home-footer-cta__cta,
	.home-footer-cta::before {
		transform: none !important;
		transition: none !important;
	}

	.home-footer-cta__cta:hover,
	.home-footer-cta__cta:focus-visible {
		transform: none;
	}
}


/* =========================================================
   SAFETY — PREVENT HORIZONTAL OVERFLOW
========================================================= */

.home-footer-cta,
.home-footer-cta *,
.home-footer-cta *::before,
.home-footer-cta *::after {
	box-sizing: border-box;
	max-width: 100%;
}