/* =========================
   CINEMATIC SIDE MENU
========================= */

/* =========================
   HAMBURGER BUTTON
========================= */

.menu-toggle {

	position: fixed;

	top: 2rem;
	right: 2rem;

	width: 70px;
	height: 70px;

	border-radius: 50%;

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

	backdrop-filter: blur(12px);

	border: 1px solid rgba(255,255,255,0.12);

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

	gap: 7px;

	cursor: pointer;

	z-index: 9999;

	transition:
		transform 0.4s ease,
		background 0.4s ease;
}

/* HOVER */
.menu-toggle:hover {

	transform: scale(1.08);

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

/* LINES */
.menu-toggle span {

	width: 28px;
	height: 1px;

	background: white;

	transition: 0.4s ease;
}

/* ACTIVE ANIMATION */
.menu-toggle.active span:nth-child(1) {

	transform:
		translateY(8px)
		rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {

	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {

	transform:
		translateY(-8px)
		rotate(-45deg);
}

/* =========================
   SIDE MENU PANEL
========================= */

.side-menu {

	position: fixed;

	top: 0;
	right: 0;

	width: min(500px, 45vw);
	height: 100vh;

	padding: 8rem 4rem;

	background: 
 linear-gradient(
			to left,
			rgba(10,10,10,0.97),
			rgba(10,10,10,0.82) 
		);

	backdrop-filter: blur(18px);

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	gap: 1.5rem;

	opacity: 0;

	pointer-events: none;

	transform: translateX(100%);

	transition:
		transform 0.7s cubic-bezier(.77,0,.18,1),
		opacity 0.5s ease;

	z-index: 9990;
}

/* OPEN STATE */

.side-menu.show {

	opacity: 1;

	pointer-events: auto;

	transform: translateX(0);
}

/* =========================
   MENU LINKS
========================= */

.side-menu a {

	position: relative;

	font-family: "Cormorant Garamond", serif;

	font-size: clamp(1.7rem, 2.5vw, 3rem);

	font-weight: 300;

	color: white;

	text-decoration: none;

	text-transform: lowercase;

	letter-spacing: 0.05em;

	opacity: 0;

	transform: translateX(40px);

	transition:
		transform 0.5s ease,
		opacity 0.5s ease,
		color 0.3s ease;
}

/* REVEAL LINKS */

.side-menu.show a {

	opacity: 1;

	transform: translateX(0);
}

/* STAGGER REVEAL */

.side-menu.show a:nth-child(1) {
	transition-delay: 0.08s;
}

.side-menu.show a:nth-child(2) {
	transition-delay: 0.14s;
}

.side-menu.show a:nth-child(3) {
	transition-delay: 0.20s;
}

.side-menu.show a:nth-child(4) {
	transition-delay: 0.26s;
}

.side-menu.show a:nth-child(5) {
	transition-delay: 0.32s;
}

.side-menu.show a:nth-child(6) {
	transition-delay: 0.38s;
}

/* LINK HOVER */

.side-menu a:hover {

	color: #d0d0d0;

	transform: translateX(10px);
}

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

@media (max-width: 768px) {

	.side-menu {

		width: 100vw;

		padding: 7rem 2rem;

		align-items: center;

		text-align: center;
	}

	.side-menu a {

		font-size: 2.2rem;
	}
}