/*
 * Director reel player (SPN_REEL_PLAYER_V2).
 * Angled panel + playlist on the left, the spot on dark on the right.
 */

.reel-dialog {
	--reel-ratio: 0.5625;
	--reel-bg: #1E1214;
	--reel-ink: #F5F0E8;
	--reel-panel-start: #D5637D;
	--reel-panel-end: #F39EA5;
	--reel-panel-ink: #2A1820;
	--reel-accent: #F39EA5;
	--reel-angle: clamp(2.5rem, 5vw, 5rem);
	--reel-panel-width: max(17rem, 30vw);
	/* Collapsed: just the angled wedge plus a sliver to click. */
	--reel-panel-collapsed: 5rem;
	/* Media fits the stage width and leaves room for the close button and credits below. */
	--reel-media-width: min(100%, calc((100dvh - 15rem) / var(--reel-ratio)));

	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--reel-bg);
	color: var(--reel-ink);
	font-family: var(--body-font);
}

.director-reel--blue .reel-dialog {
	--reel-bg: #121923;
	--reel-panel-start: #162946;
	--reel-panel-end: #3A6196;
	--reel-panel-ink: #F5F0E8;
	--reel-accent: #8AAFC8;
}

.reel-dialog::backdrop {
	background: transparent;
}

.reel-dialog[open] {
	display: grid;
	grid-template-columns: var(--reel-panel-width) minmax(0, 1fr);
}

html:has(.reel-dialog[open]) {
	overflow: hidden;
}

.reel-dialog button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.reel-dialog :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.reel-dialog .spot-client {
	font-weight: 700;
}

/* ---------- Angled panel ---------- */

.reel-dialog__panel {
	--reel-mountain-height: clamp(7rem, 20vh, 12rem);
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: var(--page-gutter) calc(var(--reel-angle) + var(--page-gutter)) var(--page-gutter) var(--page-gutter);
	padding-bottom: calc(var(--reel-mountain-height) + 1rem);
	background: linear-gradient(160deg, var(--reel-panel-start), var(--reel-panel-end));
	color: var(--reel-panel-ink);
	clip-path: polygon(0 0, calc(100% - var(--reel-angle)) 0, 100% 100%, 0 100%);
}

/* Scale by height to keep the peaks intact; only the sides crop into the panel. */
.reel-dialog__mountains {
	position: absolute;
	bottom: 0;
	left: calc(max(17rem, 30vw) / 2);
	display: block;
	width: calc(var(--reel-mountain-height) * 1609 / 334);
	height: var(--reel-mountain-height);
	max-width: none;
	transform: translateX(-50%);
	pointer-events: none;
}

.reel-dialog__mountain-light-top {
	stop-color: color-mix(in srgb, var(--reel-panel-end) 94%, white);
}

.reel-dialog__mountain-light-bottom {
	stop-color: color-mix(in srgb, var(--reel-panel-end) 90%, var(--reel-panel-start));
}

.reel-dialog__mountain-shade-top {
	stop-color: color-mix(in srgb, var(--reel-panel-end) 88%, var(--reel-panel-start));
}

.reel-dialog__mountain-shade-bottom {
	stop-color: color-mix(in srgb, var(--reel-panel-end) 94%, var(--reel-panel-ink));
}

.reel-dialog__eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.reel-dialog__director {
	margin-top: 0.5rem;
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
}

.reel-dialog__counter {
	margin-top: 1.5rem;
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	font-variant-numeric: tabular-nums;
}

.reel-dialog__counter-sep {
	opacity: 0.4;
}

.reel-dialog__list {
	flex: 1;
	min-height: 0;
	margin: 1.5rem 0 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	scrollbar-width: thin;
}

.reel-dialog__spot {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	width: 100%;
	padding-block: 0.7rem !important;
	border-top: 1px solid color-mix(in srgb, var(--reel-panel-ink) 20%, transparent) !important;
	font-size: 0.875rem !important;
	line-height: 1.3;
	text-align: left;
	opacity: 0.55;
	transition: opacity 200ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-dialog__spot-num {
	font-variant-numeric: tabular-nums;
}

.reel-dialog__spot .spot-client + .spot-title::before,
.reel-dialog__credit .spot-client:not([hidden]) + .spot-title::before {
	content: " / ";
	font-weight: 400;
}

.reel-dialog__spot:hover,
.reel-dialog__spot:focus-visible,
.reel-dialog__spot[aria-current] {
	opacity: 1;
}

.reel-dialog__spot[aria-current] {
	transform: translateX(0.5rem);
}

/* ---------- Collapse toggle ---------- */

.reel-dialog__toggle,
.reel-dialog__step {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
}

.reel-dialog__tree-icon {
	--tree-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 152 46'%3E%3Cpath transform='translate(152 0) rotate(90) translate(-1355.79 -271.388)' d='M1378.71 271.388L1355.79 381.09H1374.05V423.321H1382.57V381.342H1401.64L1378.71 271.388Z'/%3E%3C/svg%3E");
	display: inline-block;
	flex: none;
	width: calc(0.375rem * 152 / 46);
	height: 0.375rem;
	background: currentColor;
	-webkit-mask: var(--tree-marker) center / contain no-repeat;
	mask: var(--tree-marker) center / contain no-repeat;
}

.reel-dialog__tree-icon--left {
	transform: rotate(180deg);
}

.reel-dialog__toggle {
	position: absolute;
	z-index: 1;
	bottom: var(--page-gutter);
	left: var(--page-gutter);
	min-height: 2.75rem;
	white-space: nowrap;
	opacity: 0.7;
	transition: opacity 200ms ease;
}

.reel-dialog__toggle:hover,
.reel-dialog__toggle:focus-visible {
	opacity: 1;
}

.reel-dialog__toggle-icon {
	transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 900px) {
	.reel-dialog {
		transition: grid-template-columns 600ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.reel-dialog.is-collapsed {
		--reel-angle: 1rem;
		--reel-panel-width: var(--reel-panel-collapsed);
	}

	.reel-dialog__panel {
		position: relative;
		overflow: hidden;
	}

	.reel-dialog.is-collapsed .reel-dialog__panel {
		padding-inline: 0;
	}

	/* Hold the panel content at full width so it clips instead of reflowing while the panel slides. */
	.reel-dialog__panel > :not(.reel-dialog__toggle):not(.reel-dialog__mountains) {
		min-width: calc(max(17rem, 30vw) - var(--reel-angle) - 2 * var(--page-gutter));
	}

	.reel-dialog.is-collapsed .reel-dialog__panel > :not(.reel-dialog__toggle):not(.reel-dialog__mountains) {
		visibility: hidden;
		opacity: 0;
		animation: none !important;
		transition: opacity 150ms ease, visibility 0s linear 150ms;
	}

	.reel-dialog.is-collapsed .reel-dialog__toggle {
		left: 1rem;
		flex-direction: column;
		min-width: 2.75rem;
		opacity: 0.85;
	}

	.reel-dialog.is-collapsed .reel-dialog__toggle-label {
		writing-mode: vertical-rl;
	}

	.reel-dialog.is-collapsed .reel-dialog__toggle:hover,
	.reel-dialog.is-collapsed .reel-dialog__toggle:focus-visible {
		opacity: 1;
	}

	.reel-dialog.is-collapsed .reel-dialog__toggle-icon {
		transform: rotate(0deg);
	}

}

/* ---------- Stage ---------- */

.reel-dialog__stage {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 1rem;
	min-width: 0;
	min-height: 0;
	padding: calc(var(--page-gutter) + 2.5rem) var(--page-gutter) var(--page-gutter);
}

.reel-dialog__close {
	position: absolute;
	top: var(--page-gutter);
	right: var(--page-gutter);
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.35em;
	transition: text-decoration-color 200ms ease;
}

.reel-dialog__close:hover {
	text-decoration-color: currentColor;
}

.reel-dialog__media {
	width: var(--reel-media-width);
	aspect-ratio: 1 / var(--reel-ratio);
	background: #000;
	transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-dialog__media video,
.reel-dialog__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.reel-dialog__progress {
	width: var(--reel-media-width);
	height: 2px;
	margin-top: -0.5rem;
	background: color-mix(in srgb, var(--reel-ink) 18%, transparent);
	transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-dialog__progress span {
	display: block;
	height: 100%;
	background: var(--reel-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 250ms linear;
}

.reel-dialog__meta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.5rem 2rem;
	width: var(--reel-media-width);
	transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reel-dialog__credit {
	font-size: clamp(1.25rem, 1rem + 0.9vw, 2rem);
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.reel-dialog__credit span {
	display: inline-block;
}

.reel-dialog__nav {
	display: flex;
	gap: 1.5rem;
	padding-top: 0.4rem;
}

.reel-dialog__step {
	opacity: 0.7;
	transition: opacity 200ms ease;
}

.reel-dialog__step:hover,
.reel-dialog__step:focus-visible {
	opacity: 1;
}

.reel-dialog__upnext {
	grid-column: 1 / -1;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity 400ms ease, transform 400ms ease;
}

.reel-dialog.is-ending .reel-dialog__upnext {
	opacity: 0.7;
	transform: none;
}

/* ---------- Mobile: spot on top, panel becomes the list below ---------- */

@media (max-width: 899px) {
	.reel-dialog {
		--reel-media-width: 100%;
		overflow-y: auto;
	}

	.reel-dialog[open] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: max-content max-content;
		align-content: start;
	}

	.reel-dialog__stage {
		grid-row: 1;
		min-height: auto;
		align-content: start;
		padding-bottom: 2rem;
	}

	.reel-dialog__panel {
		grid-row: 2;
		padding-right: var(--page-gutter);
		clip-path: none;
		overflow: clip;
		min-height: auto;
	}

	.reel-dialog__mountains {
		left: 50%;
	}

	.reel-dialog__list {
		flex: none;
		min-height: auto;
		overflow: visible;
	}

	.reel-dialog__toggle {
		display: none;
	}

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

/* ---------- Motion ---------- */

@keyframes reel-panel-in {
	from { transform: translateX(-100%); }
	to { transform: none; }
}

@keyframes reel-rise-in {
	from { opacity: 0; transform: translateY(0.6em); }
	to { opacity: 1; transform: none; }
}

@keyframes reel-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	.reel-dialog.is-fading-in {
		animation: reel-fade-in 300ms ease both;
	}

	.reel-dialog.is-open .reel-dialog__panel {
		animation: reel-panel-in 650ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
	}

	.reel-dialog.is-open .reel-dialog__panel > :not(.reel-dialog__mountains) {
		animation: reel-rise-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
		animation-delay: calc(450ms + var(--reel-stagger, 0ms));
	}

	.reel-dialog.is-open .reel-dialog__director { --reel-stagger: 70ms; }
	.reel-dialog.is-open .reel-dialog__counter { --reel-stagger: 140ms; }
	.reel-dialog.is-open .reel-dialog__list { --reel-stagger: 210ms; }
	.reel-dialog.is-open .reel-dialog__toggle { --reel-stagger: 280ms; }

	.reel-dialog.is-open .reel-dialog__close,
	.reel-dialog.is-open .reel-dialog__meta {
		animation: reel-fade-in 400ms ease 450ms both;
	}

	.reel-dialog__credit.is-changing .spot-client,
	.reel-dialog__credit.is-changing .spot-title {
		animation: reel-rise-in 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	.reel-dialog__credit.is-changing .spot-title {
		animation-delay: 80ms;
	}

	@media (max-width: 899px) {
		.reel-dialog.is-open .reel-dialog__panel {
			animation: reel-fade-in 400ms ease 200ms both;
		}
	}

	/* The clicked image grows into the player (and back on close). */
	html.reel-transition::view-transition-group(reel-media) {
		animation-duration: 600ms;
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
	}

	html.reel-transition::view-transition-old(reel-media),
	html.reel-transition::view-transition-new(reel-media) {
		height: 100%;
		object-fit: cover;
		animation-duration: 600ms;
	}

	html.reel-transition::view-transition-group(root),
	html.reel-transition::view-transition-old(root),
	html.reel-transition::view-transition-new(root) {
		animation-duration: 400ms;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reel-dialog,
	.reel-dialog__toggle-icon,
	.reel-dialog__media,
	.reel-dialog__progress,
	.reel-dialog__meta,
	.reel-dialog__progress span {
		transition: none;
	}
}