<div class='lock'></div>
<div class='concept-wrap' id='mainWrap'>
  <div class='tap'>
    <div class='wave'></div>
  </div>
  <div class='btn-wrap' id='btn'>
    <div class='btn-cnt' id='content'>
      <div class='cnt cnt-1'><p class='text'>Expert</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
      <div class='cnt cnt-2'><p class='text'>Hard</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
      <div class='cnt cnt-3'><p class='text'>Normal</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
      <div class='cnt cnt-4'><p class='text'>Easy</p>
        <i class='icon' data-feather="chevron-right"></i>
      </div>
    </div>
  </div>
</div>

<!-- References Dribbble / Twitter / Hicon Pack -->
<div class='cs-ref'>
  <a class='cs-dribbble' href="https://dribbble.com/shots/14106091-UI-Custom-Select-Tag" target='_blank'>
    <div id='svgDribbble'></div>
  </a>
  <a class='cs-twitter' target='_blank' href="https://twitter.com/CosWiSe">
    <div id='svgTwitter'></div>
  </a>
    <a class="cs-hicon" target="_new" href="https://hicon.cosm.ws">
    <div id='svgHicon'></div>
  </a>
</div>

// IMPORT
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700,900');

// VARIABLES 
// $canvasBg: #f7f7f7; Grey
$canvasBg: #f1f3f9; // Bright #d5dbed

$textC: #333333;
$col1: #ff8c69;
$col2: ff696c;
$col3: #1462ff;
$col4: #f0f1f5;

$col3s: #4a74c9;

$svgC: rgba(#929cd0, .8);
// $shadowC: #d1d4e1;
$shadowC: #d5dbed;
$shadowDef: 0 3px 20px -3px $shadowC;
$shadowDefTwo: 0 6px 30px -10px $shadowC;

// PLACEHOLDERS
%no-selection {
  // No selection
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;      
  user-select: none;    
}

// DEFAULT
html {
  display: flex;
  justify-content: center;
  align-items: center;
  background: $canvasBg;
  height: 100vh;
  font-family: 'Muli', Arial, sans-serif;
}

// SVGs
#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
  svg {
    display: block;
    width: 76px;
    height: 24px;
    fill: $svgC;
  }
}
#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
  svg {
    width: 24px;
    height: 24px;
    fill: $svgC;
  }
}
#hicon {
  position: fixed;
  display: block;
  left: 25px;
  bottom: -42px;
  svg {
    width: 78px;
    height: 78px;
    fill: $svgC;
  }
}

// NEW CODE HERE
// Variables
$sW: 200px;
$sH: 70px;

// Placeholder
%center {
  display: flex;
  justify-content: center;
  align-items: center;
}

%btn {
  width: $sW;
  height: $sH;
}


// Structure
.concept-wrap {
  @extend %btn;
  position: relative;
  cursor: pointer;
}

// Button
.btn-wrap {
  @extend %btn;
  @extend %no-selection;
  cursor: pointer;
  position: absolute;
  background: $col3;
  border-radius: 12px;
  box-shadow: 0 6px 30px -10px rgba($col3s, 1);
  overflow: hidden;
  transform: translateX(0);
}

// Content 
.btn-cnt {
  @extend %center;
  position: absolute;
  top: 0;
  right: 0;
  flex-direction: row;
  height: $sH;
  width: $sW*4;
  // transform: translateX(-200px);
  z-index: 9;
}

.cnt {
  @extend %center;
  @extend %btn;
  justify-content: space-around;
  box-sizing: border-box;
  padding: 0 25px;
  .text {
    text-align:left;
    font-size: 1.4em;
    margin-right: auto;
    color: #fff;
  }
  .icon {
    margin-top: 3px;
    color: #fff;
  }
}

// Tap
.tap {
  width: 140px;
  height: 140px;
  position: absolute;
  background: transparent;
  opacity: .4;
  top: calc(50% - 69px);
  right: -32px;
  border-radius: 50%;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
}

// Wave
.wave {
  width: 30px;
  height: 30px;
  background: lighten($col3, 10%);
  border-radius: 50%;
  opacity: 0;
}

.wave-act {
  animation: t-wave 599ms cubic-bezier(.77,.06,0,.99) forwards;
}

@keyframes t-wave {
  0% {
    width: 50px;
    height: 50px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  20% {
    width: 40px;
    height: 40px;
  }
  50% {
    opacity: .9;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    width: 140px;
    height: 140px;
  }
}

// Lock
.lock-on {
  @extend %btn;
  background: transparent;
  position: absolute;
  z-index: 11;
  cursor: pointer;
}

// ICONS CALLBACK
feather.replace();

// SVGs
$('#svgDribbble').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #dribbble');
$('#svgTwitter').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #twitter');
$('#svgHicon').load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/373860/references.html #hicon');

// NEW CODE HERE

// Variables
var btnSz = 200;
var c = 0;
var bezierEasing = 'cubic-bezier(.69,-0.49,0,1)';
var t1 = 299;
var t2 = 1198;

var bZ2 = 'cubic-bezier(.46,.56,0,.88)'

$('#mainWrap').on('click', function() {
  c++;
  console.log(c);
  
  // Lock
  $('.lock').addClass('lock-on');
  setTimeout(function() {
    $('.lock').removeClass('lock-on');
  }, 1200);
  
  // Wave
  $('.wave').addClass('wave-act');
  setTimeout(function() {
    $('.wave').removeClass('wave-act');
  }, 1000);

  // Move Button
  setTimeout(function() {
    $('#btn').transition({
      x: '+=10px'
    }, 289, bZ2, function() {
      $('#btn').transition({
        x: '0px'
      }, 289, bZ2);
    }); 
  }, 399);


  // Move Content
  setTimeout(function() {
    if (c <= 2) {
      $('#content').transition({
        x: '+=220px'
      }, t1, bezierEasing, function() {
        $('#content').transition({
          x: '-=20'
        }, 699, 'cubic-bezier(.25,.49,.2,1)');
      });

    } else if (c == 3) {
      $('#content').transition({
        x: '+=220px'
      }, t1, bezierEasing, function() {
        $('#content').transition({
          x: '-=20'
        }, 699, 'cubic-bezier(.25,.49,.2,1)');
      });
      setTimeout(function() {
        $('.cnt-1').css('order', '4');
        $('#content').transition({
          x: '0'
        }, 0);
      }, t2);
    } else if (c == 4) {
      $('#content').transition({
        x: '+=220px'
      }, t1, bezierEasing, function() {
        $('#content').transition({
          x: '-=20'
        }, 699, 'cubic-bezier(.25,.49,.2,1)');
      });
      setTimeout(function() {
        $('#content').transition({
          x: '0'
        }, 0);
        $('.cnt-1').css('order', '0');
      }, t2);
      c = 0;
    } 
  }, 399)


});