/* ==========================================================================
   Kami — Navigation overlay
   Full-screen dark overlay, large bilingual links, staggered reveal.
   ========================================================================== */

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--kami-dark);
	color: var(--kami-bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--container-pad);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--dur-mid) var(--ease-out),
		visibility 0s linear var(--dur-mid);
}

body.nav-open .nav-overlay {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--dur-mid) var(--ease-out);
}

.nav-overlay__inner {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

.nav-overlay__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.nav-overlay__item {
	overflow: hidden;
}

.nav-overlay__link {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-md);
	color: var(--kami-bg);
	padding-block: var(--space-2xs);
	/* start state for staggered reveal */
	opacity: 0;
	transform: translateY(110%);
	transition: opacity var(--dur-slow) var(--ease-out),
		transform var(--dur-slow) var(--ease-out),
		color var(--dur-fast) var(--ease-out);
}

body.nav-open .nav-overlay__link {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger each link */
body.nav-open .nav-overlay__item:nth-child(1) .nav-overlay__link { transition-delay: 0.08s; }
body.nav-open .nav-overlay__item:nth-child(2) .nav-overlay__link { transition-delay: 0.16s; }
body.nav-open .nav-overlay__item:nth-child(3) .nav-overlay__link { transition-delay: 0.24s; }
body.nav-open .nav-overlay__item:nth-child(4) .nav-overlay__link { transition-delay: 0.32s; }
body.nav-open .nav-overlay__item:nth-child(5) .nav-overlay__link { transition-delay: 0.40s; }
body.nav-open .nav-overlay__item:nth-child(6) .nav-overlay__link { transition-delay: 0.48s; }

.nav-overlay__en {
	font-size: var(--fs-xxl);
	font-weight: var(--fw-light);
	text-transform: lowercase;
	letter-spacing: var(--ls-tight);
	line-height: 1.1;
}

.nav-overlay__jp {
	font-family: var(--font-serif-jp);
	font-size: var(--fs-md);
	color: var(--kami-secondary);
	transition: color var(--dur-fast) var(--ease-out);
}

.nav-overlay__link:hover {
	color: var(--kami-highlight);
}

.nav-overlay__link:hover .nav-overlay__jp {
	color: var(--kami-highlight);
}

.nav-overlay__current .nav-overlay__en {
	color: var(--kami-highlight);
}

/* Meta row at the bottom of the overlay */
.nav-overlay__meta {
	margin-top: var(--space-xl);
	display: flex;
	gap: var(--space-lg);
	flex-wrap: wrap;
	font-size: var(--fs-small);
	letter-spacing: var(--ls-mid);
	color: var(--kami-secondary);
	text-transform: lowercase;
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-out) 0.5s;
}

body.nav-open .nav-overlay__meta {
	opacity: 1;
}

.nav-overlay__meta a:hover {
	color: var(--kami-bg);
}

@media (max-width: 768px) {
	.nav-overlay__link {
		flex-direction: column;
		gap: var(--space-3xs);
	}
	.nav-overlay__en {
		font-size: var(--fs-xl);
	}
	.nav-overlay__list {
		gap: var(--space-md);
	}
}