/**
 * MCN Animations — Menus
 *
 * Rebuilt from:
 *   Kevin Krueger,   "Dropdown Menus"           (codepen.io/kkrueger/pen/jOrYaM, MIT)
 *   Jamie Coulter,   "Swanky Pure CSS Drop Down"(codepen.io/jcoulterdesign/pen/qdWxEm, MIT)
 *   Antonija Šimić,  "Pure CSS menu"            (codepen.io/tonkec/pen/aRMaWR, MIT)
 *   Piotr Galor,     "CSS menu feat. emoji"     (codepen.io/pgalor/pen/mKGdwr, MIT)
 *   Charlie Marcotte,"Pure CSS Menu Animation"  (codepen.io/FUGU22/pen/bYbNaY, MIT)
 *
 * WHY THESE NEEDED THE MOST WORK
 * "Pure CSS" menus open on :hover or on a hidden checkbox. Both fail for
 * keyboard and screen reader users: hover-only submenus are unreachable by
 * Tab, and a checkbox-driven burger announces as a checkbox rather than a
 * button that expands a menu.
 *
 * Here the open state is [aria-expanded] on a real <button>, which our JS
 * toggles. CSS keys off that attribute, so the visual state and the
 * accessibility tree cannot disagree. Hover is layered on top as a
 * convenience for pointer users, never as the only way in.
 *
 * WCAG 1.4.13 (AA) is the criterion these live or die on. Submenus here are
 * DISMISSIBLE (Esc closes, handled in JS), HOVERABLE (the submenu is inside
 * the same list item, so the pointer can travel into it without crossing a
 * gap), and PERSISTENT (they stay until Esc, blur, or an outside click).
 * The `padding-top` bridge on the submenu is what makes "hoverable" true —
 * remove it and a 6px gap will drop the menu mid-travel.
 *
 * @package MCN_Animations
 */

/* --------------------------------------------------------------------------
 * Base nav
 * ----------------------------------------------------------------------- */

.anim-nav {
	display: flex;
	align-items: center;
	gap: var(--nav-gap, 1.5rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.anim-nav__item {
	position: relative;
}

.anim-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	/* 2.5.8 (AA) minimum target. */
	min-height: 24px;
	text-decoration: none;
	color: inherit;
}

/* Underline wipe — see also .anim-link in the core file. */
.anim-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.25em;
	width: 100%;
	height: 2px;
	background: var(--anim-accent);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--anim-duration) var(--anim-ease);
}

.anim-nav__link:hover::after,
.anim-nav__link:focus-visible::after,
.anim-nav__link[aria-current]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* --------------------------------------------------------------------------
 * Dropdown submenu
 * ----------------------------------------------------------------------- */

.anim-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: max(100%, 200px);
	margin: 0;
	/* The hover bridge. Visual gap comes from padding, not margin, so the
	   pointer never leaves the element on the way down (1.4.13 hoverable). */
	padding: 0.75rem 0 0;
	list-style: none;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition:
		opacity var(--anim-duration) var(--anim-ease),
		transform var(--anim-duration) var(--anim-ease),
		visibility 0s linear var(--anim-duration);
}

.anim-nav__sub-inner {
	background: var(--anim-menu-bg, #fff);
	color: var(--anim-menu-fg, #16202a);
	border-radius: 10px;
	padding: 0.5rem;
	box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.55);
}

.anim-nav__item:hover > .anim-nav__sub,
.anim-nav__item:focus-within > .anim-nav__sub,
.anim-nav__toggle[aria-expanded="true"] + .anim-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* Staggered entrance for submenu rows. */
.anim-nav__sub li {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity var(--anim-duration) var(--anim-ease),
		transform var(--anim-duration) var(--anim-ease);
}

.anim-nav__item:hover > .anim-nav__sub li,
.anim-nav__item:focus-within > .anim-nav__sub li,
.anim-nav__toggle[aria-expanded="true"] + .anim-nav__sub li {
	opacity: 1;
	transform: none;
}

.anim-nav__sub li:nth-child(1) { transition-delay: 30ms; }
.anim-nav__sub li:nth-child(2) { transition-delay: 70ms; }
.anim-nav__sub li:nth-child(3) { transition-delay: 110ms; }
.anim-nav__sub li:nth-child(4) { transition-delay: 150ms; }
.anim-nav__sub li:nth-child(5) { transition-delay: 190ms; }
.anim-nav__sub li:nth-child(n+6) { transition-delay: 220ms; }

/* Skewed variant. */
.anim-nav__sub--skew .anim-nav__sub-inner {
	transform: skewY(-3deg);
}

.anim-nav__sub--skew .anim-nav__sub-inner > * {
	transform: skewY(3deg);
}

.anim-nav__toggle-icon {
	transition: transform var(--anim-duration) var(--anim-ease);
}

.anim-nav__toggle[aria-expanded="true"] .anim-nav__toggle-icon {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
 * Burger -> X
 *
 * A real <button aria-expanded aria-controls>, not a checkbox+label.
 * ----------------------------------------------------------------------- */

.anim-burger {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.anim-burger__bar,
.anim-burger__bar::before,
.anim-burger__bar::after {
	position: absolute;
	width: 24px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition:
		transform var(--anim-duration) var(--anim-ease),
		opacity var(--anim-duration-fast) var(--anim-ease);
}

.anim-burger__bar::before { content: ""; transform: translateY(-7px); }
.anim-burger__bar::after  { content: ""; transform: translateY(7px); }

.anim-burger[aria-expanded="true"] .anim-burger__bar {
	/* Middle bar vanishes; the outer two cross. */
	background: transparent;
}

.anim-burger[aria-expanded="true"] .anim-burger__bar::before {
	transform: translateY(0) rotate(45deg);
}

.anim-burger[aria-expanded="true"] .anim-burger__bar::after {
	transform: translateY(0) rotate(-45deg);
}

/* --------------------------------------------------------------------------
 * Fullscreen overlay menu
 *
 * Two panels arriving from different axes, as in the Antonija Šimić original.
 * inert (set by JS while closed) keeps the hidden panel out of the tab order —
 * visibility:hidden alone is not enough once you add transitions.
 * ----------------------------------------------------------------------- */

.anim-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr 1fr;
	visibility: hidden;
	transition: visibility 0s linear var(--anim-duration-slow);
}

.anim-menu-overlay[data-open="true"] {
	visibility: visible;
	transition-delay: 0s;
}

.anim-menu-overlay__pane {
	background: var(--anim-menu-bg, #101820);
	transition: transform var(--anim-duration-slow) var(--anim-ease);
}

.anim-menu-overlay__pane--a { transform: translateY(-100%); }
.anim-menu-overlay__pane--b { transform: translateX(100%); }

.anim-menu-overlay[data-open="true"] .anim-menu-overlay__pane--a,
.anim-menu-overlay[data-open="true"] .anim-menu-overlay__pane--b {
	transform: none;
}

@media (max-width: 700px) {
	.anim-menu-overlay {
		grid-template-columns: 1fr;
	}
	.anim-menu-overlay__pane--a {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Blob indicator
 *
 * A single pill slides between items instead of each item drawing its own
 * background. JS writes --blob-x / --blob-w from the active item's box.
 * ----------------------------------------------------------------------- */

.anim-nav--blob {
	position: relative;
	isolation: isolate;
}

.anim-nav--blob::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	width: var(--blob-w, 0px);
	height: var(--blob-h, 2.4em);
	border-radius: 999px;
	background: color-mix(in srgb, var(--anim-accent) 16%, transparent);
	transform: translateX(var(--blob-x, 0px));
	opacity: var(--blob-o, 0);
	transition:
		transform var(--anim-duration) var(--anim-ease-overshoot),
		width var(--anim-duration) var(--anim-ease-overshoot),
		opacity var(--anim-duration-fast) var(--anim-ease);
}

@media (prefers-reduced-motion: reduce) {

	.anim-nav__link::after,
	.anim-nav__sub,
	.anim-nav__sub li,
	.anim-burger__bar,
	.anim-burger__bar::before,
	.anim-burger__bar::after,
	.anim-menu-overlay__pane,
	.anim-nav--blob::before {
		transition: none !important;
	}

	/* Panels must still arrive — just instantly. */
	.anim-menu-overlay__pane--a,
	.anim-menu-overlay__pane--b {
		transform: none;
	}

	.anim-menu-overlay:not([data-open="true"]) {
		display: none;
	}
}