/* =========================
   RESET
========================= */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* =========================
   BODY
========================= */

body {
	background: white;
	color: black;
	font-family: "Helvetica Neue", sans-serif;
	overflow-x: hidden;
}

/* =========================
   HERO
========================= */

.hero {
	position: relative;
	height: 80vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
}

.hero video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 110%;
	object-fit: cover;
	z-index: -2;
}

.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: -1;
}

.hero-content {
	position: relative;
	z-index: 2;
}

.hero-title {
	font-family: "Unbounded", sans-serif;
	font-size: clamp(3rem, 8vw, 7rem);
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 1.8s ease forwards;
	color: white;
}


.hero-subtitle {
	font-family: "Unbounded", sans-serif !important;
	font-size: clamp(1rem, 2vw, 1rem);
	font-weight: 200;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp 1.8s ease forwards;
	color: white
}

/* =========================
   CONTENT SECTION
========================= */

.content-section {
	background: white;
	color: black;

	padding: 6rem 8vw;

	position: relative;
	z-index: 2;
}

.content-section h2 {
	font-family: "Cormorant Garamond", serif;
	font-size: 2.5rem;
	font-weight: 400;
	text-align: center;
	margin-bottom: 3rem;
	color: black;
}
/* =========================
   ANIMATION
========================= */

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* =========================
   CINEMATIC PANELS
========================= */

.cinema-panels {

	background: white;

	width: 100%;

	padding: 8rem 4vw;

	height: 78vh;

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

	gap: 1rem;

	position: relative;
	z-index: 2;

	opacity: 0;
	transform: translateY(80px);
	filter: blur(10px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease,
		filter 1.2s ease;
}

.cinema-panels.visible {

	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* =========================
   PANEL
========================= */

.panel {

	flex: 1;

	position: relative;

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

	background: white;

	border: 1px solid rgba(0,0,0,0.15);

	text-decoration: none;

	overflow: hidden;

	transition:
		flex 0.8s cubic-bezier(.22,.61,.36,1),
		opacity 0.6s ease,
		transform 0.6s ease,
		border-color 0.6s ease,
		background 0.6s ease;
}

.panel::before {

	content: "";

	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			to bottom,
			rgba(0,0,0,0.02),
			rgba(0,0,0,0.01)
		);

	opacity: 0;

	transition: opacity 0.6s ease;
}

.panel span {

	position: relative;
	z-index: 2;

	font-family: "Cormorant Garamond", serif;

	font-size: clamp(2rem, 3vw, 4.5rem);

	font-weight: 300;

	letter-spacing: 0.18em;

	color: black;

	writing-mode: vertical-rl;
	text-orientation: mixed;

	transition:
		transform 0.7s ease,
		letter-spacing 0.7s ease,
		opacity 0.5s ease;
}
/* =========================
   PANEL HOVER
========================= */

.cinema-panels:hover .panel {

	opacity: 0.35;
}

.cinema-panels .panel:hover {

	flex: 2.4;

	opacity: 1;

	transform: scale(1.01);

	border-color: rgba(0,0,0,0.75);

	background: rgba(0,0,0,0.03);
}

.cinema-panels .panel:hover::before {

	opacity: 1;
}

.cinema-panels .panel:hover span {

	transform: scale(1.08);

	letter-spacing: 0.25em;
}

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

@media (max-width: 900px) {

	.cinema-panels {

		flex-direction: column;

		height: auto;

		gap: 1rem;
	}

	.panel {

		height: 120px;
	}

	.panel span {

		writing-mode: horizontal-tb;

		font-size: 2rem;
	}

	.cinema-panels .panel:hover {

		flex: 1;
	}
}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

	.hero-title {
		font-size: 5rem;
	}

	.slideshow {
		height: 50vh;
	}

	.nav-dimension .grid {
		grid-template-columns: 1fr;
	}
}

/* =========================
   FEATURED WORKS
========================= */

.featured-works {
	background: black;
	width: 100%;
	max-width: none;
	padding: 10rem 6vw;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10rem;
	position: relative;
	z-index: 2;
}
/* ITEM */

.featured-item{
	display:grid;
	grid-template-columns:1.2fr 1fr;
	align-items:center;
	gap:5rem;
	background: transparent;
}

.featured-item.reverse{
	grid-template-columns:1fr 1.2fr;
}

.featured-item.reverse .featured-image{
	order:2;
}

.featured-item.reverse .featured-text{
	order:1;
}

/* IMAGE */

.featured-image{
	position:relative;
	overflow:hidden;
}

.featured-image img{
	width:100%;
	height:75vh;
	object-fit:cover;
	display:block;

	filter:grayscale(8%);

	transition:
		transform 1s ease,
		filter 1s ease;
}

.featured-item:hover img{
	transform:scale(1.03);
	filter:grayscale(0%);
}

/* TEXT */

.featured-text{
	color:white;
}

.featured-label{
	font-family:"Unbounded", sans-serif;
	font-size:0.7rem;
	letter-spacing:0.18em;
	text-transform:uppercase;
	color:#777;
	margin-bottom:1.5rem;
}

.featured-text h2{
	font-family:"Cormorant Garamond", serif;
	font-size:clamp(3rem,6vw,5.5rem);
	font-weight:300;
	line-height:0.95;
	margin-bottom:2rem;
	color: white;
}

.featured-description{
	font-size:1rem;
	line-height:1.8;
	max-width:520px;
color: rgba(255,255,255,0.75);
	margin-bottom:2rem;
}

/* LINK */

.featured-link{
	position:relative;
	text-decoration:none;
	color:white;
	font-family:"Unbounded", sans-serif;
	font-size:0.75rem;
	letter-spacing:0.16em;
	text-transform:uppercase;
}

.featured-link::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-6px;
	width:100%;
	height:1px;
	background:white;

	transform:scaleX(0.3);
	transform-origin:left;

	transition:transform 0.5s ease;
}

.featured-link:hover::after{
	transform:scaleX(1);
}

/* REVEAL */

.reveal{
	opacity:0;
	transform:translateY(60px);
	filter:blur(8px);

	transition:
		opacity 1.2s ease,
		transform 1.2s ease,
		filter 1.2s ease;
}

.reveal.visible{
	opacity:1;
	transform:translateY(0);
	filter:blur(0);
}

/* MOBILE */

@media (max-width:900px){

	.featured-item,
	.featured-item.reverse{
		grid-template-columns:1fr;
		gap:2rem;
	}

	.featured-item.reverse .featured-image,
	.featured-item.reverse .featured-text{
		order:initial;
	}

	.featured-image img{
		height:50vh;
	}

	.featured-text h2{
		font-size:3rem;
	}
}