/* ===========================================================================
 * rush-theme.css — REDESIGN r2, Part A: the dark / light theme foundation.
 *
 * ONE RULE: every sheet in this theme consumes ROLE tokens (--t-*), never the
 * brand primitives (--rush-*) from rush-base.css. The primitives are the
 * palette; the roles are what a surface, a line or a word MEANS on the
 * current theme. Flip the theme and only this file's values change.
 *
 * Resolution order (cache-safe — the server never carries data-theme; the
 * prio-1 head hydrator in functions.php sets html[data-theme] from
 * localStorage.rushTheme / prefers-color-scheme BEFORE first paint):
 *   1. :root                                   light is the bare default
 *   2. @media (prefers-color-scheme: dark)      dark by OS when nothing stored
 *      :root:not([data-theme="light"])
 *   3. :root[data-theme="dark"|"light"]         an explicit choice wins
 *
 * The dark block is pasted TWICE on purpose (2 and 3) — CSS has no mixins and
 * this sheet has no build step. scripts/theme-drift.sh diffs the two copies;
 * edit both or the gate fails.
 *
 * Fixed surfaces carry data-surface="gold|ink|carbon" and re-declare the
 * roles locally, so children never branch on the theme: a footer is ink on
 * every theme, a Rush Hour band is gold on every theme, and the text inside
 * them just reads --t-fg.
 *
 * Measured pairs (WCAG): paper-on-carbon 17.4:1 · ink-on-paper 17.1:1 ·
 * ink-on-gold 9.9:1 · goldText-on-paper 4.6:1 · gold-on-carbon 9.4:1.
 *
 * GATE: this sheet carries NO length tokens outside the toggle's own static
 * rules — a theme flip may never change layout, so ScrollTrigger is never
 * refreshed on rush:theme:change. See D7.
 * ======================================================================== */

/* Easings the toggle needs on pages that never load rush-motion.css. Same
 * values as rush-entry.css / rush-motion.css (those re-declare them later
 * in the cascade with identical numbers). */
:root {
	--ease-out-cine: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-inout-cine: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-in-cine: cubic-bezier(0.4, 0, 1, 1);
	--ease-mark: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ── 1. Light: the bare default (no-JS, crawlers, pre-hydrator paint on a
 *       light OS). ─────────────────────────────────────────────────────── */
:root {
	--t-bg: #fbfaf4;
	--t-bg-2: #f7f0df;
	--t-bg-3: #ffffff;
	--t-fg: #10100e;
	--t-fg-2: rgba(16, 16, 14, 0.66);
	--t-fg-3: rgba(16, 16, 14, 0.60);
	--t-line: rgba(16, 16, 14, 0.14);
	--t-line-strong: rgba(16, 16, 14, 0.28);
	--t-gold: #ffaa00;
	--t-gold-hover: #de8a08;
	--t-gold-text: #9a5e00;
	--t-on-gold: #10100e;
	--t-on-gold-2: rgba(16, 16, 14, 0.86);
	--t-glow: rgba(255, 170, 0, 0.18);
	--t-sweep: rgba(251, 250, 244, 0.16);
	--t-sweep-blend: soft-light;
	--t-scrim: linear-gradient(to top, rgba(251, 250, 244, 0.95), rgba(251, 250, 244, 0.48) 42%, rgba(8, 8, 8, 0.10));
	--t-scrim-wide: linear-gradient(90deg, rgba(251, 250, 244, 0.52) 0%, rgba(251, 250, 244, 0.28) 40%, rgba(251, 250, 244, 0) 68%), linear-gradient(to top, rgba(251, 250, 244, 0.93) 0%, rgba(251, 250, 244, 0.52) 45%, rgba(8, 8, 8, 0.06) 100%);
	--t-scrim-flat: rgba(251, 250, 244, 0.92);
	--t-scrim-soft: rgba(251, 250, 244, 0.55);
	--t-halo: 0 1px 2px rgba(251, 250, 244, 0.55);
	--t-media-grade: brightness(1.08) saturate(1.02) contrast(0.96);
	--t-media-haze: rgba(251, 250, 244, 0.08);
	/* The grain asset is DARK (mean 18/255): multiply would grey the paper by a
	 * third. difference at 25% is a measured 2.5% dip with visible specks. */
	--t-grain-alpha: 0.25;
	--t-grain-blend: difference;
	--t-wash: rgba(251, 250, 244, 0.72);
	--t-wash-2: rgba(251, 250, 244, 0.94);
	--t-shadow: 0 24px 48px rgba(16, 16, 14, 0.16);
	--t-shadow-card: 0 30px 60px -30px rgba(16, 16, 14, 0.25);
	--t-header-bg: rgba(251, 250, 244, 0.92);
	--t-header-fade: linear-gradient(to bottom, rgba(251, 250, 244, 0.82) 0%, rgba(251, 250, 244, 0.55) 62%, rgba(251, 250, 244, 0.12) 100%);
	--t-dock-bg: rgba(251, 250, 244, 0.94);
	--t-focus: #9a5e00;
	--t-sel-bg: #ffaa00;
	--t-sel-fg: #10100e;
	--t-stroke: #10100e;
	--t-theme-color: #fbfaf4;
	--t-slab-alpha: 1;
	--t-elev: rgba(255, 255, 255, 0.72);
	--t-elev-2: rgba(16, 16, 14, 0.04);
	color-scheme: light;
}

/* ── 2. Dark by OS preference when nothing is stored. ─────────────────── */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* RUSH_THEME_DARK_BLOCK_START */
		--t-bg: #080808;
		--t-bg-2: #10100e;
		--t-bg-3: #15130f;
		--t-fg: #fbfaf4;
		--t-fg-2: rgba(251, 250, 244, 0.70);
		--t-fg-3: rgba(251, 250, 244, 0.54);
		--t-line: rgba(255, 255, 255, 0.12);
		--t-line-strong: rgba(255, 255, 255, 0.24);
		--t-gold: #ffaa00;
		--t-gold-hover: #de8a08;
		--t-gold-text: #ffaa00;
		--t-on-gold: #10100e;
		--t-on-gold-2: rgba(16, 16, 14, 0.86);
		--t-glow: rgba(255, 170, 0, 0.40);
		--t-sweep: rgba(255, 170, 0, 0.28);
		--t-sweep-blend: screen;
		--t-scrim: linear-gradient(to top, rgba(8, 8, 8, 0.93), rgba(8, 8, 8, 0.58) 42%, rgba(8, 8, 8, 0.22));
		--t-scrim-wide: linear-gradient(90deg, rgba(8, 8, 8, 0.60) 0%, rgba(8, 8, 8, 0.30) 38%, rgba(8, 8, 8, 0) 64%), linear-gradient(to top, rgba(8, 8, 8, 0.88) 0%, rgba(8, 8, 8, 0.42) 45%, rgba(8, 8, 8, 0.14) 100%);
		--t-scrim-flat: rgba(8, 8, 8, 0.88);
		--t-scrim-soft: rgba(8, 8, 8, 0.42);
		--t-halo: 0 1px 2px rgba(8, 8, 8, 0.45);
		--t-media-grade: brightness(0.96) saturate(0.86) sepia(0.10);
		--t-media-haze: transparent;
		--t-grain-alpha: 1;
		--t-grain-blend: soft-light;
		--t-wash: rgba(8, 8, 8, 0.90);
		--t-wash-2: rgba(8, 8, 8, 0.96);
		--t-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
		--t-shadow-card: 0 40px 80px -30px rgba(0, 0, 0, 0.70);
		--t-header-bg: rgba(8, 8, 8, 0.92);
		--t-header-fade: linear-gradient(to bottom, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.50) 62%, rgba(8, 8, 8, 0.12) 100%);
		--t-dock-bg: rgba(8, 8, 8, 0.92);
		--t-focus: #ffaa00;
		--t-sel-bg: #ffaa00;
		--t-sel-fg: #10100e;
		--t-stroke: #ffaa00;
		--t-theme-color: #080808;
		--t-slab-alpha: 0.22;
		--t-elev: rgba(255, 255, 255, 0.06);
		--t-elev-2: rgba(255, 255, 255, 0.04);
		color-scheme: dark;
		/* RUSH_THEME_DARK_BLOCK_END */
	}
}

/* ── 3. Explicit choice wins. ─────────────────────────────────────────── */
:root[data-theme="dark"] {
	/* RUSH_THEME_DARK_BLOCK_START */
	--t-bg: #080808;
	--t-bg-2: #10100e;
	--t-bg-3: #15130f;
	--t-fg: #fbfaf4;
	--t-fg-2: rgba(251, 250, 244, 0.70);
	--t-fg-3: rgba(251, 250, 244, 0.54);
	--t-line: rgba(255, 255, 255, 0.12);
	--t-line-strong: rgba(255, 255, 255, 0.24);
	--t-gold: #ffaa00;
	--t-gold-hover: #de8a08;
	--t-gold-text: #ffaa00;
	--t-on-gold: #10100e;
	--t-on-gold-2: rgba(16, 16, 14, 0.86);
	--t-glow: rgba(255, 170, 0, 0.40);
	--t-sweep: rgba(255, 170, 0, 0.28);
	--t-sweep-blend: screen;
	--t-scrim: linear-gradient(to top, rgba(8, 8, 8, 0.93), rgba(8, 8, 8, 0.58) 42%, rgba(8, 8, 8, 0.22));
	--t-scrim-wide: linear-gradient(90deg, rgba(8, 8, 8, 0.60) 0%, rgba(8, 8, 8, 0.30) 38%, rgba(8, 8, 8, 0) 64%), linear-gradient(to top, rgba(8, 8, 8, 0.88) 0%, rgba(8, 8, 8, 0.42) 45%, rgba(8, 8, 8, 0.14) 100%);
	--t-scrim-flat: rgba(8, 8, 8, 0.88);
	--t-scrim-soft: rgba(8, 8, 8, 0.42);
	--t-halo: 0 1px 2px rgba(8, 8, 8, 0.45);
	--t-media-grade: brightness(0.96) saturate(0.86) sepia(0.10);
	--t-media-haze: transparent;
	--t-grain-alpha: 1;
	--t-grain-blend: soft-light;
	--t-wash: rgba(8, 8, 8, 0.90);
	--t-wash-2: rgba(8, 8, 8, 0.96);
	--t-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
	--t-shadow-card: 0 40px 80px -30px rgba(0, 0, 0, 0.70);
	--t-header-bg: rgba(8, 8, 8, 0.92);
	--t-header-fade: linear-gradient(to bottom, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.50) 62%, rgba(8, 8, 8, 0.12) 100%);
	--t-dock-bg: rgba(8, 8, 8, 0.92);
	--t-focus: #ffaa00;
	--t-sel-bg: #ffaa00;
	--t-sel-fg: #10100e;
	--t-stroke: #ffaa00;
	--t-theme-color: #080808;
	--t-slab-alpha: 0.22;
	--t-elev: rgba(255, 255, 255, 0.06);
	--t-elev-2: rgba(255, 255, 255, 0.04);
	color-scheme: dark;
	/* RUSH_THEME_DARK_BLOCK_END */
}
:root[data-theme="light"] {
	--t-bg: #fbfaf4;
	--t-bg-2: #f7f0df;
	--t-bg-3: #ffffff;
	--t-fg: #10100e;
	--t-fg-2: rgba(16, 16, 14, 0.66);
	--t-fg-3: rgba(16, 16, 14, 0.60);
	--t-line: rgba(16, 16, 14, 0.14);
	--t-line-strong: rgba(16, 16, 14, 0.28);
	--t-gold: #ffaa00;
	--t-gold-hover: #de8a08;
	--t-gold-text: #9a5e00;
	--t-on-gold: #10100e;
	--t-on-gold-2: rgba(16, 16, 14, 0.86);
	--t-glow: rgba(255, 170, 0, 0.18);
	--t-sweep: rgba(251, 250, 244, 0.16);
	--t-sweep-blend: soft-light;
	--t-scrim: linear-gradient(to top, rgba(251, 250, 244, 0.95), rgba(251, 250, 244, 0.48) 42%, rgba(8, 8, 8, 0.10));
	--t-scrim-wide: linear-gradient(90deg, rgba(251, 250, 244, 0.52) 0%, rgba(251, 250, 244, 0.28) 40%, rgba(251, 250, 244, 0) 68%), linear-gradient(to top, rgba(251, 250, 244, 0.93) 0%, rgba(251, 250, 244, 0.52) 45%, rgba(8, 8, 8, 0.06) 100%);
	--t-scrim-flat: rgba(251, 250, 244, 0.92);
	--t-scrim-soft: rgba(251, 250, 244, 0.55);
	--t-halo: 0 1px 2px rgba(251, 250, 244, 0.55);
	--t-media-grade: brightness(1.08) saturate(1.02) contrast(0.96);
	--t-media-haze: rgba(251, 250, 244, 0.08);
	/* The grain asset is DARK (mean 18/255): multiply would grey the paper by a
	 * third. difference at 25% is a measured 2.5% dip with visible specks. */
	--t-grain-alpha: 0.25;
	--t-grain-blend: difference;
	--t-wash: rgba(251, 250, 244, 0.72);
	--t-wash-2: rgba(251, 250, 244, 0.94);
	--t-shadow: 0 24px 48px rgba(16, 16, 14, 0.16);
	--t-shadow-card: 0 30px 60px -30px rgba(16, 16, 14, 0.25);
	--t-header-bg: rgba(251, 250, 244, 0.92);
	--t-header-fade: linear-gradient(to bottom, rgba(251, 250, 244, 0.82) 0%, rgba(251, 250, 244, 0.55) 62%, rgba(251, 250, 244, 0.12) 100%);
	--t-dock-bg: rgba(251, 250, 244, 0.94);
	--t-focus: #9a5e00;
	--t-sel-bg: #ffaa00;
	--t-sel-fg: #10100e;
	--t-stroke: #10100e;
	--t-theme-color: #fbfaf4;
	--t-slab-alpha: 1;
	--t-elev: rgba(255, 255, 255, 0.72);
	--t-elev-2: rgba(16, 16, 14, 0.04);
	color-scheme: light;
}

/* ── 4. Fixed surfaces (theme-independent). Children read --t-* as usual. ─ */
[data-surface="gold"] {
	--t-bg: #ffaa00;
	--t-bg-2: #de8a08;
	--t-bg-3: #ffe3b0;
	--t-fg: #10100e;
	--t-fg-2: rgba(16, 16, 14, 0.86); /* r2 fix: ≥4.6:1 on the darkest foil patch */
	--t-fg-3: rgba(16, 16, 14, 0.74);
	--t-line: rgba(16, 16, 14, 0.18);
	--t-line-strong: rgba(16, 16, 14, 0.34);
	--t-gold-text: #10100e;
	--t-on-gold: #10100e;
	--t-stroke: #10100e;
	--t-focus: #10100e;
	--t-glow: transparent;
	--t-sweep: rgba(251, 250, 244, 0.22);
	--t-sweep-blend: soft-light;
	--t-scrim: linear-gradient(to top, rgba(255, 170, 0, 0.96), rgba(255, 170, 0, 0.55) 42%, rgba(8, 8, 8, 0.12));
	--t-scrim-flat: rgba(255, 170, 0, 0.92);
	--t-scrim-soft: rgba(255, 170, 0, 0.55);
	--t-halo: none;
	--t-grain-alpha: 0.25;
	--t-grain-blend: difference;
	--t-wash: rgba(255, 170, 0, 0.78);
	--t-wash-2: rgba(255, 170, 0, 0.94);
	--t-shadow: 0 24px 48px rgba(16, 16, 14, 0.22);
	--t-shadow-card: 0 30px 60px -30px rgba(16, 16, 14, 0.45);
	--t-elev: rgba(255, 227, 176, 0.55);
	--t-elev-2: rgba(16, 16, 14, 0.06);
	color-scheme: light;
	background-color: var(--t-bg);
	color: var(--t-fg);
}
[data-surface="ink"],
[data-surface="carbon"],
.rush-dark /* retired r1 alias: B/C replace it with data-surface; carbon lock meanwhile */ {
	--t-bg: #10100e;
	--t-bg-2: #080808;
	--t-bg-3: #15130f;
	--t-fg: #fbfaf4;
	--t-fg-2: rgba(251, 250, 244, 0.70);
	--t-fg-3: rgba(251, 250, 244, 0.54);
	--t-line: rgba(255, 255, 255, 0.12);
	--t-line-strong: rgba(255, 255, 255, 0.24);
	--t-gold-text: #ffaa00;
	--t-on-gold: #10100e;
	--t-stroke: #ffaa00;
	--t-focus: #ffaa00;
	--t-glow: rgba(255, 170, 0, 0.40);
	--t-sweep: rgba(255, 170, 0, 0.28);
	--t-sweep-blend: screen;
	--t-scrim: linear-gradient(to top, rgba(8, 8, 8, 0.93), rgba(8, 8, 8, 0.58) 42%, rgba(8, 8, 8, 0.22));
	--t-scrim-wide: linear-gradient(90deg, rgba(8, 8, 8, 0.60) 0%, rgba(8, 8, 8, 0.30) 38%, rgba(8, 8, 8, 0) 64%), linear-gradient(to top, rgba(8, 8, 8, 0.88) 0%, rgba(8, 8, 8, 0.42) 45%, rgba(8, 8, 8, 0.14) 100%);
	--t-scrim-flat: rgba(8, 8, 8, 0.88);
	--t-scrim-soft: rgba(8, 8, 8, 0.42);
	--t-halo: 0 1px 2px rgba(8, 8, 8, 0.45);
	--t-media-grade: brightness(0.96) saturate(0.86) sepia(0.10);
	--t-media-haze: transparent;
	--t-grain-alpha: 1;
	--t-grain-blend: soft-light;
	--t-wash: rgba(16, 16, 14, 0.90);
	--t-wash-2: rgba(16, 16, 14, 0.96);
	--t-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
	--t-shadow-card: 0 40px 80px -30px rgba(0, 0, 0, 0.70);
	--t-elev: rgba(255, 255, 255, 0.06);
	--t-elev-2: rgba(255, 255, 255, 0.04);
	color-scheme: dark;
	background-color: var(--t-bg);
	color: var(--t-fg);
}
[data-surface="carbon"],
.rush-dark {
	--t-bg: #080808;
	--t-bg-2: #10100e;
}

/* ── 5. Document-level roles ──────────────────────────────────────────── */
html { background: var(--t-bg); }
::selection { background: var(--t-sel-bg); color: var(--t-sel-fg); }
:focus-visible { outline: 2px solid var(--t-focus); outline-offset: 3px; }
@media (forced-colors: active) {
	/* The UA owns every colour under forced colours; nothing here fights it. */
	::selection { background: Highlight; color: HighlightText; }
}

/* ── 6. The theme toggle (A6). Rest states are pure CSS keyed on
 *       html[data-theme] so the icon is right before rush-theme.js runs. ─ */
.rush-theme {
	position: relative;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	margin: 0;
	border-radius: 999px;
	border: 1px solid var(--t-line-strong);
	background: transparent;
	color: var(--t-gold-text);
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	flex: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 150ms ease, color 150ms ease;
}
.rush-theme:hover { border-color: var(--t-gold); }
.rush-theme::before {
	/* 44px hit area on the 36px header variant without moving the row. */
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: inherit;
}
.rush-theme-orb { display: block; inline-size: 24px; block-size: 24px; }
.rush-theme-orb svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}
/* Every SVG transform below uses transform-box: view-box so origins are in
 * viewBox units (40×40) whatever CSS size the orb renders at. */
.rush-theme-disc { fill: currentColor; transform-box: view-box; transform-origin: 20px 20px; }
.rush-theme-rays { transform-box: view-box; transform-origin: 20px 20px; }
.rush-theme-rays rect { fill: currentColor; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.rush-theme-bite { transform-box: view-box; transform: translate(0, 0); }
/* Light rest = the sun: the bite leaves the disc, the rays stand. Dark rest =
 * the crescent. Keyed on the same ladder as the tokens so no-JS / crawler
 * paint matches. The morph (rush-theme.js) only ever rotates the RAYS group
 * (symmetric under 90°), so cancelling the animation never snaps. */
:root:not([data-theme="dark"]) .rush-theme-bite { transform: translate(15px, -15px); }
:root:not([data-theme="dark"]) .rush-theme-rays rect { transform: scale(1); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .rush-theme-bite { transform: translate(0, 0); }
	:root:not([data-theme="light"]) .rush-theme-rays rect { transform: scale(0); }
}
:root[data-theme="dark"] .rush-theme-bite { transform: translate(0, 0); }
:root[data-theme="dark"] .rush-theme-rays rect { transform: scale(0); }
@media (hover: hover) and (pointer: fine) {
	.rush-theme-rays { transition: transform 400ms var(--ease-out-cine); }
	.rush-theme:hover .rush-theme-rays { transform: rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
	.rush-theme-bite,
	.rush-theme-rays rect { transition: transform 150ms ease; }
	.rush-theme-rays { transition: none; }
}
/* Header variant: 40px at ≥1024, 36px below (hit area stays 44px via ::before). */
.rush-theme--header { flex: none; }
@media (max-width: 1023px) {
	.rush-theme--header { inline-size: 36px; block-size: 36px; }
	.rush-theme--header .rush-theme-orb { inline-size: 22px; block-size: 22px; }
}
/* Entry-layer variant: 36px next to the stepper. */
.rush-theme--entry { inline-size: 36px; block-size: 36px; }
.rush-theme--entry .rush-theme-orb { inline-size: 22px; block-size: 22px; }
/* Dock variant: an item like the others — no ring, orb 24px, label beneath. */
.rush-theme--dock {
	inline-size: auto;
	block-size: auto;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	color: inherit;
}
.rush-theme--dock .rush-theme-orb { inline-size: 24px; block-size: 24px; }
.rush-theme--dock::before { content: none; }
.rush-theme--dock .rush-theme-lbl { font-size: inherit; letter-spacing: inherit; font-weight: inherit; }
/* Footer variant: the orb plus a "Dark / Light" word pair. */
.rush-theme--footer {
	inline-size: auto;
	block-size: 40px;
	padding: 0 14px 0 4px;
	gap: 10px;
	display: inline-flex;
	align-items: center;
	color: var(--t-fg-3);
}
.rush-theme--footer .rush-theme-orb { color: var(--t-gold-text); }
.rush-theme-lbl {
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}
.rush-theme--footer [data-rush-theme-word] { color: var(--t-fg-3); font-weight: 800; transition: color 200ms ease; }
.rush-theme--footer [data-rush-theme-word][aria-current="true"] { color: var(--t-gold-text); }

/* ── 7. The theme cut (A8 / M22b): a 30° band that starts as a slit through
 *       the toggle and cuts the page open from the button outward.
 *       --vt-x / --vt-y are set on <html> by rush-theme.js. ─────────────── */
html.rush-theme-cutting::view-transition-group(root) { animation-duration: 650ms; }
html.rush-theme-cutting::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.rush-theme-cutting::view-transition-new(root) {
	animation: rush-theme-blade 650ms var(--ease-inout-cine) both;
	mix-blend-mode: normal;
}
@keyframes rush-theme-blade {
	from {
		clip-path: polygon(
			calc(var(--vt-x, 100vw) - 0.577 * (100vh - var(--vt-y, 0px))) 100vh,
			calc(var(--vt-x, 100vw) + 0.577 * var(--vt-y, 0px)) 0,
			calc(var(--vt-x, 100vw) + 0.577 * var(--vt-y, 0px)) 0,
			calc(var(--vt-x, 100vw) - 0.577 * (100vh - var(--vt-y, 0px))) 100vh
		);
	}
	to {
		/* The band's two 30° edges clear the viewport's left and right corners
		 * exactly at the end — so the whole 650 ms is visible travel, not a
		 * flash-cover at a third of the way. */
		clip-path: polygon(-57.7vh 100vh, 0 0, calc(100vw + 57.7vh) 0, 100vw 100vh);
	}
}
/* No-VT fallback veil (Firefox, older Safari): rush-theme.js animates its
 * clip-path with WAAPI along the same geometry. */
.rush-theme-veil {
	position: fixed;
	inset: 0;
	z-index: 9700;
	pointer-events: none;
	will-change: clip-path;
}
@media (prefers-reduced-motion: reduce) {
	html.rush-theme-cutting::view-transition-new(root),
	html.rush-theme-cutting::view-transition-old(root) { animation: none; }
}

/* ── 8. In-site navigation (A10, progressive): the chrome persists, the body
 *       comes in under a 30° wipe from the top-left. Names are withheld
 *       during a theme cut so the whole page sits under the blade. ──────── */
html:not(.rush-theme-cutting) .rush-header { view-transition-name: rush-header; }
html:not(.rush-theme-cutting) .rush-dock { view-transition-name: rush-dock; }
html:not(.rush-theme-cutting) .rush-theme--header { view-transition-name: rush-theme; }
::view-transition-old(root) { animation: rush-vt-out 200ms var(--ease-in-cine) both; }
::view-transition-new(root) { animation: rush-vt-in 420ms var(--ease-out-cine) both; }
::view-transition-old(rush-header),
::view-transition-new(rush-header),
::view-transition-old(rush-dock),
::view-transition-new(rush-dock),
::view-transition-old(rush-theme),
::view-transition-new(rush-theme) { animation: none; }
@keyframes rush-vt-out { to { opacity: 0; } }
@keyframes rush-vt-in {
	from { clip-path: polygon(0 0, 30% 0, 0 52%, 0 0); opacity: 0.6; }
	to { clip-path: polygon(0 0, 300% 0, 0 520%, 0 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) { animation: none; }
}