<section>
<i id="reset" class="fas fa-undo"></i>
<span class="progress"></span>
  <div class="wrap">
    <div class="card">
      <div class="carDone"><i class="fas fa-check"></i></div>
      <h2>Hold <span>Start</span> to continue</h2>
      <p>We count on you to get it right 😍</p>
      <div class="buttonWrap">
        <button><i class="fas fa-power-off"></i></button>
        <div class="circleffect"></div>
      </div>
    </div>
  </div>

</section>

/*
TTTTTTT  OOOOO  MM    MM   AAA   ZZZZZ KK  KK IIIII 
  TTT   OO   OO MMM  MMM  AAAAA     ZZ KK KK   III  
  TTT   OO   OO MM MM MM AA   AA   ZZ  KKKK    III  
  TTT   OO   OO MM    MM AAAAAAA  ZZ   KK KK   III  
  TTT    OOOO0  MM    MM AA   AA ZZZZZ KK  KK IIIII
*/

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

* {
  margin:0;
  padding:0;
  outline:none;
  list-style:none;
  text-decoration:none;
  box-sizing:border-box;
  color:#111;
  background: transparent;
  border:none;
}

body {
  background: #FFF;
  font-family: 'Montserrat', sans-serif;
}

h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

section {
  background: #E4E9EC;
  min-height: 100vh;
  padding: 3% 0;
  overflow: hidden;
  position: relative;
}

.wrap {
  position: relative;
  text-align: center;
  z-index: 2;
}

.card {
  display: inline-block;
  background: #e7ebee;
  padding: 168px 100px;
  border-radius: 40px;
  box-shadow: 20px 60px 80px -10px #BAC6D2;
  overflow: hidden;
  position: relative;
}

h2 {
  font-size:30px;
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 20px;
}

h2 span {
  color: #1ea1ff;
}

p {
  max-width: 200px;
  margin: 0 auto;
  margin-bottom: 60px;
  line-height: 1.6;
}


i {
  color: #1ea1ff;
  font-size: 24px;
  display: inline-block;
  position: relative;
}
i:before {
  position: relative;
  z-index: 4;
}
i:after {
  content:"\f011";
  position: absolute;
  z-index: 3;
  top: 10px;left: 8px;
  color: rgba(0,0,0,0.2);
  filter:blur(5px);
  transition: 0.2s all ease-in;
}


#reset {
  color: #fff;
  position: absolute;
  z-index: 4;
  display: inline-block;
  padding: 8px;
  top: 50px;right: 50px;
  cursor: pointer;
  animation: rotateBtn 1s infinite ease;
  animation-play-state: paused;
}
#reset:hover {
  animation-play-state: running;
}

@keyframes rotateBtn {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}



.buttonWrap {
  display: inline-block;
  position: relative;
}

button {
  display: inline-block;
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  position: relative;
  box-shadow: -15px -15px 20px rgb(255 255 255 / 70%), inset 10px 10px 20px rgb(255 255 255 / 80%), 10px 14px 30px rgb(0 0 0 / 12%), inset -6px -10px 18px rgb(0 0 0 / 12%);
  background: #e7ebee;
  cursor: pointer;
  transition: 0.2s all ease-in;
  z-index: 2;
  overflow: hidden;
}


.progress {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #1ea1ff;
  transform:translateY(calc(100% + 111px));
  transition: transform 0.1s linear, filter 0.3s ease-out;
}

.done .progress {
  filter: hue-rotate(-45deg);
}
.carDone {
  position: absolute;
  z-index: 3;
  background: #e7ebee;
  top: 0;left: 0;
  height: 100%;
  width: 100%;
  pointer-events:none;
  opacity: 0;
  transition: all 0.2s ease-out;
}
.done .carDone {
  opacity: 1;
  pointer-events:auto;
}
.carDone i {
  color: #00BB90;
  font-size:90px;
  position: relative;
  top: 50%;
  transform:translateY(-50%);
}
.carDone i:after {
  content:"\f00c";
}







.progress:after {
  content:"";
  background: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Calque_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%201600%20111%22%20style%3D%22enable-background%3Anew%200%200%201600%20111%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%231ea1ff%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M1600%2C34c-311%2C0-420.9-34.3-822-34C378%2C0%2C289%2C34%2C0%2C34v77h1600C1600%2C111%2C1600%2C63%2C1600%2C34z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
  background-repeat: repeat-x;
  position: absolute;
  z-index: 1;
  top: -110px;
  width: 6400px;
  height: 111px;
  -webkit-animation-name: wave;
  animation-name: wave;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-delay: -.125s;
  animation-delay: -.125s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: cubic-bezier(0.36, 0.45, 0.63, 0.53);
  animation-timing-function: cubic-bezier(0.36, 0.45, 0.63, 0.53);
}
@-webkit-keyframes wave {
  0% {
    -webkit-transform: translate3d(-1600px, 0, 0);
    transform: translate3d(-1600px, 0, 0)
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}




.circleffect {
  position: absolute;
  top: 0;left: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  box-shadow: -8px -5px 10px rgb(0 0 0 / 0%), inset 5px 5px 5px rgb(0 0 0 / 8%), 10px 14px 30px rgb(255 255 255 / 0%), inset -3px -5px 5px rgb(255 255 255 / 40%);
  transform:scale(0);
  transition: transform 0s ease-in, opacity 0s ease-in;
  opacity: 1;
}





.active button {
  line-height: 125px;
  background: rgba(0,0,0,0.01);
  box-shadow: -8px -5px 10px rgb(0 0 0 / 0%), inset 5px 5px 7px rgb(0 0 0 / 8%), 10px 14px 30px rgb(255 255 255 / 0%), inset -3px -5px 7px rgb(255 255 255 / 40%);
}

.active .circleffect {
  transform:scale(8);
  opacity: 0;
  transition: transform 0.4s ease-in, opacity 0.3s linear;
}

.active button i:after {
  opacity: 0;
}



@media screen (max-width:1024px){
  .card {
     padding: 35% 18%;
  }
}

let timeMove = 0;
let timeDown = '';

neumorph($('.buttonWrap'));

$('#reset').on('click',function(){
   reset();
});


function neumorph(selector){
  selector.on('mousedown', function(){
    selector.addClass('active');
    timeDown = setInterval(timeUp, 100);
  });
  
  
  selector.on('touchstart', function(){
    selector.addClass('active');
    timeDown = setInterval(timeUp, 100);
  });
  selector.on('mouseup', function(){
    selector.removeClass('active');
    stopTime();
  });
  
  selector.on('touchend', function(){
    selector.removeClass('active');
    stopTime();
  });
  
  $('button').on('mouseleave', function(){
    selector.removeClass('active');
    stopTime();
  });
}


function timeUp() {
  if(timeMove >= 110) {
    clearInterval(timeDown);
    $('body').addClass('done');
    console.log('stop');
  } else {
    timeMove = timeMove + 2;
    $('.progress').css('transform', 'translateY(calc(100% + 111px - '+timeMove+'%))');
    console.log(timeMove);
  }
}


function stopTime() {
  clearInterval(timeDown);
}


function reset() {
  clearInterval(timeDown);
  timeMove = 0;
  $('.progress').css('transform', 'translateY(calc(100% + 111px)');
  $('body').removeClass('done');
}