- let k = 0;
- let o = ['separated', 'overlapped'];
- let no = o.length;

body.grid(style=`--k: ${k}`)
	form.grid
		- for(let i = 0; i < no; i++)
			input(type='radio' name='o' id=`o${i}` style=`--i: ${i}` checked=i === k)
			label(for=`o${i}` style=`--i: ${i}`) #{o[i]}
	section.grid
		.fill.grid
			.lyr
			.lyr
			.lyr
		.wire.grid
			.lyr.grid
			.lyr.grid
			.lyr.grid

$c-dark: #333;
$c-nght: #040404;
$c-lght: #c7c7c7;
$c-main: #319197;
$c-secd: #ff6fff;

$togl-d: 1em;
$togl-p: 3px;
$togl-b: 3px;
$togl-g: $togl-p + $togl-b;

$line-w: 4px;

$tl: 1s;

* { margin: 0; padding: 0; font: inherit }

*, :not(label)::before, :not(label)::after {
	--not-i: calc(1 - var(--i));
	--sgn-i: calc(2*var(--i) - 1);
}

.grid { display: grid }

body {
	--not-k: calc(1 - var(--k));
	grid-template-rows: max-content 1fr;
	min-height: 100vh;
	background: $c-dark;
	color: $c-lght;
	font: 1.25em/ 1.5 ubuntu, trebuchet ms, sans-serif
}

form {
	grid-gap: $togl-g;
	place-content: center;
	padding: .5em;
	
	&::before, &::after {
		--i: 0;
		grid-area: 1/ 2;
		z-index: 0;
		border: solid $togl-b rgba($c-lght, var(--i));
		padding: $togl-p;
		border-radius: $togl-d;
		width: calc((1 + var(--i))*#{$togl-d});
		height: $togl-d;
		transform: 
			translate(calc(var(--k)*var(--not-i)*#{$togl-d}));
		background: rgba($c-main, var(--not-i)) content-box;
		transition: transform .3s;
		content: ''
	}
	
	&::after { --i: 1 }
	
	> * {
		grid-area: 1/ calc(2*var(--i) + 1);
		place-self: center;
		cursor: pointer
	}
}

input[type='radio'] { opacity: 0 }

label {
	--not-sel: max(var(--i) - var(--k), var(--k) - var(--i));
	--sel: calc(1 - var(--not-sel));
	position: relative;
	z-index: calc(var(--not-sel) + 1);
	color: $c-main;
	filter: 
		Brightness(var(--sel)) 
		Invert(var(--not-sel))
		Brightness(calc(1 - .22*var(--not-sel)));
	
	&::before, &::after {
		position: absolute;
		content: ''
	}
	
	&::before {
		left: calc(var(--not-i)*100%);
		padding: $togl-b + $togl-p $togl-g + $togl-b + $togl-p;
		width: 2*$togl-d; height: $togl-d;
		transform: translate(calc(var(--i)*-100%))
	}
}

section {
	box-shadow: inset 0 7px 7px -7px $c-nght;
	background: inherit;
}

div { grid-area: 1/ 1 }

.fill {
	--j: 0;
	mix-blend-mode: lighten
}

.wire { --j: 1 }

.lyr {
	--i: 0;
	--h: clamp(8em, 35vh, 25em);
	--r: calc(.375*var(--h));
	--b: calc(.5*var(--r));
	--sgn: calc(1 - var(--i));
	--f: max(0, -1*var(--sgn));
	--not-f: calc(1 - var(--f));
	box-sizing: border-box;
	place-self: center;
	border: solid var(--b) transparent;
	width: clamp(9em, 50vw, 32em);
	height: calc(var(--h) + var(--j)*#{$line-w});
	border-radius: var(--r);
	transform: 
		translatey(calc(var(--not-k)*var(--sgn)*(80% - var(--j)*#{$line-w}))) 
		perspective(25em)
		rotatex(calc(var(--not-k)*45deg));
	transition: 
		transform $tl 
		calc((var(--k)*var(--f) + var(--not-k)*var(--not-f))*#{$tl});
	
	.fill & {
		background: $c-main;
		mix-blend-mode: difference;
		
		&:nth-child(2) { background-clip: padding-box }
		
		&:nth-child(3) {
			display: grid;
			-webkit-background-clip: text;
							background-clip: text;
			-webkit-text-fill-color: transparent;
			
			&::after {
				place-self: center;
				font-size: var(--r);
				font-weight: 900;
				content: 'BOO!'
			}
		}
	}
	
	.wire & {
		border: dashed $line-w #ff7a18;
		filter: drop-shadow(1px 1px 2px $c-nght);
		
		&::before {
			margin: calc(var(--b) - #{$line-w});
			border: dashed $line-w #af002d;
			border-radius: var(--b);
			content: ''
		}
	}
	
	&:nth-child(2) { --i: 1 }
	&:nth-child(3) { --i: 2 }
}

addEventListener('change', e => {
	let _t = e.target;
	
	document.body.style.setProperty('--k', +_t.id.substring(1))
})