/*
 * The homepage.
 *
 * Full-bleed bands on the site's ground; the hero carries a picture (072).
 *
 * ZERO colour literals. Every colour, size, space, radius and border here is a
 * token. The mockup this layout came from carries 8px button radii and an
 * accent that is not `crimson`; it predates the tokens and is a guide to
 * LAYOUT only. Where the two disagree the tokens win, always.
 *
 * Depends on csds-tokens, csds-typography and csds-ui.
 */

/* ------------------------------------------------------------ shell ---- */

.csds-home {
	flex: 1 0 auto;
	width: 100%;
	box-sizing: border-box;
}

/* .csds-home__wrap, the kicker and .csds-home__ctas: shared rules in chrome.css (063, D2). */

/* A band is full-bleed; only its wrap is constrained. */
.csds-home__band,
.csds-home__hero,
.csds-home__final {
	width: 100%;
	box-sizing: border-box;
}

.csds-home__band {
	padding: var(--csds-space-8) 0;
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
}

.csds-home__band-head {
	max-width: 46rem;
	margin: 0 0 var(--csds-space-6);
}

.csds-home__band-head h2 {
	font: var(--csds-display-title);
	font-family: var(--csds-font-display);
	text-transform: uppercase;
	color: var(--csds-ink);
	margin: 0 0 var(--csds-space-3);
}

.csds-home__band-head p {
	font: var(--csds-body-lead);
	color: var(--csds-ink-muted);
	margin: 0;
}

/* ------------------------------------------------------------- hero ---- */

/*
 * The picture (072 D746, D750): the wrestler stands on the right; the words
 * sit on the dark left, over a fade of the page's own ground, so they keep
 * their contrast whatever the picture does. Shipped as a file, not a Media
 * Library item: a deploy copies files. A section's own CSS may replace it.
 */
.csds-home__hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(30rem, 38vw, 42rem);
	padding: var(--csds-space-8) 0;
	/*
	 * The picture (the user's wide version, 2026-10-03) fades to black at its
	 * own left and right edges, so it never grows past 1440px (the user): on
	 * a wider screen it sits centered on the page ground. Pinned to the TOP —
	 * the man's head matters more than the ring (the user). Its box is
	 * 3000×1125, so its height is 0.375 of its width; the hero is usually a
	 * little taller, and fades sized to the same box soften its bottom edge
	 * and meet the page ground at its sides (its black is darker than
	 * surface-base, and at 1920 the box edge showed).
	 * Narrower than 1440px it slides right, off its own faded edge, so the
	 * man keeps clear of the words (at 1440 the heading touched his hand).
	 */
	--hero-pic-w: min(100vw, 1440px);
	--hero-pic-h: calc(var(--hero-pic-w) * 0.375);
	--hero-pic-x: calc((100vw - var(--hero-pic-w)) / 2 + max(0px, (1440px - 100vw) / 3));
	background-color: var(--csds-surface-base);
	background-image:
		linear-gradient(90deg, var(--csds-surface-base) 0%, color-mix(in srgb, var(--csds-surface-base) 85%, transparent) 32%, transparent 62%),
		linear-gradient(180deg, transparent 70%, var(--csds-surface-base) 100%),
		linear-gradient(90deg, var(--csds-surface-base) 0%, transparent 10%, transparent 90%, var(--csds-surface-base) 100%),
		url("../img/home-hero-wide-2400.webp");
	background-size: 100% 100%, var(--hero-pic-w) var(--hero-pic-h), var(--hero-pic-w) var(--hero-pic-h), var(--hero-pic-w) var(--hero-pic-h);
	background-position: 0 0, left var(--hero-pic-x) top, left var(--hero-pic-x) top, left var(--hero-pic-x) top;
	background-repeat: no-repeat;
	border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}

.csds-home__hero > .csds-home__wrap { position: relative; }

/* The words keep to the dark side: the heading may run wide, the paragraph does not. */
.csds-home__hero .csds-home__lead { max-width: 34rem; }

/*
 * The news band (072, the user): WNF's news ticker in its own strip between
 * the top bar and the hero, the federation pages' settings. WNF's literal
 * text colors are replaced by tokens here; its own mask fades both ends.
 */
.csds-home__newsband {
	padding: var(--csds-space-2) 0;
	background: var(--csds-surface-panel);
	border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}

.csds-home__newsband .wnf-ticker {
	color: var(--csds-ink);
	font: var(--csds-body-default);
}

.csds-home__newsband .wnf-ticker-empty { color: var(--csds-ink-muted); }

/* "Fight." in the accent (D755): crimson is for headlines 24px+ (tokens.json). */
.csds-home__title-accent { color: var(--csds-crimson); }

/* The hero's button carries a forward mark (D755): a ringed arrow, drawn in the label's own color. */
.csds-home__hero .csds-btn--active::after {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-left: var(--csds-space-2);
	vertical-align: -0.15em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 6l5 4-5 4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 6l5 4-5 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.csds-home__hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--csds-space-7);
	align-items: center;
}

.csds-home__eyebrow {
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	color: var(--csds-ink-muted);
	margin: 0 0 var(--csds-space-4);
}

/*
 * The page's only <h1>, and the one place the display face runs at hero scale.
 * `page-cyberslam.php`'s own pagehead is suppressed for this page so there is
 * exactly one — two <h1>s is a defect no colour check can see.
 */
.csds-home__title {
	font: var(--csds-display-hero);
	font-family: var(--csds-font-display);
	text-transform: uppercase;
	color: var(--csds-ink);
	margin: 0 0 var(--csds-space-5);
}

.csds-home__lead {
	font: var(--csds-body-lead);
	color: var(--csds-ink-muted);
	max-width: 40rem;
	margin: 0;
}

.csds-home__strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csds-space-6);
	margin-top: var(--csds-space-7);
	padding-top: var(--csds-space-5);
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
}

.csds-home__stat {
	display: flex;
	flex-direction: column;
	gap: var(--csds-space-1);
}

.csds-home__stat-value {
	font: var(--csds-display-name);
	font-family: var(--csds-font-display);
	color: var(--csds-ink);
}

.csds-home__stat-label {
	font: var(--csds-body-caption);
	color: var(--csds-ink-muted);
	text-transform: uppercase;
	letter-spacing: var(--csds-heading-label-letter-spacing);
}

/* ---------------------------------------------------- ladder visual ---- */

.csds-home__ladder-visual {
	display: flex;
	flex-direction: column;
	gap: var(--csds-space-2);
}

.csds-home__lstep {
	display: flex;
	align-items: center;
	gap: var(--csds-space-3);
	padding: var(--csds-space-3) var(--csds-space-4);
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
}

.csds-home__lstep--you {
	background: var(--csds-surface-raised);
	border-color: var(--csds-crimson);
}

.csds-home__lstep--more {
	background: none;
	border-style: dashed;
}

.csds-home__lname {
	font: var(--csds-heading-card);
	color: var(--csds-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csds-home__rank {
	font: var(--csds-display-belt);
	font-family: var(--csds-font-display);
	color: var(--csds-ink-muted);
	min-width: 2.5ch;
}

/* ------------------------------------------------- ladder teaser ---- */

/* A band whose head sits beside its content (072): the ladder, at width. */
.csds-home__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--csds-space-7);
	align-items: center;
}

.csds-home__split .csds-home__band-head { margin: 0; }

.csds-home__teaser {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--csds-space-2);
}

.csds-home__teaser-row {
	display: flex;
	align-items: center;
	gap: var(--csds-space-4);
	padding: var(--csds-space-3) var(--csds-space-4);
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
	box-shadow: var(--csds-shadow-panel-inset);
}

.csds-home__teaser-row:first-child { border-left: var(--csds-border-thick) solid var(--csds-crimson); }

.csds-home__teaser-pic {
	flex: none;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: var(--csds-radius-xs);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	background: var(--csds-surface-raised);
}

.csds-home__tname {
	font: var(--csds-heading-card);
	color: var(--csds-ink);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.csds-home__teaser .csds-home__ctas,
.csds-home__split .csds-home__ctas { margin-top: var(--csds-space-4); }

/* The names at 20px (the user): heading-section's size, card's face. */
.csds-home__teaser .csds-home__tname { font-size: var(--csds-heading-section-size); }

/* The sign-up button under the list, centered (the user). */
.csds-home__teaser + .csds-home__ctas { justify-content: center; }

/* A button on its own row under both columns, centered across the whole
   section (the ladder's sign-up, the user). The grid's gap is its space. */
.csds-home__split-cta {
	grid-column: 1 / -1;
	justify-content: center;
	margin: 0;
}

/*
 * Desktop: the list stands in 3D (the user's angles). The rows share its
 * space (preserve-3d), so a row can lift toward the viewer on hover.
 * Phones and narrow screens keep it flat.
 */
@media (min-width: 901px) {
	.csds-home__teaser {
		transform: perspective(900px) rotateY(-22deg) rotateX(15deg);
		transform-style: preserve-3d;
	}
}

/*
 * Hover (pointer devices only): the row lifts toward the viewer and steps
 * out a little, its edge goes crimson and its picture grows; the other rows
 * step back. `transform` is used here and `translate` by the motion below,
 * so the two compose instead of overriding each other.
 */
.csds-home__teaser-row,
.csds-home__teaser-pic {
	transition:
		transform calc(var(--csds-motion-duration) * 1.5) var(--csds-motion-ease),
		filter calc(var(--csds-motion-duration) * 1.5) var(--csds-motion-ease),
		border-color var(--csds-motion-duration) var(--csds-motion-ease),
		background-color var(--csds-motion-duration) var(--csds-motion-ease),
		box-shadow var(--csds-motion-duration) var(--csds-motion-ease);
}

@media (hover: hover) {
	.csds-home__teaser-row:hover {
		transform: translateZ(28px) translateX(calc(var(--csds-motion-slide) * -1));
		background-color: var(--csds-surface-raised);
		border-color: var(--csds-crimson);
		box-shadow: var(--csds-shadow-offset);
	}

	.csds-home__teaser-row:hover .csds-home__teaser-pic { transform: scale(1.08); }

	/* Dimmed by brightness, not opacity: the scroll entrance animates opacity
	   and an animation wins over any hover rule. */
	.csds-home__teaser:hover .csds-home__teaser-row:not(:hover) { filter: brightness(0.72); }
}

/*
 * Motion, only for viewers who have not asked their device for less:
 *  - the whole list drifts a few pixels up and down, slowly, always;
 *  - each row slides in from the right as it scrolls into view, the lower
 *    rows a beat later. Scroll-driven, so CSS only; a browser without
 *    `animation-timeline` (Firefox today) shows the rows in place.
 */
@media (prefers-reduced-motion: no-preference) {
	.csds-home__teaser { animation: csds-teaser-drift 7s ease-in-out infinite; }

	@supports (animation-timeline: view()) {
		.csds-home__teaser-row {
			animation: csds-teaser-in linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 30%;
		}

		.csds-home__teaser-row:nth-child(2) { animation-range: entry 8% cover 34%; }
		.csds-home__teaser-row:nth-child(3) { animation-range: entry 16% cover 38%; }
		.csds-home__teaser-row:nth-child(4) { animation-range: entry 24% cover 42%; }
		.csds-home__teaser-row:nth-child(5) { animation-range: entry 32% cover 46%; }
	}
}

@keyframes csds-teaser-drift {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 calc(var(--csds-motion-slide) * -0.75); }
}

@keyframes csds-teaser-in {
	from {
		opacity: 0;
		translate: calc(var(--csds-motion-slide) * 8) 0;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* ------------------------------------------------- federation cards ---- */

.csds-home__fedcards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--csds-space-4);
}

.csds-home__fedcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--csds-space-2);
	min-width: 0;
	padding: var(--csds-space-5);
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
	text-align: center;
	text-decoration: none;
	color: var(--csds-ink);
}

.csds-home__fedcard:hover,
.csds-home__fedcard:focus {
	border-color: var(--csds-crimson);
	background: var(--csds-surface-raised);
}

.csds-home__fedcard-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 7rem;
	margin-bottom: var(--csds-space-2);
}

.csds-home__fedcard-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.csds-home__fedcard-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	font: var(--csds-display-name);
	font-family: var(--csds-font-display);
	background: var(--csds-blood);
	color: var(--csds-ink);
	border-radius: var(--csds-radius-sm);
}

.csds-home__fedcard-name {
	font: var(--csds-heading-section);
	font-family: var(--csds-font-display);
	text-transform: uppercase;
	color: var(--csds-ink);
}

.csds-home__fedcard-tag,
.csds-home__fedcard-count {
	font: var(--csds-body-caption);
	color: var(--csds-ink-muted);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------ steps ---- */

.csds-home__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--csds-space-4);
}

.csds-home__step {
	padding: var(--csds-space-5);
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	border-radius: var(--csds-radius-xs);
}

.csds-home__step-n {
	display: block;
	font: var(--csds-display-name);
	font-family: var(--csds-font-display);
	color: var(--csds-crimson);
	margin-bottom: var(--csds-space-3);
}

.csds-home__step h3 {
	font: var(--csds-heading-section);
	color: var(--csds-ink);
	margin: 0 0 var(--csds-space-2);
}

.csds-home__step p {
	font: var(--csds-body-default);
	color: var(--csds-ink-muted);
	margin: 0;
}

/* -------------------------------------------------------- final CTA ---- */

.csds-home__final {
	padding: var(--csds-space-8) 0;
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	background: var(--csds-surface-panel);
	text-align: center;
}

.csds-home__final h2 {
	font: var(--csds-display-title);
	font-family: var(--csds-font-display);
	text-transform: uppercase;
	color: var(--csds-ink);
	margin: 0 0 var(--csds-space-3);
}

.csds-home__final p {
	font: var(--csds-body-lead);
	color: var(--csds-ink-muted);
	margin: 0;
}

.csds-home__final .csds-home__ctas { justify-content: center; }

/* ----------------------------------------------------------- mobile ---- */

@media (max-width: 900px) {
	.csds-home__hero-grid,
	.csds-home__split { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Below 1200px there is no dark side wide enough to write on (measured: at
 * 1024 the words sat on the wrestler). The picture keeps to the top right,
 * and the fade runs down instead, darkest under the words.
 */
@media (max-width: 1199px) {
	.csds-home__hero {
		align-items: flex-end;
		min-height: 36rem;
		background-image:
			linear-gradient(180deg, color-mix(in srgb, var(--csds-surface-base) 40%, transparent) 0%, color-mix(in srgb, var(--csds-surface-base) 82%, transparent) 30%, color-mix(in srgb, var(--csds-surface-base) 94%, transparent) 45%, var(--csds-surface-base) 70%),
			url("../img/home-hero-wide-1200.webp");
		background-size: cover, auto 70%;
		background-position: center, 66% top;
	}

}

@media (max-width: 640px) {
	.csds-home__wrap { padding: 0 var(--csds-space-4); }

	.csds-home__band,
	.csds-home__hero,
	.csds-home__final { padding: var(--csds-space-6) 0; }

	.csds-home__title { font-size: var(--csds-display-title-size); }

	.csds-home__band-head h2 { font-size: var(--csds-display-name-size); }

	.csds-home__fedcards { grid-template-columns: minmax(0, 1fr); }

	.csds-home__fedcard-logo { height: 5rem; }
}