/**
 * _partials/client-marquee.css — horizontal scrolling client logo strip.
 *
 * Loaded by src/index.njk + src/about.njk via their `styles:` frontmatter
 * arrays (shared partial).
 *
 * Markup in src/_includes/partials/client-marquee.njk. Pauses on
 * hover/focus-within; honors prefers-reduced-motion.
 *
 * Extracted from src/assets/css/app.css CLIENT MARQUEE section as
 * part of #147 PR 3 — CSS file split: complex pages. Content byte-
 * for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	CLIENT MARQUEE
	─────────────────────────────────────────────────────────────────────
	Horizontal scrolling strip of client wordmarks. Markup lives in
	`src/_includes/partials/client-marquee.njk`. The reel is triplicated
	server-side (3 × featured-clients passes in a single flex track) so
	the CSS keyframe animation can translateX(-33.33%) across one cycle
	and have content under the user's eye no matter where the loop is.
	Pauses on hover/focus-within; respects prefers-reduced-motion.

	Class prefix: `innov8-cm-`.
	───────────────────────────────────────────────────────────────────── */

@layer components {
	.innov8-cm {
		position: relative;
		padding: clamp(40px, 5vw, 64px) 0;
		border-top: 1px solid var(--border-subtle);
		border-bottom: 1px solid var(--border-subtle);
		/* ink-950 alternation against the ink-1000 hero above and the
			ink-1000 Featured Work below — gives the marquee its own
			band rather than fading into the page background. */
		background:
			linear-gradient(180deg, transparent 0%, rgba(31, 86, 245, 0.03) 50%, transparent 100%), var(--color-ink-950);
		overflow: hidden;
	}

	.innov8-cm-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 24px;
		flex-wrap: wrap;
		margin-bottom: clamp(24px, 3vw, 40px);
	}

	.innov8-cm-eyebrow {
		flex: 0 1 auto;
	}

	.innov8-cm-arrow-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-family: var(--font-mono);
		font-size: var(--text-body-sm);
		letter-spacing: 0.04em;
		color: var(--accent-spark);
		text-decoration: none;
		transition: gap var(--duration-base) var(--ease-out);
	}

	.innov8-cm-arrow-link:hover,
	.innov8-cm-arrow-link:focus-visible {
		gap: 12px;
		outline: none;
	}

	.innov8-cm-arrow {
		transition: transform var(--duration-base) var(--ease-out);
	}

	.innov8-cm-arrow-link:hover .innov8-cm-arrow,
	.innov8-cm-arrow-link:focus-visible .innov8-cm-arrow {
		transform: translateX(4px);
	}

	.innov8-cm-stage {
		position: relative;
		overflow: hidden;
		mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	}

	/* Belt-and-suspenders edge fades for browsers without mask-image. */
	.innov8-cm-fade {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 80px;
		pointer-events: none;
		z-index: 2;
	}

	.innov8-cm-fade-l {
		left: 0;
		background: linear-gradient(90deg, var(--color-ink-1000), transparent);
	}

	.innov8-cm-fade-r {
		right: 0;
		background: linear-gradient(270deg, var(--color-ink-1000), transparent);
	}

	.innov8-cm-track {
		display: inline-flex;
		align-items: center;
		gap: clamp(40px, 5vw, 72px);
		padding: 14px 32px;
		animation: innov8-cm-scroll 40s linear infinite;
		will-change: transform;
	}

	.innov8-cm-stage:hover .innov8-cm-track,
	.innov8-cm-stage:focus-within .innov8-cm-track {
		animation-play-state: paused;
	}

	@keyframes innov8-cm-scroll {
		from {
			transform: translateX(0);
		}
		to {
			transform: translateX(-33.3333%);
		}
	}

	.innov8-cm-cell {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px 12px;
		opacity: 0.65;
		transition:
			opacity var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	.innov8-cm-cell:hover,
	.innov8-cm-cell:focus-visible {
		opacity: 1;
		transform: translateY(-2px);
		outline: none;
	}

	/* Logos render with their natural colors. The earlier
		`filter: brightness(0) invert(1)` silhouette treatment converted
		non-transparent-BG PNGs (several of the original client logos
		in `src/assets/images/clients/` lack alpha channels) into solid
		white rectangles. Natural-color rendering trades a touch of
		visual cohesion for never reading as broken. Re-introduce the
		silhouette filter once the logo asset set is uniformly
		alpha-clean — track via a follow-up content ticket. */
	.innov8-cm-logo {
		max-height: 32px;
		max-width: 160px;
		width: auto;
		height: auto;
		object-fit: contain;
	}

	@media (prefers-reduced-motion: reduce) {
		.innov8-cm-track {
			animation: none;
		}
		.innov8-cm-cell,
		.innov8-cm-cell:hover,
		.innov8-cm-cell:focus-visible,
		.innov8-cm-arrow,
		.innov8-cm-arrow-link:hover .innov8-cm-arrow,
		.innov8-cm-arrow-link:focus-visible .innov8-cm-arrow {
			transition: none;
			transform: none;
		}
	}
}