<div class="counter">
	<div class="nums">
		<span class="in">3</span>
		<span>2</span>
		<span>1</span>
		<span>0</span>
	</div>
	<h4>Get Ready</h4>
</div>
<div class="final">
	<h1>GO</h1>
	<button id="replay">replay</button>
</div>
<footer>
	<p>Created with <i class="fa fa-heart"></i> by <a target="_blank" href="https://florin-pop.com">Florin Pop</a></p>
</footer>

body {
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
	font-family: 'Roboto', sans-serif;
    margin: 0;
	height: 100vh;
}

.counter {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.counter.hide {
    transform: translate(-50%, -50%) scale(0);
    animation: hide .2s ease-out;
}

@keyframes hide {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
    }
}

.final {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
}

.final.show {
    transform: translate(-50%, -50%) scale(1);
    animation: show .3s ease-in;
}

@keyframes show {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }

    80% {
        transform: translate(-50%, -50%) scale(1.4);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

.nums {
	color: #3498db;
	position: relative;
	font-size: 50px;
	overflow: hidden;
	width: 250px;
	height: 50px;
}

.nums span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(120deg);
	transform-origin: bottom center;
}

.nums span.in {
    transform: translate(-50%, -50%) rotate(0deg);
	animation: goIn .5s ease-in-out;
}

.nums span.out {
	animation: goOut .5s ease-in-out;
}

@keyframes goIn {
	0% {
		transform: translate(-50%, -50%) rotate(120deg);
	}
	30% {
		transform: translate(-50%, -50%) rotate(-20deg);
	}

	60% {
		transform: translate(-50%, -50%) rotate(10deg);
	}

	90%, 100% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

}

@keyframes goOut {
	0%, 30% {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	60% {
		transform: translate(-50%, -50%) rotate(20deg);
	}

	100% {
		transform: translate(-50%, -50%) rotate(-120deg);
	}
}

h4 {
	font-size: 20px;
	margin: 5px;
	text-transform: uppercase;
}



footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	letter-spacing: 1px;
}

footer i {
	color: red;
}

footer a {
	color: #3C97BF;
	text-decoration: none;
}

const nums = document.querySelectorAll('.nums span');
const counter = document.querySelector('.counter');
const finalMessage = document.querySelector('.final');
const repl = document.getElementById('replay');

runAnimation();

function resetDOM() {
	counter.classList.remove('hide');
	finalMessage.classList.remove('show');
    
	nums.forEach(num => {
		num.classList.value = '';
	});

    nums[0].classList.add('in');
}

function runAnimation() {
	nums.forEach((num, idx) => {
		const penultimate = nums.length - 1;
		num.addEventListener('animationend', (e) => {
			if(e.animationName === 'goIn' && idx !== penultimate){
				num.classList.remove('in');
				num.classList.add('out');
			} else if (e.animationName === 'goOut' && num.nextElementSibling){
				num.nextElementSibling.classList.add('in');
			} else {
				counter.classList.add('hide');
				finalMessage.classList.add('show');
			}
		});
	});
}

repl.addEventListener('click', () => {
	resetDOM();
	runAnimation();
});