/* ===========================================================================
   Intro — Cinematic Aperture
   Northline Dance Company, Montréal.

   One archival stage image carries the entire opener. At rest it leads a
   compact programme note. With the GSAP tier confirmed, the same image begins
   as a narrow proscenium slit and opens into the full viewport while the one
   chapter settles at its foot.

   The default is intentionally complete. Only the html.vb-gsap layer assumes
   that the viewport will be pinned and that the primitive will own opacity,
   transform and clip-path.
   ======================================================================== */

.vbs-intro-cinematic-aperture {
	--vb-cinema-scroll: 220vh;
	position: relative;
}

/* --- Resting composition ------------------------------------------------- */
.vbs-intro-cinematic-aperture__scroll {
	padding-block: var(--vb-space-section);
}

.vbs-intro-cinematic-aperture__viewport {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	inline-size: 100%;
	max-inline-size: calc(var(--vb-max-wide) + var(--vb-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--vb-gutter);
}

.vbs-intro-cinematic-aperture__media {
	--vb-ratio: 16 / 9;
	inline-size: 100%;
	border-radius: 0;
}

.vbs-intro-cinematic-aperture__media img {
	object-position: 50% 50%;
}

.vbs-intro-cinematic-aperture__chapters {
	display: grid;
}

.vbs-intro-cinematic-aperture__chapter {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-block: clamp(1.5rem, 4vw, 3rem);
	border-block: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-intro-cinematic-aperture__identity {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
}

.vbs-intro-cinematic-aperture__season {
	font-family: var(--vb-font-mono);
	color: var(--vb-color-mute);
}

.vbs-intro-cinematic-aperture__heading {
	max-inline-size: 12ch;
}

.vbs-intro-cinematic-aperture__details {
	display: grid;
	gap: 1.25rem;
}

.vbs-intro-cinematic-aperture__lede {
	max-inline-size: 42ch;
}

.vbs-intro-cinematic-aperture__credit {
	font-family: var(--vb-font-mono);
	color: var(--vb-color-mute);
}

.vbs-intro-cinematic-aperture__progress {
	display: none;
}

.vbs-intro-cinematic-aperture__cue {
	display: none;
}

@media (min-width: 52rem) {
	.vbs-intro-cinematic-aperture__chapter {
		grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1.7fr) minmax(16rem, 0.85fr);
		align-items: end;
	}

	.vbs-intro-cinematic-aperture__identity {
		display: grid;
		justify-content: start;
	}

	.vbs-intro-cinematic-aperture__details {
		justify-items: end;
	}

	.vbs-intro-cinematic-aperture__credit,
	.vbs-intro-cinematic-aperture__lede {
		inline-size: min(100%, 30rem);
	}
}

/* --- Pinned aperture ----------------------------------------------------- */
html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__scroll {
	padding-block: 0;
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__viewport {
	display: block;
	max-inline-size: none;
	margin-inline: 0;
	padding-inline: 0;
	isolation: isolate;
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__media {
	position: absolute;
	inset: 0;
	block-size: 100%;
	inline-size: 100%;
	aspect-ratio: auto;
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__chapters {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	align-items: end;
	padding: var(--vb-gutter);
	pointer-events: none;
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__chapter {
	inline-size: min(100%, 76rem);
	margin-inline: auto;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background-color: var(--vb-surface);
	background-image: var(--vb-surface-image);
	background-blend-mode: var(--vb-surface-blend);
	border-block: 0;
	border-radius: var(--vb-radius-card);
	pointer-events: auto;
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__progress {
	position: absolute;
	z-index: 3;
	inset-inline: var(--vb-gutter);
	inset-block-end: 0.75rem;
	display: block;
	block-size: var(--vb-border-hair);
	background-color: var(--vb-color-rule);
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__progress-bar {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	background-color: var(--vb-color-accent);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__cue {
	position: absolute;
	inset-inline: var(--vb-gutter);
	inset-block-end: 1.5rem;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	inline-size: min(22rem, calc(100% - var(--vb-gutter) * 2));
	margin-inline: auto;
	padding: 0.75rem 0.9rem;
	background-color: var(--vb-panel);
	background-image: var(--vb-panel-image);
	background-blend-mode: var(--vb-panel-blend);
	border-radius: var(--vb-radius-card);
	color: var(--vb-color-ink);
	pointer-events: none;
}

@media (min-width: 52rem) {
	html.vb-gsap .vbs-intro-cinematic-aperture:not([data-vb-cinema-pin="false"]) .vbs-intro-cinematic-aperture__cue {
		inset-inline-start: 50%;
		inset-inline-end: auto;
		transform: translateX(-50%);
	}
}

/* If the preference changes after initialisation, return to the same complete
   reading order as the default rather than leaving the pinned overlay behind. */
@media (prefers-reduced-motion: reduce) {
	html.vb-gsap .vbs-intro-cinematic-aperture__scroll {
		padding-block: var(--vb-space-section);
	}

	html.vb-gsap .vbs-intro-cinematic-aperture__viewport {
		display: grid;
		max-inline-size: calc(var(--vb-max-wide) + var(--vb-gutter) * 2);
		margin-inline: auto;
		padding-inline: var(--vb-gutter);
	}

	html.vb-gsap .vbs-intro-cinematic-aperture__media {
		position: relative;
		inset: auto;
		block-size: auto;
		aspect-ratio: 16 / 9;
	}

	html.vb-gsap .vbs-intro-cinematic-aperture__chapters {
		position: static;
		display: grid;
		padding: 0;
		pointer-events: auto;
	}

	html.vb-gsap .vbs-intro-cinematic-aperture__chapter {
		inline-size: 100%;
		padding-inline: 0;
		background-color: transparent;
		background-image: none;
		border-block: var(--vb-border-hair) solid var(--vb-color-rule);
		border-radius: 0;
	}

	html.vb-gsap .vbs-intro-cinematic-aperture__progress {
		display: none;
	}

}