/* Sci-fi navigation design tokens */
.sci-fi-nav {
	--sf-radius: 18px;
	--sf-surface: #07101a;
	--sf-surface-hover: #0a1725;
	--sf-surface-active: #0a1b29;
	--sf-accent: 27, 154, 228;
	--sf-border: 247, 251, 254;
	--sf-accent-light: 88, 178, 240;
}

/* Menu items host the background and border reveal layers */
.sci-fi-nav .elementor-nav-menu > li.menu-item {
	position: relative;
	border-radius: var(--sf-radius, 18px);
	overflow: visible;
	z-index: 1;
}

/* Effects shared by main and dropdown links */
.sci-fi-nav :is(
	.elementor-nav-menu--main,
	.elementor-nav-menu--dropdown
) > .elementor-nav-menu > li > a {
	position: relative;
	overflow: visible !important;
	border: 2px solid rgba(var(--sf-border), 0.2);
	border-radius: var(--sf-radius);
	box-shadow: 0 0 18px rgba(var(--sf-accent), 0.16);
	transition: box-shadow 0.35s ease;
}

/* Main menu surfaces are not exposed by Elementor with Pointer set to None */
.sci-fi-nav .elementor-nav-menu--main > .elementor-nav-menu > li {
	background: var(--sf-surface);
}

/* Elementor only exposes the normal dropdown background on its container */
.sci-fi-nav .elementor-nav-menu--dropdown > .elementor-nav-menu > li {
	background: rgba(7, 16, 26, 0.94);
}

/* Elementor controls toggle geometry and colors; CSS supplies unsupported effects */
.sci-fi-nav .elementor-menu-toggle {
	min-width: 46px;
	min-height: 46px;
	box-shadow: 0 0 18px rgba(var(--sf-accent), 0.16);
}

/* Active section or page */
.sci-fi-nav :is(
	.elementor-nav-menu--main,
	.elementor-nav-menu--dropdown
) > .elementor-nav-menu > li > a:is(
	.elementor-item-active,
	[aria-current="page"]
) {
	box-shadow:
		0 0 0 2px rgba(var(--sf-accent-light), 0.16),
		0 0 20px rgba(var(--sf-accent), 0.26);
}

.sci-fi-nav .elementor-nav-menu--main > .elementor-nav-menu > li > a:is(
	.elementor-item-active,
	[aria-current="page"]
) {
	background: var(--sf-surface-active);
}

/* Shared mask for the background and border reveal */
.sci-fi-nav .elementor-nav-menu > li.menu-item::before,
.sci-fi-nav .elementor-nav-menu > li.menu-item::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;

	-webkit-mask-image: linear-gradient(
		100deg,
		#000 0%,
		#000 47%,
		transparent 53%,
		transparent 100%
	);
	mask-image: linear-gradient(
		100deg,
		#000 0%,
		#000 47%,
		transparent 53%,
		transparent 100%
	);

	-webkit-mask-size: 300% 100%;
	mask-size: 300% 100%;

	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;

	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	transition:
		-webkit-mask-position 0.6s cubic-bezier(0.23, 1, 0.32, 1),
		mask-position 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Background reveal */
.sci-fi-nav .elementor-nav-menu > li.menu-item::before {
	z-index: -1;
	background: rgba(var(--sf-accent, 27, 154, 228), 0.1);
}

/* Border reveal */
.sci-fi-nav .elementor-nav-menu > li.menu-item::after {
	z-index: 2;
	border: 2px solid rgb(var(--sf-accent, 27, 154, 228));
}

/* Hover and keyboard focus */
.sci-fi-nav
	.elementor-nav-menu
	> li.menu-item:is(:hover, :focus-within)::before,
.sci-fi-nav
	.elementor-nav-menu
	> li.menu-item:is(:hover, :focus-within)::after {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

/* Centered hover glow for both Elementor menu copies on real pointing devices */
@media (hover: hover) {
	.sci-fi-nav :is(
		.elementor-nav-menu--main,
		.elementor-nav-menu--dropdown
	) > .elementor-nav-menu > li > a:hover {
		box-shadow:
			0 0 20px rgba(var(--sf-accent), 0.55),
			0 0 50px rgba(var(--sf-accent), 0.3);
	}
}

/* Keyboard navigation */
.sci-fi-nav :is(
	.elementor-nav-menu--main > .elementor-nav-menu > li > a,
	.elementor-nav-menu--dropdown > .elementor-nav-menu > li > a,
	.elementor-menu-toggle
):focus-visible {
	outline: 2px solid rgb(var(--sf-accent-light));
	outline-offset: 3px;
}

/* Mobile dropdown */
@media (max-width: 767px) {
	.sci-fi-nav .elementor-nav-menu--dropdown > .elementor-nav-menu {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
}

/* Respect the user's motion preference */
@media (prefers-reduced-motion: reduce) {
	.sci-fi-nav :is(
		.elementor-nav-menu--main,
		.elementor-nav-menu--dropdown
	) > .elementor-nav-menu > li > a,
	.sci-fi-nav .elementor-nav-menu > li.menu-item::before,
	.sci-fi-nav .elementor-nav-menu > li.menu-item::after {
		transition: none;
	}
}