nav(style='--k: 0')
	a(href='#' style='--i: 0') Home
	a(href='#' style='--i: 1') Notifications
	a(href='#' style='--i: 2') Messages
	a(href='#' style='--i: 3') Setup
	a(href='#' style='--i: 4') Bookmarks

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

@property --k {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

html, body { display: grid }

html { min-height: 100% }

nav {
	display: flex;
	place-self: center;
	font: 1.125em/ 2.25 inter, sans-serif;
}

a {
	--sgn: clamp(-1, var(--i) - var(--k), 1);
	--bit: round(.5*(1 + var(--sgn)));
	/* abs() fallback for stable Chrome without flag */
	--out: max(var(--sgn), -1*var(--sgn));
	position: relative;
	padding: .5em;
	color: purple;
	text-decoration: none;
	transition: --k .35s ease-out;
	
	&::after {
		--r: calc(var(--out)*var(--bit)*100%);
		--l: calc(var(--out)*(1 - var(--bit))*100%);
		position: absolute;
		inset: 0;
		z-index: -1;
		background: gold;
		clip-path: inset(0 var(--r) 0 var(--l));
		content: ''
	}
	
	@supports (scale: Abs(1)) { --out: abs(var(--sgn)) }
}

addEventListener('click', e => {
	let _t = e.target;
	
	if(_t.href) {
		_t.parentNode.style.setProperty('--k', +_t.style.getPropertyValue('--i'))
	}
})