/*
 * Story page: the line-up table, the scroll-lit timeline, former members and features.
 * Loaded only on the Story page.
 */

.page-hero--story {
	min-height: 720px;
	background:
		linear-gradient(90deg, var(--wp--preset--color--ink) 0%, rgba(11, 11, 13, .6) 40%, rgba(11, 11, 13, 0) 65%),
		linear-gradient(180deg, rgba(11, 11, 13, 0) 60%, var(--wp--preset--color--ink) 100%),
		/* The stage wefie, full width. */
		url("../img/story-hero-desktop.webp") 50% 40% / cover no-repeat,
		var(--wp--preset--color--ink);
}

.page-hero--story h1 {
	max-width: 900px;
	font-size: var(--wp--preset--font-size--display);
}

.meta.is-tungsten,
.show-date.is-tungsten {
	color: var(--wp--preset--color--tungsten);
}

/* ---------- The band now: prints on a table ----------
   A hand-placed composition (positions in story-band.php, in design px). Everything is
   design px times --u, so the whole table scales with its width like a picture:
   1180 x 730 on desktop, 358 x 1070 on phones. */
.lineup {
	--u: calc(100cqw / 1180);
	--settle: cubic-bezier(.2, .9, .25, 1.12);
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	aspect-ratio: 1180 / 730;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

/* One light per room: a warm lamp over the table. */
.lineup::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -6% -2%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--tungsten) 10%, transparent), transparent);
	pointer-events: none;
}

.lineup__print {
	position: absolute;
	z-index: 1;
	left: calc(var(--px) * var(--u));
	top: calc(var(--py) * var(--u));
	width: calc(252 * var(--u));
	margin: 0;
	transform: translateY(0) rotate(calc(var(--pr) * 1deg)) scale(1);
	filter: drop-shadow(0 calc(18 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
	transition:
		transform 450ms var(--settle),
		filter 450ms ease,
		opacity 400ms ease;
}

/* Torn edges: each print has its own mask (assets/img/torn). */
.lineup__print img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	-webkit-mask: var(--torn) 0 0 / 100% 100% no-repeat;
	mask: var(--torn) 0 0 / 100% 100% no-repeat;
	filter: grayscale(1) contrast(1.05);
	transition: filter 350ms ease;
}

.lineup__label {
	position: absolute;
	z-index: 4;
	left: calc(var(--lx) * var(--u));
	top: calc(var(--ly) * var(--u));
	transform: rotate(calc(var(--lr) * 1deg)) scale(1);
	font-family: var(--wp--preset--font-family--hand);
	white-space: nowrap;
	transition:
		transform 350ms var(--settle),
		opacity 350ms ease,
		clip-path 650ms cubic-bezier(.4, 0, .2, 1);
}

.lineup__name {
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: calc(42 * var(--u));
	line-height: calc(38 * var(--u));
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--bone);
}

.lineup__role {
	margin: calc(-4 * var(--u)) 0 0;
	font-size: calc(26 * var(--u));
	line-height: calc(24 * var(--u));
	text-transform: lowercase;
	color: var(--wp--preset--color--tungsten);
}

/* Arrows: each member's own, drawn on the table's 1180 x 730 grid. The hot copy draws over
   the ink one on hover. */
.lineup__arrow {
	position: absolute;
	z-index: 4;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

/* pathLength is 1: a dash of 1 is the whole stroke. The gap is longer than the path so a
   hidden stroke leaves no round-cap dot at its end. */
.lineup__arrow path {
	stroke-dasharray: 1 2;
	stroke-dashoffset: 0;
}

.lineup__ink {
	stroke: var(--wp--preset--color--bone);
	stroke-width: 1.6;
}

.lineup__hot {
	stroke: var(--wp--preset--color--tungsten);
	stroke-width: 2.4;
}

.lineup .lineup__hot {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 420ms ease-out;
}

.lineup .lineup__hot.lineup__head {
	transition-duration: 140ms;
}

/* Dealt onto the table when it comes into view: motion.js adds .is-armed, then .is-dealt
   and, for the length of the entrance, .is-dealing. Prints drop in one by one and settle,
   each arrow is drawn, then the label is written in. */
.lineup.is-armed:not(.is-dealt) :is(.lineup__print, .lineup__label, .lineup__ink) {
	transition: none;
}

.lineup.is-armed:not(.is-dealt) .lineup__print {
	opacity: 0;
	transform: translateY(calc(-40 * var(--u))) rotate(calc(var(--pr) * 3deg)) scale(1.08);
}

.lineup.is-armed:not(.is-dealt) .lineup__ink {
	stroke-dashoffset: 1;
}

.lineup.is-armed:not(.is-dealt) .lineup__label {
	clip-path: inset(-30% 110% -30% -10%);
}

.lineup.is-dealt .lineup__label {
	clip-path: inset(-30% -10% -30% -10%);
}

.lineup.is-dealing .lineup__print {
	transition:
		transform 800ms var(--settle) calc(var(--i) * 120ms),
		opacity 300ms ease calc(var(--i) * 120ms);
}

.lineup.is-dealing .lineup__ink.lineup__shaft {
	transition: stroke-dashoffset 480ms ease-out calc(var(--i) * 120ms + 450ms);
}

.lineup.is-dealing .lineup__ink.lineup__head {
	transition: stroke-dashoffset 160ms ease-out calc(var(--i) * 120ms + 930ms);
}

.lineup.is-dealing .lineup__label {
	transition: clip-path 650ms cubic-bezier(.4, 0, .2, 1) calc(var(--i) * 120ms + 600ms);
}

/* Hover (mouse and trackpad): the print straightens and lifts off the table, the others
   dim and the arrow is redrawn in tungsten. */
@media (hover: hover) and (pointer: fine) {
	.lineup__member:hover .lineup__print {
		z-index: 3;
		transform: translateY(calc(-8 * var(--u))) rotate(0deg) scale(1.06);
		filter: drop-shadow(0 calc(30 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, .7)) drop-shadow(0 3px 3px rgba(0, 0, 0, .5));
	}

	.lineup__member:hover .lineup__print img {
		filter: grayscale(1) contrast(1.1) brightness(1.08);
	}

	.lineup:has(.lineup__member:hover) .lineup__member:not(:hover) .lineup__print img {
		filter: grayscale(1) contrast(1.05) brightness(.5);
	}

	.lineup:has(.lineup__member:hover) .lineup__member:not(:hover) :is(.lineup__label, .lineup__arrow) {
		opacity: .4;
	}

	.lineup__member:hover .lineup__label {
		transform: rotate(0deg) scale(1.06);
	}

	.lineup__member:hover .lineup__hot {
		stroke-dashoffset: 0;
	}

	.lineup__member:hover .lineup__hot.lineup__head {
		transition-delay: 380ms;
	}

	.lineup__arrow {
		transition: opacity 350ms ease;
	}
}

/* ---------- Timeline ---------- */
.timeline-room {
	padding-block: 96px 120px;
}

.timeline {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 80px;
	align-items: start;
}

.timeline__sticky {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px);
}

.timeline__sticky > * + * {
	margin-block-start: 18px;
}

.timeline__year {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 9vw, 8rem);
	line-height: 0.95;
	color: var(--wp--preset--color--tungsten);
	font-variant-numeric: tabular-nums;
	text-transform: uppercase;
}

.timeline__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	text-transform: uppercase;
	line-height: 1.05;
}

.timeline__bar {
	display: block;
	height: 3px;
	background: var(--wp--preset--color--smoke);
}

.timeline__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wp--preset--color--tungsten);
	transition: width var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.timeline__ends {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
}

.timeline__entries {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.timeline__entries::before,
.timeline__entries::after {
	content: "";
	position: absolute;
	left: 11px;
	top: 12px;
	width: 2px;
	bottom: 0;
	background: var(--wp--preset--color--smoke);
}

.timeline__entries::after {
	bottom: auto;
	height: var(--tl-lit, 0);
	background: var(--wp--preset--color--tungsten);
	transition: height var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.timeline:not(.is-live) .timeline__entries::after {
	display: none;
}

.tl-entry {
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 28px;
	padding-bottom: 44px;
}

/* Centred on the 2px line at 11px: 18px wide including the border, so 3px in. */
.tl-entry__dot {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	margin: 4px 0 0 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--tungsten);
	border: 2px solid var(--wp--preset--color--tungsten);
	transition: transform var(--wp--custom--motion--base) ease, background-color var(--wp--custom--motion--base) ease;
}

.tl-entry__card {
	border: 1px solid transparent;
	transition: opacity var(--wp--custom--motion--slow) var(--wp--custom--motion--ease), background-color var(--wp--custom--motion--base) ease, border-color var(--wp--custom--motion--base) ease;
}

.tl-entry__card > * + * {
	margin-block-start: 10px;
}

.tl-entry__card h3 {
	font-size: var(--wp--preset--font-size--display-m);
}

.tl-entry__year {
	color: var(--wp--preset--color--tungsten);
}

/* Not yet reached: dimmed card, hollow dot (only while the script is running).
   The dot stays opaque so the line doesn't show through it. */
.timeline.is-live .tl-entry:not(.is-lit) .tl-entry__card {
	opacity: .38;
}

.timeline.is-live .tl-entry:not(.is-lit) .tl-entry__dot {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--smoke);
}

.timeline.is-live .tl-entry:not(.is-lit) .tl-entry__year {
	color: var(--wp--preset--color--ash);
}

.timeline.is-live .tl-entry.is-current .tl-entry__dot {
	transform: scale(1.45);
	box-shadow: 0 0 18px rgba(232, 144, 79, .7);
}

.timeline.is-live .tl-entry.is-current .tl-entry__card {
	background: var(--wp--preset--color--soot);
	border-color: var(--wp--preset--color--tungsten);
	border-radius: 6px;
	padding: 24px 28px 28px;
	margin: -24px 0 0 -28px;
}

.tl-chip {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px 12px 12px;
	background: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--graphite);
	border-radius: 4px;
	text-decoration: none;
	transition: border-color var(--wp--custom--motion--fast) ease;
}

.tl-chip:hover {
	border-color: var(--wp--preset--color--tungsten);
}

.tl-chip .meta {
	color: var(--wp--preset--color--bone);
}

.tl-chip__play {
	position: relative;
	flex: 0 0 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--color--tungsten);
}

.tl-chip__play::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 11px;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent var(--wp--preset--color--ink);
}

.tl-entry__video {
	max-width: 560px;
}

.tl-entry__image {
	display: block;
	width: 120px;
}

.tl-entry__image img {
	display: block;
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 4px;
}

/* ---------- Former members + features ---------- */
.former {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.former li {
	border: 1px solid var(--wp--preset--color--smoke);
	border-radius: 6px;
	padding: 22px 24px 24px;
}

.former li > * + * {
	margin-block-start: 8px;
}

.former h3 {
	font-size: var(--wp--preset--font-size--display-m);
}

.former .muted {
	font-size: 0.9375rem;
}

.features {
	list-style: none;
	margin-inline: 0;
	padding: 0;
}

.features li {
	display: grid;
	grid-template-columns: 90px minmax(0, 420px) minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	padding-block: 20px;
	border-bottom: 1px solid var(--wp--preset--color--graphite);
}

.features h3 {
	font-size: var(--wp--preset--font-size--x-large);
}

.features__link a {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--corridor-text);
	text-decoration: none;
}

.features__link .meta {
	color: var(--wp--preset--color--smoke);
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.timeline {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 48px;
	}
}

/* ---------- Phone ---------- */
@media (max-width: 781px) {
	.page-hero--story {
		min-height: 0;
		padding-block: 320px 40px;
		background:
			linear-gradient(180deg, rgba(11, 11, 13, .1) 0%, rgba(11, 11, 13, .45) 40%, var(--wp--preset--color--ink) 72%),
			url("../img/story-hero-mobile.webp") 50% 0% / 100% auto no-repeat,
			var(--wp--preset--color--ink);
	}

	/* "ORIGINALS." is one long word: size it to the screen so it never overflows. */
	.page-hero--story h1 {
		font-size: min(var(--wp--preset--font-size--display), 12vw);
	}

	/* Phones: the prints zig-zag down the table, each label tucked beside its photo, no arrows. */
	.lineup {
		--u: calc(100cqw / 358);
		aspect-ratio: 358 / 1070;
		max-width: 440px;
		margin: 28px auto 0;
	}

	.lineup::before {
		inset: -2% -12%;
	}

	.lineup__print {
		left: calc(var(--m-x) * var(--u));
		top: calc(var(--m-y) * var(--u));
		width: calc(196 * var(--u));
		transform: translateY(0) rotate(calc(var(--m-r) * 1deg)) scale(1);
		filter: drop-shadow(0 calc(14 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
	}

	.lineup.is-armed:not(.is-dealt) .lineup__print {
		transform: translateY(calc(-40 * var(--u))) rotate(calc(var(--m-r) * 3deg)) scale(1.08);
	}

	.lineup__label {
		left: calc((var(--m-x) + 208) * var(--u));
		top: calc((var(--m-y) + 98) * var(--u));
		transform: translateY(-50%) rotate(calc(var(--m-lr) * 1deg)) scale(1);
	}

	.lineup__member.is-label-left .lineup__label {
		left: auto;
		right: calc((370 - var(--m-x)) * var(--u));
		text-align: right;
	}

	.lineup__name {
		font-size: calc(34 * var(--u));
		line-height: calc(31 * var(--u));
	}

	.lineup__role {
		font-size: calc(22 * var(--u));
		line-height: calc(20 * var(--u));
	}

	.lineup__arrow {
		display: none;
	}

	@media (hover: hover) and (pointer: fine) {
		.lineup__member:hover .lineup__label {
			transform: translateY(-50%) rotate(0deg) scale(1.06);
		}
	}

	.timeline-room {
		padding-block: 56px 72px;
	}

	.timeline {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* The pinned year becomes a compact bar under the header. */
	.timeline__sticky {
		top: calc(var(--wp-admin--admin-bar--height, 0px) + 66px);
		z-index: 5;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 4px 14px;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left));
		padding: 12px var(--wp--style--root--padding-left);
		background: color-mix(in srgb, var(--wp--preset--color--ink) 94%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--wp--preset--color--graphite);
	}

	.timeline__sticky > * + * {
		margin-block-start: 0;
	}

	.timeline__sticky .eyebrow,
	.timeline__progress {
		grid-column: 1 / -1;
	}

	.timeline__year {
		font-size: 3rem;
	}

	.tl-entry {
		gap: 14px;
	}

	.timeline.is-live .tl-entry.is-current .tl-entry__card {
		padding: 16px 16px 20px;
		margin: -16px 0 0 -16px;
	}

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

	.features li {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}
}