/*
 * Virtina child: home page "Our B2B Clients" logo strip.
 * Loaded only on template-home-vch.php. Colors come from tokens, never hard-coded in components.
 *
 * Logo sizes are the Figma frame sizes (1728px wide). Each logo sets --vch-logo-w and --vch-logo-h,
 * and --vch-logo-scale shrinks them on smaller screens.
 */

:root {
	--vch-color-clients-band: #f6f6f6;
	--vch-color-clients-tab-muted: #6b6b6b;
}

/* Keep the hero above the clients strip, so the strip slides up from behind it. */
.vch-hero {
	z-index: 2;
}

.vch-clients {
	--vch-clients-reveal-distance: 30vh;

	position: relative;
	z-index: 1;
	padding: 58px 0 70px;
	overflow: hidden;
}

/*
 * Scroll-linked reveal. The strip starts shifted up under the hero and settles into place
 * as the user scrolls. Browsers without scroll-driven animations show the strip in place.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.vch-clients {
			animation: vch-clients-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}

		/* The hero shrinks as it scrolls out, while the clients strip rises from behind it. */
		.vch-hero {
			transform-origin: center top;
			animation: vch-hero-scale linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}

		/* The grey band shrinks slightly while the section scrolls past. Its mask keeps the rounded corners. */
		.vch-clients__band {
			transform-origin: center;
			animation: vch-clients-band-scale linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes vch-hero-scale {
	from {
		transform: scale(1);
		border-radius: 0;
	}

	to {
		transform: scale(0.94);
		border-radius: 60px;
	}
}

@keyframes vch-clients-band-scale {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(0.94);
	}
}

@keyframes vch-clients-reveal {
	from {
		transform: translateY(calc(-1 * var(--vch-clients-reveal-distance))) scale(0.9);
	}

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

/*
 * Light grey trapezoid behind the grid: narrower at the top, full width at the bottom.
 * The shape is a mask so all four corners get a 30px radius. clip-path cannot round corners.
 */
.vch-clients__band {
	position: absolute;
	inset: 0;
	background: var(--vch-color-clients-band);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1728 404' preserveAspectRatio='none'%3E%3Cpath d='M94 0H1641Q1671 0 1675.2 29.7L1723.8 374.3Q1728 404 1698 404H30Q0 404 4.7 374.4L59.3 29.6Q64 0 94 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1728 404' preserveAspectRatio='none'%3E%3Cpath d='M94 0H1641Q1671 0 1675.2 29.7L1723.8 374.3Q1728 404 1698 404H30Q0 404 4.7 374.4L59.3 29.6Q64 0 94 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	pointer-events: none;
}

.vch-clients__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}

.vch-clients__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 40px;
	margin: 0 0 37px;
}

.vch-clients__tab {
	margin: 0;
	padding: 4px 2px;
	border: 0;
	background: none;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.48px;
	color: var(--vch-color-clients-tab-muted);
	cursor: pointer;
}

.vch-clients__tab:hover,
.vch-clients__tab[aria-selected='true'] {
	color: var(--vch-color-text);
}

.vch-clients__tab:focus-visible {
	outline: 2px solid var(--vch-color-accent-teal);
	outline-offset: 2px;
}

.vch-clients__more {
	margin: 24px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -0.48px;
	text-align: center;
	color: var(--vch-color-clients-tab-muted);
}

.vch-clients__grid[hidden] {
	display: none;
}

.vch-clients__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px 4.7px;
	margin: 0 auto;
	max-width: 100%;
	padding: 0;
	list-style: none;
}

@media (max-width: 1759px) {
	.vch-clients__grid {
		max-width: 90%;
	}
}

.vch-clients__item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 136px;
	margin: 0;
	padding: 16px;
	box-sizing: border-box;
	border-radius: 25px;
	background: var(--vch-color-surface);
}

.vch-clients__logo {
	display: block;
	width: calc(var(--vch-logo-w) * var(--vch-logo-scale, 1));
	height: calc(var(--vch-logo-h) * var(--vch-logo-scale, 1));
	max-width: 100%;
	object-fit: contain;
	filter: grayscale(1);
	transition: filter 0.4s ease;
	pointer-events: none;
}

/* Hovering a card fades the logo to its original colors. */
@media (hover: hover) {
	.vch-clients__item:hover .vch-clients__logo {
		filter: grayscale(0);
	}
}

/* Logo sizes from the Figma frame. */
.vch-clients__logo--sony { --vch-logo-w: 138px; --vch-logo-h: 58px; }
.vch-clients__logo--mms { --vch-logo-w: 129px; --vch-logo-h: 29px; }
.vch-clients__logo--tph { --vch-logo-w: 158px; --vch-logo-h: 47px; }
.vch-clients__logo--bh { --vch-logo-w: 76px; --vch-logo-h: 76px; }
.vch-clients__logo--makro { --vch-logo-w: 73px; --vch-logo-h: 74px; }
.vch-clients__logo--lts { --vch-logo-w: 98px; --vch-logo-h: 98px; }
.vch-clients__logo--sar { --vch-logo-w: 104px; --vch-logo-h: 42px; }
.vch-clients__logo--cfs { --vch-logo-w: 157px; --vch-logo-h: 65px; }
.vch-clients__logo--metro { --vch-logo-w: 154px; --vch-logo-h: 26px; }
.vch-clients__logo--energy { --vch-logo-w: 96px; --vch-logo-h: 47px; }
.vch-clients__logo--ace { --vch-logo-w: 123px; --vch-logo-h: 52px; }
.vch-clients__logo--itskins { --vch-logo-w: 182px; --vch-logo-h: 76px; }
.vch-clients__logo--renova { --vch-logo-w: 191px; --vch-logo-h: 38px; }
.vch-clients__logo--kirks { --vch-logo-w: 128px; --vch-logo-h: 45px; }
.vch-clients__logo--rawpaws { --vch-logo-w: 160px; --vch-logo-h: 42px; }
.vch-clients__logo--cookie { --vch-logo-w: 92px; --vch-logo-h: 58px; }
.vch-clients__logo--samina { --vch-logo-w: 87px; --vch-logo-h: 76px; }
.vch-clients__logo--3030 { --vch-logo-w: 167px; --vch-logo-h: 37px; }
.vch-clients__logo--wetow { --vch-logo-w: 192px; --vch-logo-h: 37px; }
.vch-clients__logo--gaugesaver { --vch-logo-w: 145px; --vch-logo-h: 52px; }
.vch-clients__logo--healthypath { --vch-logo-w: 96px; --vch-logo-h: 67px; }
.vch-clients__logo--landscape { --vch-logo-w: 114px; --vch-logo-h: 42px; }
.vch-clients__logo--plum { --vch-logo-w: 155px; --vch-logo-h: 52px; }
.vch-clients__logo--housesavings { --vch-logo-w: 118px; --vch-logo-h: 55px; }
.vch-clients__logo--bill1st { --vch-logo-w: 116px; --vch-logo-h: 32px; }
.vch-clients__logo--skeps { --vch-logo-w: 127px; --vch-logo-h: 48px; }
.vch-clients__logo--sellix { --vch-logo-w: 142px; --vch-logo-h: 41px; }
.vch-clients__logo--jifiti { --vch-logo-w: 108px; --vch-logo-h: 40px; }
.vch-clients__logo--latitude { --vch-logo-w: 79px; --vch-logo-h: 68px; }
.vch-clients__logo--prime { --vch-logo-w: 72px; --vch-logo-h: 72px; }
.vch-clients__logo--clik2pay { --vch-logo-w: 160px; --vch-logo-h: 36px; }
.vch-clients__logo--hips { --vch-logo-w: 81px; --vch-logo-h: 52px; }
.vch-clients__logo--treez { --vch-logo-w: 90px; --vch-logo-h: 33px; }
.vch-clients__logo--trustmeup { --vch-logo-w: 112px; --vch-logo-h: 58px; }
.vch-clients__logo--taxjar { --vch-logo-w: 149px; --vch-logo-h: 38px; }
.vch-clients__logo--firework { --vch-logo-w: 181px; --vch-logo-h: 48px; }

/* Below 1280px: one swipeable row that scrolls on its own (js/vch-clients-slider.js). The row bleeds to the screen edges. */
@media (max-width: 1279px) {
	/* No scroll-linked scale or reveal on the hero or the strip. */
	.vch-hero,
	.vch-clients,
	.vch-clients__band {
		animation: none;
	}

	/* The trapezoid band gives way to a flat band behind the scrolling row. */
	.vch-clients {
		background: var(--vch-color-clients-band);
	}

	.vch-clients__band {
		display: none;
	}

	.vch-clients__grid {
		display: flex;
		gap: 8px;
		max-width: none;
		margin-inline: -20px;
		padding: 0 20px 4px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent);
	}

	.vch-clients__grid::-webkit-scrollbar {
		display: none;
	}

	.vch-clients__item {
		flex: 0 0 200px;
		min-height: 136px;
	}
}

/* Below 768px: smaller cards and logos. */
@media (max-width: 767px) {
	.vch-clients {
		padding: 48px 0 56px;
	}

	.vch-clients__tabs {
		margin-bottom: 24px;
	}

	.vch-clients__item {
		flex-basis: 150px;
		min-height: 112px;
		border-radius: 16px;
	}

	.vch-clients__logo {
		--vch-logo-scale: 0.7;
	}
}

/*
 * Signal: a short teal light travels around each card's border.
 * A rotating conic gradient is masked to a 1.5px ring. The angle is registered with @property
 * so the browser can animate it. Cards start at staggered points so they do not move in step.
 */
@property --vch-signal-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
	.vch-clients__item {
		position: relative;
		isolation: isolate;
	}

	.vch-clients__item::before {
		content: '';
		position: absolute;
		inset: 0;
		padding: 1.5px;
		border-radius: inherit;
		background: conic-gradient(
			from var(--vch-signal-angle),
			transparent 0deg,
			transparent 280deg,
			var(--vch-color-accent-teal) 330deg,
			transparent 360deg
		);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
		pointer-events: none;
		animation: vch-clients-signal 4s linear infinite;
	}

	.vch-clients__item:nth-child(3n + 2)::before {
		animation-delay: -1.5s;
	}

	.vch-clients__item:nth-child(3n)::before {
		animation-delay: -3s;
	}
}

@keyframes vch-clients-signal {
	to {
		--vch-signal-angle: 360deg;
	}
}