/* Dealer marquee (Jack 2026-09-03, React reference rebuilt vanilla):
   bordered card + traveling gold border beam (a conic sweep under a
   border-ring mask, a progressive enhancement), a label breaking the
   top border whose gradient wave sweeps as the beam crosses behind
   it (two animations sharing one 10s linear clock), and an infinite
   dealer-wordmark strip with edge fades and hover pause. Loads after
   alloway-bold (dependency), so the Bold tokens are dressed. */

.alloway-dmarq {
	padding: 0.5rem 0;
}

.alloway-dmarq__card {
	position: relative;
	border: 2px solid var(--bold-dark);
	border-radius: 3px;
	max-width: 1100px;
	margin-inline: auto;
}

/* ---- The border beam: a gold streak riding the border box. The
   wave below shares its 10s linear clock. Unsupported browsers
   simply never see the beam. ---- */
@property --alloway-dmarq-beam-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* Gate on the properties the mechanism ACTUALLY uses: the ring mask
   (mask-composite) and the angled conic. A conic-capable browser
   without registered-property animation degrades to a STATIC gold
   segment at the start angle (0deg and 360deg render identically),
   never a broken one. */
@supports (mask-composite: exclude) and
	(background: conic-gradient(from 0deg, #000, #fff)) {
	.alloway-dmarq__beam {
		/* The ring mask: this layer shows ONLY the border-width band,
		   so the beam reads as the border itself lighting up. */
		position: absolute;
		inset: 0;
		border-radius: 3px;
		padding: 2px;
		pointer-events: none;
		mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		mask-composite: exclude;
		-webkit-mask-composite: xor;
	}

	.alloway-dmarq__beam::after {
		/* A rotating CONIC comet under the ring mask (replacing the
		   reference's offset-path square, whose 110px-rounded path
		   left the 3px-cornered border band at every corner and
		   guttered the beam — epic 11 polish, Jack 2026-09-13). A
		   conic slice swept about the card's center can never leave
		   the band: bright head at the slice's leading edge, tail
		   fading behind. The -71deg trim starts the head at the top-
		   LEFT corner, so the label crossing stays inside the wave's
		   keyframe window below. */
		content: "";
		position: absolute;
		inset: 0;
		background: conic-gradient(
			from calc(var(--alloway-dmarq-beam-angle) - 71deg),
			transparent 0deg,
			transparent 318deg,
			var(--bold-gold-deep) 340deg,
			var(--bold-gold) 357deg,
			transparent 358deg
		);
		animation: alloway-dmarq-beam 10s linear infinite;
	}
}

@keyframes alloway-dmarq-beam {
	from {
		--alloway-dmarq-beam-angle: 0deg;
	}

	to {
		--alloway-dmarq-beam-angle: 360deg;
	}
}

/* ---- The label breaks the top border; its background patches the
   slab behind it. ---- */
.alloway-dmarq__label {
	position: absolute;
	inset-inline: 0;
	top: 0;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	margin: 0;
	pointer-events: none;
}

.alloway-dmarq__patch {
	/* The patch hides the border behind the label; it cannot live on
	   the wave span, where background-clip: text would clip it to the
	   glyphs (the reference's outer-p / inner-span split). */
	background-color: var(--wp--preset--color--base);
	padding: 0 1rem;
}

.alloway-dmarq__wave {
	font-family: var(--bold-cond);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.95rem;
	color: var(--bold-ink);

	/* The wave lives in the narrow 45-55% band of a 250%-wide text
	   gradient; parked positions show currentColor only, so there is
	   no flash at the boundaries (the reference's technique, driven
	   here by keyframes on the shared clock: the beam starts at the
	   card's top-LEFT corner and crosses the centered label in
	   roughly the 12-30% window of its lap). */
	background-image: linear-gradient(
		90deg,
		currentcolor 0%,
		currentcolor 45%,
		var(--bold-gold-deep) 47%,
		var(--bold-gold) 50%,
		var(--bold-gold-deep) 53%,
		currentcolor 55%,
		currentcolor 100%
	);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	background-position: 0% center;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: alloway-dmarq-wave 10s linear infinite;
}

@keyframes alloway-dmarq-wave {
	0%,
	11% {
		background-position: 0% center;
	}

	12% {
		background-position: 95% center;
	}

	30% {
		background-position: 5% center;
	}

	31%,
	100% {
		background-position: 100% center;
	}
}

/* ---- The wordmark strip. ---- */
.alloway-dmarq__mask {
	display: flex;
	overflow: hidden;
	padding: 2.6rem 0 2.1rem;
	mask-image: linear-gradient(
		90deg,
		transparent,
		#000 12%,
		#000 88%,
		transparent
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent,
		#000 12%,
		#000 88%,
		transparent
	);
}

.alloway-dmarq__track {
	display: flex;
	flex: none;
	min-width: 100%;
	justify-content: space-around;
	align-items: center;
	gap: 3.5rem;
	margin: 0;
	padding: 0 1.75rem;
	list-style: none;
	animation: alloway-dmarq-scroll 32s linear infinite;
}

.alloway-dmarq__track li {
	display: flex;
	align-items: center;
	line-height: 1;
	white-space: nowrap;
}

/* ---- Brand logos (Jack's curated art, 2026-09-03): quiet grayscale
   at rest, true colors on hover. multiply lets any white canvas in
   the source art disappear against the light slab; the --ink variant
   is white-on-transparent art forced to ink so it reads on light. ---- */
.alloway-brandmark {
	display: block;
	width: auto;
	height: auto;
	max-height: 40px;
	max-width: 132px;
	filter: grayscale(1);
	opacity: 0.8;
	mix-blend-mode: multiply;
	transition:
		filter var(--alloway-transition),
		opacity var(--alloway-transition);
}

.alloway-brandmark--ink {
	filter: brightness(0);
	opacity: 0.62;
}

/* Art whose canvas pads the visible mark (Empire): a higher cap
   renders it at visual parity with its neighbors. */
.alloway-brandmark--lg {
	max-height: 56px;
}

.alloway-dmarq__mask:hover .alloway-dmarq__track {
	animation-play-state: paused;
}

.alloway-dmarq__mask:hover .alloway-brandmark {
	filter: none;
	opacity: 1;
}

.alloway-dmarq__mask:hover .alloway-brandmark--ink {
	filter: brightness(0);
}

@keyframes alloway-dmarq-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

@media (max-width: 600px) {
	.alloway-dmarq__wave {
		font-size: 0.78rem;
	}

	.alloway-dmarq__track {
		gap: 2.25rem;
	}
}

/* ---- Reduced motion: everything stands still, nothing is lost —
   the first track shows a static row, the decorative copy hides,
   the wave rests as plain ink, the beam never rides. ---- */
@media (prefers-reduced-motion: reduce) {
	.alloway-dmarq__beam::after {
		animation: none;
		display: none;
	}

	.alloway-dmarq__wave {
		animation: none;
	}

	.alloway-dmarq__track {
		animation: none;
	}

	.alloway-dmarq__track[aria-hidden] {
		display: none;
	}
}

/* ==========================================================================
   DEALER BRAND GRID (Jack 2026-09-03, second reference rebuilt
   vanilla): checkerboard wordmark cells inside hairline rules that
   run the full viewport, corner plus accents at two intersections.
   2 columns on mobile, 4 from tablet; the tint pattern re-checkers
   per breakpoint.
   ========================================================================== */
.alloway-dgrid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	max-width: 1100px;
	margin-inline: auto;
	border-inline: 1px solid var(--wp--preset--color--border);
}

.alloway-dgrid__rule {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	border-top: 1px solid var(--wp--preset--color--border);
	pointer-events: none;
}

.alloway-dgrid__rule--top {
	top: -1px;
}

.alloway-dgrid__rule--bottom {
	bottom: -1px;
}

.alloway-dgrid__cell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.4rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.alloway-dgrid__cell .alloway-brandmark {
	max-height: 54px;
	max-width: 170px;
}

.alloway-dgrid__cell .alloway-brandmark--lg {
	max-height: 76px;
}

.alloway-dgrid__cell:hover .alloway-brandmark {
	filter: none;
	opacity: 1;
}

.alloway-dgrid__cell:hover .alloway-brandmark--ink {
	filter: brightness(0);
}

/* 2-column checkerboard: cells 1, 4, 5, 8 tinted; right hairline on
   the left column; last row keeps the bottom rule's own line. */
.alloway-dgrid__cell:nth-of-type(odd) {
	border-right: 1px solid var(--wp--preset--color--border);
}

@media (max-width: 904px) {
	.alloway-dgrid__cell:nth-of-type(4n),
	.alloway-dgrid__cell:nth-of-type(4n + 1) {
		background: var(--wp--preset--color--surface);
	}
}

.alloway-dgrid__cell:nth-last-of-type(-n + 2) {
	border-bottom: 0;
}

.alloway-dgrid__plus {
	position: absolute;
	right: -12px;
	bottom: -12px;
	width: 24px;
	height: 24px;
	z-index: 2;
	color: var(--bold-ink);
	background:
		linear-gradient(currentcolor, currentcolor) center / 1px 100% no-repeat,
		linear-gradient(currentcolor, currentcolor) center / 100% 1px no-repeat;
}

@media (min-width: 905px) {
	.alloway-dgrid {
		grid-template-columns: repeat(4, 1fr);
	}

	.alloway-dgrid__cell {
		border-right: 1px solid var(--wp--preset--color--border);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.alloway-dgrid__cell:nth-of-type(4n) {
		border-right: 0;
	}

	.alloway-dgrid__cell:nth-of-type(n + 5) {
		border-bottom: 0;
	}

	/* 4-column checkerboard: 1, 3, 6, 8. */
	.alloway-dgrid__cell:nth-of-type(8n + 1),
	.alloway-dgrid__cell:nth-of-type(8n + 3),
	.alloway-dgrid__cell:nth-of-type(8n + 6),
	.alloway-dgrid__cell:nth-of-type(8n) {
		background: var(--wp--preset--color--surface);
	}
}

/* The grid headline: a quiet sentence over the checkerboard, one
   emphasized word (the reference's look in the Bold voice). */
.alloway-dgrid-head {
	font-family: var(--bold-cond);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.45rem;
	color: rgb(19 17 17 / 55%);
	margin: 0 0 2.2rem;
}

.alloway-dgrid-head strong {
	color: var(--bold-ink);
	font-weight: 800;
}

/* Two-row marquee (epic 11): the second row runs the OPPOSITE
   direction, a bit slower, with breathing room between rows. The
   reduced-motion rule above already stills every track. */
.alloway-dmarq__mask + .alloway-dmarq__mask {
	margin-top: 1.4rem;
}

.alloway-dmarq__mask--reverse .alloway-dmarq__track {
	animation-direction: reverse;
	animation-duration: 44s;
}