-for(var j = 0; j < 6; j++)
	.column
		-for(var i = 0; i < (j === 0 ? 3 : (10 - !(j % 2) * 4)); i++)
			.num=i
	-if(j % 2 === 1 && j < 5)
		.colon

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300');

$size: 86px;

body {
	text-align: center;
	background-color: hsl(210, 30%, 8%);
	color: hsla(210, 20%, 90%, 0.89);
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	overflow: hidden;
}

.column,
.colon {
	display: inline-block;
	vertical-align: top;
	font-size: $size;
	line-height: $size;
}

.column {
	transition: transform 300ms;
}

.colon {
	transition: transform 300ms;
	transform: translateY(calc(50vh - #{$size / 2}));
	
	&:after {
		content: ':';
	}
}

.num {
	transition: opacity 500ms, text-shadow 100ms;
		opacity: 0.025;
	
	&.visible {
		opacity: 1.0;
		text-shadow: 1px 1px 0px hsl(210, 50%, 40%);
	}
	&.close {
		opacity: 0.35;
	}
	&.far {
		opacity: 0.15;
	}
	&.distant {
		opacity: 0.1;
	}
}

let size = 86;
let columns = Array.from(document.getElementsByClassName('column'));
let d, c;
let classList = [ 'visible', 'close', 'far', 'far', 'distant', 'distant' ];
let use24HourClock = true;

function padClock(p, n) {
	return p + ('0' + n).slice(-2);
}

function getClock() {
	d = new Date();
	return [
			use24HourClock ? d.getHours() : (d.getHours() % 12 || 12),
			d.getMinutes(),
			d.getSeconds()
		]
		.reduce(padClock, '');
}

function getClass(n, i2) {
	return classList.find((class_, classIndex) => Math.abs(n - i2) === classIndex) || '';
}

let loop = setInterval(() => {
	c = getClock();

	columns.forEach((ele, i) => {
		let n = +c[i];
		let offset = -n * size;
		ele.style.transform = `translateY(calc(50vh + ${offset}px - ${size / 2}px))`;
		Array.from(ele.children).forEach((ele2, i2) => {
			ele2.className = 'num ' + getClass(n, i2);
		});
	});
}, 200 + Math.E * 10);