.cut {
	user-select: none;
}

.cooking-cut {
	perspective: 1000px;
	position: relative;
}

.cooking-cut__wrapper {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform-origin: left 50%;
	animation-timing-function: linear;
}

.cooking-cut__side {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cooking-cut__side img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
}
.cooking-cut__side.is-active {
	position: static;
}

.cooking-cut__side--back {
	transform: rotateY(180deg) scaleX(-1);
}

@keyframes rotate-first {
	0% {
		transform: rotateY(0) translateX(0);
		transform-origin: 0 50%;
	}
	50% {
		transform: rotateY(-40deg) translateX(50%);
		transform-origin: 0% 50%;
	}
	60% {
		transform: rotateY(-120deg) translateX(50%);
		transform-origin: 50% 50%;
	}
	90% {
		transform: rotateY(-200deg) translateX(-100%);
		transform-origin: 0% 50%;
	}
	100% {
		transform: rotateY(-180deg) translateX(-100%);
		transform-origin: 0% 50%;
	}
}

@keyframes rotate-second {
	0% {
		transform: rotateY(-180deg) translateX(100%);
		transform-origin: 100% 50%;
	}
	50% {
		transform: rotateY(-220deg) translateX(50%);
		transform-origin: 100% 50%;
	}
	60% {
		transform: rotateY(-300deg) translateX(50%);
		transform-origin: 50% 50%;
	}
	90% {
		transform: rotateY(-380deg) translateX(0%);
		transform-origin: 0% 50%;
	}
	100% {
		transform: rotateY(-360deg) translateX(0%);
		transform-origin: 0% 50%;
	}
}