.wrap
  
  .items
    - (1..12).each do |i|
      .item= i.even? ? "O" : "I"
    
  .header T CK

@import "compass/css3";

$color-bg: skyblue;
$color-text-active: darken($color-bg, 40%);
$color-text-faded: darken($color-bg, 8%);

$items-count : 12;
$wrap-size   : 20em;
$item-size   : 2em;
$half-item   : $item-size / 2;
$half-wrap   : $wrap-size / 2;

body,
html { min-width: 100%; }

html {
  background: skyblue;
  font: {
    family: monospace;
  }
  width: 100%;
}

.wrap {
  background: white;
  border-radius: 50% 50%;
  height: 20em;
  margin: 15em auto 0;
  position: relative;
  width: 20em;
  
  @include box-shadow(0 0 0 4em rgba(255, 255, 255, 0.6));
}

.header {
  background: lightblue;
  border-radius: 1em;
  color: $color-text-active;
  font-size: 4em;
  line-height: 1;
  margin-left: -0.5em;
  padding: 0.5em 0;
  position: absolute;
    top: -2.5em;
    left: 50%;
  text-align: center;
  width: 1em;
  word-wrap: break-word;
}

.items {  
  height: #{$wrap-size};
  margin: 0 auto;
  position: relative;
    z-index: 2;
  width: #{$wrap-size};

  transform: rotate(-60deg);
  
  animation: {
    name: ticktock;
    duration: 12s;
    iteration-count: infinite;
    
    // Something changed, and now you no longer need steps()
    //timing-function: steps(12), cubic-bezier(0,1,0.4,1);
    timing-function: cubic-bezier(0,1,0.4,1);
  }    
 
}


.item {
  color: $color-text-faded;
  display: block;
  font-size: 4em;
  line-height: 1;
  height: $item-size;
  margin: -$half-item;
  position: absolute;
    top:  50%; 
    left: 50%;
    z-index: 2;
  text-align: center;
  width:  $item-size;

  $angle: 360 / $items-count;
  $rotation: 0;

  @for $i from 1 to $items-count+1 {        
      $delay: $i - 1;
      &:nth-of-type(#{$i}) {
        animation-delay: #{$delay}s;
        @include transform(rotate(#{$rotation}deg) translate($half-wrap/4) rotate(90deg));    
      }
    $rotation: $rotation + $angle;
  }
  
  animation: {
    name: activate;
    duration: 12s;
    iteration-count: infinite;
    
    // Something changed, and now you no longer need steps()
    //timing-function: steps(12, end), cubic-bezier(0,1,0.4,1);
    timing-function: cubic-bezier(0,1,0.4,1);
  }
}



@keyframes ticktock {
  @for $i from 0 through 100 {
    #{$i * 8.33%} {
      $rotate: $i * 30;
      $rotate: $rotate + 60;
      transform: rotate(-#{$rotate}deg);
    }
  }
  to {
    transform: rotate(-60deg);
  }
}

@keyframes activate {
  0% { color: $color-text-active; }
  8% { color: $color-text-active; }
  11% { color: $color-text-faded; }
}