<div id="wrapper">
<h1 data-splitting>Fira Code</h1>
</div>

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

// Google API Fira Code...
h1 {
	font-family: 'Fira Code', mono-space;
	font-weight: 300;  
	font-size: 14vw;
	text-shadow: 2px -1px 20px rgba(0,0,0,0.3);
	text-transform: uppercase;
	margin: 0;
	color: #fff;
}




// Just for funzies and designs
.splitting .char {
	display: inline-block;	
}

.animation .splitting .char {
	animation-name: bounceLetters;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.64,.57,.67,1.53);
	animation-delay: calc(0.25s + var(--char-index) * 0.1s);
}

@keyframes bounceLetters {
	0% {
		font-weight: 300;
		transform: scale(1, 1) translateY(0);
	}
	10% {
		transform: scale(1.1, 0.9) translateY(0);
	}
	30% {
		transform: scale(0.9, 1.1) translateY(-20px);
	}
	50% {
		font-weight: 500;
		transform: scale(1.05, 0.95) translateY(0);
	}
	57% {
		transform: scale(1, 1) translateY(-7px);
	}
	64% {
		transform: scale(1, 1) translateY(0);
	}
	100% {
		font-weight: 300;
		transform: scale(1, 1) translateY(0);
	}
}


html, body {
	height: 100%;
}

body {
  background-color: #b94b9e;
  color: #fff;
	margin: 2rem;
	font-family: 'Fira Code', mono-space;
	font-weight: 300; 
}

#wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

// Toggle
$body-color: #e6e2df;
$text-color: #817b75;

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

.button {
	border: 1px solid $text-color;
	padding: 10px;
	background: $body-color;
	color: $text-color;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 300;
	width: 100%;
	font-family: 'Fira Code', mono-space;
	cursor: pointer;

	&:hover,
	&:focus {
		background: #fff;
	}
}

// Split the letters so I can animate them in
Splitting();

var wrapper = document.getElementById("wrapper");

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

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

		if (wrapper.classList.contains("animation")) {
			wrapper.classList.remove("animation");
			button1.textContent = "Start Animation";
		} else {
			wrapper.classList.add("forced");
			button1.textContent = "Stop Animation";
		}
	},
	true
);

button1.addEventListener("click", function (e) {
	if (wrapper.classList.contains("animation")) {
		wrapper.classList.remove("animation");
		button1.textContent = "Start Animation";
	} else {
		wrapper.classList.add("animation");
		button1.textContent = "Stop Animation";
	}
});