/**
 * Abannet Nav Style Presets — v6.18.1
 * Magnetic slide indicator + minimal link chrome
 */

/* ── Magnetic slide pill (Apple/Tesla minimal) ── */
.nav-menu-track {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-quantum-header .nav-menu {
	position: relative;
	z-index: 1;
	gap: 2px;
}

.site-quantum-header .nav-menu li {
	position: relative;
}

.nav-magnetic-pill {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 0;
	width: 0;
	height: 34px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.42) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 20px;
	box-shadow: 0 1px 6px rgba(var(--abannet-nav-text-rgb, 6, 11, 24), 0.04);
	transform: translate3d(0, -50%, 0);
	transition:
		transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		width 0.3s cubic-bezier(0.25, 1, 0.5, 1),
		opacity 0.2s ease,
		visibility 0.2s ease;
	will-change: transform, width;
}

.nav-magnetic-pill.is-active {
	opacity: 1;
	visibility: visible;
}

/* Strip per-link bubbles — all presets */
.site-quantum-header .nav-menu li a {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
}

.site-quantum-header .nav-menu li a::before {
	display: none !important;
	content: none !important;
}

/* ── Shared nav rail shell ── */
.header-nav-rail {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-rail-aurora,
.nav-rail-scan {
	pointer-events: none;
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* ═══════════════════════════════════════════
   PRESET 1: quantum-rail (default)
   ═══════════════════════════════════════════ */
.nav-style-quantum-rail .header-nav-rail {
	padding: 3px 6px;
	border-radius: 14px;
	background: rgba(var(--abannet-nav-text-rgb), 0.025);
	border: 1px solid rgba(var(--abannet-nav-accent-rgb), 0.08);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
	overflow: visible;
}

.nav-style-quantum-rail .nav-rail-aurora {
	background:
		radial-gradient(ellipse 80% 120% at 100% 0%, rgba(var(--abannet-nav-accent-rgb), 0.1), transparent 55%),
		radial-gradient(ellipse 70% 100% at 0% 100%, rgba(16, 185, 129, 0.07), transparent 50%);
	opacity: 0.85;
}

.nav-style-quantum-rail .nav-rail-scan {
	background: linear-gradient(
		105deg,
		transparent 40%,
		rgba(var(--abannet-nav-accent-rgb), 0.06) 50%,
		transparent 60%
	);
	background-size: 220% 100%;
	animation: abannet-nav-scan 8s ease-in-out infinite;
	opacity: 0.5;
}

@keyframes abannet-nav-scan {
	0%, 100% { background-position: 120% 0; }
	50% { background-position: -20% 0; }
}

@supports selector(.nav-menu:has(li:hover)) {
	.nav-style-quantum-rail .header-nav-rail:has(.nav-menu li:hover) {
		border-color: rgba(var(--abannet-nav-accent-rgb), 0.2);
	}
}

/* ═══════════════════════════════════════════
   PRESET 2: aurora-glass
   ═══════════════════════════════════════════ */
.nav-style-aurora-glass .header-nav-rail {
	padding: 3px 6px;
	border-radius: 999px;
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--abannet-nav-glass-1) 88%, transparent),
		color-mix(in srgb, var(--abannet-nav-glass-2) 82%, transparent),
		color-mix(in srgb, var(--abannet-nav-glass-3) 86%, transparent)
	);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: 0 2px 12px rgba(var(--abannet-nav-text-rgb), 0.04);
}

.nav-style-aurora-glass .nav-rail-aurora {
	background: linear-gradient(
		90deg,
		rgba(var(--abannet-nav-accent-rgb), 0.05),
		rgba(16, 185, 129, 0.06),
		rgba(var(--abannet-nav-accent-rgb), 0.05)
	);
	background-size: 200% 100%;
	animation: abannet-aurora-shift 12s ease infinite;
}

@keyframes abannet-aurora-shift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.nav-style-aurora-glass .nav-rail-scan {
	display: none;
}

.nav-style-aurora-glass .nav-magnetic-pill {
	background: rgba(255, 255, 255, 0.72) !important;
	border-radius: 999px;
}

/* ═══════════════════════════════════════════
   PRESET 3: neon-pulse — pill hidden, underline accent
   ═══════════════════════════════════════════ */
.nav-style-neon-pulse .header-nav-rail {
	padding: 2px 4px;
}

.nav-style-neon-pulse .nav-rail-aurora,
.nav-style-neon-pulse .nav-rail-scan {
	display: none;
}

.nav-style-neon-pulse .nav-magnetic-pill {
	display: none !important;
}

.nav-style-neon-pulse .nav-menu li a {
	padding-bottom: 10px !important;
}

.nav-style-neon-pulse.site-quantum-header .nav-menu li a::after {
	display: block !important;
	content: '' !important;
	position: absolute;
	right: 14px;
	left: 14px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--abannet-nav-accent);
	box-shadow: 0 0 8px rgba(var(--abannet-nav-accent-rgb), 0.45);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-style-neon-pulse.site-quantum-header .nav-menu li a:hover::after,
.nav-style-neon-pulse.site-quantum-header .nav-menu li a:focus-visible::after,
.nav-style-neon-pulse.site-quantum-header .nav-menu li.current-menu-item a::after {
	transform: scaleX(1);
}

.nav-style-neon-pulse .nav-menu li a:hover,
.nav-style-neon-pulse .nav-menu li.current-menu-item a {
	text-shadow: 0 0 10px rgba(var(--abannet-nav-accent-rgb), 0.2) !important;
}

/* ═══════════════════════════════════════════
   PRESET 4: executive-flat — pill only on hover via JS
   ═══════════════════════════════════════════ */
.nav-style-executive-flat .header-nav-rail {
	padding: 0;
}

.nav-style-executive-flat .nav-rail-aurora,
.nav-style-executive-flat .nav-rail-scan {
	display: none;
}

.nav-style-executive-flat .nav-menu li a {
	font-weight: 600 !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
}

.nav-style-executive-flat .nav-magnetic-pill {
	background: rgba(var(--abannet-nav-accent-rgb), 0.08) !important;
	border: 1px solid rgba(var(--abannet-nav-accent-rgb), 0.12);
	border-radius: 8px;
	box-shadow: none;
}

/* Mobile — no magnetic pill; light tap surface */
@media (max-width: 900px) {
	.nav-magnetic-pill {
		display: none !important;
	}

	.header-nav-rail {
		padding: 0 !important;
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		overflow: visible;
	}

	.nav-rail-aurora,
	.nav-rail-scan {
		display: none !important;
	}

	.site-quantum-header .nav-menu li a {
		border-radius: 10px !important;
	}

	.site-quantum-header .nav-menu li a:hover,
	.site-quantum-header .nav-menu li a:focus-visible {
		background: rgba(var(--abannet-nav-accent-rgb), 0.06) !important;
	}

	.nav-style-neon-pulse.site-quantum-header .nav-menu li a::after {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-magnetic-pill {
		transition: opacity 0.15s ease, width 0.15s ease, transform 0.15s ease;
	}

	.nav-rail-scan,
	.nav-style-aurora-glass .nav-rail-aurora {
		animation: none !important;
	}
}
