/*
 * Homepage section 5: who we build for (VOY-920, spec KB-512).
 *
 * Loaded on the front page by the assets/sections loader (VOY-908). Tokens
 * only, no raw hex. Behaviour is assets/sections/home-industries.js; it adds
 * .is-js, and .is-pointer or .is-touch, to .vy-ind. Without JavaScript the
 * rows are a static cloud of links.
 *
 * CONTENT EDGE and SPACING follow Ben's VOY-908 ruling, not the spec's 80px
 * gutters and 112px top padding: everything, rows included, sits on
 * max(40px, (width - wide) / 2), and the section adds no top padding.
 *
 * SCALE, Ben's review of the first build (2026-09-25): the spec's 84px words
 * out-shouted section 4's 64px service names, the edge-to-edge rows broke the
 * content edge every other section holds, and 48px between sections was
 * tight. So words are 48px (thumbnails, dots and gaps scale with them), the
 * rows stop at the content edge and fade in and out there, and section 4's
 * bottom padding is 96px, the proof bar's rhythm. This section adds no bottom
 * padding: the section after it (home-rates) still brings its own 96px top
 * padding and a 16px block gap, so 96px here stacked to a 208px gap.
 */

.wp-block-group.vy-ind {
	--ind-pad: max(40px, calc((100% - var(--wp--custom--layout--wide, 1440px)) / 2));
	--ind-ease: cubic-bezier(0.2, 0, 0, 1);
	--ind-frame: var(--accent-bright);
	--ind-word: 48px;
	--ind-word-gap: 16px;
	--ind-thumb-w: 88px;
	--ind-thumb-h: 52px;
	--ind-thumb-r: 10px;
	--ind-thumb-gap: 18px;
	--ind-dot: 7px;
	--ind-speed: 1;
	position: relative;
	margin-block-start: 0;
	padding: 0;
	background: var(--bg-canvas);
	color: var(--fg-1);
	overflow: hidden;
}

.vy-ind :is(p, h2, .wp-block-group, .wp-block-image) {
	margin: 0;
}

/* The planet mark: a disc and a tilted ring, drawn in CSS so no decorative
   block exists for an editor to delete. */
.vy-ind .vy-ind__eyebrow::before,
.vy-ind .vy-ind__foot-line::before,
.vy-ind .vy-ind__slot-title::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.55em;
	vertical-align: -0.1em;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--accent-bright) 0 32%, transparent 34%),
		radial-gradient(ellipse 50% 16% at 50% 50%, transparent 76%, var(--accent-bright) 80%, var(--accent-bright) 92%, transparent 96%);
	transform: rotate(-24deg);
}

/* ---- Header ------------------------------------------------------------- */

.vy-ind .vy-ind__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 64px;
	padding: 0 var(--ind-pad);
	margin-bottom: 40px;
}
.vy-ind .vy-ind__titles { max-width: 780px; flex: 1 1 auto; }
.vy-ind .vy-ind__eyebrow {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
	margin-bottom: 16px;
}
.vy-ind .vy-ind__h2 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 52px;
	line-height: 1.04;
	letter-spacing: -0.03em;
	color: var(--fg-1);
}
.vy-ind .vy-ind__h2 em {
	font-style: normal;
	background: linear-gradient(100deg, var(--fg-1) 0 40%, var(--accent-bright) 50%, var(--fg-1) 60% 100%) 100% 0 / 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.vy-ind .vy-ind__h2 em.is-shine { animation: vy-ind-shine 1100ms var(--ind-ease) both; }
@keyframes vy-ind-shine {
	from { background-position: 100% 0; }
	to   { background-position: 0 0; }
}
.vy-ind .vy-ind__intros { max-width: 440px; flex: 0 3 440px; min-width: 260px; }
.vy-ind .vy-ind__intro {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
	color: var(--fg-2);
}
.vy-ind .vy-ind__intro--touch { display: none; }
.vy-ind.is-touch .vy-ind__intro--pointer { display: none; }
.vy-ind.is-touch .vy-ind__intro--touch { display: block; }

/* ---- Rows ---------------------------------------------------------------- */

/* The rows stop at the content edge and fade out there. The mask is the
   rows' alpha only, so its stops are keywords, not colours. */
.vy-ind .vy-ind__rows {
	position: relative;
	margin: 0 var(--ind-pad);
	-webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
	mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}
.vy-ind .vy-ind__row {
	overflow: hidden;
	padding: 8px 0;
}
.vy-ind .vy-ind__track {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
/* Drift: the script wraps each track and its aria-hidden copy in a lane and
   runs it 0 to -50%. Rows 1 and 3 run left, 2 and 4 right. */
.vy-ind .vy-ind__lane {
	display: flex;
	width: max-content;
	animation: vy-ind-left calc(var(--ind-dur) * var(--ind-speed)) linear infinite;
	will-change: transform;
}
.vy-ind .vy-ind__lane > .vy-ind__track { flex-wrap: nowrap; padding: 0; }
.vy-ind .vy-ind__row--1 { --ind-dur: 78s; }
.vy-ind .vy-ind__row--2 { --ind-dur: 92s; }
.vy-ind .vy-ind__row--3 { --ind-dur: 84s; }
.vy-ind .vy-ind__row--4 { --ind-dur: 100s; }
.vy-ind .vy-ind__row--2 .vy-ind__lane,
.vy-ind .vy-ind__row--4 .vy-ind__lane { animation-name: vy-ind-right; }
.vy-ind .vy-ind__row.is-paused .vy-ind__lane,
.vy-ind.is-off .vy-ind__lane { animation-play-state: paused; }
@keyframes vy-ind-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vy-ind-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---- Items --------------------------------------------------------------- */

.vy-ind .vy-ind__word { flex: none; margin-right: var(--ind-word-gap); }
.vy-ind .vy-ind__word a {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--ind-word);
	line-height: 1.15;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: var(--fg-5);
	text-decoration: none;
	transition: color 200ms;
}
.vy-ind .vy-ind__row.is-lit .vy-ind__word a { color: var(--fg-4); }
/* Locked and shine rules carry the lit-row rule's specificity and come after
   it, so they win; at three classes they lost and a locked word stayed fg-4. */
.vy-ind .vy-ind__row .vy-ind__word.is-locked a { color: var(--fg-1); }
/* The single shine on a locked word. */
.vy-ind .vy-ind__row .vy-ind__word a.is-shine {
	background: linear-gradient(100deg, var(--fg-1) 0 40%, var(--accent-bright) 50%, var(--fg-1) 60% 100%) 100% 0 / 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: vy-ind-shine 900ms var(--ind-ease) both;
}

.vy-ind .vy-ind__thumb {
	position: relative;
	flex: none;
	width: var(--ind-thumb-w);
	height: var(--ind-thumb-h);
	margin-right: calc(var(--ind-thumb-gap) * 2 + var(--ind-dot));
	border: 1px solid var(--border-1);
	border-radius: var(--ind-thumb-r);
	opacity: 0.45;
	transition: opacity 200ms, transform 200ms var(--ind-ease);
}
.vy-ind .vy-ind__thumb > a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}
.vy-ind .vy-ind__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}
/* The separator dot, hung off the thumbnail so no empty block exists. */
.vy-ind .vy-ind__thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-1 * (var(--ind-thumb-gap) + var(--ind-dot)));
	width: var(--ind-dot);
	height: var(--ind-dot);
	margin-top: calc(var(--ind-dot) / -2);
	border-radius: 50%;
	background: var(--border-1);
}
.vy-ind .vy-ind__row.is-lit .vy-ind__thumb { opacity: 0.8; }
.vy-ind .vy-ind__row .vy-ind__thumb.is-locked { opacity: 1; transform: scale(1.08); }

/* Icon tile: a magenta dot grid and a glyph. The link text names the
   featured project for assistive tech and is not drawn. */
.vy-ind .vy-ind__thumb--tile > a {
	position: relative;
	font-size: 0;
	color: transparent;
	background:
		radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 32%, transparent) 1.2px, transparent 1.4px) 0 0 / 7px 7px,
		var(--bg-panel);
}
.vy-ind .vy-ind__thumb--tile > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--fg-2) 0 30%, transparent 32%),
		radial-gradient(ellipse 50% 16% at 50% 50%, transparent 76%, var(--fg-2) 80%, var(--fg-2) 92%, transparent 96%);
	transform: rotate(-24deg);
}

.vy-ind .vy-ind__word a:focus,
.vy-ind .vy-ind__thumb a:focus { outline: none; }
/* Without the script the frame cannot draw, so the focus ring is plain. */
.vy-ind:not(.is-js) .vy-ind__word a:focus-visible,
.vy-ind:not(.is-js) .vy-ind__thumb a:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 4px;
}

/* ---- Cursor, frames, trail ----------------------------------------------- */

.vy-ind.is-pointer .vy-ind__rows,
.vy-ind.is-pointer .vy-ind__rows a { cursor: none; }

.vy-ind .vy-ind__trail {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	image-rendering: pixelated;
	z-index: 2;
}

/* The cursor and card are appended into a flow-layout group, whose block gap
   would otherwise give them a top margin and shift every frame down. */
.vy-ind .vy-ind__cursor,
.vy-ind .vy-ind__card { margin: 0; }

.vy-ind .vy-ind__cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	border: 2px solid var(--accent-bright);
	border-radius: 50%;
	pointer-events: none;
	z-index: 5;
	opacity: 0;
	transition:
		width 200ms var(--ind-ease),
		height 200ms var(--ind-ease),
		border-radius 200ms var(--ind-ease),
		border-color 150ms,
		opacity 150ms;
}
.vy-ind .vy-ind__cursor.is-on { opacity: 1; }
/* The centre dot, only while free. */
.vy-ind .vy-ind__cursor::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: var(--accent-bright);
	transition: opacity 150ms;
}
.vy-ind .vy-ind__cursor:is(.is-word, .is-thumb)::after { opacity: 0; }
.vy-ind .vy-ind__cursor.is-locked {
	transition:
		left 200ms var(--ind-ease),
		top 200ms var(--ind-ease),
		width 200ms var(--ind-ease),
		height 200ms var(--ind-ease),
		border-radius 200ms var(--ind-ease),
		border-color 150ms,
		opacity 150ms;
}
/* Word lock: four corner brackets, no border. */
.vy-ind .vy-ind__cursor.is-word {
	border-color: transparent;
	border-radius: 3px;
	--b: var(--ind-bracket, 12px);
	background:
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 0 / var(--b) 2px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 0 / 2px var(--b),
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 0 / var(--b) 2px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 0 / 2px var(--b),
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 100% / var(--b) 2px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 100% / 2px var(--b),
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 100% / var(--b) 2px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 100% / 2px var(--b);
	background-repeat: no-repeat;
}
/* Thumbnail lock: a rounded frame in the case's service colour, with a
   crosshair tick at each edge midpoint. */
.vy-ind .vy-ind__cursor.is-thumb {
	border-color: var(--ind-frame);
	border-radius: var(--ind-frame-r, 16px);
	background:
		linear-gradient(var(--ind-frame), var(--ind-frame)) 50% -1px / 1.5px 8px,
		linear-gradient(var(--ind-frame), var(--ind-frame)) 50% calc(100% + 1px) / 1.5px 8px,
		linear-gradient(var(--ind-frame), var(--ind-frame)) -1px 50% / 8px 1.5px,
		linear-gradient(var(--ind-frame), var(--ind-frame)) calc(100% + 1px) 50% / 8px 1.5px;
	background-repeat: no-repeat;
}

/* ---- Cards --------------------------------------------------------------- */

.vy-ind .vy-ind__card {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 6;
	box-sizing: border-box;
	pointer-events: none;
	background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--border-1);
	border-radius: 16px;
	box-shadow: 0 24px 64px -12px color-mix(in srgb, var(--bg-canvas) 85%, transparent), 0 2px 8px color-mix(in srgb, var(--bg-canvas) 60%, transparent);
	opacity: 0;
	transform: scale(0.94);
	transition: left 90ms linear, top 90ms linear, opacity 180ms var(--ind-ease), transform 180ms var(--ind-ease);
}
.vy-ind .vy-ind__card.is-on { opacity: 1; transform: scale(1); }
.vy-ind .vy-ind__card--word { width: 300px; padding: 20px; }
.vy-ind .vy-ind__card--thumb { width: 340px; padding: 18px; border-color: var(--ind-frame); }
.vy-ind .vy-ind__card-body { display: flex; flex-direction: column; gap: 10px; }
.vy-ind .vy-ind__card-body.is-fresh { animation: vy-ind-up 380ms var(--ind-ease) both; }
@keyframes vy-ind-up {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}
.vy-ind .vy-ind__card-top { display: flex; align-items: center; gap: 12px; }
.vy-ind .vy-ind__card-tile {
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--accent-bright);
	border-radius: 10px;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 32%, transparent) 1.2px, transparent 1.4px) 0 0 / 7px 7px, var(--bg-panel);
}
.vy-ind .vy-ind__card-shot {
	position: relative;
	width: 100%;
	aspect-ratio: 304 / 176;
	border-radius: 10px;
	overflow: hidden;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 32%, transparent) 1.2px, transparent 1.4px) 0 0 / 7px 7px, var(--bg-panel);
}
.vy-ind .vy-ind__card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vy-ind :is(.vy-ind__card-tile, .vy-ind__card-shot.is-tile)::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--fg-2) 0 30%, transparent 32%),
		radial-gradient(ellipse 50% 16% at 50% 50%, transparent 76%, var(--fg-2) 80%, var(--fg-2) 92%, transparent 96%);
	transform: rotate(-24deg);
}
.vy-ind .vy-ind__card-kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-bright);
}
.vy-ind .vy-ind__card--thumb .vy-ind__card-kicker { color: var(--ind-frame); }
.vy-ind .vy-ind__card-title {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 1.25;
	color: var(--fg-1);
}
.vy-ind .vy-ind__card--thumb .vy-ind__card-title { font-size: 19px; line-height: 1.35; }
.vy-ind .vy-ind__card-clients { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.vy-ind .vy-ind__card-built { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-4); }
.vy-ind .vy-ind__card-note { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--fg-3); }
.vy-ind .vy-ind__card-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-hair);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--fg-1);
	text-decoration: none;
}
.vy-ind .vy-ind__card-link::after { content: "\2192" / ""; color: var(--accent-bright); }

/* ---- Touch: the card slot below the rows --------------------------------- */

.vy-ind .vy-ind__slot { display: none; }
.vy-ind.is-touch .vy-ind__slot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 24px var(--ind-pad) 0;
	min-height: 330px;
	padding: 18px;
	border-radius: 16px;
	background: var(--bg-panel);
}
.vy-ind .vy-ind__slot-title { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--fg-1); }
.vy-ind .vy-ind__slot-text { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--fg-3); }
.vy-ind .vy-ind__slot .vy-ind__card-link { min-height: 44px; }
.vy-ind .vy-ind__slot .vy-ind__card-shot { max-width: 100%; }

/* ---- Footer -------------------------------------------------------------- */

.vy-ind .vy-ind__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 32px;
	margin: 40px var(--ind-pad) 0;
	padding-top: 22px;
	border-top: 1px solid var(--border-hair);
}
.vy-ind .vy-ind__foot-line { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--fg-2); }
.vy-ind .vy-ind__legend { display: flex; gap: 28px; }
.vy-ind.is-touch .vy-ind__legend { display: none; }
.vy-ind .vy-ind__legend p {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-4);
}
.vy-ind .vy-ind__legend-word::before {
	content: "";
	width: 18px;
	height: 12px;
	background:
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 0 / 5px 1.5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 0 / 1.5px 5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 0 / 5px 1.5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 0 / 1.5px 5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 100% / 5px 1.5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 0 100% / 1.5px 5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 100% / 5px 1.5px,
		linear-gradient(var(--accent-bright), var(--accent-bright)) 100% 100% / 1.5px 5px;
	background-repeat: no-repeat;
}
.vy-ind .vy-ind__legend-thumb::before {
	content: "";
	width: 18px;
	height: 12px;
	border: 1.5px solid var(--accent-bright);
	border-radius: 4px;
	box-sizing: border-box;
}

/* ---- Card text: in the HTML for crawlers and screen readers only ---------- */

.vy-ind .vy-ind__descs {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---- Tablet with a pointer: 768 to 1023 ----------------------------------- */

@media (max-width: 1023px) {
	.wp-block-group.vy-ind {
		--ind-word: 40px;
		--ind-thumb-w: 72px;
		--ind-thumb-h: 43px;
		--ind-thumb-r: 8px;
	}
	.vy-ind .vy-ind__head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.vy-ind .vy-ind__titles,
	.vy-ind .vy-ind__intros { flex: none; min-width: 0; }
}

/* ---- Touch sizes: under 768, or a coarse pointer at any width ------------- */

@media (max-width: 767px) {
	.wp-block-group.vy-ind {
		--ind-word: 30px;
		--ind-word-gap: 10px;
		--ind-thumb-w: 58px;
		--ind-thumb-h: 35px;
		--ind-thumb-r: 7px;
		--ind-thumb-gap: 12px;
		--ind-dot: 5px;
		--ind-speed: 0.7;
	}
	.vy-ind .vy-ind__head { margin-bottom: 24px; }
	.vy-ind .vy-ind__eyebrow { font-size: 10px; margin-bottom: 12px; }
	.vy-ind .vy-ind__h2 { font-size: 34px; line-height: 1.08; }
	.vy-ind .vy-ind__intro { font-size: 15px; line-height: 1.6; }
	.vy-ind .vy-ind__row { padding: 6px 0; }
	.vy-ind .vy-ind__word a { line-height: 1.2; }
	.vy-ind .vy-ind__foot-line { font-size: 18px; }
}
@media (pointer: coarse) {
	.wp-block-group.vy-ind { --ind-speed: 0.7; }
}

/* ---- Reduced motion: a static cloud, instant locks ------------------------ */

@media (prefers-reduced-motion: reduce) {
	.vy-ind *,
	.vy-ind *::before,
	.vy-ind *::after {
		transition: none !important;
		animation: none !important;
	}
}