/* Home scene 01: products on a pinned horizontal track (S01, COMPONENTS 12-13). Plate base styles are in ui-showcase.css. */

.prod {
	position: relative;
	background: var(--ink-900);
}

.prod-pin {
	position: relative;
}

.prod-stick {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(18px, 3svh, 36px);
	overflow: hidden;
	padding-block: calc(var(--hdr-h, 72px) + 24px) 24px;
	background:
		radial-gradient(50% 60% at 100% 0%, color-mix(in srgb, var(--blue-500) 22%, transparent), transparent 70%),
		radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--gold-300) 12%, transparent), transparent 70%),
		var(--ink-900);
}

.prod-stick::before {
	content: "";
	position: absolute;
	inset: 0 var(--rail);
	border-inline: var(--hairline) solid var(--ln);
	pointer-events: none;
}

.prod-head {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--margin);
	align-items: end;
}

.prod-head .sec-head {
	display: grid;
	gap: 14px;
}

.prod-head .d2 {
	font-size: clamp(36px, 4.6vw, 76px);
}

.lead-col {
	display: grid;
	gap: 14px;
	justify-items: start;
	justify-self: end;
}

.lead-col .go {
	color: var(--gold-300);
}

.wl-sent {
	color: var(--gold-300);
}

/* The track: native horizontal scroll with snap by default, pinned and driven by the page scroll when home-products.js adds .is-pinned. */
.track-view {
	position: relative;
	display: flex;
	overflow-x: auto;
	padding-inline: var(--rail);
	padding-block: 8px;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--rail);
	scrollbar-width: none;
}

.track-view::-webkit-scrollbar {
	display: none;
}

.track {
	display: flex;
	gap: clamp(16px, 2vw, 28px);
	align-items: stretch;
}

.pplate {
	flex: none;
	width: min(520px, 82vw);
	min-height: clamp(380px, 56svh, 540px);
	scroll-snap-align: start;
	transition: border-color var(--d-base) var(--ease);
}

.pplate .part {
	flex: 1;
	min-height: 0;
	place-items: center;
}

.pplate .pbar b {
	white-space: nowrap;
}

.pplate .tag-own {
	border-color: var(--pa, var(--blue-300));
	color: var(--pa, var(--blue-300));
}

.pplate .pfoot {
	grid-template-columns: 1fr;
}

/* Waitlist form for a product that is not live yet */
.wl {
	position: relative;
	z-index: 3;
	display: grid;
	gap: 12px;
	margin-block-start: 6px;
}

.wl-msg {
	min-height: 1.4em;
	color: var(--gold-300);
}

/* Caliper progress: counter and a ruler with a moving gauge */
.cal {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-inline: var(--rail);
	color: var(--gray-300);
}

.cal [data-cal-count] {
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.cal .scale {
	position: relative;
	flex: 1;
	height: 28px;
	cursor: pointer;
	background:
		repeating-linear-gradient(90deg, var(--ln-s) 0 1px, transparent 1px 12px) 0 100% / 100% 8px no-repeat,
		repeating-linear-gradient(90deg, var(--gold-300) 0 1px, transparent 1px 120px) 0 100% / 100% 18px no-repeat;
}

.cal .car {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 30px;
	border-inline: var(--hairline) solid var(--gold-300);
	background: linear-gradient(90deg, color-mix(in srgb, var(--gold-300) 22%, transparent), color-mix(in srgb, var(--gold-300) 4%, transparent));
	will-change: transform;
}

.cal .car::after {
	content: "";
	position: absolute;
	inset-inline: -1px;
	inset-block-start: 0;
	height: 2px;
	background: var(--gold-300);
}

/* Wide screens with enough products to scroll: the scene is as tall as the track is long, the stage sticks. */
@media (min-width: 1001px) {
	.is-pinned .prod-stick {
		position: sticky;
		inset-block-start: 0;
		height: 100svh;
	}

	.is-pinned .track-view {
		overflow: hidden;
		scroll-snap-type: none;
		clip-path: inset(-30px var(--rail));
	}

	.is-pinned .track {
		will-change: transform;
	}

	.is-pinned .pplate {
		height: clamp(380px, 56svh, 540px);
	}
}

@media (max-width: 1000px) {
	.prod-head {
		grid-template-columns: minmax(0, 1fr);
	}

	.lead-col {
		justify-self: start;
	}

	.prod-stick {
		padding-block: clamp(60px, 9vw, 100px);
	}
}

.rm .pplate,
.rm .track {
	transition: none;
}