/**
 * _partials/cta-banner.css — bottom-of-page conversion banner.
 *
 * Loaded by src/index.njk + src/about.njk + src/services.njk +
 * src/recommendations.njk via their `styles:` frontmatter arrays
 * (shared partial — appears at the bottom of long-form content pages).
 *
 * Markup in src/_includes/partials/cta-banner.njk. NOTE: class prefix
 * is `innov8-cta-*` which is distinct from the `innov8-cs-cta-*` used
 * on case-study layouts.
 *
 * Extracted from src/assets/css/app.css CTA BANNER section as part of
 * #147 PR 3 — CSS file split: complex pages. Content byte-for-byte
 * preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	CTA BANNER
	─────────────────────────────────────────────────────────────────────
	Bottom-of-page conversion banner. Markup in
	`src/_includes/partials/cta-banner.njk`. Aurora-glow card holds
	eyebrow (availability pill) + giant headline + lead + primary CTA
	+ email fallback link.

	Class prefix: `innov8-cta-` (NOTE: distinct from .innov8-cs-cta-*
	in the case-study detail layout — those are the in-detail CTA;
	these are the home-page banner).
	───────────────────────────────────────────────────────────────────── */

@layer components {
	.innov8-cta {
		position: relative;
		padding: clamp(44px, 5.5vw, 72px) 0 clamp(56px, 7vw, 88px);
		background: var(--color-ink-1000);
	}

	.innov8-cta-card {
		position: relative;
		overflow: hidden;
		padding: clamp(48px, 7vw, 88px) clamp(28px, 5vw, 64px);
		background: linear-gradient(180deg, #0a1130 0%, #050816 100%);
		border: 1px solid rgba(95, 236, 253, 0.2);
		border-radius: var(--radius-2xl);
		box-shadow: var(--shadow-xl);
	}

	.innov8-cta-aurora {
		position: absolute;
		aspect-ratio: 1;
		border-radius: 999px;
		filter: blur(60px);
		pointer-events: none;
		animation: aurora-drift 22s ease-in-out infinite alternate;
	}

	.innov8-cta-aurora-blue {
		top: -40%;
		left: -10%;
		width: 70%;
		background: radial-gradient(closest-side, rgba(31, 86, 245, 0.55), transparent 70%);
	}

	.innov8-cta-aurora-cyan {
		bottom: -40%;
		right: -10%;
		width: 60%;
		background: radial-gradient(closest-side, rgba(95, 236, 253, 0.4), transparent 70%);
		animation-direction: alternate-reverse;
	}

	.innov8-cta-content {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: clamp(20px, 2.4vw, 28px);
		max-width: 820px;
	}

	.innov8-cta-eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.innov8-cta-title {
		margin: 0;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(30px, 4.4vw, 52px);
		line-height: 1.1;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-cta-lead {
		margin: 0;
		max-width: 620px;
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		line-height: 1.55;
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	.innov8-cta-actions {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: clamp(16px, 2vw, 24px);
		margin-top: 8px;
	}

	.innov8-cta-email {
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		letter-spacing: 0.02em;
		color: var(--fg-secondary);
		text-decoration: none;
		transition: color var(--duration-base) var(--ease-out);
	}

	.innov8-cta-email strong {
		color: var(--accent-spark);
		font-weight: 600;
	}

	.innov8-cta-email:hover,
	.innov8-cta-email:focus-visible {
		color: var(--fg-primary);
		outline: none;
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-cta-aurora,
		.innov8-cta-aurora-blue,
		.innov8-cta-aurora-cyan {
			animation: none;
		}
		.innov8-cta-email,
		.innov8-cta-email:hover,
		.innov8-cta-email:focus-visible {
			transition: none;
		}
	}
}