/**
 * The occasions marquee.
 *
 * Two identical tracks sit side by side and both slide left by exactly half
 * the pair's width, so the moment the first track clears the viewport the
 * second is precisely where it started. No JavaScript, no gap, no jump.
 */

.bh-marquee {
	overflow: hidden;
	padding: 0;
	background: var(--bh-gold);
	border-block: 1px solid color-mix(in srgb, var(--bh-ink) 22%, transparent);
}

.bh-marquee__viewport {
	display: flex;
	width: max-content;
	/* The edges soften into the band rather than cutting a word in half. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	animation: bh-marquee-slide 44s linear infinite;
}

.bh-marquee__track {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-marquee__track li {
	display: inline-flex;
	align-items: center;
	gap: clamp(1.1rem, 2.4vw, 2.1rem);
	padding-inline: clamp(0.55rem, 1.2vw, 1.05rem);
}

.bh-marquee__word {
	font-family: var(--bh-display);
	font-size: clamp(1.15rem, 2vw, 1.7rem);
	font-weight: 500;
	letter-spacing: 0.015em;
	white-space: nowrap;
	color: color-mix(in srgb, var(--bh-ink) 88%, var(--bh-oxblood));
	padding-block: clamp(0.55rem, 1.4vw, 0.95rem);
}

.bh-marquee__mark {
	font-size: 0.7em;
	line-height: 1;
	color: color-mix(in srgb, var(--bh-oxblood) 72%, transparent);
}

/* Hovering pauses it, so a word can actually be read. */
.bh-marquee:hover .bh-marquee__viewport,
.bh-marquee:focus-within .bh-marquee__viewport {
	animation-play-state: paused;
}

@keyframes bh-marquee-slide {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bh-marquee__viewport {
		animation: none;
		/* Standing still, one track is all that should be readable. */
		mask-image: none;
		-webkit-mask-image: none;
	}

	.bh-marquee__track[aria-hidden="true"] {
		display: none;
	}
}