/*
 * Product Spotlight: full-section scroll-scrubbed sequence.
 *
 * Extracted from homepage.css because the component is now shared — the
 * homepage renders it as one section among many, and the single-product
 * template (templates/single-product.php) renders it as the whole page
 * header. Both enqueue this file so there is one copy of the rules.
 *
 * Depends on the tokens in global.css.
 */

.product-spotlight {
	height: 420vh;
	position: relative;
	border-bottom: 1px solid var(--white--8);
	background: var(--black);

	.product-spotlight__corner {
		position: absolute;
		width: 22px;
		height: 22px;
		border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
		z-index: 1;
		pointer-events: none;
	}

	.product-spotlight__corner--tl {
		top: 26px;
		left: 26px;
		border-right: 0;
		border-bottom: 0;
	}

	.product-spotlight__corner--tr {
		top: 26px;
		right: 26px;
		border-left: 0;
		border-bottom: 0;
	}

	.product-spotlight__corner--bl {
		bottom: 26px;
		left: 26px;
		border-right: 0;
		border-top: 0;
	}

	.product-spotlight__corner--br {
		right: 26px;
		bottom: 26px;
		border-left: 0;
		border-top: 0;
	}

	.product-spotlight__sticky {
		position: sticky;
		top: 0;
		height: 100svh;
		height: 100dvh;
		min-height: 820px;
		overflow: hidden;
	}

	.product-spotlight__glow {
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 55% 38% at 50% 48%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 70%);
		pointer-events: none;
	}

	.product-spotlight__fallback,
	.product-spotlight__canvas {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.product-spotlight__fallback {
		object-fit: contain;
		box-sizing: border-box;
		padding: 27% 33%;
		transition: opacity 180ms ease-out;
	}

	.product-spotlight__fallback.is-hidden {
		opacity: 0;
	}

	.product-spotlight__canvas {
		mix-blend-mode: plus-lighter;
		pointer-events: none;
	}

	.product-spotlight__video {
		position: absolute;
		width: 1px;
		height: 1px;
		opacity: 0;
		pointer-events: none;
	}

	.product-spotlight__hud {
		position: absolute;
		inset: 0;
		max-width: none;
		width: 100%;
		height: 100%;
		pointer-events: none;
		line-height: 1;
		padding-left: var(--inset-gutter);
		padding-right: var(--inset-gutter);
	}

	.product-spotlight__hud-top {
		position: absolute;
		top: 34px;
		left: var(--inset-gutter);
		right: var(--inset-gutter);
		display: flex;
		justify-content: space-between;
		align-items: baseline;
	}

	.product-spotlight__label {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		font-family: var(--font);
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--white--50);
	}

	.product-spotlight__label-tick {
		width: 7px;
		height: 7px;
		background: var(--teal);
		flex-shrink: 0;
	}

	.product-spotlight__readout {
		text-align: right;
		font-family: var(--font);
		font-size: 14px;
		letter-spacing: var(--track-meta);
		color: var(--teal);
		font-variant-numeric: tabular-nums;
	}

	/*
	 * Phase opacity/transform are written as inline styles by the scrub in
	 * packed-scrub.js, so a stylesheet rule cannot override them — but a CSS
	 * animation can, since animations outrank inline styles in the cascade.
	 * That is how product.css gives phase A an on-load intro.
	 */
	.product-spotlight__phase {
		position: absolute;
		will-change: opacity, transform;
	}

	.product-spotlight__phase--a {
		left: var(--inset-gutter);
		top: 16%;
		max-width: 520px;
	}

	.product-spotlight__title {
		font-family: var(--font);
		font-size: clamp(34px, 4.2vw, 58px);
		line-height: 1.05;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--white);
		text-wrap: balance;
		margin-bottom: 18px;
		color: var(--white);
	}

	.product-spotlight__sub {
		font-family: var(--font);
		font-size: 14px;
		letter-spacing: var(--track-meta);
		text-transform: uppercase;
		color: var(--white--70);
	}

	.product-spotlight__phase--b {
		right: var(--inset-gutter);
		top: 13%;
		max-width: 340px;
		text-align: right;
	}

	.product-spotlight__stat {
		font-variant-numeric: tabular-nums;
		line-height: 1;
	}

	.product-spotlight__stat-num {
		font-family: var(--font);
		font-size: clamp(48px, 5.5vw, 80px);
		font-weight: 400;
		letter-spacing: -0.02em;
		color: var(--white);
	}

	.product-spotlight__stat-unit {
		font-family: var(--font);
		font-size: clamp(22px, 2.4vw, 36px);
		color: var(--teal);
		margin-left: 6px;
		letter-spacing: 0.04em;
	}

	.product-spotlight__stat-label {
		font-family: var(--font);
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.2em;
		text-transform: uppercase;
		color: var(--white--50);
		margin: 12px 0 16px;
	}

	.product-spotlight__stat-copy {
		font-size: 14px;
		line-height: 1.65;
		color: var(--white--70);
	}

	.product-spotlight__phase--c {
		left: 50%;
		bottom: 7%;
		translate: -50% 0;
		width: min(560px, calc(100vw - 2 * var(--gutter)));
		text-align: center;
	}

	.product-spotlight__c-copy {
		font-family: var(--font);
		font-size: clamp(18px, 2vw, 24px);
		line-height: 1.45;
		color: var(--white);
		margin-bottom: 28px;
		text-wrap: pretty;
	}

	@media (max-width: 900px) {
		height: 340vh;

		.product-spotlight__label-tick {
			display: none;
		}

		.product-spotlight__hud {
			padding-inline: 16px;
		}

		.product-spotlight__hud-top {
			top: 18px;
		}

		.product-spotlight__hud-top * {
			font-size: 12px;
		}

		.product-spotlight__sub,
		.product-spotlight__stat-label {
			font-size: 10px;
		}

		.product-spotlight__sticky {
			min-height: 720px;
		}

		.product-spotlight__fallback {
			padding: 30% 34%;
		}

		.product-spotlight__phase--a {
			top: 14%;
			max-width: min(60vw, 420px);
		}

		.product-spotlight__title {
			margin-bottom: 10px;
		}

		.product-spotlight__phase--b {
			top: 14%;
			max-width: 240px;
		}

		.product-spotlight__stat-copy {
			display: none;
		}

		.product-spotlight__phase--c {
			bottom: 8%;
		}

		.product-spotlight__c-copy {
			line-height: 1.5;
		}

		.product-spotlight__corner--tl,
		.product-spotlight__corner--bl {
			left: 12px;
		}

		.product-spotlight__corner--tr,
		.product-spotlight__corner--br {
			right: 12px;
		}

		.product-spotlight__corner--tl,
		.product-spotlight__corner--tr {
			top: 12px;
		}

		.product-spotlight__corner--bl,
		.product-spotlight__corner--br {
			bottom: 12px;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.product-spotlight__fallback {
			transition: none;
		}

		.product-spotlight__phase {
			will-change: auto;
			transition: none;
		}
	}
}