/* ==================================================== */
/* ==============  AI42 ONEPAGE NAV — CSS  ============= */
/* ==================================================== */

/* Standaardwaarden op de nav zelf → Elementor-controls kunnen ze
   per instantie overschrijven via inline CSS-variabelen op {{WRAPPER}}. */
.onepage-nav {
	position: relative;
	/* Eigen stacking-context: houdt de highlight (z-index:-1) binnen de nav,
	   zodat 'ie niet achter een ondergrond zakt (bv. de witte off-canvas). */
	isolation: isolate;
	font-size: 16px;
	--nav-highlight-color: #22b27e;
	--nav-gap: 12px;
	--nav-hl-pad: 0px;
	--ball-size: 22px;
	--anim-duration: .6s;
	--anim-duration-out: .5s;
}

.onepage-nav a {
	position: relative;
	color: #fff;
	text-decoration: none;
	padding: 6px 15px;
	border-radius: 999px;
	z-index: 1;
	line-height: 1.2;
}
.onepage-nav a.nav-ghost { opacity: 0; pointer-events: none; }

/* Elementor 'sticky' maakt een spacer-KLOON van de header (incl. deze nav).
   Die kloon heeft geen JS-listeners; verberg z'n bevroren highlight. */
.elementor-sticky__spacer .onepage-nav .nav-highlight { display: none !important; }

/* Highlight — kleur en timing komen uit de (overschrijfbare) variabelen */
.onepage-nav .nav-highlight {
	position: absolute;
	background: var(--nav-highlight-color);
	border-radius: 9999px;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	will-change: left, top, width, height, opacity;
	animation-fill-mode: both;
}

/* Glas-variant ("liquid glass", lichte variant) — frosted blur + glossy bevel.
   Overschrijft de effen highlight-kleur; gebruikt een vaste lichte glas-look. */
.onepage-nav--glass .nav-highlight {
	background: rgba(187, 187, 188, 0.36);
	-webkit-backdrop-filter: blur(8px) saturate(150%);
	backdrop-filter: blur(8px) saturate(150%);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.10),
		inset 2px 1px 0 -1px rgba(255, 255, 255, 0.90),
		inset -1.5px -1px 0 -1px rgba(255, 255, 255, 0.80),
		inset -2px -6px 1px -5px rgba(255, 255, 255, 0.60),
		inset -1px 2px 3px -1px rgba(0, 0, 0, 0.20),
		inset 0 -4px 1px -2px rgba(0, 0, 0, 0.10),
		0 3px 6px 0 rgba(0, 0, 0, 0.08);
}

/* Desktop (horizontaal) */
.onepage-nav--desktop {
	display: flex;
	gap: var(--nav-gap);
	justify-content: flex-end;
	align-items: center;
}
.onepage-nav--desktop .nav-highlight { top: 50%; transform: translateY(-50%); }

/* Simpele hover (alleen desktop): tekst 1.1×, witte 50%-transparante achtergrond
   met verhoogde saturatie + blur. Bewust géén schaduwen of randeffecten. */
.onepage-nav--desktop a {
	/* Natuurlijke 'spring' (easeOutBack): de tekst pop't licht op i.p.v. mechanisch. */
	transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onepage-nav--desktop a:hover {
	/* Alleen de tekst schaalt — geen achtergrond of andere effecten. */
	transform: scale(1.1);
}

/* Keyframes – horizontaal */
@keyframes highlightIntro {
	0%   { left: var(--intro-left); width: 0; height: 0; opacity: 0; }
	50%  { left: calc(var(--end-left) - 10px); width: calc(var(--end-width) + 20px); height: calc(var(--start-height) - 10px); opacity: 1; }
	65%  { left: var(--end-left); width: var(--end-width); height: calc(var(--start-height) + 4px); }
	80%  { height: calc(var(--start-height) - 2px); }
	100% { left: var(--end-left); width: var(--end-width); height: var(--start-height); opacity: 1; }
}
@keyframes highlightMove {
	0%   { left: var(--start-left); width: var(--start-width); height: var(--start-height); }
	10%  { left: var(--stretch-left); width: calc(var(--stretch-width) - 50px); height: calc(var(--start-height) - 10px); }
	50%  { left: var(--end-left); width: var(--end-width); height: calc(var(--start-height) - 10px); }
	65%  { height: calc(var(--start-height) + 4px); }
	80%  { height: calc(var(--start-height) - 2px); }
	100% { left: var(--end-left); width: var(--end-width); height: var(--start-height); }
}

/* Horizontaal: emerge uit het 0-hoogte hero-fantoom (dun lijntje van links → volle pill) */
@keyframes highlightEmergeH {
	0%   { left: var(--start-left); width: var(--start-width); height: var(--start-height); }
	60%  { left: var(--end-left); width: var(--end-width); height: calc(var(--end-height) + 4px); }
	80%  { height: calc(var(--end-height) - 2px); }
	100% { left: var(--end-left); width: var(--end-width); height: var(--end-height); }
}
/* Horizontaal: pill → dun lijntje richting het hero-fantoom */
@keyframes highlightCollapseH {
	0%   { left: var(--start-left); width: var(--start-width); height: var(--start-height); }
	100% { left: var(--end-left); width: var(--end-width); height: 0; }
}

/* Mobiel (verticaal / off-canvas) */
.onepage-nav--mobile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nav-gap);
	font-size: 14px;
	--nav-gap: 6px;
	--ball-size: 11px;
}
.onepage-nav--mobile a { display: inline-block; width: auto; padding: 8px 14px; }

/* Keyframes – verticaal */
@keyframes highlightIntroV {
	0%   { top: var(--intro-top); left: var(--end-left); width: var(--ball-size); height: var(--ball-size); opacity: 0; border-radius: 9999px; }
	30%  { opacity: 1; left: var(--end-left); width: var(--ball-size); height: calc(var(--ball-size) * .9); }
	60%  { top: var(--end-top); left: var(--end-left); width: calc(var(--ball-size) * .85); height: calc(var(--end-height) * 1.08); }
	80%  { top: var(--end-top); left: var(--end-left); width: calc(var(--end-width) * .98); height: calc(var(--end-height) * 1.06); }
	92%  { top: var(--end-top); left: var(--end-left); width: calc(var(--end-width) * 1.02); height: calc(var(--end-height) * .96); }
	100% { top: var(--end-top); left: var(--end-left); width: var(--end-width); height: var(--end-height); opacity: 1; }
}
@keyframes highlightMoveV {
	0%   { top: var(--start-top); left: var(--end-left); width: var(--end-width); height: var(--start-height); }
	18%  { top: var(--start-top); left: var(--end-left); width: var(--ball-size); height: var(--ball-size); }
	50%  { top: var(--mid-top);   left: var(--end-left); width: calc(var(--ball-size) * .8); height: var(--travel-stretch-height); }
	72%  { top: var(--end-top);   left: var(--end-left); width: calc(var(--ball-size) * .85); height: calc(var(--end-height) * 1.08); }
	84%  { top: var(--end-top);   left: var(--end-left); width: calc(var(--end-width) * .98); height: calc(var(--end-height) * 1.06); }
	92%  { top: var(--end-top);   left: var(--end-left); width: calc(var(--end-width) * 1.02); height: calc(var(--end-height) * .96); }
	100% { top: var(--end-top);   left: var(--end-left); width: var(--end-width); height: var(--end-height); }
}