<div class="bump">
	<div class="bump-half">
		CO
	</div>
	<div class="bump-half bump-slide">
		<div class="bump-half-item" id="bump-swap">
			LLABORATE
		</div>
		<div class="bump-half-here">
			HERE
		</div>
	</div>
</div>

<div class="intro">Recreation from our trailer <a href="https://www.facebook.com/cohere.co/" target="_blank">video</a>.</div>

@import url('https://fonts.googleapis.com/css?family=Hind:500');

body {
	background-color: black;
	color: white;
  font-family: 'hind', sans-serif;
  
	a { color: white;}
}

.intro {
	position: absolute;
  width: 100%;
  bottom: 15px;
  text-align: center;
}

.bump {
	display: flex;
  width: 130px;
	margin: 40vh auto;
	font-size: 2em;
	letter-spacing:1.5px;
	&-half {
		margin: 0 4px;
		letter-spacing: 0.15em;
		animation: bump-shift 100ms 4.85s linear forwards;
		&-item {
			animation: bump-del 50ms 3.95s linear forwards;
			z-index: 10;
		}
		&-here {
			position: absolute;
			top: 0;
			color: white;
			opacity: 0;
			animation: bump-color 200ms 3.5s linear forwards;
			z-index: -1;
		}
	}
	&-slide {
		position: relative;
		color: black;
		transform-origin: left;
		transform: scale(0, 1);
		animation: bump-intro 6s 400ms cubic-bezier(0.86, 0, 0.07, 1) forwards;
		&:before {
			content: '';
			position: absolute;
			width: 100%; height: 2px;
			bottom: 0;
			padding: 0 4px;
			transform: translatex(-4px);
			background: white;
			z-index: -1;
			animation: bump-slide 1.75s 900ms cubic-bezier(0.86, 0, 0.07, 1) 2 forwards;
		}
	}
}

@keyframes bump-shift {
	0% { margin: 0 4px; }
	100% { margin: 0 -1px; }
}

@keyframes bump-color {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes bump-del {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes bump-intro {
	0% {
		transform: scale(0, 1);
	}
	10% {
		transform: scale(1, 1);
	}
	90% {
		transform: scale(1, 1);
	}
	100% {
		transform: scale(1, 1);
	}
}

@keyframes bump-slide {
	0% {
		height: 0;
	}
	40% {
		height: 100%;
		bottom: 0;
	}
	55% {
		height: 100%;
		bottom: 0;
	}
	99% {
		height: 0;
		bottom: 100%;
	}
	100% {
		height: 0;
		bottom: 100%;
	}
}

var slides = ['LLABORATE', 'CREATE', ''], i = 1;
var next = 0;

setTimeout(function() {
	var cap = setInterval(function() {
		next++
		i++
	 	document.getElementById("bump-swap").innerHTML = slides[next];
		if(i == slides.length){//All the words are displayed clear interval
        	clearInterval(cap);
        }
	}, 1750);
}, 900);