/*
 * ribbon.css - the keyword ribbon, the moving break between Industries and
 * Why Synergi.
 * Contents: 1 local tokens . 2 shell . 3 the two bands . 4 the moving row .
 * 5 narrow screens.
 *
 * Loaded by inc/assets.php as "synergi-section-ribbon", only on pages that
 * declare the section. Markup: sections/ribbon.php. No script.
 *
 * Two full-bleed strips crossing at a shallow angle over the page's own
 * background. The movement
 * is a single translateX keyframe on the row; base.css's global
 * reduced-motion rule freezes it with the words still visible. rotate and
 * translateX are transforms, which is where CLAUDE.md par.2.11 permits
 * physical geometry - everything else here is logical.
 *
 * Colour logic (par.9): the front band is navy - the colour the header bar and
 * the footer are painted in - carrying white words at 7.4:1. It shipped as ink
 * on cyan (6.6:1), which passed but made the strip a third accent colour
 * between two navy bars; the business asked for the header's colour on 3 Sep.
 * The gradient stays on the textless back band, where its cyan end cannot fail
 * anything.
 */

/* ==========================================================================
   1. Local tokens
   ========================================================================== */

.syn-ribbon {
	/* One thickness for both bands, so the X crosses evenly. */
	--syn-ribbon-size: clamp(3.2rem, 4.5vw, 4.4rem);

	/* The bands run past both edges, so their rotated ends never show. */
	--syn-ribbon-bleed: 6vw;

	/* The front band's lean; the back band leans 1.2deg further the other way. */
	--syn-ribbon-tilt: 2.4deg;
}

/* ==========================================================================
   2. Shell
   Not .syn-section: the band is its own break and sets its own, tighter
   rhythm - the opt-out the base stylesheet anticipates.
   ========================================================================== */

.syn-ribbon {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.4rem, 7vw, 6rem);
	/* No background of its own (removed 3 Sep on request): the bands cross
	   over whatever the page shows here - white above, paper below. */
}

/* ==========================================================================
   3. The two bands
   ========================================================================== */

.syn-ribbon__band {
	position: relative;
	inline-size: calc(100% + (2 * var(--syn-ribbon-bleed)));
	margin-inline-start: calc(-1 * var(--syn-ribbon-bleed));
	block-size: var(--syn-ribbon-size);
}

/*
 * NAVY, THE HEADER'S OWN COLOUR (3 Sep, asked for). The band shipped cyan with
 * ink words; painting it the same navy the header bar and the footer take means
 * the page opens, breaks and closes on one colour, and the strip reads as part
 * of the site's furniture rather than as a third accent. White on navy measures
 * 7.4:1, comfortably past §9's floor and better than the ink-on-cyan it
 * replaces.
 */
.syn-ribbon__band--front {
	z-index: 1;
	transform: rotate(calc(-1 * var(--syn-ribbon-tilt)));
	background-color: var(--syn-navy);
	box-shadow: var(--syn-shadow-soft);
}

/*
 * The crossing stroke. Textless on purpose: it exists to complete the X,
 * and the gradient reads as depth behind the lit front band. Dimmed with
 * opacity rather than lighter colours so it stays the brand gradient over
 * whatever the page shows behind it.
 */
.syn-ribbon__band--back {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY(-50%) rotate(calc(var(--syn-ribbon-tilt) + 1.2deg));
	background: var(--syn-gradient-brand);
	opacity: 0.45;
}

/* ==========================================================================
   4. The moving row
   Two identical tracks sit side by side; the row slides by exactly one
   track width and snaps back, which the eye cannot see because the second
   copy is standing where the first began.
   ========================================================================== */

.syn-ribbon__viewport {
	block-size: 100%;
	overflow: hidden;
	/* The row can never affect layout or paint outside itself, which keeps a
	   permanently animating transform off the critical path (CLAUDE.md par.6). */
	contain: layout paint;
}

.syn-ribbon__loop {
	display: flex;
	align-items: center;
	inline-size: max-content;
	block-size: 100%;
	will-change: transform;
	animation: syn-ribbon-drift 55s linear infinite;
}

/*
 * The stop, for keyboard users only (WCAG 2.2.2 still needs a mechanism to
 * pause moving content). Hover NO LONGER pauses it — asked for 3 Sep: the
 * strip is decoration rather than something to read, and stopping dead under a
 * passing cursor read as the page snagging. The visible focus ring comes from
 * base.css's global :focus-visible rule.
 */
.syn-ribbon__viewport:focus-visible .syn-ribbon__loop {
	animation-play-state: paused;
}

@keyframes syn-ribbon-drift {

	from {
		transform: translateX(0);
	}

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

.syn-ribbon__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	min-inline-size: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.syn-ribbon__word {
	display: flex;
	align-items: center;
	gap: clamp(1.3rem, 2.6vw, 2.4rem);
	padding-inline-end: clamp(1.3rem, 2.6vw, 2.4rem);
	color: var(--syn-white);
	font-size: clamp(0.78rem, 0.73rem + 0.25vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * The Synergi mark between phrases, replacing a plain round dot (3 Sep). It is
 * the header and footer logo's own shape, and it takes navy-deep — the colour
 * those two bars are painted in — so the strip is stamped with the brand
 * rather than punctuated by a neutral dot. Drawn in currentColor by
 * sections/ribbon.php, so this one rule sets it.
 */
/*
 * The diamond between phrases. Cyan on the navy band, which is the brand's own
 * accent doing the job the logo's cyan dot does on the same navy in the header
 * — a small point of colour in a row of white words. It is decoration and
 * aria-hidden, so §9's text floor does not apply to it.
 *
 * A diamond rather than the logo's S, which the strip shipped with on 3 Sep and
 * which read as a squiggle at this size: a separator has to be legible as a
 * shape at about 12px, and a letterform is not.
 */
.syn-ribbon__mark {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	color: var(--syn-cyan);
}

.syn-ribbon__mark svg {
	inline-size: 0.62em;
	block-size: 0.62em;
	fill: currentcolor;
}

/* The phrase itself. It is a span so the mark beside it can be a flex sibling
   rather than a pseudo-element on the row. */
.syn-ribbon__label {
	display: block;
}

/* ==========================================================================
   5. Narrow screens
   A steeper lean, or at phone widths the X flattens into two parallel bars.
   ========================================================================== */

@media (max-width: 47.99rem) {

	.syn-ribbon {
		--syn-ribbon-size: 2.8rem;
		--syn-ribbon-tilt: 3.4deg;

		padding-block: 2.8rem;
	}
}