.utensils {
	position: absolute;
	bottom: 12px;
	left: 12px;
	pointer-events: none;
}

.ut {
	position: absolute;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.drawer .d:nth-child(1):hover .utensils-a,
.drawer .d:nth-child(2):hover .utensils-b,
.drawer .d:nth-child(3):hover .utensils-c {
	transform: translateY(-20px);
}

.drawer .d:nth-child(1):hover .utensils-a .spoon.one,
.drawer .d:nth-child(1):hover .utensils-a .spoon.two,
.drawer .d:nth-child(1):hover .utensils-a .fork.one,
.drawer .d:nth-child(1):hover .utensils-a .chopsticks.two,
.drawer .d:nth-child(2):hover .utensils-b .ladle.one,
.drawer .d:nth-child(2):hover .utensils-b .chopsticks.one,
.drawer .d:nth-child(2):hover .utensils-b .spoon.three,
.drawer .d:nth-child(2):hover .utensils-b .spoon.one,
.drawer .d:nth-child(2):hover .utensils-b .fork.two,
.drawer .d:nth-child(3):hover .utensils-c .fork.one,
.drawer .d:nth-child(3):hover .utensils-c .ladle.one,
.drawer .d:nth-child(3):hover .utensils-c .spoon.one {
	opacity: 1;
}

.utensils-a { left: 24px; bottom: 10px; }
.utensils-a .spoon.one { left: 2px; }
.utensils-a .spoon.two { left: 24px; transform: translateY(6px) rotate(9deg); }
.utensils-a .fork.one { left: 72px; transform: translateY(8px) rotate(18deg); }
.utensils-a .chopsticks.two { left: 42px; transform: translateY(4px) rotate(-6deg); }

.drawer .d:nth-child(1):hover .utensils-a .spoon.one { transform: translate(-10px, -50px) rotate(-20deg); }
.drawer .d:nth-child(1):hover .utensils-a .spoon.two { transform: translate(-4px, -56px) rotate(-8deg); }
.drawer .d:nth-child(1):hover .utensils-a .fork.one { transform: translate(18px, -52px) rotate(25deg); }
.drawer .d:nth-child(1):hover .utensils-a .chopsticks.two { transform: translate(8px, -54px) rotate(10deg); }

.utensils-b { left: 30px; bottom: 8px; }
.utensils-b .ladle.one { left: 2px; }
.utensils-b .chopsticks.one { left: 18px; }
.utensils-b .spoon.three { left: 64px; transform: translateY(-2px) rotate(10deg); }
.utensils-b .spoon.one { left: 86px; transform: translateY(6px) rotate(-6deg); }
.utensils-b .fork.two { left: 46px; transform: translateY(7px) rotate(12deg); }

.drawer .d:nth-child(2):hover .utensils-b .ladle.one { transform: translate(-8px, -60px) rotate(10deg); }
.drawer .d:nth-child(2):hover .utensils-b .chopsticks.one { transform: translate(6px, -52px) rotate(-8deg); }
.drawer .d:nth-child(2):hover .utensils-b .spoon.three { transform: translate(24px, -50px) rotate(12deg); }
.drawer .d:nth-child(2):hover .utensils-b .spoon.one { transform: translate(34px, -54px) rotate(-18deg); }
.drawer .d:nth-child(2):hover .utensils-b .fork.two { transform: translate(16px, -52px) rotate(22deg); }

.utensils-c { left: 24px; bottom: 8px; }
.utensils-c .fork.one { left: 74px; }
.utensils-c .fork.two { left: 24px; transform: translateY(7px) rotate(-7deg); }
.utensils-c .ladle.one { left: 42px; }
.utensils-c .spoon.one { left: 94px; }

.drawer .d:nth-child(3):hover .utensils-c .fork.one { transform: translate(-14px, -50px) rotate(-18deg); }
.drawer .d:nth-child(3):hover .utensils-c .fork.two { transform: translate(-2px, -54px) rotate(-5deg); }
.drawer .d:nth-child(3):hover .utensils-c .ladle.one { transform: translate(14px, -60px) rotate(12deg); }
.drawer .d:nth-child(3):hover .utensils-c .spoon.one { transform: translate(28px, -48px) rotate(18deg); }
