/**
 * css/components/marquee.css — Website 2.0 shared component library (#122)
 *
 * Italic serif marquee, "•" separator, 46s linear loop. Full-bleed
 * hairline rules top+bottom (screen edge), per the bordered-box law's
 * full-bleed clause. Reference: media.html `.marquee`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-marquee {
	overflow: hidden;
	margin-top: var( --section-pad );
	margin-inline: calc( -1 * var( --pad-x ) );
	padding: 36px 0;
	border-top: var( --hairline ) solid var( --rule-on-dark );
	border-bottom: var( --hairline ) solid var( --rule-on-dark );
}

/* On a cream/light band the dark-rule-on-dark token reads too faint —
   use the soft border token instead. */
.cg-marquee--cream {
	border-color: var( --rule );
}

.cg-marquee--cream .cg-marquee__item {
	color: var( --cg-ink );
}

/* Headerless full-bleed strip (Home, #65) — its own thin 30px vertical
   rhythm (not the header variants' 96px `--section-pad` margin-top,
   which assumes a preceding split header in the same band).
   Reference: home.html `.marquee`.

   #403: this variant used to repaint the strip as well (cream band, rust
   italic words, `--rule` borders). The CD asked for the /media/ marquee's
   look on Home, so the repaint is gone: the strip now inherits the base
   `.cg-marquee` colours (cream italic words, rust dot separators,
   `--rule-on-dark` hairlines) over `.cg-marquee-outer--ink`'s ground,
   which is what /media/ renders. The variant contributes rhythm only —
   see blocks/cg/marquee.php on why the class keeps the `--rust` name. */
.cg-marquee--rust {
	margin-top: 0;
	padding: 30px 0;
}

/* Headerless wrapper (Home, #65) — NOT `.cg-band` (no 96px rhythm; the
   marquee itself owns its vertical padding), just the band-variant
   background/text colour so the strip's font-color context is correct. */
.cg-marquee-outer {
	width: 100%;
}

.cg-marquee-outer--cream {
	background: var( --surface );
	color: var( --text );
}

.cg-marquee-outer--ink {
	background: var( --surface-dark );
	color: var( --cg-cream );
}

.cg-marquee__track {
	display: flex;
	width: max-content;
	animation: cg-marquee var( --cg-marquee-speed, 46s ) linear infinite;
}

.cg-marquee__item {
	display: flex;
	align-items: center;
	white-space: nowrap;
	font-family: var( --font-serif );
	font-style: italic;
	font-size: 40px;
	letter-spacing: -1px;
	color: var( --cg-cream );
}

.cg-marquee__item::after {
	content: "\2022";
	margin: 0 46px;
	font-style: normal;
	font-size: 14px;
	color: var( --accent );
	transform: translateY( -7px );
}

/* Bare stacked head (no body copy) — used inside a `.cg-band--flush-inline`
   wrapper, so the head applies its own inline padding in place of the
   band's. Reference: services.html `.trusted .head`. */
.cg-marquee__head {
	padding-inline: var( --pad-x );
}

/* mask_fade (Services "Trusted By", #125) — edge fade-to-transparent so
   the loop doesn't hard-cut at the frame edge. Reference: services.html
   `.logomarq`. */
.cg-marquee--mask {
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 8%, #000 92%, transparent 100% );
	mask-image: linear-gradient( 90deg, transparent 0, #000 8%, #000 92%, transparent 100% );
}

/* show_box (Services "Trusted By", #125) — bordered box with its own
   46px/64px rhythm, bigger word size, no bullet separator, plain 100px
   gap (mixed logo+word track). Reference: services.html `.logowrap`/
   `.logomarq .track`/`.logomarq .word`. */
.cg-marquee--box {
	margin-top: 64px;
	padding: 46px 0;
	/* Literal cream-rgb border (matches --cg-cream #F5F5F5 = rgb(245,245,245))
	   at 32% opacity — same raw-rgba-on-a-token-colour convention as
	   hero.css's video-scrim (decorative divider, not a flat surface). */
	border-top: var( --hairline ) solid rgba( 245, 245, 245, 0.32 );
	border-bottom: var( --hairline ) solid rgba( 245, 245, 245, 0.32 );
}

.cg-marquee--box .cg-marquee__track {
	gap: 100px;
	padding-left: 100px;
}

.cg-marquee--box .cg-marquee__item {
	font-size: 46px;
	letter-spacing: -1px;
	opacity: 0.92;
}

.cg-marquee--box .cg-marquee__item::after {
	content: none;
}

/* #407 SVC-2 — the marks read too small at 70px. Every source SVG in the
   Services set is intrinsically 268x268: a square canvas with the wordmark
   inset in its own whitespace, so at 70px the visible mark occupies only a
   fraction of an already-small box. No CSS can enlarge a mark inside its own
   canvas, so the only lever is how much of that canvas the strip renders.
   Owner reviewed the full 268px on screen and set the box at 168px
   (2026-08-20). HEIGHT ONLY — `width: auto` keeps the one non-square logo
   (a 3080x1865 raster lockup) undistorted. */
.cg-marquee__logo {
	display: block;
	height: 168px;
	width: auto;
	opacity: 0.92;
}

@media ( max-width: 680px ) {
	.cg-marquee--box .cg-marquee__item {
		font-size: 32px;
	}
}

@keyframes cg-marquee {
	from {
		transform: translateX( 0 );
	}

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

/* #407 review — `.cg-marquee__track` was the only animation ON A 2.0 PAGE with
   no reduced-motion release. (`style.css:4281-4285` `.is-animate .img-box`
   has none either, but `section-inner` renders on no 2.0 page — dead in
   practice.) css/components/motion.css:214-235 neutralises
   `.anim-mask`/`.anim-edge`/`.anim-rise`, and hero.css, contact-flyout.css,
   scroll-gallery.css, header.css and style.css all honour the preference;
   this track ran at full speed regardless. Measured with the preference set:
   animationPlayState `running`, transform advancing normally.

   Pre-existing, but fixed here rather than deferred because SVC-2 makes the
   moving object 1.6x deeper (164px -> 262px) and 1.6x faster (112 -> 177px/s)
   — it amplifies exactly the harm the media query exists to prevent, and
   WCAG 2.2.2 (Pause, Stop, Hide) is unmet either way: the motion is
   automatic, runs well past 5s, sits beside other content, and has no pause
   control.

   WHAT THIS COSTS, measured, because it is a real trade and not a free win:
   the track parks at translateX(0) — a sane resting position, first item
   flush left, nothing clipped — but everything past the viewport edge
   becomes PERMANENTLY unreachable. `.cg-marquee` is `overflow: hidden` so
   it cannot be scrolled, and `aria-hidden="true"` with `alt=""` means there
   is no text alternative either. Unique items actually visible:

     /services/  1600px  7 of 26      390px  1 of 26
     /media/     1600px  4 of 5       390px  2 of 5
     /           1600px  7 of 7       390px  2 of 7

   On /media/ and / the hidden items are WORDS, not decorative marks. This
   is still the right trade — a 262px band travelling at 177px/s is the
   worse outcome for the user who asked for less motion, and the content is
   declared decorative — but do not describe it as costless. If those words
   ever need to be readable, the fix is a static non-animated fallback, not
   removing this block. */
@media ( prefers-reduced-motion: reduce ) {
	.cg-marquee__track {
		animation: none;
	}
}

@media ( max-width: 680px ) {
	/* #485 — this block already shrank the item to 28px and left the
	   40px-tuned -1px tracking behind, which makes it -3.57% of the em
	   here against -2.5% at the desktop size: a worse ratio than the
	   `.cg-contact2__title` the CD photographed, in the one mobile block
	   somebody already had open. Measured at 390, touching character
	   pairs -> at zero: /media/ 6/14 -> 3, 4/20 -> 2, 5/24 -> 5; home
	   7/13 -> 5, 6/10 -> 4. The residue is Noe Text Italic's own joins.

	   The `--box` variant is named explicitly because `:124` sets its own
	   -1px at (0,2,0) and would otherwise win over a bare
	   `.cg-marquee__item` here — @media adds no specificity. No element
	   renders it today (the Services box track holds 52 logos and 0 word
	   rows) but blocks/cg/marquee.php:62-66 records that adding one is a
	   Dev-admin edit with no code change, so the rule would have been
	   quietly wrong the day someone did.

	   Found by the adversarial review of PR #496, not by #485's audit
	   list. */
	.cg-marquee__item,
	.cg-marquee--box .cg-marquee__item {
		letter-spacing: 0;
	}

	.cg-marquee__item {
		font-size: 28px;
	}
}