* {
  @include box-sizing(border-box);
  
  margin: 0;
  padding: 0;
}

body {
  background: #252122;
}

.scene {
  @include border-radius(50%);
  @include box-shadow(inset -10px -10px 0 #bebaba);
  
  position: relative;
  background: #ffffff;
  margin: 50px auto;
  
  width: 160px;
  height: 160px;
  
  &:before,
  &:after {
    @include border-radius(50%);
    
    content: " ";
    position: absolute;
    background: #bebaba;
  }
  
  &:before {
    top: 56px;
    left: 26px;
    
    width: 16px;
    height: 16px;
  }
  
  &:after {
    top: 10px;
    left: 66px;
    
    width: 26px;
    height: 26px;
  }
  
  .spaceship {
    position: absolute;
    overflow: hidden;
    
    top: 18px;
    left: 58px;
    
    width: 86px;
    height: 86px;
    
    &:before {
      @include transform-origin(top center 0);
      @include rotateZ(45deg);
      
      content: " ";
      position: absolute;
      background: #252122;
      z-index: 0;
      
      top: 43px;
      left: 12px;
      
      width: 62px;
      height: 27px;
    }
    
    &:after {
      @include transform-origin(top center 0);
      @include rotateZ(45deg);
      @include border-top-radius(30px);
      
      content: " ";
      position: absolute;
      background: #ffffff;
      z-index: 1;
      
      top: 48px;
      left: 10px;
      
      width: 55px;
      height: 20px;
    }
    
    u {
       @include border-radius(50%);
      
      position: absolute;
      background: #252122;
      border: solid 2px #ffffff;
      z-index: 10;
      
      top: 15px;
      right: 15px;
      
      width: 20px;
      height: 20px;
    }
    
    i {
      @include transform-origin(top right 0);
      @include rotateZ(45deg);
      
      position: absolute;
      overflow: hidden;
      z-index: 2;
      
      top: 0;
      right: 0;
      
      width: 40px;
      height: 91px;
      
      &:before {
        @include border-left-radius(100% 50%);
        
        content: " ";
        position: absolute;
        background: #ffffff;
        
        top: 0;
        right: -5px;
        
        width: 26px;
        height: 100%;
      }
      
      &:after {
        content: " ";
        position: absolute;
        z-index: -1;
        
        top: 44px;
        left: 11px;
        
        width: 0;
        height: 0;
        
        border-style: solid;
        border-color: transparent #252122 transparent transparent;
        border-width: 18px 10px 0 0;
      }
    }
    
    b {
      @include transform-origin(top left 0);
      @include rotateZ(45deg);
      
      position: absolute;
      overflow: hidden;
      z-index: 3;
      
      top: 0;
      left: 100%;
      
      width: 40px;
      height: 91px;
      
      &:before {
        @include border-right-radius(100% 50%);
        
        content: " ";
        position: absolute;
        background: #252122;
        
        top: 0;
        left: -5px;
        
        width: 26px;
        height: 100%;
      }
      
      &:after {
        content: " ";
        position: absolute;
        
        top: 44px;
        right: 11px;
        
        width: 0;
        height: 0;
        
        border-style: solid;
        border-color: transparent transparent transparent #252122;
        border-width: 18px 0 0 10px;
      }
    }
  }
  
  .smoke-trail {
    @include transform-origin(top center 0);
    @include rotateZ(45deg);

    position: absolute;
    background: #252122;

    top: 80px;
    left: 77px;
    
    width: 10px;
    height: 38px;
      
    &:before {
      @include animation(flame-animation .2s linear infinite);
      
      content: " ";
      position: absolute;
      
      top: 0;
      left: -1px;
      
      width: 0;
      height: 0;
      
      border-style: solid;
      border-color: #ffffff transparent transparent transparent;
      border-width: 16px 6px 0 6px;
    }
      
    &:after {
      content: " ";
      position: absolute;
      
      top: 0;
      left: 1px;
      
      width: 0;
      height: 0;
      
      border-style: solid;
      border-color: #252122 transparent transparent transparent;
      border-width: 12px 4px 0 4px;
    }
    
    > div {
      @include animation(smoke-animation .3s linear infinite alternate-reverse);
      @include border-radius(50%);
      
      position: absolute;
      background: #252122;
    }
    
    .smoke-0 {
      @include animation(none);
      
      top: 35px;
      left: -45px;
      
      width: 100px;
      height: 100px;
    }
    
    .smoke-1 {
      @include animation-delay(.1s);
      
      top: 32px;
      left: 2px;
      
      width: 22px;
      height: 22px;
    }
    
    .smoke-2 {
      @include animation-delay(.26s);
      
      top: 37px;
      left: 8px;
      
      width: 42px;
      height: 42px;
    }
    
    .smoke-3 {
      @include animation-delay(.25s);
      
      top: 45px;
      left: 31px ;
      
      width: 42px;
      height: 42px;
    }
    
    .smoke-4 {
      @include animation-delay(.19s);
      
      top: 32px;
      right: 2px;
      
      width: 22px;
      height: 22px;
    }
    
    .smoke-5 {
      @include animation-delay(.03s);
      
      top: 37px;
      right: 8px;
      
      width: 42px;
      height: 42px;
    }
    
    .smoke-6 {
      @include animation-delay(.18s);
      
      top: 45px;
      right: 31px;
      
      width: 42px;
      height: 42px;
    }
    
    .smoke-7 {
      @include animation-delay(.18s);
      
      top: 55px;
      right: 11px;
      
      width: 26px;
      height: 26px;
      
      border-top: solid 4px #ffffff;
    }
    
    .smoke-8 {
      @include animation-delay(.13s);
      
      top: 46px;
      left: 20px;
      
      width: 22px;
      height: 22px;
      
      border-top: solid 4px #ffffff;
    }
    
    .smoke-9 {
      @include animation-delay(.8s);
      
      top: 55px;
      left: 31px;
      
      width: 26px;
      height: 26px;
      
      border-top: solid 4px #ffffff;
    }
  }
}

@include keyframes(flame-animation) {
  100% {
    border-top-width: 18px;
  }
}

@include keyframes(smoke-animation) {
  0% {
    @include scale(.95);
  }
  
  100% {
    @include scale(1);
  }
}