/**
 * Curlo Logo Marquee — Realo-style infinite partner strip, Curlo tokens.
 * Seamless loop: view.js clones sets and sets --curlo-marquee-shift.
 */

.curlo-logo-marquee {
	--curlo-marquee-duration: 40s;
	--curlo-marquee-shift: 0px;
	--curlo-marquee-gap: clamp(2rem, 4vw, 3.5rem);
	--curlo-marquee-logo-h: 24px;

	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	padding: 1.5rem 0;
	font-family: var(--curlo-font-mono, ui-monospace, monospace);
}

/* Full-bleed when nested in .curlo-container */
.curlo-container .curlo-logo-marquee.alignfull,
.entry-content .curlo-logo-marquee.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.curlo-logo-marquee--pro,
.curlo-logo-marquee--code {
	background-color: var(--curlo-code-bg, #0b0e14);
	color: var(--curlo-code-text, #e6edf3);
}

.curlo-logo-marquee--pro {
	background-image:
		radial-gradient(650px circle at 12% -5%, rgb(20 53 31 / 0.28), transparent 60%),
		radial-gradient(700px circle at 100% 10%, rgb(16 35 58 / 0.32), transparent 55%);
}

.curlo-logo-marquee--ink { background: var(--curlo-ink); color: var(--curlo-text); }
.curlo-logo-marquee--surface { background: var(--curlo-surface); color: var(--curlo-text); }
.curlo-logo-marquee--surface-2 { background: var(--curlo-surface-2); color: var(--curlo-text); }

.curlo-logo-marquee__intro {
	margin-bottom: 1rem;
	text-align: center;
}

.curlo-logo-marquee__intro .curlo-eyebrow {
	margin: 0 0 0.35rem;
}

.curlo-logo-marquee--pro .curlo-logo-marquee__intro .curlo-eyebrow,
.curlo-logo-marquee--code .curlo-logo-marquee__intro .curlo-eyebrow {
	color: var(--curlo-green, #4ade80);
}

.curlo-logo-marquee__title {
	margin: 0;
	font-family: var(--curlo-font-sans, Inter, sans-serif);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: inherit;
	opacity: 0.9;
}

.curlo-logo-marquee__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.curlo-logo-marquee__carousel {
	position: relative;
	width: 100%;
}

.curlo-logo-marquee--arrows .curlo-logo-marquee__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-inline: contain;
}

.curlo-logo-marquee--arrows .curlo-logo-marquee__viewport::-webkit-scrollbar {
	display: none;
}

.curlo-logo-marquee__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.75rem, 6vw, 4.5rem);
	height: calc(var(--curlo-marquee-logo-h) + 2.5rem);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	transform: translateY(-50%);
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.curlo-logo-marquee__arrow--prev {
	left: 0;
	background: linear-gradient(90deg, var(--curlo-marquee-edge, var(--curlo-surface, #fff)) 35%, transparent);
}

.curlo-logo-marquee__arrow--next {
	right: 0;
	background: linear-gradient(270deg, var(--curlo-marquee-edge, var(--curlo-surface, #fff)) 35%, transparent);
}

.curlo-logo-marquee--pro,
.curlo-logo-marquee--code {
	--curlo-marquee-edge: var(--curlo-code-bg, #0b0e14);
}

.curlo-logo-marquee--ink { --curlo-marquee-edge: var(--curlo-ink); }
.curlo-logo-marquee--surface { --curlo-marquee-edge: var(--curlo-surface); }
.curlo-logo-marquee--surface-2 { --curlo-marquee-edge: var(--curlo-surface-2); }

.curlo-logo-marquee__chevron {
	display: block;
	width: 1.35rem;
	height: 1.35rem;
	filter: drop-shadow(0 0 8px var(--curlo-marquee-edge, #fff));
}

.curlo-logo-marquee__arrow:hover,
.curlo-logo-marquee__arrow:focus-visible {
	opacity: 1;
	color: var(--curlo-primary, #1a7f4b);
}

.curlo-logo-marquee--pro .curlo-logo-marquee__arrow:hover,
.curlo-logo-marquee--pro .curlo-logo-marquee__arrow:focus-visible,
.curlo-logo-marquee--code .curlo-logo-marquee__arrow:hover,
.curlo-logo-marquee--code .curlo-logo-marquee__arrow:focus-visible {
	color: var(--curlo-green, #4ade80);
}

.curlo-logo-marquee--fade .curlo-logo-marquee__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.curlo-logo-marquee__track {
	display: flex;
	width: max-content;
	gap: 0;
}

/* Editor / static preview */
.curlo-logo-marquee__track:not(.is-animated) {
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.curlo-logo-marquee__track:not(.is-animated) .curlo-logo-marquee__list {
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}

.curlo-logo-marquee--arrows .curlo-logo-marquee__track:not(.is-animated) {
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Only animate once view.js measured a shift and filled the track. */
.curlo-logo-marquee__track.is-animated.is-ready {
	animation: curlo-logo-marquee-scroll var(--curlo-marquee-duration) linear infinite;
}

.curlo-logo-marquee--rtl .curlo-logo-marquee__track.is-animated.is-ready {
	animation-name: curlo-logo-marquee-scroll-rtl;
}

.curlo-logo-marquee--pause-hover:hover .curlo-logo-marquee__track.is-animated.is-ready {
	animation-play-state: paused;
}

.curlo-logo-marquee__list {
	display: flex;
	align-items: center;
	gap: var(--curlo-marquee-gap);
	margin: 0;
	/* Same as inter-logo gap — sits between this set and the next clone. */
	padding: 0 var(--curlo-marquee-gap) 0 0;
	list-style: none;
	flex: 0 0 auto;
}

.curlo-logo-marquee__track:not(.is-animated) .curlo-logo-marquee__list {
	padding-right: 0;
}

.curlo-logo-marquee--arrows .curlo-logo-marquee__track:not(.is-animated) .curlo-logo-marquee__list {
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* Match auto-loop set padding so clones join without a double gap. */
	padding: 0 var(--curlo-marquee-gap) 0 0;
}

.curlo-logo-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.curlo-logo-marquee__link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	text-decoration: none;
}

.curlo-logo-marquee__item img {
	display: block;
	height: var(--curlo-marquee-logo-h);
	width: auto;
	max-width: calc(var(--curlo-marquee-logo-h) * 6);
	object-fit: contain;
	opacity: 0.72;
}

/* Light theme mono: muted dark logos */
.curlo-logo-marquee--mono .curlo-logo-marquee__item img {
	filter: grayscale(1) brightness(0.28);
	opacity: 0.65;
}

/* Dark theme + always-dark surfaces: force white logos */
[data-theme="dark"] .curlo-logo-marquee__item img,
.curlo-logo-marquee--pro .curlo-logo-marquee__item img,
.curlo-logo-marquee--code .curlo-logo-marquee__item img {
	filter: brightness(0) invert(1);
	opacity: 0.82;
}

.curlo-logo-marquee__item:hover img,
.curlo-logo-marquee__link:hover img,
.curlo-logo-marquee__link:focus-visible img,
[data-theme="dark"] .curlo-logo-marquee__item:hover img,
[data-theme="dark"] .curlo-logo-marquee__link:hover img,
[data-theme="dark"] .curlo-logo-marquee__link:focus-visible img,
.curlo-logo-marquee--pro .curlo-logo-marquee__item:hover img,
.curlo-logo-marquee--pro .curlo-logo-marquee__link:hover img,
.curlo-logo-marquee--code .curlo-logo-marquee__item:hover img,
.curlo-logo-marquee--code .curlo-logo-marquee__link:hover img {
	opacity: 1;
}

.curlo-logo-marquee__empty {
	padding: 1.25rem 1rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--curlo-muted, #8b97a7);
	border: 1px dashed var(--curlo-line, #253042);
	border-radius: var(--curlo-radius-sm, 0.5rem);
	margin: 0 24px;
}

.curlo-logo-marquee--pro .curlo-logo-marquee__empty,
.curlo-logo-marquee--code .curlo-logo-marquee__empty {
	color: var(--curlo-code-muted, #7e8ca0);
	border-color: var(--curlo-code-line, #1e2a3d);
}

/* Editor chrome */
.curlo-logo-marquee-editor__row {
	margin: 0.85rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--curlo-line, #dce3ec);
}

.curlo-logo-marquee-editor__preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	background: var(--curlo-surface-2, #e9edf3);
	border-radius: var(--curlo-radius-sm, 0.5rem);
}

.curlo-logo-marquee-editor__preview img {
	height: 1.5rem;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}

.curlo-logo-marquee-editor__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.35rem;
}

@keyframes curlo-logo-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-1 * var(--curlo-marquee-shift))); }
}

@keyframes curlo-logo-marquee-scroll-rtl {
	from { transform: translateX(calc(-1 * var(--curlo-marquee-shift))); }
	to { transform: translateX(0); }
}

@media (max-width: 600px) {
	.curlo-logo-marquee__arrow {
		width: 2.5rem;
	}

	.curlo-logo-marquee__chevron {
		width: 1.15rem;
		height: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.curlo-logo-marquee__track.is-animated {
		animation: none !important;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 24px;
		box-sizing: border-box;
	}

	.curlo-logo-marquee__track.is-animated .curlo-logo-marquee__list[aria-hidden="true"] {
		display: none;
	}

	.curlo-logo-marquee__track.is-animated .curlo-logo-marquee__list {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}
}