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

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

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

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

/* =========================
   MAIN LAYOUT
========================= */

.photo-layout {
	display: flex;
	width: 100%;
	height: 100vh;
}

/* =================================================
   LEFT ARCHIVE PANEL
================================================= */

.tree {
	width: 34%;
	min-width: 340px;

	padding: 5rem 3rem;

	position: relative;

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

	background:
		linear-gradient(
			to right,
			#050505,
			#0d0d0d
		);

	border-right:
		1px solid rgba(255,255,255,0.08);
}

/* VERTICAL TREE LINE */
.tree::before {
	content: "";

	position: absolute;

	left: 58px;
	top: 10%;
	bottom: 10%;

	width: 1px;

	background:
		linear-gradient(
			to bottom,
			transparent,
			rgba(255,255,255,0.2),
			transparent
		);
}

/* =================================================
   EXHIBITION BUTTONS
================================================= */

.node {
	all: unset;

	position: relative;

	cursor: pointer;

	padding:
		1.8rem 0
		1.8rem 4rem;

	margin: 0.3rem 0;

	font-family: "Cormorant Garamond", serif;

	font-size: clamp(1.5rem, 2vw, 2.3rem);

	font-weight: 300;

	letter-spacing: 0.04em;

	text-transform: lowercase;

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

	transition:
		color 0.4s ease,
		transform 0.4s ease,
		opacity 0.4s ease;

	opacity: 0;

	transform: translateX(-20px);

	animation: revealNode 0.8s ease forwards;
}

/* STAGGER */
.node:nth-child(1) { animation-delay: 0.08s; }
.node:nth-child(2) { animation-delay: 0.16s; }
.node:nth-child(3) { animation-delay: 0.24s; }
.node:nth-child(4) { animation-delay: 0.32s; }
.node:nth-child(5) { animation-delay: 0.40s; }
.node:nth-child(6) { animation-delay: 0.48s; }
.node:nth-child(7) { animation-delay: 0.56s; }

/* FILM REEL DOT */
.node::before {
	content: "";

	position: absolute;

	left: 48px;
	top: 50%;

	transform: translateY(-50%);

	width: 12px;
	height: 12px;

	border-radius: 50%;

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

	box-shadow:
		0 0 0 4px rgba(255,255,255,0.03);

	transition: 0.4s ease;
}

/* HOVER */
.node:hover {
	color: rgba(255,255,255,0.85);
	transform: translateX(10px);
}

/* ACTIVE */
.node.active {
	color: white;

	transform: translateX(18px);

	text-shadow:
		0 0 30px rgba(255,255,255,0.15);
}

.node.active::before {
	background: white;

	box-shadow:
		0 0 20px rgba(255,255,255,0.45),
		0 0 0 6px rgba(255,255,255,0.06);
}

/* =================================================
   RIGHT VIEWER
================================================= */

.viewer {
	flex: 1;

	position: relative;

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

	overflow: hidden;

	background: black;
}

/* =================================================
   GALLERY
================================================= */

.gallery {
	position: absolute;
	inset: 0;

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

	opacity: 0;
	pointer-events: none;

	transform: scale(1.03);

	transition:
		opacity 0.6s ease,
		transform 0.8s ease;
}

.gallery.active {
	opacity: 1;
	pointer-events: auto;

	transform: scale(1);
}

/* =================================================
   DECK
================================================= */

.deck {
	position: relative;

	width: 90%;
	max-width: 1000px;

	height: 60vh;

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

	overflow: hidden;
}

/* TRACK */
.deck-track {
	display: flex;
	align-items: center;

	gap: 1rem;

	transition: transform 0.7s cubic-bezier(.22,.61,.36,1);
}

/* CARDS */
.deck-card {
	flex: 0 0 60%;

	height: 46vh;

	transform: scale(0.82);

	opacity: 0.25;

	filter: blur(1px);

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

/* ACTIVE CARD */
.deck-card.active {
	transform: scale(1);

	opacity: 1;

	filter: blur(0);

	z-index: 5;
}

/* SIDE CARDS */
.deck-card.prev,
.deck-card.next {
	opacity: 0.5;
	transform: scale(0.9);
}

/* IMAGES */
.deck-card img {
	width: 100%;
	height: 100%;

	object-fit: cover;

	border-radius: 18px;

	box-shadow:
		0 40px 100px rgba(0,0,0,0.45);
}

/* =================================================
   ANIMATION
================================================= */

@keyframes revealNode {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

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

@media (max-width: 900px) {

	body {
		overflow: auto;
	}

	.photo-layout {
		flex-direction: column;
		height: auto;
	}

	.tree {
		width: 100%;
		min-width: unset;

		padding: 2rem;

		border-right: none;
		border-bottom:
			1px solid rgba(255,255,255,0.08);
	}

	.tree::before {
		display: none;
	}

	.viewer {
		height: 75vh;
	}

	.node {
		font-size: 1.4rem;
		padding-left: 3rem;
	}
}