/* ========================================
   NAVIGATION
   ======================================== */
.nav {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	z-index: var(--z-fixed);
	opacity: 0;
	transition: opacity 0.8s ease;
}

.nav.revealed {
	opacity: 1;
}

.nav-content {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 13px 27px;
	min-block-size: 67px;
	box-sizing: border-box;

	@media (width <= 768px) {
		padding: 10px 16px;
	}
}

/* Hairline divider under the header */
.nav-divider {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 27px;
	block-size: 1px;
	background-color: rgb(0 0 0 / 0.07);
	pointer-events: none;

	@media (width <= 768px) {
		inset-inline: 16px;
	}
}

/* Frosted glass chip — shared style for every nav element */
.nav-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background-color: rgb(255 255 255 / 0.55);
	background-image: linear-gradient(
		180deg,
		rgb(255 255 255 / 0.6) 0%,
		rgb(255 255 255 / 0.3) 100%
	);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgb(255 255 255 / 0.65);
	border-radius: 8px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.6),
		0 1px 2px rgb(56 59 62 / 0.04);
	font-size: 17px;
	font-weight: var(--font-normal);
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		color var(--transition-fast),
		box-shadow var(--transition-fast);

	@media (hover: hover) {
		&:hover {
			background-color: rgb(255 255 255 / 0.8);
			border-color: rgb(255 255 255 / 0.9);
			box-shadow:
				inset 0 1px 0 rgb(255 255 255 / 0.8),
				0 2px 8px rgb(56 59 62 / 0.08);
		}
	}
}

.nav-logo-wrapper {
	display: inline-flex;
	align-items: center;
	padding: 4px 0;
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.nav-logo-wrapper:hover {
	opacity: 0.8;
}

.nav-logo {
	block-size: 32px;
	inline-size: auto;
	display: block;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: clamp(40px, 8vw, 120px);
}

.nav-bar {
	display: flex;
	align-items: center;

	@media (width <= 768px) {
		display: none;
	}
}

/* Single frosted glass container holding all nav links */
.nav-bar__links {
	display: flex;
	align-items: stretch;
	gap: 0;
	padding: 4px;
	background-color: rgb(255 255 255 / 0.55);
	background-image: linear-gradient(
		180deg,
		rgb(255 255 255 / 0.6) 0%,
		rgb(255 255 255 / 0.3) 100%
	);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border: 1px solid rgb(255 255 255 / 0.65);
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.6),
		0 1px 2px rgb(56 59 62 / 0.04);

	@media (width <= 1024px) {
		display: none;
	}
}

/* Individual link — no background, just padding and text */
.nav-bar__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	font-size: 17px;
	font-weight: var(--font-normal);
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	border-radius: 8px;
	transition: color var(--transition-fast), background-color var(--transition-fast);

	@media (hover: hover) {
		&:hover {
			color: var(--color-accent);
		}
	}
}

.nav-bar__link--active {
	background-color: rgb(56 59 62 / 0.08);
	color: var(--color-accent);
}

/* Auth button: text chip + icon chip, joined by a small center bridge */
.nav-auth-btn {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	text-decoration: none;
	color: #fff;
	transition: filter var(--transition-base);
}

.nav-auth-btn .nav-chip {
	background-color: transparent;
	background-image: var(--gradient-primary);
	color: #fff;
	border: 0;
	box-shadow: 0 2px 8px rgb(56 59 62 / 0.12);
	block-size: 48px;
	padding-block: 0;
	line-height: 1;

	@media (width <= 768px) {
		block-size: 44px;
	}
}

.nav-auth-btn .nav-auth-btn__text::after {
	background-color: transparent;
	background-image: var(--gradient-primary);
}

@media (hover: hover) {
	.nav-auth-btn:hover {
		filter: brightness(1.12);
	}
}

.nav-chip,
.nav-auth-btn__text::after {
	transition:
		background-color var(--transition-base),
		background-image var(--transition-base);
}

.nav-auth-btn__text {
	position: relative;
}

.nav-auth-btn__text::after {
	content: "";
	position: absolute;
	inset-inline-start: 100%;
	inset-block: 28%;
	inline-size: 2px;
	background-color: rgb(56 59 62 / 0.08);
}

.nav-auth-btn__icon {
	inline-size: 48px;
	block-size: 48px;
	padding: 0;
	flex-shrink: 0;

	@media (width <= 768px) {
		inline-size: 44px;
		block-size: 44px;
	}
}

.nav-auth-btn__icon svg {
	display: block;
	transition: translate var(--transition-fast);
}

.nav-auth-btn:hover .nav-auth-btn__icon svg {
	translate: 2px 0;
}

/* Hide desktop Log in on mobile */
.nav-auth-btn--desktop {
	@media (width <= 1024px) {
		display: none;
	}
}

/* ========================================
   MOBILE MENU TOGGLE (hamburger / close)
   ======================================== */
.nav-menu-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--color-text);

	@media (width <= 1024px) {
		display: inline-flex;
	}
}

.nav-menu-toggle .nav-chip {
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
}

/* ========================================
   MOBILE MENU DIALOG
   ======================================== */
.mobile-menu {
	border: 0;
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: 100%;
	max-block-size: 100%;
	background-color: var(--color-bg);
	color: var(--color-text);
	flex-direction: column;
	opacity: 0;
	/* Close: hold dialog visible until child cascade finishes (0.98s), then fade */
	transition:
		opacity 0.3s ease 0.95s,
		display 1.25s allow-discrete,
		overlay 1.25s allow-discrete;

	&::backdrop {
		background-color: rgb(255 255 255 / 0.85);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		opacity: 0;
		transition:
			opacity 0.3s ease 0.95s,
			display 1.25s allow-discrete,
			overlay 1.25s allow-discrete;
	}

	&[open] {
		display: flex;
		opacity: 1;
		/* Open: dialog fades in quickly so children can cascade inside */
		transition:
			opacity 0.3s ease 0s,
			display 1.25s allow-discrete,
			overlay 1.25s allow-discrete;

		&::backdrop {
			opacity: 1;
			transition:
				opacity 0.3s ease 0s,
				display 1.25s allow-discrete,
				overlay 1.25s allow-discrete;
		}
	}

	@starting-style {
		&[open] {
			opacity: 0;

			&::backdrop {
				opacity: 0;
			}
		}
	}
}

/* Items — cascade in top→bottom on open, bottom→top on close */
.mobile-menu__link,
.mobile-menu__cta {
	opacity: 0;
	translate: 0 -32px;
	transition:
		opacity 0.5s ease,
		translate 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.mobile-menu[open] .mobile-menu__link,
.mobile-menu[open] .mobile-menu__cta {
	opacity: 1;
	translate: 0 0;
}

/* Open cascade: top link first, CTA last */
.mobile-menu[open] .mobile-menu__link:nth-child(1) { transition-delay: 0.12s; }
.mobile-menu[open] .mobile-menu__link:nth-child(2) { transition-delay: 0.22s; }
.mobile-menu[open] .mobile-menu__link:nth-child(3) { transition-delay: 0.32s; }
.mobile-menu[open] .mobile-menu__link:nth-child(4) { transition-delay: 0.42s; }
.mobile-menu[open] .mobile-menu__link:nth-child(5) { transition-delay: 0.52s; }
.mobile-menu[open] .mobile-menu__cta { transition-delay: 0.64s; }

/* Close cascade: CTA first, then links bottom→top */
.mobile-menu .mobile-menu__cta { transition-delay: 0s; }
.mobile-menu .mobile-menu__link:nth-child(5) { transition-delay: 0.06s; }
.mobile-menu .mobile-menu__link:nth-child(4) { transition-delay: 0.14s; }
.mobile-menu .mobile-menu__link:nth-child(3) { transition-delay: 0.22s; }
.mobile-menu .mobile-menu__link:nth-child(2) { transition-delay: 0.3s; }
.mobile-menu .mobile-menu__link:nth-child(1) { transition-delay: 0.38s; }

/* First-time entry: define starting state so transitions fire on the first open too */
@starting-style {
	.mobile-menu[open] .mobile-menu__link,
	.mobile-menu[open] .mobile-menu__cta {
		opacity: 0;
		translate: 0 -32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu,
	.mobile-menu::backdrop,
	.mobile-menu__link,
	.mobile-menu__cta {
		transition: none;
	}
}

.mobile-menu__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 16px;
	min-block-size: 67px;
	box-sizing: border-box;
}

.mobile-menu__nav {
	display: flex;
	flex-direction: column;
	padding: clamp(32px, 6vw, 56px) 16px 16px;
	flex: 1;
}

.mobile-menu__link {
	display: block;
	padding-block: 18px;
	font-size: clamp(32px, 7vw, 48px);
	font-weight: var(--font-medium);
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-text);
	text-decoration: none;
	border-block-end: 1px solid rgb(0 0 0 / 0.07);

	@media (hover: hover) {
		&:hover {
			color: var(--color-accent);
		}
	}
}

.mobile-menu__cta {
	margin: 16px;
	align-self: flex-start;
}