<section>
<div class="top"><h1>Cut Off</h1></div>
<div class="runner"></div>
<div class="bottom"><h2>don't you dare cut me off!</h2></div>
</section>

<a href="#" id="reset" title="reset"></a>

@import "compass/css3";

$bg: #98D2D9;
$paper: #F5F4ED;

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

body {
  margin: 0;
  font-family: Lustria, serif;
  @include background(linear-gradient(left, adjust-hue(lighten($bg,10),10), $bg 50%, adjust-hue(lighten($bg,10),10)));
  overflow: hidden;
}
section {
  width: 500px;
  margin: 0 auto;
  position: relative;
  .top, .bottom {
    width: 100%;
    @include background(linear-gradient(left, rgba(#000,0.03), transparent, rgba(#000,0.03)), $paper);
    z-index: 0;
    box-shadow: 0 6px 20px 0 rgba(#000,0.1);
  }
  .runner {
    width: 100%;
    height: 20px;
    margin: 0 0 -20px;
    border-top: 1px dashed #000;
    position: relative;
    z-index: 12345;
  }
}

.ui-slider-handle {
  color: #000;
  position: relative;
  display: inline-block;
  outline: none;
  width:  20px;
  height: 20px;
  top: -13px;
  margin: 0 -10px;
  transition: opacity 0.2s linear 0.3s;
  &.ui-state-active:after {
    content: '\2701';
    top: -3px;
  }
  &:after {
    content: '\2702';
    font-size: 40px;
    margin: -12px;
    position: absolute;
  }
}

@for $i from 0 through 50 {
  .bottom[data-val="#{$i}"] {
		border-top-left-radius: $i*2% $i*0.4px;
    transform: rotate($i*-0.07deg);
    transform-origin: $i*2% top;
  }
}
.bottom[data-val="50"], .bottom[data-val="0"] {
  transition: margin-top 1s ease-in, transform 1s ease-in, background-color 0.5s ease, opacity 0.5s linear 0.5s;
}
.bottom[data-val="50"] {
  opacity: 0;
  margin-top: 300px;
	transform: rotate(-3.5deg) skew(30deg,-10deg) scaleX(0.8);
  background-color: desaturate(darken($paper,5),10);
}
.runner[data-val="50"] a {
  opacity: 0;
}

h1 {
  text-shadow: 0 0 25px #000;
  color: $paper;
  margin: 0;
  padding-top: 0.2em;
  font-weight: normal;
  font-size: 5em;
  text-align: center;
  line-height: 1.8em;
}
h2 {
  margin: 0;
  font-size: 1.5em;
  text-align: center;
  line-height: 3em;
  font-weight: normal;
  color: darken($bg,20);
}
#reset {
  position: absolute;
  display: block;
  left: 50%;
  margin-left: 300px;
  top: 20%;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: rgba(#000,0.1);
  box-shadow: inset 0 -1px 20px -10px #000;
  transition: background-color 0.1s linear;
  &:active {
  	background-color: rgba(#9f0,0.25);
  }
}

$(document).ready(function() {
  $('.runner').slider({
    value: 0,
    min: 0,
    max: 50,
    slide: function(e,ui) {chop(ui.value)}
  });
  function chop(val) {
    $('.bottom, .runner').attr('data-val', val);
  }
  $('#reset').on('click',function() {
    $('.runner').slider("value", 0);
    $('.bottom, .runner').attr('data-val', 0);
    return false;
  });

// demo on load
var start = setTimeout(function() {
var c = 0;
var interval = setInterval(function() {
  $('.runner').slider("value", c);
  $('.bottom, .runner').attr('data-val', c);
  c++;
  if(c > 40) {
    clearInterval(interval);
/*    var reset = setTimeout(function() {
    	$('#reset').click();
    }, 1000)
*/  }
}, 25);
}, 500)
  
});