/**
 * Animated border trail card (`.haam-border-trail`).
 * CSS-only — offset-path animation around the card edge.
 */

.haam-border-trail {
	--hbt-accent: #ebd11a;
	--hbt-canvas: #ffffff;
	--hbt-track: #e8e4dc;
	--hbt-line: #1a1532;
	--hbt-text: #4b5563;
	--hbt-muted: #9ca3af;
	--hbt-radius: 8;
	--hbt-width: 3;
	--hbt-trail-size: 45;
	--hbt-speed: 8s;

	position: relative;
	width: min(66ch, 100%);
	max-width: 100%;
	margin: 1.75em auto;
	line-height: 1.5;
	border: 1px solid var(--hbt-line);
	border-radius: calc(var(--hbt-radius) * 1px);
	container-type: inline-size;
	box-sizing: border-box;
}

.haam-border-trail__border {
	position: absolute;
	inset: 1px;
	clip-path: inset(0 0 0 0 round calc((var(--hbt-radius) - 1) * 1px));
	border-radius: calc((var(--hbt-radius) - 1) * 1px);
	background: var(--hbt-track);
	z-index: 0;
	border: 0;
	container-type: inline-size;
	pointer-events: none;
	overflow: visible;
}

.haam-border-trail__trail {
	width: calc(var(--hbt-trail-size) * 1cqmin);
	aspect-ratio: 2 / 1;
	position: absolute;
	background: radial-gradient(
		100% 100% at right,
		var(--hbt-accent),
		transparent 50%
	);
	offset-path: border-box;
	offset-anchor: 100% 50%;
	animation: haam-border-trail-journey var(--hbt-speed) infinite linear;
	z-index: 1;
}

@container (width > 600px) {
	.haam-border-trail__trail {
		--hbt-speed: 12s;
	}
}

@keyframes haam-border-trail-journey {
	to {
		offset-distance: 100%;
	}
}

.haam-border-trail__content {
	position: relative;
	z-index: 2;
	background: linear-gradient(var(--hbt-canvas), var(--hbt-canvas)) padding-box,
		transparent;
	border: calc(var(--hbt-width) * 1px) solid transparent;
	border-radius: calc((var(--hbt-radius) - 1) * 1px);
	padding: 32px 28px;
	display: grid;
	gap: clamp(1rem, 2vmin + 0.5rem, 1.5rem);
	box-sizing: border-box;
}

.haam-border-trail__content > p {
	margin: 0;
	font-weight: 400;
	text-align: center;
	color: var(--hbt-text);
	line-height: 1.85;
}

.haam-border-trail__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--hbt-line);
}

.haam-border-trail__footer img {
	width: 2.5rem;
	height: 2.5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 2px solid var(--hbt-accent);
	object-fit: cover;
}

.haam-border-trail__footer span:nth-of-type(2) {
	color: var(--hbt-muted);
	font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
	.haam-border-trail__trail {
		animation: none;
		opacity: 0.35;
	}
}