.heuro-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--hc-height);
	background: var(--hc-bg);
	overflow: hidden;
}

.heuro-carousel,
.heuro-carousel * {
	box-sizing: border-box;
}

.heuro-carousel-viewport {
	position: relative;
	flex: 1;
	overflow: hidden;
	min-width: 0;
	scroll-behavior: smooth;
}

.heuro-has-fade .heuro-carousel-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}

.heuro-carousel-track {
	display: flex;
	align-items: center;
	gap: var(--hc-gap);
	width: max-content;
	min-height: var(--hc-height);
	animation: heuroCarouselScroll var(--hc-speed) linear infinite;
	will-change: transform;
}

.heuro-pauses:hover .heuro-carousel-track,
.heuro-pauses:focus-within .heuro-carousel-track {
	animation-play-state: paused;
}

.heuro-carousel-logo {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--hc-logo-width);
	width: var(--hc-logo-width);
	height: var(--hc-height);
	padding: 12px;
	border-radius: var(--hc-radius);
	text-decoration: none;
	transition: transform 0.25s ease, filter 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.heuro-carousel-logo img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.heuro-is-grayscale .heuro-carousel-logo img {
	filter: grayscale(1) saturate(0.8) opacity(0.76);
	transition: filter 0.25s ease;
}

.heuro-is-grayscale .heuro-carousel-logo:hover img,
.heuro-is-grayscale .heuro-carousel-logo:focus img {
	filter: grayscale(0) saturate(1) opacity(1);
}

.heuro-carousel-logo:hover,
.heuro-carousel-logo:focus {
	transform: translateY(-2px);
	outline: none;
}

.heuro-spotlight-enabled .heuro-logo-featured:hover,
.heuro-spotlight-enabled .heuro-logo-featured:focus {
	background: color-mix(in srgb, var(--hc-accent) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hc-accent) 36%, transparent);
}

.heuro-carousel-arrow {
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border: 1px solid color-mix(in srgb, var(--hc-accent) 30%, #d1d5db);
	border-radius: 50%;
	background: #fff;
	color: #023047;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(2, 48, 71, 0.08);
	transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.heuro-carousel-arrow::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}

.heuro-carousel-prev::before {
	transform: translateX(2px) rotate(-45deg);
}

.heuro-carousel-next::before {
	transform: translateX(-2px) rotate(135deg);
}

.heuro-carousel-arrow:hover,
.heuro-carousel-arrow:focus {
	color: var(--hc-accent);
	border-color: var(--hc-accent);
	transform: translateY(-1px);
	outline: none;
}

.heuro-animation-fade {
	animation: heuroFadeIn 0.7s ease both;
}

.heuro-animation-float {
	animation: heuroFloatIn 0.8s ease both;
}

.heuro-animation-rise {
	animation: heuroRiseIn 0.65s ease both;
}

.heuro-animation-scale {
	animation: heuroScaleIn 0.55s ease both;
}

@keyframes heuroCarouselScroll {
	from {
		transform: translate3d(0, 0, 0);
	}

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

@keyframes heuroFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes heuroFloatIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heuroRiseIn {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes heuroScaleIn {
	from {
		opacity: 0;
		transform: scale(0.96);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.heuro-carousel-track,
	.heuro-animation-fade,
	.heuro-animation-float,
	.heuro-animation-rise,
	.heuro-animation-scale {
		animation: none;
	}
}

@media (max-width: 640px) {
	.heuro-carousel {
		gap: 8px;
	}

	.heuro-carousel-arrow {
		flex-basis: 34px;
		width: 34px;
		height: 34px;
		font-size: 24px;
	}
}