/* ===== Mobile drawer slide + entrance animation ===== */
/* Tailwind v4 moves translate-x-* via the CSS `translate` property, but the markup
   uses `transition-transform` (which only animates `transform`) — so the panel would
   jump instantly. Explicitly transition `translate` (and `transform`) so it slides. */
#mobile-menu {
	transition: translate .38s cubic-bezier(.4, 0, .2, 1), transform .38s cubic-bezier(.4, 0, .2, 1) !important;
	will-change: translate;
}
#mobile-menu-overlay {
	transition: opacity .38s ease !important;
}

/* Stagger the drawer's children (nav links + auth block) in when it opens. */
#mobile-menu .flex.flex-col > * {
	opacity: 0;
	transform: translateX(22px);
	transition: opacity .45s ease, transform .45s cubic-bezier(.34, 1.15, .4, 1);
}
#mobile-menu.translate-x-0 .flex.flex-col > * {
	opacity: 1;
	transform: translateX(0);
}
#mobile-menu.translate-x-0 .flex.flex-col > *:nth-child(1) { transition-delay: .10s; }
#mobile-menu.translate-x-0 .flex.flex-col > *:nth-child(2) { transition-delay: .16s; }
#mobile-menu.translate-x-0 .flex.flex-col > *:nth-child(3) { transition-delay: .22s; }
#mobile-menu.translate-x-0 .flex.flex-col > *:nth-child(4) { transition-delay: .28s; }
#mobile-menu.translate-x-0 .flex.flex-col > *:nth-child(5) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
	#mobile-menu .flex.flex-col > * { opacity: 1; transform: none; transition: none; }
}