/*
 * Home page: "Trusted Brands" client logo section.
 *
 * Placed directly below the hero (see digimark_client_brands_section() in
 * front-page.php). Assets live in assets/images/clients/logos/.
 *
 * Two theme rules shape how this is written. Both are documented at the top of
 * style.css, and the same workarounds are used elsewhere in the theme:
 *
 *  1. #primary, #primary * { border-color: transparent !important }
 *     Real borders never paint inside the page body, so the card and stat
 *     outlines are inset box-shadow rings instead. Do not convert them back.
 *  2. #primary h1, #primary h2 { font-weight, line-height, letter-spacing }
 *     outranks a plain class selector, so the typography rules below carry an
 *     #primary prefix. Without it the heading silently loses its sizing.
 *
 * The logo files are pre-processed: each has had its background removed, because
 * 21 of the 22 originals were opaque and brightness(0)/invert(1) turned them into
 * solid white blocks. See the notes in the deliverable folder for the mapping.
 */

.dm-clients {
	--dmc-bg: #08080a;
	--dmc-gold: #c8a46a;
	--dmc-text: #f2efe9;
	--dmc-muted: #9a968d;
	--dmc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--dmc-bg);
	padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 96px);
}

/* ---------------------------------------------------------------- background */

.dm-clients__grid {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, transparent 78%);
}

.dm-clients__aurora {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(70px);
	animation: dm-clients-drift 14s ease-in-out infinite alternate;
}

.dm-clients__aurora--a {
	width: 540px;
	height: 540px;
	top: -190px;
	left: -140px;
	background: radial-gradient(circle, rgba(200, 164, 106, 0.17), transparent 70%);
}

.dm-clients__aurora--b {
	width: 460px;
	height: 460px;
	top: 8%;
	right: -170px;
	background: radial-gradient(circle, rgba(200, 164, 106, 0.12), transparent 70%);
	animation-duration: 18s;
	animation-delay: -6s;
}

.dm-clients__aurora--c {
	width: 620px;
	height: 420px;
	bottom: -200px;
	left: 34%;
	background: radial-gradient(circle, rgba(200, 164, 106, 0.09), transparent 72%);
	animation-duration: 22s;
	animation-delay: -11s;
}

@keyframes dm-clients-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(38px, 26px, 0) scale(1.12); }
}

/* ------------------------------------------------------------------- layout */

.dm-clients__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}

/* -------------------------------------------------------------------- header */

/* The label's appearance (type, gold, flanking rules) is shared with every other
   eyebrow in style.css - see the "Eyebrow label" section there. This file loads
   after style.css, so a copy here would win; only alignment belongs here. */
.dm-clients__eyebrow {
	margin: 0;
	text-align: center;
}

#primary .dm-clients__title {
	margin: 20px auto 0;
	max-width: 760px;
	text-align: center;
	color: var(--dmc-text);
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 500;
	line-height: 1.14;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.dm-clients__accent {
	font-style: italic;
	background: linear-gradient(100deg, #e8cf9c 0%, var(--dmc-gold) 45%, #a8802f 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.dm-clients__sub {
	margin: 18px auto 0;
	max-width: 560px;
	text-align: center;
	color: var(--dmc-muted);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- marquee */

.dm-clients__marquees {
	margin-top: clamp(40px, 6vw, 64px);
	display: grid;
	gap: 22px;
}

.dm-clients__marquee {
	overflow: hidden;
	/* Headroom for the hover lift and scale, which overflow:hidden would
	   otherwise clip. */
	padding: 18px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}

.dm-clients__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

/* The seamless loop needs the duplicated logo set that client-brands.js adds, so
   the animation is gated on .is-ready. Without JS the row keeps its natural
   width and scrolls instead of showing a gap. */
.dm-clients__marquee:not(.is-ready) {
	overflow-x: auto;
	-webkit-mask-image: none;
	mask-image: none;
}

.dm-clients__marquee.is-ready.dm-clients__marquee--left  .dm-clients__track { animation: dm-clients-left 38s linear infinite; }
.dm-clients__marquee.is-ready.dm-clients__marquee--right .dm-clients__track { animation: dm-clients-right 46s linear infinite; }

/* The animation shorthand above resets animation-play-state to running, and its
   four classes outrank a plain .dm-clients__marquee:hover. Matching the
   specificity here and sitting later in the file is what makes the pause win. */
.dm-clients__marquee.is-ready:hover .dm-clients__track,
.dm-clients__marquee.is-ready:focus-within .dm-clients__track {
	animation-play-state: paused;
}

/* Margin rather than flex gap, so the two duplicated logo sets tile exactly and
   the -50% translation loops without a seam. */
.dm-clients__item {
	flex: none;
	margin-right: 22px;
}

@keyframes dm-clients-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes dm-clients-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* ------------------------------------------------------------- logo card */

.dm-clients__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 232px;
	height: 84px;
	border-radius: 16px;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.012));
	/* Inset ring, not a border - see the note at the top of this file. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	overflow: hidden;
	transition:
		transform 320ms var(--dmc-ease),
		box-shadow 320ms var(--dmc-ease);
}

/* The white hover backdrop sits on ::before so it can cross-fade; a background
   gradient on the card itself cannot be transitioned. */
.dm-clients__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: #f7f5f1;
	opacity: 0;
	transition: opacity 320ms var(--dmc-ease);
}

/* Logos that are drawn in white (see the note on auto-deals in functions.php)
   would disappear against the white backdrop, so those keep a dark one. */
.dm-clients__card--dark-hover::before { background: #1c2024; }

.dm-clients__card:hover::before,
.dm-clients__card:focus-within::before {
	opacity: 1;
}

.dm-clients__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(100deg,
		transparent 32%,
		rgba(255, 255, 255, 0.10) 45%,
		rgba(200, 164, 106, 0.18) 50%,
		transparent 64%);
	transform: translateX(-130%);
	transition: transform 0s;
}

.dm-clients__card:hover,
.dm-clients__card:focus-within {
	transform: translateY(-6px) scale(1.04);
	box-shadow:
		inset 0 0 0 1px rgba(200, 164, 106, 0.58),
		0 10px 24px rgba(0, 0, 0, 0.5),
		0 0 18px rgba(200, 164, 106, 0.14);
}

.dm-clients__card:hover::after,
.dm-clients__card:focus-within::after {
	transform: translateX(130%);
	transition: transform 950ms var(--dmc-ease);
}

#primary .dm-clients__logo {
	/* --dm-clients-k is set per logo by client-brands.js to even out visual
	   weight; it defaults to 1, so this is a plain ~36px height without JS. */
	position: relative;
	z-index: 1;                       /* above the white hover backdrop */
	height: calc(36px * var(--dm-clients-k, 1));
	width: auto;
	max-width: 82%;
	object-fit: contain;
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.55;
	transition: filter 320ms var(--dmc-ease), opacity 320ms var(--dmc-ease);
}

#primary .dm-clients__card:hover .dm-clients__logo,
#primary .dm-clients__card:focus-within .dm-clients__logo {
	filter: none;
	opacity: 1;
	/* If you would rather have a uniform gold hover than the original brand
	   colours, swap the two declarations above for:
	   	filter: brightness(0) saturate(100%) invert(74%) sepia(31%)
	   	        saturate(560%) hue-rotate(357deg) brightness(92%) contrast(88%);
	   	opacity: 0.95;                                                      */
}

/* ------------------------------------------------------------------- stats */

.dm-clients__stats {
	margin-top: clamp(40px, 6vw, 68px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.dm-clients__stat {
	padding: 26px 22px;
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
	text-align: center;
}

.dm-clients__value {
	display: block;
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	background: linear-gradient(100deg, #f0dcb2, var(--dmc-gold) 60%, #a8802f);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-variant-numeric: tabular-nums;
}

.dm-clients__label {
	display: block;
	margin-top: 10px;
	color: var(--dmc-muted);
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ scroll reveal */

.dm-clients__reveal {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 820ms var(--dmc-ease),
		transform 820ms var(--dmc-ease);
	transition-delay: var(--dm-clients-delay, 0ms);
}

.dm-clients__reveal.is-in {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 820px) {
	.dm-clients__stats { grid-template-columns: repeat(2, 1fr); }
	.dm-clients__card { width: 168px; height: 68px; border-radius: 14px; }
	#primary .dm-clients__logo { height: calc(28px * var(--dm-clients-k, 1)); max-width: 80%; }
	.dm-clients__item { margin-right: 16px; }
	.dm-clients__marquees { gap: 14px; }
	.dm-clients__inner { padding: 0 18px; }
}

@media (max-width: 480px) {
	.dm-clients__stat { padding: 20px 14px; }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.dm-clients__aurora { animation: none; }

	.dm-clients__track {
		animation: none !important;
		transform: translateX(0) !important;
	}

	/* Without the animation the logos must stay reachable, so let the row scroll. */
	.dm-clients__marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.dm-clients__reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.dm-clients__card,
	.dm-clients__card::before,
	.dm-clients__card::after,
	.dm-clients__logo { transition: none; }

	.dm-clients__card:hover,
	.dm-clients__card:focus-within { transform: none; }

	.dm-clients__card:hover::after,
	.dm-clients__card:focus-within::after { transform: translateX(-130%); }
}