<div class="scene">
  <!--<div class="text">DO NOT TOUCH</div>-->
  <div class="sheep">
    <span class="top">
      <div class="body"></div>
      <div class="head">
        <div class="eye one"></div>
        <div class="eye two"></div>
        <div class="ear one"></div>
        <div class="ear two"></div>
      </div>
    </span>
      <div class="legs">
        <div class="leg"></div>
        <div class="leg"></div>
        <div class="leg"></div>
        <div class="leg"></div>
    </div>
  </div>
</div>
<span>i</span><span>n</span><span>c</span><span>&nbsp;</span><span>h</span><span>a</span><span>l</span><span>l</span><span>h</span><span>&nbsp;</span><span> e</span><span> d</span><span>i</span><span>k</span><span> o</span><span>m</span>
<span> a</span><span>b</span><span>r</span><span> o</span><span>u</span><span>k</span><span> e</span>

@import "compass/css3";


@import url(https://fonts.googleapis.com/css?family=Finger+Paint);

html,body{margin:0;padding:0;width:100%;height:100%;}
@keyframes bob{0%{top:0;}50%{top:0.2em;}}
body{
  background:#53bfe0;
  vertical-align:middle;
  text-align:center;
  transform: translate3d(0, 0, 0);
  
  &:before{
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em;
    }
}

.scene{
  display:inline-block;
  vertical-align:middle;
}

.text{
  color:white;
  font-size:2em;
  font-family:helvetica;
  font-weight:bold;
}

.sheep{
  display:inline-block;
  position:relative;
  font-size:1em;
  $skin:#211e21;
  *{
    transition:transform 0.3s;
  }
  .top{
    position:relative;
    top:0;
    animation:bob 1s infinite;
  }
  &:hover{
      .head{
        transform:rotate(0deg);
        .eye{
          width:1.25em;
          height:1.25em;
          &:before{
            right:30%;
          }
        }
      }
      .top{
        animation-play-state:paused
      }
    }
  .head{
    display:inline-block;
    width:5em;
    height:5em;
    border-radius:100%;
    background:$skin;
    vertical-align:middle;
    position:relative;
    top:1em;
    transform:rotate(30deg);
    &:before{
        content:'';
        display:inline-block;
        width:80%;
        height:50%;
        background:$skin;
        position:absolute;
        bottom:0;
        right:-10%;
        border-radius:50% 40%;
      }
    &:hover{
          .ear{
              &.one,&.two{transform:rotate(0deg);}
          }
        }
    .eye{
      display:inline-block;
      width:1em;
      height:1em;
      border-radius:100%;
      background:white;
      position:absolute;
      overflow:hidden;
      &:before{
          content:'';
          display:inline-block;
          background:black;
          width:50%;
          height:50%;
          border-radius:100%;
          position:absolute;
          right:10%;
          bottom:10%;
          transition:all 0.3s;
        }
      &.one{
        right:-2%;
        top:1.7em;
      }
      &.two{
        right:2.5em;
        top:1.7em;
      }
    }
    .ear{
        background:$skin;
        width:50%;
        height:30%;
        border-radius:100%;
        position:absolute;
        &.one{
          left:-10%;
          top:5%;
          transform:rotate(-30deg);
        }
        &.two{
          top:2%;
          right:-5%;
          transform:rotate(20deg);
        }
      }
  }
  .body{
    display:inline-block;
    width:7em;
    height:7em;
    border-radius:100%;
    background:white;
    position:relative;
    vertical-align:middle;
    margin-right:-3em;
  }
  .legs{
    display:inline-block;
    position:absolute;
    top:80%;
    left:10%;
    z-index:-1;
    .leg{
      display:inline-block;
      background:darken($skin,5%);
      width:0.5em;
      height:2.5em;
      margin:0.2em;
    }
  }
  &:before{
      content:'';
      display:inline-block;
      position:absolute;
      top:112%;
      width:100%;
      height:10%;
      border-radius:100%;
      background:rgba(black,0.4);
  }
}



span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  animation: smoky 5s both;
}

span:nth-child(even){
  animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform:
      translate3d(15rem,-8rem,0)
      rotate(-40deg)
      skewX(70deg)
      scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke; }
  to {
    transform:
      translate3d(18rem,-8rem,0)
      rotate(-40deg) 
      skewX(-70deg)
      scale(2);
     text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@for $item from 1 through 21 {
  span:nth-of-type(#{$item}){ 
    animation-delay: #{($item/10)}s; 
  }
}