/* TeamCNF CNF Studio: the eight blocks of the CNF Studio page (viewfinder hero, formats rail,
   600+ breakout, channel hotspots, reel wall, TVC slider, edit suite and cast). Uses the design
   system tokens and the page kit. Script: "TeamCNF CNF Studio (JS)". */

/* ---- Viewfinder hero ----------------------------------------------------- */
.tcnf-section.tcnf-studio-hero {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--100);
}

.tcnf-studio-hero__panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: end;
	min-height: var(--wp--custom--size--page-hero-h);
	padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
}

/* Showreel loop (poster frame until it plays) */
.tcnf-studio-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tcnf-studio-hero__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--custom--overlay--fade-bottom), var(--wp--custom--scrim--base);
}

/* Corner marks like a camera viewfinder */
.tcnf-viewfinder {
	position: absolute;
	inset: var(--wp--preset--spacing--40);
	pointer-events: none;
}

.tcnf-viewfinder span {
	position: absolute;
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	border: 0 solid var(--wp--custom--glass--border-strong);
}

.tcnf-viewfinder span:nth-child(1) { top: 0; left: 0; border-top-width: var(--wp--custom--border-thick); border-left-width: var(--wp--custom--border-thick); }
.tcnf-viewfinder span:nth-child(2) { top: 0; right: 0; border-top-width: var(--wp--custom--border-thick); border-right-width: var(--wp--custom--border-thick); }
.tcnf-viewfinder span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: var(--wp--custom--border-thick); border-left-width: var(--wp--custom--border-thick); }
.tcnf-viewfinder span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: var(--wp--custom--border-thick); border-right-width: var(--wp--custom--border-thick); }

/* Recording overlay */
.tcnf-studio-hud {
	position: absolute;
	top: var(--wp--preset--spacing--60);
	left: var(--wp--preset--spacing--60);
	right: var(--wp--preset--spacing--60);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.tcnf-studio-hud__rec {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-studio-hud__rec::before {
	content: "";
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--glow);
	animation: tcnf-rec-blink calc(var(--wp--custom--duration--slow) * 2) steps(2, jump-none) infinite;
}

@keyframes tcnf-rec-blink {
	from { opacity: 1; }
	to   { opacity: var(--wp--custom--opacity--faint); }
}

.tcnf-studio-hud__logo {
	width: auto;
	height: var(--wp--custom--size--badge-logo-h);
}

/* The REC dot stops blinking while the showreel is paused */
.tcnf-studio-hero__panel.is-paused .tcnf-studio-hud__rec::before {
	animation: none;
	background: var(--wp--custom--text--tertiary);
	box-shadow: none;
}

/* Copy and the pause button share one cell, so they're placed explicitly */
.tcnf-studio-hero__copy {
	grid-row: 1;
	grid-column: 1;
	position: relative;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
}

.tcnf-studio-hero__copy .tcnf-crumbs {
	margin-bottom: var(--wp--preset--spacing--30);
}

.tcnf-studio-hero__copy .tcnf-lead {
	color: var(--wp--custom--text--secondary);
}

/* Phones: top right, under the HUD. Desktop: bottom left of the open column */
.tcnf-studio-hero__toggle {
	grid-row: 1;
	grid-column: 1;
	align-self: start;
	justify-self: end;
	z-index: var(--wp--custom--z--raised);
}

@media (min-width: 640px) {
	.tcnf-studio-hero__panel {
		padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--70) var(--wp--preset--spacing--70);
	}
}

@media (min-width: 900px) {
	.tcnf-studio-hero__panel {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		align-items: center;
		padding: var(--wp--preset--spacing--90) var(--wp--preset--spacing--80);
	}

	.tcnf-studio-hero__panel::before {
		background: var(--wp--custom--overlay--fade-right);
	}

	.tcnf-studio-hero__copy {
		grid-column: 2;
	}

	.tcnf-studio-hero__toggle {
		align-self: end;
		justify-self: start;
	}
}

@media (min-width: 1100px) {
	.tcnf-studio-hero__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* ---- Filmstrip rail ------------------------------------------------------ */
.tcnf-reel {
	overflow-x: clip;
}

.tcnf-reel__controls {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-split-head__aside .tcnf-reel__controls {
	flex-shrink: 0;
}

.tcnf-reel__controls .tcnf-icon-btn,
.tcnf-tvc__buttons .tcnf-icon-btn,
.tcnf-studio-hero__toggle {
	margin: 0;
	font-family: inherit;
}

/* The film strip and the TVC stage run edge to edge: they sit outside the inner
	column and cancel the section's side padding */
.tcnf-reel__film,
.tcnf-tvc__stage {
	margin-inline: calc(var(--wp--style--root--padding-left, var(--wp--custom--gutter)) * -1) calc(var(--wp--style--root--padding-right, var(--wp--custom--gutter)) * -1);
}

.tcnf-reel__controls .tcnf-icon-btn:disabled {
	opacity: var(--wp--custom--opacity--faint);
	cursor: default;
}

.tcnf-reel__film {
	position: relative;
	padding-block: var(--wp--preset--spacing--70);
	border-block: 1px solid var(--wp--custom--glass--border-subtle);
	background: var(--wp--preset--color--surface);
}

/* Sprocket holes along both edges */
.tcnf-reel__film::before,
.tcnf-reel__film::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--wp--preset--spacing--20);
	background-image: linear-gradient(90deg, var(--wp--custom--glass--border-strong) 0 var(--wp--preset--spacing--40), transparent var(--wp--preset--spacing--40));
	background-size: var(--wp--preset--spacing--60) 100%;
	pointer-events: none;
}

.tcnf-reel__film::before {
	top: var(--wp--preset--spacing--40);
}

.tcnf-reel__film::after {
	bottom: var(--wp--preset--spacing--40);
}

.tcnf-reel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--wp--custom--size--rail-card);
	gap: var(--wp--custom--grid);
	padding-inline: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--content-size)) / 2));
	scroll-padding-inline: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--content-size)) / 2));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tcnf-reel__track::-webkit-scrollbar {
	display: none;
}

.tcnf-reel__track:focus-visible {
	outline-offset: calc(var(--wp--custom--border-thick) * -2);
}

.tcnf-reel__card {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	align-content: start;
	scroll-snap-align: start;
}

.tcnf-reel__media {
	aspect-ratio: 4 / 5;
}

.tcnf-reel__media > img {
	transition: scale var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-reel__card:hover .tcnf-reel__media > img {
	scale: 1.05;
}

.tcnf-reel__meta {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-variant-numeric: tabular-nums;
}

.tcnf-reel__card h3 {
	font-size: var(--wp--preset--font-size--large);
}

.tcnf-reel__card p {
	font-size: var(--wp--preset--font-size--small);
}

/* Wide screens show all six frames in one strip, so nothing is cut off and
	the arrows aren't needed */
@media (min-width: 1100px) {
	.tcnf-reel__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		overflow-x: visible;
	}

	.tcnf-reel__media {
		aspect-ratio: 3 / 4;
	}

	.tcnf-reel__controls {
		display: none;
	}
}

/* ---- 600+ breakout ------------------------------------------------------- */
.tcnf-breakout {
	display: grid;
	gap: var(--wp--preset--spacing--60);
}

/* Sits above the photo where the two overlap at 900px+ */
.tcnf-breakout__stat {
	position: relative;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.tcnf-breakout__count {
	font-size: var(--wp--custom--type--giant);
	font-weight: 600;
	line-height: var(--wp--custom--leading--flat);
	letter-spacing: var(--wp--custom--tracking--tight);
	color: var(--wp--custom--text--primary);
	font-variant-numeric: tabular-nums;
}

.tcnf-breakout__label {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--large);
}

.tcnf-breakout__media {
	aspect-ratio: 16 / 10;
}

.tcnf-breakout__card {
	position: relative;
	z-index: var(--wp--custom--z--raised);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	justify-items: start;
	margin: calc(var(--wp--preset--spacing--80) * -1) var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.tcnf-breakout__card p {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--custom--text--primary);
}

@media (min-width: 900px) {
	.tcnf-breakout {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-template-rows: auto auto;
		gap: 0;
	}

	.tcnf-breakout__media {
		grid-column: 5 / -1;
		grid-row: 1 / span 2;
		aspect-ratio: 4 / 3;
	}

	.tcnf-breakout__stat {
		grid-column: 1 / span 5;
		grid-row: 1;
		align-self: end;
		padding-bottom: var(--wp--preset--spacing--60);
	}

	.tcnf-breakout__card {
		grid-column: 2 / span 6;
		grid-row: 2;
		align-self: start;
		margin: 0;
		padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	}
}

/* ---- Channels with hotspots ---------------------------------------------- */
.tcnf-channels__stage {
	position: relative;
}

.tcnf-channels__media {
	aspect-ratio: 4 / 3;
}

.tcnf-hotspots {
	display: grid;
	gap: var(--wp--custom--grid);
	margin-top: var(--wp--custom--grid);
}

.tcnf-hotspot {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	align-items: start;
	padding: var(--wp--preset--spacing--50);
}

.tcnf-hotspot__pin {
	position: relative;
	display: block;
	width: var(--wp--custom--size--hotspot);
	height: var(--wp--custom--size--hotspot);
	margin-top: var(--wp--preset--spacing--10);
	border-radius: 50%;
	background: var(--wp--custom--text--primary);
	box-shadow: 0 0 0 var(--wp--preset--spacing--10) var(--wp--custom--glass--border);
}

.tcnf-hotspot__pin::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid var(--wp--custom--text--primary);
	animation: tcnf-pin-pulse calc(var(--wp--custom--duration--slow) * 3) var(--wp--custom--ease--out) infinite;
}

@keyframes tcnf-pin-pulse {
	from { scale: 1; opacity: var(--wp--custom--opacity--soft); }
	to   { scale: 3; opacity: 0; }
}

.tcnf-hotspot h3 {
	font-size: var(--wp--preset--font-size--large);
}

.tcnf-hotspot p {
	grid-column: 2;
	font-size: var(--wp--preset--font-size--small);
}

@media (min-width: 900px) {
	.tcnf-channels__media {
		aspect-ratio: 16 / 9;
	}

	.tcnf-hotspots {
		position: absolute;
		inset: 0;
		display: block;
		margin: 0;
		pointer-events: none;
	}

	.tcnf-hotspot {
		position: absolute;
		width: var(--wp--custom--size--hotspot-card);
		pointer-events: auto;
	}

	.tcnf-hotspot:nth-child(1) { left: 5%; top: 8%; }
	.tcnf-hotspot:nth-child(2) { right: 5%; top: 30%; }
	.tcnf-hotspot:nth-child(3) { left: 30%; bottom: 8%; }
}

/* ---- Studio work: a staggered wall of 9:16 reels beside the copy ------- */
.tcnf-showcase__grid {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-showcase__copy {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
	align-content: start;
}

.tcnf-showcase__copy h2 {
	max-width: var(--wp--custom--size--measure-title);
}

.tcnf-showcase__hint {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
}

/* Every other column of phones sits lower, so the wall doesn't read as a
	grid. The offset uses top, since the reveal animation owns transform, and
	the padding makes room for the last lowered phone */
.tcnf-showcase__reels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	align-items: start;
	padding-bottom: var(--wp--preset--spacing--70);
}

.tcnf-showcase__reels .tcnf-showcase__reel {
	position: relative;
}

.tcnf-showcase__reels .tcnf-showcase__reel:nth-child(even) {
	top: var(--wp--preset--spacing--70);
}

/* An odd phone out on the last row sits centred under the pair above it,
	lowered to clear the phone beside it */
.tcnf-showcase__reels .tcnf-showcase__reel:last-child:nth-child(odd) {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - var(--wp--preset--spacing--40)) / 2);
	top: var(--wp--preset--spacing--70);
}

.tcnf-showcase__phone {
	position: relative;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
}

.tcnf-showcase__phone video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Covers the poster until the first tap; tcnf-theme-dark keeps it dark in the
	light theme, since it always sits on the video. The icon sits bottom left,
	clear of the title cards */
.tcnf-showcase__play {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-items: end start;
	padding: var(--wp--preset--spacing--40);
	border: 0;
	background: var(--wp--custom--overlay--fade-bottom);
	cursor: pointer;
}

.tcnf-showcase__play-icon {
	display: grid;
	place-items: center;
	width: var(--wp--custom--size--control);
	height: var(--wp--custom--size--control);
	border: 1px solid var(--wp--custom--glass--border-strong);
	border-radius: 50%;
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--glass--fill-dark);
	box-shadow: var(--wp--preset--shadow--soft), var(--wp--custom--inset-sheen);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur)) saturate(var(--wp--custom--glass--saturate));
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-showcase__play-icon {
	--tcnf-glyph-size: var(--wp--custom--size--icon--md);
}

.tcnf-showcase__play:hover .tcnf-showcase__play-icon {
	transform: scale(1.08);
}

/* The phone clips anything outside it, so the focus ring goes on the icon */
.tcnf-showcase__play:focus-visible {
	box-shadow: none;
}

.tcnf-showcase__play:focus-visible .tcnf-showcase__play-icon {
	box-shadow: var(--wp--custom--focus-ring);
}

/* Sector tag, then the reel's name, then its running time, stacked so the
	captions line up at any width. The tag shares its look with the TVC kind */
.tcnf-showcase__caption {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
}

.tcnf-showcase__name {
	color: var(--wp--custom--text--primary);
	font-weight: 600;
}

.tcnf-showcase__caption time {
	color: var(--wp--custom--text--tertiary);
	font-variant-numeric: tabular-nums;
}

.tcnf-showcase__tag,
.tcnf-tvc__kind {
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

@media (min-width: 640px) {
	/* Three columns, with the middle one lowered */
	.tcnf-showcase__reels {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-bottom: var(--wp--preset--spacing--80);
	}

	.tcnf-showcase__reels .tcnf-showcase__reel:nth-child(even) {
		top: 0;
	}

	.tcnf-showcase__reels .tcnf-showcase__reel:nth-child(3n + 2) {
		top: var(--wp--preset--spacing--80);
	}

	/* A lone phone on the last row takes the middle column, lowered with it */
	.tcnf-showcase__reels .tcnf-showcase__reel:last-child:nth-child(odd) {
		grid-column: auto;
		justify-self: stretch;
		width: auto;
		top: 0;
	}

	.tcnf-showcase__reels .tcnf-showcase__reel:last-child:nth-child(3n + 1) {
		grid-column: 2;
		top: var(--wp--preset--spacing--80);
	}
}

@media (min-width: 900px) {
	/* Copy comes first in the source (heading before the videos), but sits on
		the right so this section mirrors the talent section below it. It stays
		in view while the wall scrolls past */
	.tcnf-showcase__grid {
		grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--80);
	}

	.tcnf-showcase__copy {
		position: sticky;
		top: calc(var(--wp--custom--size--header) + var(--wp--preset--spacing--70));
		grid-column: 2;
		grid-row: 1;
	}

	.tcnf-showcase__reels {
		grid-column: 1;
		grid-row: 1;
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	}
}

/* ---- TVCs and packshots: 16:9 films on a scroll-snap slider that runs edge
				to edge. The slide in the middle is the one in play; its neighbours
				peek in either side, dimmed. The stage is a size container, so the
				slides and the track's end padding measure against it (cqi), and the
				first and last slides can sit in the middle too ------------------------ */
.tcnf-tvc__stage {
	position: relative;
	container-type: inline-size;
}

/* A soft glow behind the track, from the poster of the slide in play (JS
	sets the image). It sits inside the stage so the blur never widens the
	page, and crossfades where the browser can blend images */
.tcnf-tvc__ambient {
	position: absolute;
	inset: 6% 14%;
	background-position: center;
	background-size: cover;
	opacity: var(--wp--custom--ambient-opacity);
	filter: blur(var(--wp--custom--glass--blur-ambient)) saturate(var(--wp--custom--glass--saturate));
	pointer-events: none;
	transition: background-image var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-tvc__track {
	--tvc-slide: min(var(--wp--custom--size--tvc-slide), 100cqi - var(--wp--custom--gutter) * 2 - var(--wp--preset--spacing--70));
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: var(--tvc-slide);
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) calc((100cqi - var(--tvc-slide)) / 2) var(--wp--preset--spacing--60);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tcnf-tvc__track::-webkit-scrollbar {
	display: none;
}

.tcnf-tvc__slide {
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.tcnf-tvc__screen {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--glass);
}

.tcnf-tvc__screen video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The studio work Play button, centred, and larger once the frame is TV-sized */
.tcnf-tvc__play {
	place-items: center;
}

@media (min-width: 640px) {
	.tcnf-tvc__play .tcnf-showcase__play-icon {
		--tcnf-glyph-size: var(--wp--custom--size--icon--lg);
		width: var(--wp--custom--size--play-lg);
		height: var(--wp--custom--size--play-lg);
	}
}

/* Kind over sector on the left; running time (and any note) on the right */
.tcnf-tvc__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
}

.tcnf-tvc__title {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.tcnf-tvc__sector {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.tcnf-tvc__meta {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.tcnf-tvc__meta > * + *::before {
	content: "\00b7";
	margin-inline-end: var(--wp--preset--spacing--30);
}

/* With JS: the neighbours dim and step back, and a mouse can drag the track.
	Snapping is off mid-drag, so the track follows the pointer */
.tcnf-tvc.is-ready .tcnf-tvc__track {
	cursor: grab;
}

.tcnf-tvc.is-ready .tcnf-tvc__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.tcnf-tvc.is-ready .tcnf-tvc__slide {
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-tvc.is-ready .tcnf-tvc__screen {
	transition:
		transform var(--wp--custom--duration--slow) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.tcnf-tvc.is-ready .tcnf-tvc__slide.is-active .tcnf-tvc__screen {
	box-shadow: var(--wp--preset--shadow--float);
}

.tcnf-tvc.is-ready .tcnf-tvc__slide:not(.is-active) {
	opacity: var(--wp--custom--opacity--dim);
}

.tcnf-tvc.is-ready .tcnf-tvc__slide:not(.is-active):hover {
	opacity: var(--wp--custom--opacity--muted);
}

.tcnf-tvc.is-ready .tcnf-tvc__slide:not(.is-active) .tcnf-tvc__screen {
	transform: scale(0.94);
}

/* Only the centre slide is labelled, so a neighbour's length can't read as
	part of the next caption */
.tcnf-tvc.is-ready .tcnf-tvc__caption {
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out);
}

.tcnf-tvc.is-ready .tcnf-tvc__slide:not(.is-active) .tcnf-tvc__caption {
	opacity: 0;
}

/* Transport bar: counter, progress, arrows. The fill shows how far along
	the track is (JS sets --tvc-progress, from one slide's share up to 1) */
.tcnf-tvc__bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--30);
}

.tcnf-tvc__count {
	flex-shrink: 0;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--wp--custom--tracking--wide);
}

.tcnf-tvc__count-now {
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: 0;
}

.tcnf-tvc__progress {
	position: relative;
	flex: 1;
	height: var(--wp--custom--border-thick);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--border);
}

.tcnf-tvc__progress-fill {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--wp--preset--color--accent);
	transform: scaleX(var(--tvc-progress, 0));
	transform-origin: left center;
}

.tcnf-tvc__buttons {
	display: flex;
	flex-shrink: 0;
	gap: var(--wp--preset--spacing--20);
}

.tcnf-tvc__buttons .tcnf-icon-btn:disabled {
	opacity: var(--wp--custom--opacity--faint);
	cursor: default;
}

/* ---- Reel editing: a sample edit on a working timeline. The panel stays
				dark in both themes (tcnf-theme-dark), like an edit suite --------------- */
.tcnf-edit-suite__panel {
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--gradient--sheen), var(--wp--custom--scrim--strong);
	box-shadow: var(--wp--preset--shadow--float), var(--wp--custom--inset-sheen);
	-webkit-backdrop-filter: blur(var(--wp--custom--glass--blur-strong)) saturate(var(--wp--custom--glass--saturate));
	backdrop-filter: blur(var(--wp--custom--glass--blur-strong)) saturate(var(--wp--custom--glass--saturate));
}

.tcnf-edit-suite__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-edit-suite__label {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
}

.tcnf-edit-suite__label::before {
	content: "";
	width: var(--wp--preset--spacing--20);
	height: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--glow);
}

.tcnf-edit-suite__title {
	flex-basis: 100%;
	order: 1;
	color: var(--wp--custom--text--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* Only shown once there's more than one sample edit */
.tcnf-edit-suite__picks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	flex-basis: 100%;
	order: 2;
}

.tcnf-edit-suite__pick {
	min-height: var(--wp--custom--size--control-sm);
	margin: 0;
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--glass--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--secondary);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	transition: background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out), color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

.tcnf-edit-suite__pick:hover {
	color: var(--wp--custom--text--primary);
	background: var(--wp--custom--glass--fill);
}

.tcnf-edit-suite__pick[aria-pressed="true"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.tcnf-edit-suite__clock {
	margin-inline-start: auto;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--glass--border-subtle);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--fill-subtle);
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
}

.tcnf-edit-suite__body {
	display: grid;
	grid-template-areas: "screen" "timeline" "notes";
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
}

.tcnf-edit-suite__screen {
	grid-area: screen;
	justify-self: center;
	width: 100%;
	max-width: var(--wp--custom--size--edit-screen-sm);
}

.tcnf-edit-suite__notes {
	grid-area: notes;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tcnf-edit-suite__note {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--glass--border-subtle);
}

.tcnf-edit-suite__num {
	grid-row: span 2;
	padding-top: var(--wp--preset--spacing--10);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	font-variant-numeric: tabular-nums;
}

.tcnf-edit-suite__note h3 {
	font-size: var(--wp--preset--font-size--base);
}

.tcnf-edit-suite__note p {
	color: var(--wp--custom--text--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Timeline: track names, then lanes that share one playhead. Shots and the
	waveform are drawn from data-cuts and data-wave on the sample button */
.tcnf-edit-suite__timeline {
	grid-area: timeline;
	display: grid;
	grid-template-columns: var(--wp--custom--size--edit-label) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--glass--border-subtle);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--custom--glass--fill-subtle);
}

.tcnf-edit-suite__names,
.tcnf-edit-suite__lanes {
	display: grid;
	grid-template-rows: var(--wp--custom--size--edit-ruler) var(--wp--custom--size--edit-track) var(--wp--custom--size--edit-track);
	row-gap: var(--wp--preset--spacing--20);
}

.tcnf-edit-suite__names {
	align-items: center;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
}

.tcnf-edit-suite__lanes {
	position: relative;
	cursor: pointer;
	touch-action: pan-y;
}

/* A short tick every second, and a labelled one every five */
.tcnf-edit-suite__ruler {
	position: relative;
	border-bottom: 1px solid var(--wp--custom--glass--border-subtle);
	background-image: linear-gradient(90deg, var(--wp--custom--glass--border) 1px, transparent 1px);
	background-size: calc(100% / var(--edit-seconds, 30)) 30%;
	background-position: left bottom;
	background-repeat: repeat-x;
}

.tcnf-edit-suite__tick {
	position: absolute;
	top: 0;
	bottom: 0;
	padding-inline-start: var(--wp--preset--spacing--10);
	border-inline-start: 1px solid var(--wp--custom--glass--border-strong);
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--tiny);
	line-height: var(--wp--custom--leading--snug);
	font-variant-numeric: tabular-nums;
}

.tcnf-edit-suite__track {
	position: relative;
}

/* Each shot; the transparent end border leaves a gap before the next one */
.tcnf-edit-suite__clip {
	position: absolute;
	top: 0;
	bottom: 0;
	border-inline-end: var(--wp--custom--border-thick) solid transparent;
	border-radius: var(--wp--custom--radius--xs);
	background-color: var(--wp--custom--glass--fill);
	background-image: var(--wp--preset--gradient--sheen);
	background-clip: padding-box;
}

.tcnf-edit-suite__clip:nth-child(even) {
	background-color: var(--wp--custom--glass--fill-strong);
}

.tcnf-edit-suite__clip.is-active {
	background-color: var(--wp--custom--accent-soft);
	box-shadow: inset 0 0 0 1px var(--wp--custom--accent-line);
}

/* The waveform is drawn twice; the red copy is clipped to the playhead */
.tcnf-edit-suite__bars {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: 1px;
}

.tcnf-edit-suite__bars i {
	flex: 1 1 0;
	min-width: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--custom--glass--border-strong);
}

.tcnf-edit-suite__bars--played {
	clip-path: inset(0 calc(100% - var(--edit-progress, 0) * 100%) 0 0);
}

.tcnf-edit-suite__bars--played i {
	background: var(--wp--preset--color--accent);
}

.tcnf-edit-suite__playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--edit-progress, 0) * 100%);
	width: var(--wp--custom--border-thick);
	margin-inline-start: calc(var(--wp--custom--border-thick) / -2);
	background: var(--wp--custom--text--primary);
	box-shadow: var(--wp--preset--shadow--soft);
	pointer-events: none;
}

.tcnf-edit-suite__playhead::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--wp--preset--spacing--30);
	height: var(--wp--preset--spacing--30);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	box-shadow: var(--wp--preset--shadow--glow);
	transform: translate(-50%, -50%);
}

.tcnf-edit-suite__hint {
	grid-column: 1 / -1;
	color: var(--wp--custom--text--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
}

@media (min-width: 600px) {
	.tcnf-edit-suite__title {
		flex-basis: auto;
		order: 0;
	}

	.tcnf-edit-suite__body {
		padding: var(--wp--preset--spacing--50);
	}

	.tcnf-edit-suite__screen {
		max-width: var(--wp--custom--size--edit-screen);
	}

	.tcnf-edit-suite__timeline {
		padding: var(--wp--preset--spacing--40);
	}

	.tcnf-edit-suite__notes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Reel on the left at full height; notes above the timeline beside it */
@media (min-width: 900px) {
	.tcnf-edit-suite__bar {
		padding-inline: var(--wp--preset--spacing--70);
	}

	.tcnf-edit-suite__body {
		grid-template-columns: var(--wp--custom--size--edit-screen) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"screen notes"
			"screen timeline";
		gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
		padding: var(--wp--preset--spacing--70);
	}

	.tcnf-edit-suite__notes {
		align-content: center;
		gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	}
}

/* ---- Talent (photo bleeds right). Named cast so it stays apart from
				Home's talent strip ----------------------------- */
.tcnf-cast {
	overflow-x: clip;
}

.tcnf-cast__grid {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.tcnf-cast__copy {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
	align-content: center;
}

.tcnf-cast__copy h2 {
	max-width: var(--wp--custom--size--measure-title);
}

.tcnf-cast__media {
	aspect-ratio: 4 / 5;
	max-height: var(--wp--custom--size--story--lead-h);
}

@media (min-width: 900px) {
	.tcnf-cast__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--90);
	}

	/* Grid items with an aspect ratio don't stretch by default; this one must,
		so it reaches the viewport edge (max-height then trims the 4:5) */
	.tcnf-cast__media {
		justify-self: stretch;
		margin-right: calc(var(--bleed) * -1);
		border-right: 0;
		border-radius: var(--wp--custom--radius--xl) 0 0 var(--wp--custom--radius--xl);
	}
}