/* Reference strip: two equal groups make the 50% travel a seamless loop. */
.home-marquee {
	block-size: 50px;
	padding-block: 16px;
	border-block: 1px solid var(--dermobliss-border-default);
	background: var(--dermobliss-background-secondary);
	overflow: hidden;
}

.home-marquee__track {
	display: flex;
	inline-size: max-content;
	animation-name: home-marquee-scroll;
	animation-duration: 42s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	will-change: transform;
}

.home-marquee__group,
.home-marquee__item {
	display: flex;
	flex: none;
	align-items: center;
}

.home-marquee__text {
	padding-inline: 32px;
	color: var(--dermobliss-text-secondary);
	font-family: var(--dermobliss-font-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	white-space: nowrap;
}

.home-marquee__separator {
	color: var(--dermobliss-accent-gold);
	font-size: 8px;
	line-height: 12px;
}

@keyframes home-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.home-marquee {
		block-size: auto;
	}

	.home-marquee__track {
		inline-size: auto;
		animation: none;
		transform: none;
		will-change: auto;
	}

	.home-marquee__group {
		flex: 0 0 100%;
		min-inline-size: 0;
		flex-wrap: wrap;
		row-gap: 8px;
	}

	.home-marquee__item {
		flex: 0 1 auto;
		max-inline-size: 100%;
	}

	.home-marquee__group + .home-marquee__group,
	.home-marquee__group .home-marquee__item:nth-child(n + 4) {
		display: none;
	}

	.home-marquee__text {
		min-inline-size: 0;
		white-space: normal;
	}
}