<div class="menu-wrapper">
	<div class="menu-outer">
		<div class="menu-inner">MENU</div>
		<svg viewbox="0 0 180 180" width="180" height="180" class="menu-border-bg">
		  <circle pathLength="100" vector-effect="non-scaling-stroke" cx="90" cy="90" r="89" class="circle__progress circle__progress--path"></circle>
		</svg>
		<svg viewbox="0 0 180 180" width="180" height="180" class="menu-border">
		  <circle pathLength="100" vector-effect="non-scaling-stroke" cx="90" cy="90" r="89" class="circle__progress circle__progress--path"></circle>
		</svg>
	</div>
	
</div>

* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

html {
	font-family: "Outfit", sans-serif;
}

body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menu-wrapper {
	width: 200px;
	height: 200px;
	transition: width 0.4s, height 0.4s, transform 0.1s;
	&:hover {
		.menu-outer {
			transform: translate(-50%, -50%) scale(1);
			.menu-border {
				circle {
					animation-name: drawCircle;
					animation-duration: 1.5s;
					animation-iteration-count: 1;
					animation-fill-mode: forwards;
					animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
				}
			}
		}
	}
	&.is-over {
		width: 120px;
		height: 120px;
	}

	.menu-outer {
		width: 180px;
		height: 180px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.9);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-transform: uppercase;
		font-size: 26px;
		letter-spacing:0.05em;
		font-weight: 700;
		color: #ff6666;
		cursor: pointer;
		position: relative;
		transition: transform 0.3s;
	}
	.menu-border,
	.menu-border-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.menu-border-bg {
		circle {
			fill: none;
			stroke-width: 2px;
			stroke: #ccc;
		}
	}
	.menu-border {
		circle {
			transform-origin: 50% 50%;
			fill: none;
			stroke: #ff6666;
			stroke-opacity: 1;
			stroke-dasharray: 100;
			stroke-dashoffset: 100;
			stroke-width: 2px;
			visibility: 0;
			transition: visibility 0s 1.5s;

			animation-name: undrawCircle;
			animation-duration: 1.5s;
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
	}
}

@keyframes drawCircle {
	0% {
		transform: rotateZ(-90deg);
	}
	to {
		transform: rotateZ(90deg);
		stroke-dashoffset: 0;
	}
}

@keyframes undrawCircle {
	0% {
		transform: rotate(90deg);
		stroke-dashoffset: 0;
	}
	to {
		transform: rotate(270deg);
		stroke-dashoffset: -100;
	}
}

$(function () {
	$(".menu-wrapper").on("mouseenter", function () {
		$(this).addClass("is-over is-loaded");
	});

	$(".menu-wrapper").on("mouseleave", function () {
		$(this).removeClass("is-over").attr('style', '');
	});

	$(".menu-wrapper").on("mousemove", function (e) {
		if ($(".menu-wrapper.is-over").length) {
			var h = $(this).outerHeight();
			var w = $(this).outerWidth();
			var x = e.pageX - this.offsetLeft;
			var y = e.pageY - this.offsetTop;
			
			var rotateVal = (((w/2) - x) * -0.1);
			var translateXVal = (((w/2) - x) * -0.2);
			var translateYVal = (((h/2) - y) * -0.2);
			
			$(this).css({transform : 'translate(' + translateXVal + 'px, ' + translateYVal + 'px) rotateZ(' + rotateVal + 'deg)'});
		}
	});
});