.cards
  %h1 Payment Card Swipes
  %h2 Swipe left through the cards
  .cards_inner
    .wrap
      .cards_inner__card.maestro
        .logo
      .cards_inner__card.paypal
        .logo
      .cards_inner__card.visa
        .logo
      .cards_inner__card.mastercard
        .logo
.points
  .points_point.first.active
  .points_point
  .points_point
  .points_point
      

@import url(https://fonts.googleapis.com/css?family=Nunito);
body{
  overflow:hidden;
  background: -webkit-linear-gradient(top, #5799db 0%,#3f8edd 100%);
  //background: -moz-linear-gradient(top, #5799db 0%,#3f8edd 100%);
  height:100vh;
}

.cards{
  width:400px;
  height:300px;
  position:absolute;
  left:0;
  right:0;
  top:50%;
  margin:auto;
  transform:translateY(-50%);
  h1{
    margin:0;
    font-size:24px;
    text-align:center;
    font-weight:500;
    color:white;
    font-family: 'Nunito', sans-serif;
  }
  h2{
    margin:0;
    font-size:14px;
    text-align:center;
    font-weight:200;
    color: #A4C9EF;
    font-family: 'Nunito', sans-serif;
  }
  &_inner{
    perspective:800px;
    position:relative;
    top:60px;
    .wrap{
      width: 220px;
      margin: 0 auto;
      position:relative;
      transform-style: preserve-3d;
    }
    .invalid{
      pointer-events:none;
      left:-180px !important;
      opacity:0;
      transition:all .23s;
    }
    .animate{
      transition:all .2s cubic-bezier(0.560, 2.150, 0.250, 0.715);
    }
    .card_in{
      opacity:0;
      transform:scale(1);
      margin-top:40px;
      animation: pop .6s .1s cubic-bezier(0.560, 1.750, 0.250, 0.715);
      right:0;
    }
    @keyframes pop{
      0%{margin-top:40px;opacity:0}
      100%{margin-top:0px;opacity:1}
      
    }
    .card_in_two{
      opacity:1;
      transform:scale(1);
      margin-top:40px;
      transition:all .2s cubic-bezier(0.560, 2.150, 0.250, 0.715);
      margin-top:0px;
    }
    &__card{
      transition:transform .2s cubic-bezier(0.560, 2.150, 0.250, 0.715);
      position:absolute;
      margin-top:0px;
      left:0;
      right:0;
       background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); 
      top:50%;
      margin:auto;
      width:220px;
      height:130px;
      background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); 
      border-radius:12px;
      box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.22);
      cursor:pointer;
      @for $i from 1 through 4{
        &:nth-of-type(#{$i}){
          top:(10px * $i);
          transform:translateZ(0px + ($i * 60) - 240px)
        }
      }
    }
  }
}
.maestro .logo{
  background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/MasterCard_logo.png/640px-MasterCard_logo.png')  
}
.paypal .logo{
  background:url('https://www.paypalobjects.com/webstatic/mktg/Logo/pp-logo-200px.png?01AD=3B28EURZY9Emi4KsrC-JAvZqhykcobygL70miwLcjbS3qGuX1m1ZgsQ&01RI=08D0AE0331EC9B2&01NA=');
  left: 58px;
  background-size: contain !important;
  top: 49px;
}
.logo{
  width: 100px;
  height: 70px;
  position: relative;
  background-repeat: no-repeat !important;
  left: 62px;
  background-size: contain !important;
  top: 29px;
}
.mastercard .logo{
  left: 73px;
  background-size: contain !important;
  top: 44px;
  width: 70px;
  height: 70px;
  background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Maestro_2016.svg/1200px-Maestro_2016.svg.png')
}
.visa .logo{
  left: 58px;
  background-size: contain !important;
  top: 45px; background:url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2000px-Visa_Inc._logo.svg.png')
}

.points{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  width: 100px;
  top: 50%;
  height: 0px;
  .active{
    background: #245484;
  }
  &_point{
    float:left;
    width:8px;
    display:inline-block;
    border-radius:10px;
    height:8px;
    background:#69AEF3;
    margin-right:4px;
    position:relative;
    top:156px;
    left:26px
  }
}

t = 53;
p = 0;
pm = $('.cards_inner__card').length;

$('.cards_inner__card').mousedown(function(){
  var ct = $(this).css('transform');
  var cts = ct.split(',')
  ctse = (cts[cts.length - 2] + 'px')
})

function on(){
  $('.cards_inner__card').draggable({
    start: function( event, ui ) {
      startPosition = ui.position.left;
    },
    drag:function(e, ui){
      if(ui.position.left > startPosition){
        ui.position.left = startPosition;
      }
      if(ui.position.left < -250){
        ui.position.left = -250;
      }
      x = ui.position.left;
      $(this).css('transform',' rotate(' + x/36 + 'deg)')
    },
    revert:function(valid) {
      if(x > 60 || x < - 60) {
        el = $(this)
        setTimeout(function(){
          el_class = el.attr('class').split(' ');
          el_class_end = el_class[1]
          el.addClass('invalid')
          if(p < 3){
            $('.points').find('.active').removeClass('active').next().addClass('active') 
            p++
          } else {
            $('.points').find('.active').removeClass('active')
            $('.points').find('.first').addClass('active') 
            p=0
          }
        },10)
        setTimeout(function(){
          $('.cards_inner__card').each(function(){
            $(this).addClass('animate');
            var ct = $(this).css('transform');
            var cts = ct.split(',')
            ctse = (parseInt(cts[cts.length - 2]) + 60 + 'px')
            $(this).css('transform','translateZ(' + ctse + ')');
          });
          $('.cards_inner .wrap').prepend('<div class="cards_inner__card ' + el_class_end + ' card_in"><div class="logo"></div></div>')
          el.remove();
          $('.cards_inner__card').removeClass('animate');
          on();
        },160);
        setTimeout(function(){
          $('.card_in').removeClass('card_in')
        },500);
      } else {
        $(this).css('transform','rotate(0deg)')
        return !valid;
      }
    },
    axis:'x',
    containment:'.cards_inner'
  });
  $('.cards_inner__card:nth-of-type(1)').draggable( 'disable' )
  $('.cards_inner__card:nth-of-type(2)').draggable( 'disable' )
  $('.cards_inner__card:nth-of-type(3)').draggable( 'disable' )
  $('.cards_inner__card:nth-of-type(4)').draggable( 'enable' )
}
on();