- var n = 8, m = 2*n;

input#c(type='checkbox')
label(for='c') water your cat so it grows
.assembly(style=`--n: ${n}`)
	- for(var i = 0; i < m; i++)
		.slice(style=`--i: ${i}`)

$cat0: url(https://images.unsplash.com/photo-1455970022149-a8f26b6902dd?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=1d90e9b4eb548871141fd383bd4d7d76);
$cat1: url(https://images.unsplash.com/photo-1524132989408-c8ee48d8f147?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=13074b883594c081bfeba3f72edb5816);
$c: (disabled: #ff859a, focused: #f6b10b, checked: #bad500);
$d: 50vmin;
$w: calc(#{$d}/var(--n));
$b: 1em;

body {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1529335844847-0dd5564a58d2?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=49a664752fccbe5be76432b94b5d4de9) 50%/ cover
}

[id='c'] {
	position: absolute;
	opacity: 0;
	
	+ label {
		padding: .5em 0;
		background: rgba(#000, .63);
		--hl: #{map-get($c, disabled)};
		color: var(--c, var(--hl));
		font: 6.5vmin/ 1 indie flower, cursive;
		cursor: pointer;
		
		&, &:before {
			display: flex;
			align-items: center;
			justify-content: center
		}
		
		&:before {
			box-sizing: border-box;
			margin-right: .5em;
			padding-top: .25em;
			width: $b; height: $b;
			box-shadow: 0 0 0 2px var(--c, var(--hl));
			color: var(--c, transparent);
			content: '✓'
		}
	}
	
	&:focus + label, & + label:hover {
		--hl: #{map-get($c, focused)}
	}
	
	&:checked + label {
		--c: #{map-get($c, checked)}
	}
}

.assembly {
	flex: 1;
	position: relative;
	transform-style: preserve-3d;
	animation: ini 2s ease-in forwards;
	
	:checked ~ & { animation-name: fin }
}

@keyframes ini {
	0% { transform: rotatey(90deg) }
	50% {
		transform: perspective(20em) rotatey(45deg);
		animation-timing-function: ease-out
	}
	100% { transform: rotatey(0deg) }
}

@keyframes fin {
	0% { transform: rotatey(0deg) }
	50% {
		transform: perspective(20em) rotatey(45deg);
		animation-timing-function: ease-out
	}
	100% { transform: rotatey(90deg) }
}

.slice {
	--s: 0;
	position: absolute;
	top: 50%; left: 50%;
	width: $w; height: $d;
	--tv: calc(.5*(var(--i)/var(--n) - 1)*#{$d});
	transform: 
		translate3d(var(--tv), -50%, var(--tv)) 
		rotatey(calc(var(--s)*-90deg));
	background: $cat0 
		calc(.5*(var(--s) - var(--i))*#{$w}) 0/ #{$d};
	
	&:nth-child(2n) {
		--s: 1;
		background-image: $cat1
	}
}