/*
 * Homepage closing CTA — centred copy over a black→bronze wash, three ambient
 * gold orbs, and a field of gold motes that drift upward.
 * Mirrors the final CTA section in website_reference/homepage_6.html.
 *
 * Mote positions/sizes are set inline per element in the page content; this
 * file owns their shared behaviour only.
 *
 * @package log-core
 */

.hp-cta {
	position: relative;
	overflow: hidden;
	padding: 100px 24px;
	background: linear-gradient(135deg, #050505 0%, #0d0b06 25%, #1a1306 50%, #241a07 72%, #050505 100%);
}

/* ── Ambient orbs ── */
.hp-cta-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.hp-cta-orb--a {
	top: -60px;
	left: -60px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(212, 175, 55, .18) 0%, transparent 65%);
}

.hp-cta-orb--b {
	bottom: -80px;
	right: -40px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(240, 204, 85, .1) 0%, transparent 70%);
}

.hp-cta-orb--c {
	top: 50%;
	left: 60%;
	width: 200px;
	height: 200px;
	background: radial-gradient(circle, rgba(212, 175, 55, .12) 0%, transparent 65%);
	transform: translateY(-50%);
}

/* ── Rising motes ── */
.cta-dot {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	animation: log-cta-dot-rise var(--dur, 8s) ease-in-out var(--delay, 0s) infinite;
}

.cta-dot.glow {
	box-shadow: 0 0 6px 2px rgba(212, 175, 55, .6);
}

.cta-dot.glow-lg {
	box-shadow: 0 0 12px 5px rgba(212, 175, 55, .4);
}

@keyframes log-cta-dot-rise {
	0% {
		opacity: 0;
		transform: translateY(0) scale(.5);
	}

	10% {
		opacity: 1;
	}

	75% {
		opacity: .55;
	}

	100% {
		opacity: 0;
		transform: translateY(-220px) scale(1.2);
	}
}

/* ── Content ── */
.hp-cta-inner {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.hp-cta-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(212, 175, 55, .1);
	border: 1px solid rgba(212, 175, 55, .25);
	border-radius: var(--r-pill);
	padding: 6px 16px;
	margin-bottom: 28px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold-500);
}

.hp-cta-badge .icon {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

.hp-cta h2 {
	font-family: var(--display);
	font-size: clamp(32px, 6vw, 60px);
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 0 0 20px;
}

.hp-cta h2 em {
	font-style: italic;
	font-weight: 300;
	color: var(--gold-500);
}

.hp-cta-sub {
	font-size: clamp(14px, 2vw, 18px);
	color: rgba(255, 255, 255, .65);
	line-height: 1.7;
	max-width: 520px;
	margin: 0 auto 40px;
}

.hp-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

@media (prefers-reduced-motion: reduce) {
	.cta-dot {
		animation: none;
		opacity: .5;
	}
}

@media (max-width: 767px) {
	.hp-cta {
		padding: 72px 24px;
	}

	/* Motes read as noise once the section narrows. */
	.cta-dot {
		display: none;
	}

	.hp-cta-actions .hp-btn {
		width: 100%;
		justify-content: center;
	}
}