-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);