/* ========================================
   PRODUCTION ARCHIVES HERO
======================================== */

.production-hero {
	--production-foreground: #ffffff;

	--membrane-x: 0px;
	--membrane-y: 0px;
	--membrane-rotate: 0deg;
	--membrane-scale-x: 1;
	--membrane-scale-y: 1;

	position: relative;

	width: 100%;
	height: 100svh;
	min-height: 100svh;

	overflow: hidden;

	background: #050505;

	isolation: isolate;
}


/* ========================================
   VIDEO SCREEN
======================================== */

.production-hero__screen {
	position: absolute;
	inset: 0;

	z-index: 0;

	overflow: hidden;

	background: #050505;

	pointer-events: none;
}


/* ========================================
   VIDEO

   The video plays invisibly while the
   title sequence runs.

   This means that when the "TV" powers
   on, we're revealing a live moving
   moment rather than starting playback
   from frame one.
======================================== */

.production-hero__video {
	position: absolute;
	inset: -2px;

	display: block;

	width: calc(100% + 4px);
	height: calc(100% + 4px);

	object-fit: cover;

	opacity: 0;

	transform:
		translate3d(
			0,
			0,
			0
		)
		scale3d(
			1.01,
			0.003,
			1
		);

	transform-origin: center center;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	will-change:
		transform,
		opacity;
}


/* ========================================
   OLD TV STARTUP SCREEN
======================================== */

.production-hero__tv-startup {
	position: absolute;
	inset: 0;

	z-index: 2;

	background: #050505;

	opacity: 1;

	pointer-events: none;
}


/* ========================================
   CRT IGNITION LINE
======================================== */

.production-hero__tv-startup::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 0;
	height: 2px;

	background: #ffffff;

	box-shadow:
		0 0 7px rgba(255, 255, 255, 0.95),
		0 0 18px rgba(255, 255, 255, 0.55),
		0 0 38px rgba(255, 255, 255, 0.22);

	opacity: 0;

	transform:
		translate3d(
			-50%,
			-50%,
			0
		);

	pointer-events: none;
}


/* ========================================
   CRT EXPOSURE FLASH
======================================== */

.production-hero__tv-startup::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		rgba(
			255,
			255,
			255,
			0.12
		);

	opacity: 0;

	pointer-events: none;
}


/* ========================================
   TV STARTING
======================================== */

.production-hero.is-tv-starting
.production-hero__video {
	animation:
		production-tv-video-start
		1150ms
		linear
		forwards;
}


.production-hero.is-tv-starting
.production-hero__tv-startup {
	animation:
		production-tv-blackout
		1150ms
		steps(1, end)
		forwards;
}


.production-hero.is-tv-starting
.production-hero__tv-startup::before {
	animation:
		production-tv-line
		620ms
		cubic-bezier(
			0.2,
			0.7,
			0.2,
			1
		)
		forwards;
}


.production-hero.is-tv-starting
.production-hero__tv-startup::after {
	animation:
		production-tv-exposure
		1150ms
		steps(1, end)
		forwards;
}


/* ========================================
   CRT VIDEO OPENING
======================================== */

@keyframes production-tv-video-start {

	0% {
		opacity: 0;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				1.01,
				0.003,
				1
			);
	}


	12% {
		opacity: 0;
	}


	17% {
		opacity: 0.85;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				1.01,
				0.008,
				1
			);
	}


	23% {
		opacity: 0.35;

		transform:
			translate3d(
				-2px,
				0,
				0
			)
			scale3d(
				1.015,
				0.025,
				1
			);
	}


	29% {
		opacity: 1;

		transform:
			translate3d(
				2px,
				0,
				0
			)
			scale3d(
				1.012,
				0.13,
				1
			);
	}


	38% {
		opacity: 0.7;

		transform:
			translate3d(
				-1px,
				0,
				0
			)
			scale3d(
				1.01,
				0.48,
				1
			);
	}


	48% {
		opacity: 1;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				1.008,
				1.025,
				1
			);
	}


	56% {
		opacity: 0.3;

		transform:
			translate3d(
				3px,
				0,
				0
			)
			scale3d(
				1.012,
				0.995,
				1
			);
	}


	61% {
		opacity: 1;

		transform:
			translate3d(
				-2px,
				1px,
				0
			)
			scale3d(
				1.008,
				1.008,
				1
			);
	}


	67% {
		opacity: 0.58;
	}


	72% {
		opacity: 1;

		transform:
			translate3d(
				1px,
				0,
				0
			)
			scale3d(
				1.006,
				1.003,
				1
			);
	}


	79% {
		opacity: 0.82;
	}


	86% {
		opacity: 1;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				1.004,
				1.004,
				1
			);
	}


	100% {
		opacity: 1;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				1.004,
				1.004,
				1
			);
	}

}


/* ========================================
   CRT LINE
======================================== */

@keyframes production-tv-line {

	0%,
	4% {
		width: 0;
		height: 2px;

		opacity: 0;
	}


	10% {
		width: 8%;

		opacity: 1;
	}


	28% {
		width: 78%;

		opacity: 1;
	}


	42% {
		width: 100%;
		height: 3px;

		opacity: 1;
	}


	58% {
		width: 100%;
		height: 1px;

		opacity: 0.75;
	}


	75%,
	100% {
		width: 100%;
		height: 1px;

		opacity: 0;
	}

}


/* ========================================
   CRT BLACK FLICKER
======================================== */

@keyframes production-tv-blackout {

	0%,
	44% {
		opacity: 1;
	}


	45% {
		opacity: 0.35;
	}


	50% {
		opacity: 0;
	}


	55% {
		opacity: 0.72;
	}


	59% {
		opacity: 0;
	}


	64% {
		opacity: 0.38;
	}


	68% {
		opacity: 0;
	}


	75% {
		opacity: 0.16;
	}


	80%,
	100% {
		opacity: 0;
	}

}


/* ========================================
   CRT EXPOSURE FLICKER
======================================== */

@keyframes production-tv-exposure {

	0%,
	20%,
	33%,
	52%,
	71%,
	100% {
		opacity: 0;
	}


	21% {
		opacity: 0.28;
	}


	34% {
		opacity: 0.08;
	}


	53% {
		opacity: 0.18;
	}


	72% {
		opacity: 0.07;
	}

}


/* ========================================
   STABLE LIVE VIDEO
======================================== */

.production-hero.is-video-live
.production-hero__video {
	opacity: 1;

	transform:
		translate3d(
			0,
			0,
			0
		)
		scale3d(
			1.004,
			1.004,
			1
		);

	animation: none;
}


.production-hero.is-video-live
.production-hero__tv-startup {
	opacity: 0;

	visibility: hidden;

	animation: none;
}


/* ========================================
   VERY LIGHT VIDEO DARKENING
======================================== */

.production-hero::after {
	content: "";

	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		rgba(
			0,
			0,
			0,
			0.1
		);

	pointer-events: none;
}


/* ========================================
   ANALOGUE FILM FX
======================================== */

.production-hero__film-fx {
	position: absolute;
	inset: 0;

	z-index: 2;

	overflow: hidden;

	opacity: 0;

	pointer-events: none;
}


/* ========================================
   EXPOSURE FLASH
======================================== */

.production-hero__film-fx::before {
	content: "";

	position: absolute;
	inset: 0;

	background:
		rgba(
			255,
			255,
			255,
			0.22
		);

	opacity: 0;
}


/* ========================================
   DARK FRAME FLASH
======================================== */

.production-hero__film-fx::after {
	content: "";

	position: absolute;
	inset: 0;

	background:
		rgba(
			0,
			0,
			0,
			0.34
		);

	opacity: 0;
}


.production-hero.is-film-glitching
.production-hero__film-fx {
	opacity: 1;
}


.production-hero.is-film-glitching
.production-hero__film-fx::before {
	animation:
		production-exposure-flash
		720ms
		steps(1, end)
		infinite;
}


.production-hero.is-film-glitching
.production-hero__film-fx::after {
	animation:
		production-dark-flash
		810ms
		steps(1, end)
		infinite;
}


@keyframes production-exposure-flash {

	0%,
	14%,
	23%,
	52%,
	61%,
	100% {
		opacity: 0;
	}


	15% {
		opacity: 0.16;
	}


	53% {
		opacity: 0.28;
	}


	62% {
		opacity: 0.08;
	}

}


@keyframes production-dark-flash {

	0%,
	31%,
	39%,
	73%,
	81%,
	100% {
		opacity: 0;
	}


	32% {
		opacity: 0.14;
	}


	74% {
		opacity: 0.08;
	}

}


/* ========================================
   FILM TEARS
======================================== */

.production-hero__film-tear {
	position: absolute;

	left: -5%;

	width: 110%;

	height:
		clamp(
			2px,
			0.35vw,
			6px
		);

	background:
		rgba(
			255,
			255,
			255,
			0.26
		);

	opacity: 0;
}


.production-hero__film-tear:nth-child(1) {
	top: 27%;
}


.production-hero__film-tear:nth-child(2) {
	top: 54%;

	height:
		clamp(
			5px,
			0.7vw,
			11px
		);

	background:
		rgba(
			255,
			255,
			255,
			0.13
		);
}


.production-hero__film-tear:nth-child(3) {
	top: 73%;
}


.production-hero.is-film-glitching
.production-hero__film-tear:nth-child(1) {
	animation:
		production-film-tear-one
		480ms
		steps(1, end)
		infinite;
}


.production-hero.is-film-glitching
.production-hero__film-tear:nth-child(2) {
	animation:
		production-film-tear-two
		590ms
		-120ms
		steps(1, end)
		infinite;
}


.production-hero.is-film-glitching
.production-hero__film-tear:nth-child(3) {
	animation:
		production-film-tear-three
		530ms
		-210ms
		steps(1, end)
		infinite;
}


@keyframes production-film-tear-one {

	0%,
	19%,
	47%,
	100% {
		opacity: 0;
	}


	20% {
		opacity: 0.8;

		transform:
			translate3d(
				14px,
				0,
				0
			);
	}


	29% {
		opacity: 0.22;

		transform:
			translate3d(
				-8px,
				0,
				0
			);
	}

}


@keyframes production-film-tear-two {

	0%,
	33%,
	61%,
	100% {
		opacity: 0;
	}


	34% {
		opacity: 0.55;

		transform:
			translate3d(
				-20px,
				0,
				0
			);
	}


	44% {
		opacity: 0.18;

		transform:
			translate3d(
				9px,
				0,
				0
			);
	}

}


@keyframes production-film-tear-three {

	0%,
	54%,
	78%,
	100% {
		opacity: 0;
	}


	55% {
		opacity: 0.7;

		transform:
			translate3d(
				17px,
				0,
				0
			);
	}

}


/* ========================================
   ARCHIVE FLASHES
======================================== */

.production-hero__archive-flashes {
	position: absolute;
	inset: 0;

	z-index: 3;

	overflow: hidden;

	pointer-events: none;
}


.production-hero__archive-flash {
	position: absolute;

	display: block;

	width:
		clamp(
			150px,
			18vw,
			330px
		);

	margin: 0;

	overflow: hidden;

	opacity: 0;

	background: #111111;

	pointer-events: none;
}


.production-hero__archive-flash:nth-child(1) {
	top: 13%;
	left: 7%;

	width:
		clamp(
			180px,
			22vw,
			400px
		);
}


.production-hero__archive-flash:nth-child(2) {
	top: 19%;
	right: 6%;

	width:
		clamp(
			145px,
			17vw,
			290px
		);
}


.production-hero__archive-flash:nth-child(3) {
	left: 13%;
	bottom: 10%;

	width:
		clamp(
			145px,
			18vw,
			310px
		);
}


.production-hero__archive-flash:nth-child(4) {
	right: 11%;
	bottom: 14%;

	width:
		clamp(
			170px,
			20vw,
			350px
		);
}


.production-hero__archive-image {
	display: block;

	width: 100%;
	height: auto;

	aspect-ratio: 4 / 3;

	object-fit: cover;
}


.production-hero__archive-caption {
	position: absolute;

	left: 7px;
	right: 7px;
	bottom: 6px;

	display: flex;
	align-items: flex-end;
	justify-content: space-between;

	gap: 12px;

	color: #ffffff;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			7px,
			0.55vw,
			9px
		);

	font-weight: 500;

	line-height: 1;

	letter-spacing:
		0.04em;

	text-transform: uppercase;

	text-shadow:
		0
		1px
		4px
		rgba(
			0,
			0,
			0,
			0.7
		);
}


.production-hero__archive-flash.is-visible {
	animation:
		production-archive-flash
		150ms
		steps(1, end)
		forwards;
}


@keyframes production-archive-flash {

	0% {
		opacity: 0;

		clip-path:
			inset(
				38%
				0
				43%
				0
			);

		transform:
			translate3d(
				-10px,
				0,
				0
			)
			scale3d(
				1.03,
				1,
				1
			);
	}


	18% {
		opacity: 0.95;
	}


	42% {
		opacity: 0.5;

		clip-path:
			inset(
				4%
				0
				14%
				0
			);

		transform:
			translate3d(
				8px,
				0,
				0
			)
			scale3d(
				1,
				1.02,
				1
			);
	}


	65% {
		opacity: 0.9;

		clip-path:
			inset(
				18%
				0
				3%
				0
			);
	}


	100% {
		opacity: 0;

		clip-path:
			inset(
				46%
				0
				37%
				0
			);

		transform:
			translate3d(
				-5px,
				0,
				0
			);
	}

}


/* ========================================
   TITLE STAGE
======================================== */

.production-hero__title-stage {
	position: absolute;
	inset: 0;

	z-index: 4;

	color:
		var(
			--production-foreground
		);

	font-family:
		"JetBrainsMono",
		monospace;

	pointer-events: none;
}


/* ========================================
   WORD WRAPPERS
======================================== */

.production-hero__word-wrap {
	position: absolute;

	top: 50%;
	left: 50%;

	display: block;

	width: max-content;

	opacity: 0;

	transform:
		translate3d(
			-50%,
			-50%,
			0
		)
		translate3d(
			var(--from-x),
			var(--from-y),
			0
		)
		rotate(
			var(--from-rotate)
		)
		scale3d(
			0.7,
			0.7,
			1
		);

	transform-origin: center;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	will-change:
		transform,
		opacity;
}


/* ========================================
   THE
======================================== */

.production-hero__word-wrap--the {
	--rest-x: -8vw;
	--rest-y: -13svh;

	--from-x: -72vw;
	--from-y: -44vh;

	--from-rotate: -14deg;

	font-size:
		clamp(
			28px,
			3.2vw,
			54px
		);

	font-weight: 500;
}


/* ========================================
   PRODUCTION
======================================== */

.production-hero__word-wrap--production {
	--rest-x: -1vw;
	--rest-y: -1svh;

	--from-x: 78vw;
	--from-y: 7vh;

	--from-rotate: 10deg;

	font-size:
		clamp(
			52px,
			6.8vw,
			112px
		);

	font-weight: 600;
}


/* ========================================
   ARCHIVES
======================================== */

.production-hero__word-wrap--archives {
	--rest-x: 9vw;
	--rest-y: 12svh;

	--from-x: -31vw;
	--from-y: 75vh;

	--from-rotate: -10deg;

	font-size:
		clamp(
			37px,
			4.8vw,
			80px
		);

	font-weight: 500;
}


/* ========================================
   WORD
======================================== */

.production-hero__word {
	position: relative;

	display: block;

	color: inherit;

	line-height: 0.9;

	letter-spacing:
		-0.055em;

	white-space: nowrap;

	text-shadow:
		0
		2px
		12px
		rgba(
			0,
			0,
			0,
			0.22
		);

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	will-change:
		transform,
		opacity;
}


/* ========================================
   ARCHIVES UNDERLINE
======================================== */

.production-hero__word--archives::after {
	content: "";

	position: absolute;

	left: 0.02em;
	right: 0;

	bottom: -0.11em;

	height: 0.055em;

	background: currentColor;

	transform-origin: left center;
}


/* ========================================
   GLITCH COPIES
======================================== */

.production-hero__word::before,
.production-hero__word::after {
	content:
		attr(
			data-text
		);

	position: absolute;
	inset: 0;

	display: block;

	color: inherit;

	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;

	opacity: 0;

	pointer-events: none;
}


/* ========================================
   ENTRANCE
======================================== */

.production-hero.is-entering
.production-hero__word-wrap {
	animation:
		production-word-enter
		1.2s
		cubic-bezier(
			0.16,
			0.82,
			0.18,
			1
		)
		forwards;
}


.production-hero.is-entering
.production-hero__word-wrap--the {
	animation-delay: 0ms;
}


.production-hero.is-entering
.production-hero__word-wrap--production {
	animation-delay: 120ms;
}


.production-hero.is-entering
.production-hero__word-wrap--archives {
	animation-delay: 240ms;
}


@keyframes production-word-enter {

	0% {
		opacity: 0;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--from-x),
				var(--from-y),
				0
			)
			rotate(
				var(--from-rotate)
			)
			scale3d(
				0.7,
				0.7,
				1
			);
	}


	68% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			)
			rotate(-0.5deg)
			scale3d(
				1.045,
				1.045,
				1
			);
	}


	84% {
		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			)
			rotate(0.2deg)
			scale3d(
				0.99,
				0.99,
				1
			);
	}


	100% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			)
			rotate(0deg)
			scale3d(
				1,
				1,
				1
			);
	}

}


/* ========================================
   INDEPENDENT FLOATING
======================================== */

.production-hero.is-floating
.production-hero__word-wrap--the
.production-hero__word {
	animation:
		production-float-the
		3.8s
		ease-in-out
		infinite;
}


.production-hero.is-floating
.production-hero__word-wrap--production
.production-hero__word {
	animation:
		production-float-production
		4.4s
		-1.2s
		ease-in-out
		infinite;
}


.production-hero.is-floating
.production-hero__word-wrap--archives
.production-hero__word {
	animation:
		production-float-archives
		3.5s
		-0.8s
		ease-in-out
		infinite;
}


@keyframes production-float-the {

	0%,
	100% {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}


	45% {
		transform:
			translate3d(
				-5px,
				-7px,
				0
			)
			rotate(-0.2deg);
	}


	75% {
		transform:
			translate3d(
				3px,
				-2px,
				0
			)
			rotate(0.1deg);
	}

}


@keyframes production-float-production {

	0%,
	100% {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}


	38% {
		transform:
			translate3d(
				5px,
				4px,
				0
			)
			rotate(0.13deg);
	}


	72% {
		transform:
			translate3d(
				-3px,
				-4px,
				0
			)
			rotate(-0.1deg);
	}

}


@keyframes production-float-archives {

	0%,
	100% {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}


	42% {
		transform:
			translate3d(
				5px,
				-5px,
				0
			)
			rotate(0.17deg);
	}


	74% {
		transform:
			translate3d(
				-4px,
				4px,
				0
			)
			rotate(-0.13deg);
	}

}


/* ========================================
   CATALOGUE DETAILS
======================================== */

.production-hero__catalogue {
	position: absolute;
	inset: 0;

	z-index: 4;

	color:
		rgba(
			255,
			255,
			255,
			0.76
		);

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			7px,
			0.58vw,
			10px
		);

	font-weight: 400;

	line-height: 1.2;

	letter-spacing:
		0.08em;

	text-transform: uppercase;

	pointer-events: none;
}


.production-hero__catalogue-item {
	position: absolute;

	display: flex;
	flex-direction: column;

	opacity: 0;

	transform:
		translate3d(
			0,
			5px,
			0
		);

	transition:
		opacity 600ms ease,
		transform 800ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


.production-hero__catalogue-item span {
	opacity: 0.55;
}


.production-hero__catalogue-item--one {
	top: 24%;
	left: 11%;
}


.production-hero__catalogue-item--two {
	top: 32%;
	right: 12%;

	text-align: right;
}


.production-hero__catalogue-item--three {
	left: 16%;
	bottom: 17%;
}


.production-hero.is-floating
.production-hero__catalogue-item {
	opacity: 0.62;

	transform:
		translate3d(
			0,
			0,
			0
		);
}


.production-hero.is-collapsing
.production-hero__catalogue-item {
	opacity: 0;

	transition-duration: 180ms;
}


/* ========================================
   ARCHIVES GLITCH SOURCE
======================================== */

.production-hero__word-wrap.is-glitching {
	animation:
		production-word-glitch
		470ms
		steps(1, end)
		forwards;
}


.production-hero__word-wrap--archives.is-glitch-source
.production-hero__word--archives::after {
	animation:
		production-archive-underline-glitch
		360ms
		steps(1, end)
		2;
}


@keyframes production-archive-underline-glitch {

	0% {
		opacity: 1;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scaleX(1);
	}


	12% {
		transform:
			translate3d(
				8px,
				1px,
				0
			)
			scaleX(0.72)
			skewX(13deg);
	}


	25% {
		opacity: 0.25;

		transform:
			translate3d(
				-13px,
				-1px,
				0
			)
			scaleX(1.16);
	}


	42% {
		opacity: 1;

		transform:
			translate3d(
				4px,
				0,
				0
			)
			scaleX(0.88);
	}


	59% {
		opacity: 0;
	}


	68% {
		opacity: 1;

		transform:
			translate3d(
				-5px,
				1px,
				0
			)
			scaleX(1.08)
			skewX(-10deg);
	}


	100% {
		transform:
			translate3d(
				0,
				0,
				0
			)
			scaleX(1);
	}

}


/* ========================================
   WORD GLITCH
======================================== */

@keyframes production-word-glitch {

	0% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			);
	}


	11% {
		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				calc(
					var(--rest-x) +
					14px
				),
				calc(
					var(--rest-y) -
					4px
				),
				0
			)
			skewX(8deg);
	}


	22% {
		opacity: 0.24;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				calc(
					var(--rest-x) -
					17px
				),
				calc(
					var(--rest-y) +
					6px
				),
				0
			)
			scaleX(1.09);
	}


	34% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				calc(
					var(--rest-x) +
					8px
				),
				calc(
					var(--rest-y) +
					2px
				),
				0
			)
			skewX(-10deg);
	}


	45% {
		opacity: 0;
	}


	53% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				calc(
					var(--rest-x) +
					19px
				),
				calc(
					var(--rest-y) +
					6px
				),
				0
			)
			scaleY(0.86);
	}


	66% {
		opacity: 0.38;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				calc(
					var(--rest-x) -
					13px
				),
				calc(
					var(--rest-y) +
					1px
				),
				0
			)
			skewX(9deg);
	}


	78% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				calc(
					var(--rest-x) +
					6px
				),
				calc(
					var(--rest-y) -
					6px
				),
				0
			)
			scaleX(1.11);
	}


	88% {
		opacity: 0.2;
	}


	100% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			);
	}

}


/* ========================================
   GLITCH SLICES
======================================== */

.production-hero__word-wrap.is-glitching
.production-hero__word::before {
	animation:
		production-word-slice-a
		120ms
		steps(1, end)
		infinite;
}


.production-hero__word-wrap.is-glitching
.production-hero__word::after {
	animation:
		production-word-slice-b
		145ms
		-55ms
		steps(1, end)
		infinite;
}


@keyframes production-word-slice-a {

	0% {
		opacity: 0;
	}


	25% {
		opacity: 0.58;

		clip-path:
			inset(
				6%
				0
				72%
				0
			);

		transform:
			translate3d(
				-15px,
				0,
				0
			);
	}


	50% {
		opacity: 0.22;

		clip-path:
			inset(
				45%
				0
				32%
				0
			);

		transform:
			translate3d(
				11px,
				0,
				0
			);
	}


	75% {
		opacity: 0.68;

		clip-path:
			inset(
				73%
				0
				6%
				0
			);

		transform:
			translate3d(
				-18px,
				0,
				0
			);
	}


	100% {
		opacity: 0;
	}

}


@keyframes production-word-slice-b {

	0% {
		opacity: 0.4;

		clip-path:
			inset(
				59%
				0
				17%
				0
			);

		transform:
			translate3d(
				14px,
				0,
				0
			);
	}


	33% {
		opacity: 0;
	}


	66% {
		opacity: 0.62;

		clip-path:
			inset(
				15%
				0
				62%
				0
			);

		transform:
			translate3d(
				19px,
				0,
				0
			);
	}


	100% {
		opacity: 0;
	}

}


/* ========================================
   SMOOTH TYPOGRAPHIC IMPLOSION

   Transform + opacity only for the large
   text to avoid the previous stuttering.
======================================== */

.production-hero.is-collapsing
.production-hero__word-wrap {
	animation:
		production-word-implode
		760ms
		cubic-bezier(
			0.72,
			0,
			0.84,
			0.26
		)
		forwards;
}


.production-hero.is-collapsing
.production-hero__word {
	animation: none;
}


.production-hero.is-collapsing
.production-hero__word::before,
.production-hero.is-collapsing
.production-hero__word::after {
	display: none;
}


@keyframes production-word-implode {

	0% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			)
			scale3d(
				1,
				1,
				1
			);
	}


	68% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				0.27,
				0.27,
				1
			);
	}


	83% {
		opacity: 0.82;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				0.11,
				0.11,
				1
			);
	}


	100% {
		opacity: 0;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				0.025,
				0.025,
				1
			);
	}

}


/* ========================================
   BRIGHT ORGANIC MEMORY MATTER
======================================== */

.production-hero__matter {
	position: absolute;

	top: 50%;
	left: 50%;

	z-index: 5;

	width:
		clamp(
			19px,
			1.7vw,
			27px
		);

	aspect-ratio: 1;

	background: #ffffff;

	border-radius:
		54%
		46%
		62%
		38%
		/
		47%
		59%
		41%
		53%;

	box-shadow:
		0
		0
		8px
		rgba(
			255,
			255,
			255,
			0.95
		),
		0
		0
		19px
		rgba(
			255,
			255,
			255,
			0.46
		),
		0
		0
		34px
		rgba(
			255,
			255,
			255,
			0.17
		);

	opacity: 0;

	transform:
		translate3d(
			-50%,
			-50%,
			0
		)
		scale3d(
			0.04,
			0.04,
			1
		);

	transform-origin: center;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	pointer-events: none;

	will-change:
		transform,
		opacity,
		border-radius;
}


.production-hero__matter::before {
	content: "";

	position: absolute;

	inset: -17%;

	background:
		rgba(
			255,
			255,
			255,
			0.4
		);

	border-radius:
		42%
		58%
		51%
		49%
		/
		60%
		40%
		57%
		43%;

	opacity: 0.55;

	transform:
		rotate(-7deg);

	pointer-events: none;
}


/* ========================================
   MATTER FORMATION
======================================== */

.production-hero.is-collapsing
.production-hero__matter {
	animation:
		production-matter-form
		760ms
		cubic-bezier(
			0.2,
			0.72,
			0.2,
			1
		)
		forwards;
}


@keyframes production-matter-form {

	0%,
	35% {
		opacity: 0;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				0.04,
				0.04,
				1
			);
	}


	52% {
		opacity: 0.28;

		border-radius:
			63%
			37%
			48%
			52%
			/
			40%
			63%
			37%
			60%;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				0.38,
				0.26,
				1
			);
	}


	69% {
		opacity: 0.82;

		border-radius:
			39%
			61%
			57%
			43%
			/
			61%
			39%
			46%
			54%;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				1.2,
				0.75,
				1
			);
	}


	84% {
		opacity: 1;

		border-radius:
			60%
			40%
			43%
			57%
			/
			43%
			59%
			41%
			57%;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				0.84,
				1.13,
				1
			);
	}


	100% {
		opacity: 1;

		border-radius:
			53%
			47%
			59%
			41%
			/
			48%
			56%
			44%
			52%;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				1,
				1,
				1
			);
	}

}


/* ========================================
   PHYSICAL PARTICLE FALL
======================================== */

.production-hero.is-matter-exiting
.production-hero__matter {
	animation:
		production-matter-fall
		900ms
		cubic-bezier(
			0.55,
			0,
			0.92,
			0.36
		)
		forwards;
}


@keyframes production-matter-fall {

	0% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			scale3d(
				1,
				1,
				1
			);
	}


	9% {
		transform:
			translate3d(
				-50%,
				calc(
					-50% +
					1px
				),
				0
			)
			scale3d(
				1.28,
				0.73,
				1
			);
	}


	21% {
		border-radius:
			62%
			38%
			44%
			56%
			/
			37%
			63%
			41%
			59%;

		transform:
			translate3d(
				-50%,
				calc(
					-50% +
					2vh
				),
				0
			)
			scale3d(
				0.8,
				1.34,
				1
			);
	}


	39% {
		border-radius:
			43%
			57%
			54%
			46%
			/
			69%
			31%
			64%
			36%;

		transform:
			translate3d(
				-50%,
				calc(
					-50% +
					11vh
				),
				0
			)
			scale3d(
				0.66,
				1.58,
				1
			);
	}


	59% {
		border-radius:
			57%
			43%
			47%
			53%
			/
			73%
			27%
			68%
			32%;

		transform:
			translate3d(
				-50%,
				calc(
					-50% +
					28vh
				),
				0
			)
			scale3d(
				0.55,
				1.77,
				1
			);
	}


	77% {
		opacity: 1;

		transform:
			translate3d(
				-50%,
				calc(
					50svh -
					138px
				),
				0
			)
			scale3d(
				0.46,
				1.66,
				1
			);
	}


	91% {
		opacity: 1;

		border-radius:
			58%
			42%
			45%
			55%
			/
			68%
			32%
			71%
			29%;

		transform:
			translate3d(
				-50%,
				calc(
					50svh -
					91px
				),
				0
			)
			scale3d(
				0.39,
				1.38,
				1
			);
	}


	100% {
		opacity: 0;

		transform:
			translate3d(
				-50%,
				calc(
					50svh -
					72px
				),
				0
			)
			scale3d(
				0.12,
				0.2,
				1
			);
	}

}


/* ========================================
   ENTER ARCHIVES CUE
======================================== */

.production-hero__scroll {
	position: absolute;

	left: 50%;

	bottom:
		clamp(
			19px,
			3.2svh,
			38px
		);

	z-index: 6;

	display: flex;
	flex-direction: column;
	align-items: center;

	gap: 12px;

	width: max-content;

	padding: 0;

	border: 0;

	background: transparent;

	color: #ffffff;

	cursor: pointer;

	opacity: 0;

	pointer-events: none;

	transform:
		translate3d(
			-50%,
			12px,
			0
		)
		scale3d(
			0.9,
			0.9,
			1
		);

	transition:
		opacity 420ms ease,
		transform 520ms
		cubic-bezier(
			0.16,
			0.82,
			0.18,
			1
		);

	-webkit-tap-highlight-color: transparent;

	will-change:
		transform,
		opacity;
}


.production-hero.is-cue-visible
.production-hero__scroll {
	opacity: 1;

	pointer-events: auto;

	transform:
		translate3d(
			-50%,
			0,
			0
		)
		scale3d(
			1,
			1,
			1
		);
}


/* ========================================
   SCROLL LABEL
======================================== */

.production-hero__scroll-label {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/* ========================================
   ENTER THE ARCHIVES TEXT
======================================== */

.production-hero__scroll-words {
	position: relative;

	z-index: 3;

	display: flex;
	flex-direction: column;
	align-items: center;

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			8px,
			0.67vw,
			10.5px
		);

	font-weight: 700;

	line-height: 1.03;

	letter-spacing:
		0.11em;

	text-align: center;

	text-transform: uppercase;

	text-shadow:
		0
		1px
		5px
		rgba(
			0,
			0,
			0,
			0.24
		);

	animation:
		production-cue-float
		3.4s
		ease-in-out
		infinite;
}


.production-hero__scroll-line {
	display: block;

	white-space: nowrap;
}


.production-hero__scroll-line +
.production-hero__scroll-line {
	margin-top: 2px;
}


/* ========================================
   THICK ORGANIC MEMBRANE
======================================== */

.production-hero__membrane {
	position: absolute;

	inset:
		-7px
		-10px
		-6px;

	z-index: 1;

	background:
		rgba(
			255,
			255,
			255,
			0.035
		);

	border:
		4px
		solid
		rgba(
			255,
			255,
			255,
			0.58
		);

	border-radius:
		48%
		52%
		43%
		57%
		/
		59%
		41%
		62%
		38%;

	box-shadow:
		inset
		0
		0
		4px
		rgba(
			255,
			255,
			255,
			0.22
		),
		0
		0
		4px
		rgba(
			255,
			255,
			255,
			0.14
		);

	backdrop-filter:
		blur(2px);

	-webkit-backdrop-filter:
		blur(2px);

	transform:
		translate3d(
			var(--membrane-x),
			var(--membrane-y),
			0
		)
		rotate(
			var(--membrane-rotate)
		)
		scale(
			var(--membrane-scale-x),
			var(--membrane-scale-y)
		);

	animation:
		production-membrane-breathe
		5.2s
		ease-in-out
		infinite
		alternate;

	pointer-events: none;

	will-change:
		transform,
		border-radius;
}


/* ========================================
   OUTER ORGANIC EDGE
======================================== */

.production-hero__membrane::before {
	content: "";

	position: absolute;

	inset: -4px;

	border:
		3px
		solid
		rgba(
			255,
			255,
			255,
			0.2
		);

	border-radius:
		62%
		38%
		51%
		49%
		/
		41%
		62%
		38%
		59%;

	opacity: 0.9;

	animation:
		production-membrane-outer
		4.5s
		-1.1s
		ease-in-out
		infinite
		alternate;
}


/* ========================================
   INNER ORGANIC EDGE
======================================== */

.production-hero__membrane::after {
	content: "";

	position: absolute;

	inset: 2px;

	border:
		2px
		solid
		rgba(
			255,
			255,
			255,
			0.28
		);

	border-radius:
		39%
		61%
		56%
		44%
		/
		63%
		37%
		54%
		46%;

	opacity: 0.75;

	animation:
		production-membrane-inner
		3.8s
		-0.7s
		ease-in-out
		infinite
		alternate;
}


/* ========================================
   MEMBRANE BREATHING
======================================== */

@keyframes production-membrane-breathe {

	0% {
		border-radius:
			48%
			52%
			43%
			57%
			/
			59%
			41%
			62%
			38%;
	}


	25% {
		border-radius:
			64%
			36%
			52%
			48%
			/
			42%
			64%
			36%
			58%;
	}


	51% {
		border-radius:
			39%
			61%
			58%
			42%
			/
			66%
			34%
			53%
			47%;
	}


	74% {
		border-radius:
			56%
			44%
			37%
			63%
			/
			43%
			58%
			42%
			57%;
	}


	100% {
		border-radius:
			44%
			56%
			63%
			37%
			/
			58%
			45%
			55%
			42%;
	}

}


@keyframes production-membrane-outer {

	0% {
		border-radius:
			62%
			38%
			51%
			49%
			/
			41%
			62%
			38%
			59%;

		transform:
			translate3d(
				-1px,
				1px,
				0
			);
	}


	100% {
		border-radius:
			42%
			58%
			38%
			62%
			/
			60%
			40%
			64%
			36%;

		transform:
			translate3d(
				1px,
				-1px,
				0
			);
	}

}


@keyframes production-membrane-inner {

	0% {
		border-radius:
			39%
			61%
			56%
			44%
			/
			63%
			37%
			54%
			46%;
	}


	100% {
		border-radius:
			63%
			37%
			45%
			55%
			/
			43%
			62%
			38%
			57%;
	}

}


/* ========================================
   PARTICLE IMPACT
======================================== */

.production-hero.is-cue-impacted
.production-hero__membrane {
	animation:
		production-membrane-impact
		760ms
		cubic-bezier(
			0.16,
			0.82,
			0.18,
			1
		)
		forwards;
}


.production-hero.is-cue-impacted
.production-hero__scroll-words {
	animation:
		production-cue-impact
		620ms
		cubic-bezier(
			0.16,
			0.82,
			0.18,
			1
		);
}


@keyframes production-membrane-impact {

	0% {
		transform:
			translate3d(
				var(--membrane-x),
				var(--membrane-y),
				0
			)
			scale3d(
				1,
				1,
				1
			);
	}


	18% {
		border-radius:
			61%
			39%
			46%
			54%
			/
			36%
			64%
			31%
			69%;

		transform:
			translate3d(
				var(--membrane-x),
				calc(
					var(--membrane-y) +
					5px
				),
				0
			)
			scale3d(
				0.86,
				1.32,
				1
			);
	}


	39% {
		border-radius:
			38%
			62%
			58%
			42%
			/
			68%
			32%
			62%
			38%;

		transform:
			translate3d(
				var(--membrane-x),
				calc(
					var(--membrane-y) -
					2px
				),
				0
			)
			scale3d(
				1.18,
				0.87,
				1
			);
	}


	61% {
		border-radius:
			57%
			43%
			37%
			63%
			/
			44%
			59%
			41%
			56%;

		transform:
			translate3d(
				var(--membrane-x),
				calc(
					var(--membrane-y) +
					1px
				),
				0
			)
			scale3d(
				0.94,
				1.08,
				1
			);
	}


	82% {
		transform:
			translate3d(
				var(--membrane-x),
				var(--membrane-y),
				0
			)
			scale3d(
				1.04,
				0.97,
				1
			);
	}


	100% {
		transform:
			translate3d(
				var(--membrane-x),
				var(--membrane-y),
				0
			)
			scale3d(
				1,
				1,
				1
			);
	}

}


@keyframes production-cue-impact {

	0%,
	100% {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}


	25% {
		transform:
			translate3d(
				0,
				3px,
				0
			);
	}


	48% {
		transform:
			translate3d(
				0,
				-2px,
				0
			);
	}


	72% {
		transform:
			translate3d(
				0,
				1px,
				0
			);
	}

}


/* ========================================
   QUIET CUE FLOAT
======================================== */

@keyframes production-cue-float {

	0%,
	100% {
		transform:
			translate3d(
				0,
				0,
				0
			);
	}


	50% {
		transform:
			translate3d(
				0,
				-2px,
				0
			);
	}

}


/* ========================================
   CHEVRON
======================================== */

.production-hero__chevron {
	position: relative;

	z-index: 2;

	display: block;

	width:
		clamp(
			14px,
			1.05vw,
			18px
		);

	height: auto;

	color: #ffffff;

	animation:
		production-chevron
		2.7s
		ease-in-out
		infinite;
}


@keyframes production-chevron {

	0%,
	100% {
		opacity: 0.5;

		transform:
			translate3d(
				0,
				0,
				0
			);
	}


	50% {
		opacity: 1;

		transform:
			translate3d(
				0,
				4px,
				0
			);
	}

}


/* ========================================
   HOVER
======================================== */

@media (hover: hover) {

	.production-hero__scroll:hover
	.production-hero__membrane {
		border-radius:
			68%
			32%
			44%
			56%
			/
			38%
			67%
			33%
			62%;
	}


	.production-hero__scroll:hover
	.production-hero__chevron {
		animation-duration:
			1.5s;
	}

}


/* ========================================
   FOCUS
======================================== */

.production-hero__scroll:focus-visible {
	outline:
		2px
		solid
		rgba(
			255,
			255,
			255,
			0.9
		);

	outline-offset: 10px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

	.production-hero__word-wrap--the {
		--rest-x: -10vw;
		--rest-y: -10svh;

		font-size:
			clamp(
				23px,
				6.6vw,
				36px
			);
	}


	.production-hero__word-wrap--production {
		--rest-x: -1vw;
		--rest-y: -1svh;

		font-size:
			clamp(
				37px,
				10.8vw,
				57px
			);
	}


	.production-hero__word-wrap--archives {
		--rest-x: 8vw;
		--rest-y: 10svh;

		font-size:
			clamp(
				29px,
				8.6vw,
				46px
			);
	}


	.production-hero__archive-flash:nth-child(1) {
		top: 15%;
		left: 4%;

		width: 42vw;
	}


	.production-hero__archive-flash:nth-child(2) {
		top: 24%;
		right: 3%;

		width: 35vw;
	}


	.production-hero__archive-flash:nth-child(3) {
		left: 5%;
		bottom: 13%;

		width: 38vw;
	}


	.production-hero__archive-flash:nth-child(4) {
		right: 4%;
		bottom: 20%;

		width: 40vw;
	}


	.production-hero__catalogue-item {
		font-size: 7px;
	}


	.production-hero__catalogue-item--three {
		display: none;
	}


	.production-hero__matter {
		width: 20px;
	}


	.production-hero__scroll {
		bottom:
			max(
				17px,
				env(
					safe-area-inset-bottom
				)
			);
	}


	.production-hero__scroll-words {
		font-size: 8px;
	}


	.production-hero__membrane {
		inset:
			-6px
			-9px
			-5px;

		border-width:
			3.5px;
	}


	.production-hero__membrane::before {
		inset: -3px;

		border-width: 2.5px;
	}


	.production-hero.is-tv-starting
	.production-hero__video,
	.production-hero.is-tv-starting
	.production-hero__tv-startup,
	.production-hero.is-tv-starting
	.production-hero__tv-startup::after {
		animation-duration:
			1000ms;
	}


	.production-hero.is-tv-starting
	.production-hero__tv-startup::before {
		animation-duration:
			560ms;
	}

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

	.production-hero__video {
		opacity: 1;

		transform:
			translate3d(
				0,
				0,
				0
			)
			scale3d(
				1.004,
				1.004,
				1
			);

		animation: none !important;
	}


	.production-hero__tv-startup,
	.production-hero__film-fx,
	.production-hero__archive-flashes,
	.production-hero__catalogue {
		display: none;
	}


	.production-hero__word-wrap {
		opacity: 1;

		animation: none !important;
	}


	.production-hero__word-wrap--the,
	.production-hero__word-wrap--production,
	.production-hero__word-wrap--archives {
		transform:
			translate3d(
				-50%,
				-50%,
				0
			)
			translate3d(
				var(--rest-x),
				var(--rest-y),
				0
			);
	}


	.production-hero__word,
	.production-hero__word::before,
	.production-hero__word::after,
	.production-hero__membrane,
	.production-hero__membrane::before,
	.production-hero__membrane::after,
	.production-hero__scroll-words,
	.production-hero__chevron {
		animation: none !important;
	}


	.production-hero__matter {
		display: none;
	}


	.production-hero__scroll {
		opacity: 1;

		pointer-events: auto;

		transform:
			translate3d(
				-50%,
				0,
				0
			);
	}

}





/* ========================================
   PRODUCTION ARCHIVES
======================================== */

.production-archives {
	--archive-background:
		#111111;

	--archive-surface:
		#171717;

	--archive-foreground:
		#f7f5f1;

	--archive-muted:
		rgba(
			247,
			245,
			241,
			0.58
		);

	--archive-soft:
		rgba(
			247,
			245,
			241,
			0.1
		);

	position: relative;

	width: 100%;

	padding:
		0
		clamp(
			18px,
			4vw,
			72px
		)
		clamp(
			100px,
			14vw,
			220px
		);

	overflow: clip;

	background:
		var(
			--archive-background
		);

	color:
		var(
			--archive-foreground
		);

	scroll-margin-top: 0;
}


/* ========================================
   HERO → ARCHIVE HANDOFF
======================================== */

.production-archives__entry {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;

	height:
		clamp(
			100px,
			13vw,
			190px
		);

	pointer-events: none;
}


.production-archives__entry-membrane {
	position: absolute;

	top: -13px;

	width: 52px;
	height: 25px;

	border:
		4px
		solid
		rgba(
			255,
			255,
			255,
			0.5
		);

	border-radius:
		58%
		42%
		63%
		37%
		/
		44%
		62%
		38%
		56%;

	opacity: 0.75;

	animation:
		archive-entry-breathe
		5s
		ease-in-out
		infinite
		alternate;
}


.production-archives__entry-line {
	position: absolute;

	top: 24px;

	width: 1px;
	height:
		clamp(
			45px,
			7vw,
			95px
		);

	background:
		rgba(
			255,
			255,
			255,
			0.25
		);
}


@keyframes archive-entry-breathe {

	0% {
		border-radius:
			58%
			42%
			63%
			37%
			/
			44%
			62%
			38%
			56%;

		transform:
			scale3d(
				1,
				1,
				1
			);
	}


	100% {
		border-radius:
			41%
			59%
			45%
			55%
			/
			61%
			39%
			58%
			42%;

		transform:
			scale3d(
				1.08,
				0.93,
				1
			);
	}

}


/* ========================================
   HEADER
======================================== */

.production-archives__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		auto;

	column-gap:
		clamp(
			30px,
			7vw,
			120px
		);

	row-gap:
		clamp(
			24px,
			4vw,
			52px
		);

	max-width: 1500px;

	margin:
		0
		auto
		clamp(
			70px,
			9vw,
			140px
		);
}


.production-archives__eyebrow {
	margin:
		0
		0
		12px;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			9px,
			0.72vw,
			12px
		);

	font-weight: 500;

	line-height: 1;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-archives__title {
	margin: 0;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			52px,
			8vw,
			136px
		);

	font-weight: 600;

	line-height: 0.82;

	letter-spacing: -0.07em;
}


.production-archives__header-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	gap: 8px;

	padding-top: 7px;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			8px,
			0.62vw,
			10px
		);

	font-weight: 500;

	line-height: 1.25;

	letter-spacing: 0.08em;

	text-align: right;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-archives__count span {
	color:
		var(
			--archive-foreground
		);
}


.production-archives__intro {
	grid-column: 1 / -1;

	width:
		min(
			100%,
			600px
		);

	margin: 0;

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			18px,
			2vw,
			31px
		);

	font-weight: 500;

	line-height: 1.25;

	letter-spacing: -0.025em;

	color:
		rgba(
			247,
			245,
			241,
			0.82
		);
}


/* ========================================
   FEATURED PRODUCTION
======================================== */

.production-feature {
	display: grid;

	grid-template-columns:
		minmax(
			0,
			1.55fr
		)
		minmax(
			280px,
			0.65fr
		);

	gap:
		clamp(
			28px,
			5vw,
			86px
		);

	align-items: end;

	max-width: 1500px;

	margin:
		0
		auto
		clamp(
			90px,
			12vw,
			180px
		);
}


.production-feature__media {
	position: relative;

	display: block;

	overflow: hidden;

	aspect-ratio: 16 / 10;

	background:
		var(
			--archive-surface
		);

	color: inherit;

	text-decoration: none;
}


.production-feature__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform:
		scale3d(
			1.001,
			1.001,
			1
		);

	transition:
		transform
		900ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);

	will-change: transform;
}


.production-feature__image-wash {
	position: absolute;
	inset: 0;

	background:
		rgba(
			0,
			0,
			0,
			0.07
		);

	pointer-events: none;
}


@media (hover: hover) {

	.production-feature__media:hover
	.production-feature__image {
		transform:
			scale3d(
				1.025,
				1.025,
				1
			);
	}

}


.production-feature__content {
	padding-bottom:
		clamp(
			4px,
			1vw,
			14px
		);
}


.production-feature__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	margin-bottom:
		clamp(
			30px,
			4vw,
			58px
		);

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			8px,
			0.65vw,
			10px
		);

	font-weight: 500;

	line-height: 1;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-feature__heading {
	margin-bottom:
		clamp(
			20px,
			2.6vw,
			36px
		);
}


.production-feature__year {
	margin-bottom: 8px;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			11px,
			0.9vw,
			14px
		);

	color:
		var(
			--archive-muted
		);
}


.production-feature__title {
	margin: 0;

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			34px,
			4vw,
			67px
		);

	font-weight: 700;

	line-height: 0.95;

	letter-spacing: -0.055em;
}


.production-feature__description {
	max-width: 480px;

	margin:
		0
		0
		28px;

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			14px,
			1.15vw,
			18px
		);

	font-weight: 400;

	line-height: 1.55;

	color:
		rgba(
			247,
			245,
			241,
			0.7
		);
}


.production-feature__details {
	display: flex;
	flex-wrap: wrap;

	gap:
		7px
		18px;

	margin-bottom:
		clamp(
			30px,
			4vw,
			52px
		);

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			8px,
			0.6vw,
			10px
		);

	line-height: 1.3;

	letter-spacing: 0.04em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-feature__link {
	display: inline-flex;
	align-items: center;

	gap: 14px;

	color:
		var(
			--archive-foreground
		);

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			11px,
			0.82vw,
			13px
		);

	font-weight: 700;

	letter-spacing: 0.04em;

	text-decoration: none;

	text-transform: uppercase;
}


.production-feature__link svg {
	display: block;

	width: 25px;
	height: auto;

	transition:
		transform
		300ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


@media (hover: hover) {

	.production-feature__link:hover svg {
		transform:
			translate3d(
				5px,
				0,
				0
			);
	}

}


/* ========================================
   STICKY FILTER
======================================== */

.production-archive-filter-wrap {
	position: sticky;

	top:
		clamp(
			12px,
			2vw,
			26px
		);

	z-index: 20;

	display: flex;
	justify-content: center;

	max-width: 1500px;

	margin:
		0
		auto
		clamp(
			54px,
			7vw,
			100px
		);

	pointer-events: none;
}


.production-archive-filter {
	display: inline-flex;
	align-items: center;

	gap:
		clamp(
			7px,
			1vw,
			14px
		);

	padding:
		7px
		8px;

	background:
		rgba(
			17,
			17,
			17,
			0.82
		);

	backdrop-filter:
		blur(10px);

	-webkit-backdrop-filter:
		blur(10px);

	pointer-events: auto;
}


.production-archive-filter__button {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-width:
		clamp(
			48px,
			5vw,
			68px
		);

	height:
		clamp(
			32px,
			3vw,
			40px
		);

	padding:
		0
		10px;

	border: 0;

	background: transparent;

	color:
		var(
			--archive-muted
		);

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			9px,
			0.68vw,
			11px
		);

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.08em;

	cursor: pointer;

	text-transform: uppercase;

	transition:
		color
		250ms
		ease;

	-webkit-tap-highlight-color:
		transparent;
}


.production-archive-filter__button::before {
	content: "";

	position: absolute;

	inset:
		-1px
		-3px;

	z-index: -1;

	border:
		2px
		solid
		rgba(
			255,
			255,
			255,
			0
		);

	border-radius:
		48%
		52%
		45%
		55%
		/
		57%
		42%
		58%
		43%;

	opacity: 0;

	transition:
		opacity
		250ms
		ease;
}


.production-archive-filter__button.is-active {
	color:
		var(
			--archive-foreground
		);
}


.production-archive-filter__button.is-active::before {
	border-color:
		rgba(
			255,
			255,
			255,
			0.65
		);

	opacity: 1;

	animation:
		archive-filter-membrane
		5s
		ease-in-out
		infinite
		alternate;
}


@keyframes archive-filter-membrane {

	0% {
		border-radius:
			48%
			52%
			45%
			55%
			/
			57%
			42%
			58%
			43%;

		transform:
			scale3d(
				1,
				1,
				1
			);
	}


	100% {
		border-radius:
			61%
			39%
			53%
			47%
			/
			42%
			61%
			39%
			58%;

		transform:
			scale3d(
				1.035,
				0.96,
				1
			);
	}

}


.production-archive-filter__button:focus-visible {
	outline:
		2px
		solid
		#ffffff;

	outline-offset: 3px;
}


/* ========================================
   ARCHIVE GRID
======================================== */

.production-archive-grid {
	display: grid;

	grid-template-columns:
		repeat(
			12,
			minmax(
				0,
				1fr
			)
		);

	gap:
		clamp(
			42px,
			6vw,
			94px
		)
		clamp(
			18px,
			2.5vw,
			42px
		);

	max-width: 1500px;

	margin:
		0
		auto;
}


/* ========================================
   ARCHIVE CARD
======================================== */

.production-archive-card {
	grid-column:
		span 4;

	display: flex;
	flex-direction: column;

	align-self: start;

	color:
		var(
			--archive-foreground
		);

	text-decoration: none;

	opacity: 1;

	transform:
		translate3d(
			0,
			0,
			0
		);

	transition:
		opacity
		280ms
		ease,
		transform
		500ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


.production-archive-card--wide {
	grid-column:
		span 7;
}


.production-archive-card--portrait {
	grid-column:
		span 4;

	margin-top:
		clamp(
			30px,
			7vw,
			120px
		);
}


.production-archive-card--tall {
	grid-column:
		span 5;
}


.production-archive-card--compact {
	grid-column:
		span 3;

	margin-top:
		clamp(
			10px,
			4vw,
			70px
		);
}


/* ========================================
   FILTERED OUT
======================================== */

.production-archive-card.is-filtered-out,
.production-archive-memory.is-filtered-out {
	display: none;
}


/* ========================================
   CARD MEDIA
======================================== */

.production-archive-card__media {
	position: relative;

	overflow: hidden;

	width: 100%;

	aspect-ratio: 4 / 3;

	background:
		var(
			--archive-surface
		);
}


.production-archive-card--wide
.production-archive-card__media {
	aspect-ratio: 16 / 9;
}


.production-archive-card--portrait
.production-archive-card__media {
	aspect-ratio: 4 / 5;
}


.production-archive-card--tall
.production-archive-card__media {
	aspect-ratio: 5 / 6;
}


.production-archive-card--compact
.production-archive-card__media {
	aspect-ratio: 1;
}


.production-archive-card__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transform:
		scale3d(
			1.001,
			1.001,
			1
		);

	transition:
		transform
		700ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);

	will-change: transform;
}


.production-archive-card__media-shift {
	position: absolute;
	inset: 0;

	background:
		rgba(
			255,
			255,
			255,
			0
		);

	pointer-events: none;

	transition:
		background
		400ms
		ease;
}


/* ========================================
   CARD META
======================================== */

.production-archive-card__meta {
	padding-top:
		clamp(
			12px,
			1.3vw,
			18px
		);
}


.production-archive-card__identity {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 16px;

	margin-bottom:
		clamp(
			8px,
			0.8vw,
			12px
		);

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			8px,
			0.58vw,
			10px
		);

	line-height: 1;

	letter-spacing: 0.06em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-archive-card__id {
	transform:
		translate3d(
			0,
			0,
			0
		);

	transition:
		transform
		350ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


.production-archive-card__title {
	margin: 0;

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			21px,
			2vw,
			35px
		);

	font-weight: 700;

	line-height: 1;

	letter-spacing: -0.045em;
}


.production-archive-card__details {
	display: flex;
	flex-wrap: wrap;

	gap:
		4px
		14px;

	margin-top:
		10px;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			7px,
			0.52vw,
			9px
		);

	line-height: 1.3;

	letter-spacing: 0.035em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


/* ========================================
   CARD HOVER
======================================== */

@media (hover: hover) {

	.production-archive-card:hover
	.production-archive-card__image {
		transform:
			scale3d(
				1.025,
				1.025,
				1
			);
	}


	.production-archive-card:hover
	.production-archive-card__id {
		transform:
			translate3d(
				-6px,
				0,
				0
			);
	}


	.production-archive-card:hover
	.production-archive-card__media-shift {
		background:
			rgba(
				255,
				255,
				255,
				0.025
			);
	}

}


/* ========================================
   MEMORY FRAGMENTS
======================================== */

.production-archive-memory {
	grid-column:
		span 5;

	display: flex;
	flex-direction: column;
	justify-content: center;

	min-height:
		clamp(
			240px,
			31vw,
			460px
		);

	padding:
		clamp(
			28px,
			5vw,
			74px
		);

	color:
		var(
			--archive-foreground
		);
}


.production-archive-memory--quote {
	grid-column:
		6 / span 6;

	margin-top:
		clamp(
			30px,
			8vw,
			120px
		);
}


.production-archive-memory--note {
	grid-column:
		2 / span 5;
}


.production-archive-memory__number,
.production-archive-memory__source {
	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			7px,
			0.55vw,
			9px
		);

	line-height: 1;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-archive-memory__quote {
	max-width: 650px;

	margin:
		clamp(
			28px,
			4vw,
			60px
		)
		0;

	font-family:
		"HeyTiny",
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			32px,
			5vw,
			78px
		);

	font-weight: 400;

	line-height: 0.98;

	letter-spacing: -0.025em;
}


.production-archive-memory__note-mark {
	height: 0.7em;

	margin-bottom: 20px;

	font-family:
		"HeyTiny",
		serif;

	font-size:
		clamp(
			70px,
			8vw,
			130px
		);

	line-height: 1;

	color:
		rgba(
			255,
			255,
			255,
			0.2
		);
}


.production-archive-memory__note-copy {
	max-width: 540px;

	margin-bottom:
		clamp(
			24px,
			4vw,
			52px
		);

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			20px,
			2.2vw,
			34px
		);

	font-weight: 500;

	line-height: 1.3;

	letter-spacing: -0.03em;
}


/* ========================================
   EMPTY STATE
======================================== */

.production-archives__empty {
	max-width: 1500px;

	margin:
		80px
		auto;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size: 11px;

	text-align: center;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


/* ========================================
   BEGINNING OF ARCHIVE
======================================== */

.production-archives__beginning {
	display: flex;
	flex-direction: column;
	align-items: center;

	max-width: 1100px;

	margin:
		clamp(
			150px,
			22vw,
			330px
		)
		auto
		0;

	text-align: center;

	opacity: 0;

	transform:
		translate3d(
			0,
			30px,
			0
		);

	transition:
		opacity
		1000ms
		ease,
		transform
		1200ms
		cubic-bezier(
			0.18,
			0.8,
			0.2,
			1
		);
}


.production-archives__beginning.is-visible {
	opacity: 1;

	transform:
		translate3d(
			0,
			0,
			0
		);
}


.production-archives__beginning-date {
	margin-bottom: 28px;

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			8px,
			0.62vw,
			10px
		);

	font-weight: 500;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color:
		var(
			--archive-muted
		);
}


.production-archives__beginning-mark {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	margin-bottom:
		clamp(
			30px,
			4vw,
			54px
		);
}


.production-archives__beginning-mark span {
	display: block;

	width: 22px;
	height: 22px;

	border:
		3px
		solid
		rgba(
			255,
			255,
			255,
			0.7
		);

	border-radius:
		57%
		43%
		61%
		39%
		/
		44%
		58%
		42%
		56%;

	animation:
		archive-ending-membrane
		5s
		ease-in-out
		infinite
		alternate;
}


@keyframes archive-ending-membrane {

	0% {
		border-radius:
			57%
			43%
			61%
			39%
			/
			44%
			58%
			42%
			56%;
	}


	100% {
		border-radius:
			39%
			61%
			47%
			53%
			/
			62%
			38%
			57%
			43%;
	}

}


.production-archives__beginning-title {
	margin:
		0
		0
		clamp(
			24px,
			3vw,
			44px
		);

	font-family:
		"JetBrainsMono",
		monospace;

	font-size:
		clamp(
			42px,
			7vw,
			110px
		);

	font-weight: 600;

	line-height: 0.88;

	letter-spacing: -0.07em;
}


.production-archives__beginning-copy {
	max-width: 490px;

	margin: 0;

	font-family:
		"Montserrat",
		sans-serif;

	font-size:
		clamp(
			14px,
			1.2vw,
			18px
		);

	line-height: 1.55;

	color:
		var(
			--archive-muted
		);
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1000px) {

	.production-feature {
		grid-template-columns:
			1fr;

		gap: 32px;
	}


	.production-feature__content {
		display: grid;

		grid-template-columns:
			minmax(
				0,
				1fr
			)
			minmax(
				220px,
				0.65fr
			);

		gap:
			20px
			40px;
	}


	.production-feature__topline {
		grid-column:
			1 / -1;

		margin-bottom:
			10px;
	}


	.production-feature__heading {
		grid-row:
			2 / span 3;
	}


	.production-feature__description {
		margin-bottom:
			14px;
	}


	.production-feature__details {
		margin-bottom:
			16px;
	}


	.production-archive-card {
		grid-column:
			span 6;
	}


	.production-archive-card--wide {
		grid-column:
			span 8;
	}


	.production-archive-card--portrait {
		grid-column:
			span 4;
	}


	.production-archive-card--tall {
		grid-column:
			span 5;
	}


	.production-archive-card--compact {
		grid-column:
			span 4;
	}


	.production-archive-memory--quote {
		grid-column:
			4 / span 8;
	}


	.production-archive-memory--note {
		grid-column:
			1 / span 7;
	}

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 700px) {

	.production-archives {
		padding-inline:
			16px;

		padding-bottom:
			120px;
	}


	.production-archives__entry {
		height:
			90px;
	}


	.production-archives__header {
		display: flex;
		flex-direction: column;

		gap: 22px;

		margin-bottom:
			70px;
	}


	.production-archives__header-meta {
		align-items: flex-start;

		padding: 0;

		text-align: left;
	}


	.production-archives__intro {
		margin-top:
			8px;

		font-size:
			clamp(
				18px,
				5.4vw,
				25px
			);
	}


	.production-feature {
		margin-bottom:
			100px;
	}


	.production-feature__media {
		aspect-ratio:
			4 / 3;
	}


	.production-feature__content {
		display: block;
	}


	.production-feature__topline {
		margin-bottom:
			28px;
	}


	.production-feature__heading {
		margin-bottom:
			20px;
	}


	.production-feature__details {
		margin-bottom:
			30px;
	}


	.production-archive-filter-wrap {
		top:
			10px;

		justify-content:
			flex-start;

		margin-inline:
			-4px;

		margin-bottom:
			54px;
	}


	.production-archive-filter {
		width:
			100%;

		justify-content:
			space-between;

		gap: 2px;

		padding:
			6px
			4px;
	}


	.production-archive-filter__button {
		flex:
			1;

		min-width: 0;
	}


	.production-archive-grid {
		display: flex;
		flex-direction: column;

		gap: 64px;
	}


	.production-archive-card,
	.production-archive-card--wide,
	.production-archive-card--portrait,
	.production-archive-card--tall,
	.production-archive-card--compact {
		width: 100%;

		margin-top: 0;
	}


	.production-archive-card:nth-of-type(even) {
		width:
			86%;

		align-self:
			flex-end;
	}


	.production-archive-card:nth-of-type(3n) {
		width:
			92%;

		align-self:
			flex-start;
	}


	.production-archive-card__title {
		font-size:
			clamp(
				24px,
				8vw,
				34px
			);
	}


	.production-archive-memory,
	.production-archive-memory--quote,
	.production-archive-memory--note {
		width:
			100%;

		min-height:
			320px;

		margin-top:
			10px;

		padding:
			52px
			18px;
	}


	.production-archive-memory--quote {
		align-items:
			flex-start;
	}


	.production-archive-memory__quote {
		font-size:
			clamp(
				38px,
				12vw,
				60px
			);
	}


	.production-archives__beginning {
		margin-top:
			160px;
	}


	.production-archives__beginning-title {
		font-size:
			clamp(
				42px,
				13vw,
				64px
			);
	}

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

	.production-archives__entry-membrane,
	.production-archive-filter__button::before,
	.production-archives__beginning-mark span {
		animation:
			none !important;
	}


	.production-feature__image,
	.production-archive-card__image,
	.production-archive-card__id,
	.production-archives__beginning {
		transition:
			none !important;
	}


	.production-archives__beginning {
		opacity: 1;

		transform: none;
	}

}