<div id="wrapper" class="animation">
	<h1>Haikyu!</h1>

	<div class="controls">
		<button id="click-trigger" class="button" type="button">Animate</button>
	</div>
</div>

@font-face {
	font-family: "Haikyuu";
	src: url("https://assets.codepen.io/209981/HaikyuuWithBallGX.ttf");
}

$orange: #e46f29;

html,
body {
	height: 100%;
}

body {
	display: flex;
	justify-content: center;
	align-content: center;
	background-image: url("https://assets.codepen.io/209981/dots-compressed.jpg");
	background-size: cover;
	background-color: $orange;
	background-blend-mode: color-dodge;
}

h1 {
	font-family: Haikyuu;
	text-transform: uppercase;
	font-size: 20vw;
	font-weight: 100;
	transform: rotate(-10deg);
	letter-spacing: -0.2rem;
	-webkit-text-fill-color: black;
	-webkit-text-stroke-width: 4px;
	-webkit-text-stroke-color: $orange;
}

.animation h1 {
	animation: fight 1.5s forwards ease-in-out;
}

@keyframes fight {
	0% {
		font-variation-settings: "wght" 100;
	}

	100% {
		font-variation-settings: "wght" 700;
	}
}

// Toggle Button for animation
$body-color: black;
$text-color: $orange;

.controls {
	position: absolute;
	bottom: 15px;
	left: 50%;
	transform: translateX(-50%);
	width: 190px;
	z-index: 100;
	display: block;
}

.button {
	border: 5px solid $text-color;
	padding: 15px;
	background: $body-color;
	color: $text-color;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	width: 100%;
	font-family: "Arial";
	cursor: pointer;
	letter-spacing: 0.0625rem;
	transition: all 250ms ease;

	&:hover {
		background: $orange;
		color: black;
		text-decoration: black wavy underline;
	}

	&:focus {
		transform: translate(0, 5px);
		background: black;
		color: $orange;
		outline: none;
	}
}

// Disable Animation
var button1 = document.getElementById("click-trigger");
var wrapper = document.getElementById("wrapper");

button1.addEventListener(
	"touchstart",
	function (e) {
		e.preventDefault();

		wrapper.classList.remove("animation");
		void wrapper.offsetWidth; // trigger a DOM reflow
		wrapper.classList.add("animation");
	},
	true
);

button1.addEventListener("click", function (e) {
	wrapper.classList.remove("animation");
	void wrapper.offsetWidth; // trigger a DOM reflow
	wrapper.classList.add("animation");
});