/* =========================================================
   MENU (SHARED: DESKTOP + MOBILE)
   ========================================================= */

/* =========================================
   CONTAINER
========================================= */

.cpp-menu {
	--menu-w: 177px;
	width: var(--menu-w);
	position: relative;
}

/* =========================================
   MENU ITEM
========================================= */

.cpp-menu .menu-item {
	position: relative;
	width: var(--menu-w);
	height: var(--menu-h);
	margin-top: calc(-1 * var(--menu-overlap));
	z-index: 1000;

	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14));
	transition: transform 0.18s ease;
}

.cpp-menu .menu-item:first-child {
	margin-top: 0;
}

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

.cpp-menu .menu-btn {
	display: block;
	position: relative;
	width: calc(100% - 8px);
	height: 100%;
	overflow: hidden;

	border-bottom-right-radius: var(--menu-radius);

	color: inherit;
	text-decoration: none !important;
	cursor: pointer;

	transition: border-color 0.15s ease;
}

.cpp-menu .menu-btn:focus {
	outline: none;
}

/* =========================================
   BUTTON LAYERS
========================================= */

.cpp-menu .menu-btn::before,
.cpp-menu .menu-btn::after {
	content: "";
	position: absolute;
	inset: 0;

	border-bottom: 1px solid #c6c6c6;
	border-bottom-right-radius: var(--menu-radius);

	z-index: 0;
	pointer-events: none;
}

.cpp-menu .menu-item:last-child .menu-btn::before,
.cpp-menu .menu-item:last-child .menu-btn::after {
	border-bottom: none;
}

.cpp-menu .menu-item:last-child .menu-btn::before {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.cpp-menu .menu-btn::before {
	background: #fff;
}

.cpp-menu .menu-btn::after {
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0) 40%),
		linear-gradient(
			to bottom,
			#ffffff 0%,
			#ffffff 60%,
			#c96a63 85%,
			#8f2e2e 100%
		);

	opacity: 0;
	transition: opacity var(--fade-ms) ease-in-out;
}

/* =========================================
   STATES
========================================= */

.cpp-menu .menu-btn:hover::after {
	opacity: 0.7;
}

.cpp-menu .menu-item.is-active .menu-btn::after {
	opacity: 1;
	filter: brightness(0.95);
}

.cpp-menu .menu-item.is-active .menu-btn {
	cursor: default;
	pointer-events: none;
}

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

.cpp-menu .menu-label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	z-index: 1;

	height: var(--menu-visible);
	padding: 0 12px;

	display: flex;
	align-items: center;

	font-family: var(--font-ui);
	font-size: 1.05rem;
	font-weight: bold;
	color: #111;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	pointer-events: none;
	user-select: none;
}

.cpp-menu .menu-btn:hover .menu-label,
.cpp-menu .menu-item.is-active .menu-label {
	color: #000;
}

/* =========================================
   LEFT INDICATOR
========================================= */

.cpp-menu .menu-item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;

	background: var(--color-primary-strong);

	opacity: 0;
	transition: opacity 0.18s ease;

	z-index: 2000;
	pointer-events: none;
}

.cpp-menu .menu-item:hover::after {
	opacity: 1;
}

.cpp-menu .menu-item.is-active::after {
	opacity: 1;
	width: 3px;
}

/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 761px) {

	/* =========================================
	   POSITIONING (desktop layout only)
	========================================= */

	#pageButtons {
		position: relative !important;
		left: 6px !important;
		top: calc(var(--side-card-h) - var(--menu-overlap)) !important;
		width: var(--menu-w) !important;
		z-index: 1000 !important;
	}

	/* =========================================
	   ANIMATION: DROP-IN
	========================================= */

	body.cpp-desktop-menu-open #pageButtons {
		clip-path: inset(var(--menu-overlap) 0 -12px 0);
	}

	body.cpp-desktop-menu-open #pageButtons .menu-item {
		opacity: 0;
		transform: translateY(calc(-1 * (var(--menu-h) + var(--menu-visible))));
		will-change: transform, opacity;

		animation: cppDesktopItemDrop var(--dur)
			cubic-bezier(.25, .46, .45, .94) forwards;
	}

	/* stagger */
	body.cpp-desktop-menu-open #pageButtons .menu-item:nth-child(1) { animation-delay: 0ms; }
	body.cpp-desktop-menu-open #pageButtons .menu-item:nth-child(2) { animation-delay: 60ms; }
	body.cpp-desktop-menu-open #pageButtons .menu-item:nth-child(3) { animation-delay: 120ms; }
	body.cpp-desktop-menu-open #pageButtons .menu-item:nth-child(4) { animation-delay: 180ms; }
	body.cpp-desktop-menu-open #pageButtons .menu-item:nth-child(5) { animation-delay: 240ms; }
	body.cpp-desktop-menu-open #pageButtons .menu-item:nth-child(6) { animation-delay: 300ms; }

	body.cpp-desktop-drop #pageButtons {
		clip-path: inset(66px 0 -12px 0);
	}

	body.cpp-desktop-drop #pageButtons .menu-item {
		opacity: 0;
		transform: translateY(calc(-1 * (var(--menu-h) + var(--menu-visible))));
		will-change: transform, opacity;
	}

	/* =========================================
	   KEYFRAMES
	========================================= */

	@keyframes cppDesktopItemDrop {
		0% {
			opacity: 0;
			transform: translateY(calc(-1 * (var(--menu-h) + var(--menu-visible))));
		}
		65% {
			opacity: 1;
			transform: translateY(var(--over, 8px));
		}
		82% {
			transform: translateY(calc(-1 * var(--bounce, 10px) * 0.55));
		}
		94% {
			transform: translateY(calc(var(--over, 8px) * 0.28));
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
}