/**
 * Carlo Rino — Lookbook scroll-expand (Figma: Banner Animation/Lookbook).
 *
 * Apply class `cr-scroll-expand` to any block wrapper. Nested structure
 * (track → sticky → media) is injected by scroll-expand.js when missing.
 *
 * Progress `--cr-se-p` (0 → 1): centered inset → full-bleed container.
 * JS drives p as the section scrolls into view (full width once in place).
 */

.cr-scroll-expand {
	--cr-se-p: 0;
	/* 640×337px @ 16px root → rem; capped by vw so it scales on smaller screens */
	--cr-se-frame-w-start: min(40rem, 44.44vw);
	--cr-se-frame-h-start: min(21.0625rem, calc(44.44vw * 337 / 640));
	--cr-se-radius-start: 0.125rem; /* 2px */
	--cr-se-sticky-h: 100svh;
	/* Extra track after pin so sticky can hold the expanded frame briefly */
	--cr-se-scroll-range: 16vh;
	width: 100%;
	max-width: 100%;
}

/* Media Banner: sticky height follows the block height setting. */
.cr-media-banner.cr-scroll-expand {
	--cr-se-sticky-h: var(--cr-vb-height, 100svh);
	--cr-se-scroll-range: min(16vh, var(--cr-vb-height, 16vh));
}

/* Match Media Banner full-bleed breakout when used on that block. */
.cr-media-banner.cr-scroll-expand.is-fullbleed,
.cr-scroll-expand.is-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.cr-scroll-expand__track {
	position: relative;
	height: calc(var(--cr-se-sticky-h) + var(--cr-se-scroll-range));
	min-height: var(--cr-se-sticky-h);
}

.cr-scroll-expand__sticky {
	position: sticky;
	top: 0;
	z-index: 1;
	height: var(--cr-se-sticky-h);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cr-scroll-expand__media {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cr-scroll-expand__media-inner {
	position: relative;
	/* Lerp inset → 100% of sticky (avoids invalid calc with min() − %) */
	width: calc(
		(var(--cr-se-frame-w-start) * (1 - var(--cr-se-p))) + (100% * var(--cr-se-p))
	);
	height: calc(
		(var(--cr-se-frame-h-start) * (1 - var(--cr-se-p))) + (100% * var(--cr-se-p))
	);
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
	border-radius: calc(var(--cr-se-radius-start) * (1 - var(--cr-se-p)));
	will-change: width, height, border-radius;
}

/* Media Banner internals fill the expanding frame. */
.cr-scroll-expand .cr-media-banner__inner {
	height: 100% !important;
	width: 100%;
	border-radius: inherit;
}

.cr-scroll-expand .cr-media-banner__video,
.cr-scroll-expand .cr-media-banner__img,
.cr-scroll-expand__media-inner > img,
.cr-scroll-expand__media-inner > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

@media (max-width: 576px) {
	.cr-scroll-expand {
		--cr-se-frame-w-start: min(40rem, 76vw);
		--cr-se-frame-h-start: min(21.0625rem, calc(76vw * 337 / 640));
	}

	.cr-media-banner.cr-scroll-expand {
		--cr-se-sticky-h: var(--cr-vb-height-mobile, var(--cr-vb-height, 100svh));
		--cr-se-scroll-range: min(12vh, var(--cr-vb-height-mobile, var(--cr-vb-height, 12vh)));
	}

	/* Optional: static full-bleed banner on mobile (no scroll animation). */
	.cr-scroll-expand.cr-scroll-expand--no-mobile {
		--cr-se-p: 1;
		--cr-se-scroll-range: 0px;
	}

	.cr-scroll-expand.cr-scroll-expand--no-mobile .cr-scroll-expand__track {
		height: var(--cr-se-sticky-h);
		min-height: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-scroll-expand {
		--cr-se-p: 1;
	}

	.cr-scroll-expand__track {
		height: var(--cr-se-sticky-h);
		min-height: 0;
	}
}