.gutter
  .heart
    %h2 0
  .inner
  
#wrap

.card.new
  %h2 Morgan Sweeney
  .title Ant Collector
  .desc Morgan has collected ants since they were six years old and now has many dozen ants but none in their pants.
  .actions
    %button.like like
    %button.trade.tradeCard trade
    %button.close close
  %svg{:viewbox => "0 0 100 100"}
    %path{:d => "m38.977 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"}
    %path{:d => "m60.477 59.074c0 2.75-4.125 2.75-4.125 0s4.125-2.75 4.125 0"}
    %path{:d => "m48.203 69.309c1.7344 0 3.1484-1.4141 3.1484-3.1484 0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.1836-0.96484 2.1484-2.1484 2.1484s-2.1484-0.96484-2.1484-2.1484c0-0.27734-0.22266-0.5-0.5-0.5-0.27734 0-0.5 0.22266-0.5 0.5 0 1.7344 1.4141 3.1484 3.1484 3.1484z"}
    %path{:d => "m35.492 24.371c0.42187-0.35156 0.48047-0.98438 0.125-1.4062-0.35156-0.42188-0.98438-0.48438-1.4062-0.125-5.1602 4.3047-16.422 17.078-9.5312 42.562 0.21484 0.79688 0.85547 1.4062 1.6641 1.582 0.15625 0.035156 0.31641 0.050781 0.47266 0.050781 0.62891 0 1.2344-0.27344 1.6445-0.76562 0.82812-0.98828 2.0039-1.5391 2.793-1.8203 0.56641 1.6055 1.4766 3.3594 2.9727 4.9414 2.2852 2.4219 5.4336 3.9453 9.3867 4.5547-3.6055 4.5-3.8047 10.219-3.8086 10.484-0.011719 0.55078 0.42187 1.0078 0.97656 1.0234h0.023438c0.53906 0 0.98437-0.42969 1-0.97266 0-0.054688 0.17187-4.8711 2.9805-8.7773 0.63281 1.2852 1.7266 2.5 3.4141 2.5 1.7109 0 2.7578-1.2695 3.3398-2.6172 2.8867 3.9258 3.0586 8.8359 3.0586 8.8906 0.015625 0.54297 0.46094 0.97266 1 0.97266h0.023438c0.55078-0.015625 0.98828-0.47266 0.97656-1.0234-0.007812-0.26953-0.20703-6.0938-3.9141-10.613 7.0781-1.3086 10.406-5.4219 11.969-8.9766 1.0508 0.98828 2.75 2.1992 4.793 2.1992 0.078126 0 0.15625 0 0.23828-0.003906 0.47266-0.023438 1.5781-0.074219 3.4219-4.4219 1.1172-2.6406 2.1406-6.0117 2.8711-9.4922 4.8281-22.945-4.7852-30.457-9.1445-32.621-12.316-6.1172-22.195-3.6055-28.312-0.42188-0.48828 0.25391-0.67969 0.85938-0.42578 1.3477s0.85938 0.67969 1.3477 0.42578c5.7031-2.9688 14.934-5.3047 26.5 0.4375 7.1875 3.5703 9 11.586 9.2539 17.684 0.49609 11.93-4.2617 23.91-5.7344 25.062h-0.015626c-1.832 0-3.4102-1.5742-4.0352-2.2852 0.28906-0.99609 0.44531-1.8672 0.52734-2.5117 0.62891 0.16797 1.2812 0.27344 1.9727 0.27344 0.55469 0 1-0.44922 1-1 0-0.55078-0.44531-1-1-1-7.3203 0-10.703-13.941-10.734-14.082-0.097656-0.40625-0.4375-0.71094-0.85156-0.76172-0.43359-0.050781-0.82031 0.16406-1.0117 0.53906-1.8984 3.7188-1.4297 6.7539-0.67969 8.668-6.2383-2.2852-8.9766-8.6914-9.0078-8.7617-0.17969-0.43359-0.62891-0.68359-1.1016-0.60156-0.46094 0.082032-0.80469 0.47266-0.82422 0.94141-0.14062 3.3359 0.67188 5.75 1.5 7.3164-8.3125-2.4297-10.105-11.457-10.184-11.875-0.097656-0.51562-0.57422-0.86328-1.0898-0.8125-0.51953 0.054687-0.90625 0.50391-0.89062 1.0234 0.41406 13.465-1.8516 17.766-3.2383 19.133-0.66406 0.65625-1.1992 0.67188-1.2383 0.67188-0.53906-0.050781-1.0156 0.31641-1.0938 0.85156-0.078125 0.54688 0.29688 1.0547 0.84375 1.1328 0.03125 0.003906 0.11328 0.015625 0.23828 0.015625 0.36719 0 1.1016-0.09375 1.9414-0.66406 0.050781 0.38672 0.125 0.81641 0.21875 1.2656-1.0273 0.35156-2.6211 1.0781-3.7812 2.4648-0.015625 0.019532-0.054687 0.066406-0.15625 0.046875-0.039062-0.007812-0.13281-0.039062-0.16406-0.15234-2.1875-8.1094-5.7148-28.309 8.8867-40.496zm12.711 51.828c-1.0039 0-1.5898-1.207-1.8672-2.0117 0.48047 0.023438 0.95703 0.050781 1.4531 0.050781 0.74219 0 1.4453-0.035156 2.1289-0.082031-0.24219 0.83594-0.76172 2.043-1.7148 2.043zm-13.148-30.664c1.9531 3.6211 5.6367 7.9102 12.305 8.6992 0.43359 0.046875 0.83984-0.18359 1.0234-0.57422 0.18359-0.39062 0.089844-0.85938-0.22656-1.1523-0.074219-0.070312-1.2734-1.2227-1.9688-3.6367 2 2.6094 5.3359 5.6836 10.305 6.5664 0.42187 0.070312 0.83594-0.125 1.0469-0.49219 0.21094-0.36719 0.16406-0.82812-0.11719-1.1484-0.023437-0.027344-1.9414-2.2969-1.2891-5.8906 1.2227 3.5508 3.7461 9.2227 7.8945 11.551-0.03125 0.55859-0.14844 1.668-0.55078 3.0156-0.085937 0.13672-0.125 0.28516-0.13672 0.44531-1.3008 3.8906-5.0039 9.3281-15.547 9.3281-5.375 0-9.4414-1.418-12.086-4.2109-3.5664-3.7656-3.332-8.8477-3.332-8.8984v-0.011719c1.5898-2.7227 2.5-7.3203 2.6797-13.59z"}

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

$b: #0192ff;
$db: #024a75;
$b2: #0061e5;
$w: #eeeceb;
$y: #ffd200;
$p: #ffd9d4;
$t: transparent;

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow:hidden;
  background: $b;
  &.finish{
    .gutter{
      .heart{
        transform:scale(0);
      }
      &:before{
        transform:translateX(-50%) scale(1);
      }
      .inner{
        h4{
          animation:slideDown 0.5s cubic-bezier(1,0,0,1) 1 reverse;
        }
      }
    }
  }
  &.noClick{
    .card{
      pointer-events:none;
    }
  }
  &.inactive{
    #wrap{
      .card{
        @for $i from 1 through 5{
          &:nth-of-type(#{$i}){
            transform: translateX(-50%) translateY(-50%) rotate(#{($i * 5) - 15}deg);
            box-shadow:0 20px 20px -10px rgba(0,0,0,0.25);
            button{
              display:none;
            }
            &:hover{
              transform: translateX(-50%) translateY(-75%) rotate(#{($i * 5) - 15}deg);
            }
          }
        }
      }
    }
    .card{
      button.close{
        display:block;
      }
    }
    .new button.like, &:not(.liked) button.like{
      pointer-events:none;
      position:relative;
      background:rgba(255,255,255,0.25);
      &:before{
        content:'';
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        background:repeating-linear-gradient(45deg, $db, $db 2px, $t 2px, $t 5px);
        box-shadow:inset 0 0 0 2px $db;
      }
    }
  }
  &:before{
    content:'';
    position:absolute;
    width:75vw;
    height:75vw;
    min-width:600px;
    min-height:600px;
    border-radius:100%;
    background:radial-gradient(circle at center, $y, $y 2px, $t 2px, $t 20px);
    background-size:20px 20px;
    bottom:-50%;
    left:50%;
    transform:translateX(-50%);
  }
}
.gutter{
  position:absolute;
  width:100vw;
  height:auto;
  min-height:50px;
  top:0;
  left:0;
  box-shadow:0 0 0 1px;
  padding:0 20px;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  box-sizing:border-box;
  background:#fff;
  z-index:999;
  &:before{
    content:'Your Cards';
    position:absolute;
    left:50%;
    top:100%;
    margin-top:1rem;
    font-size:3rem;
    font-family:"Grenze";
    transform:translateX(-50%) scale(0);
    color:$y;
    transition:0.3s ease-in-out;
  }
  .inner{
    flex-grow:1;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    padding:0 60px;
    h4{
      margin:10px;
      font-size:14px;
      padding:5px 10px;
      border-radius:50px;
      background:$w;
      font-weight:100;
      animation:slideDown 0.5s cubic-bezier(1,0,0,1) 1 forwards;
      animation-delay:0.75s;
      transform:translateY(-100px);
      position:relative;
      cursor:default;
      z-index:9;
      transition:0.2s ease-in-out;
      &.remove{
        animation:remove 0.2s ease-in-out;
        .card{
          display:none;
        }
        @keyframes remove{
          from{
            transform:translateY(0px) scaleX(1);
          }
          to{
            transform:translateY(0px) scaleX(0);
          }
        }
      }
      .close{
        position:absolute;
        display:flex;
        justify-content:center;
        align-items:center;
        background:$y;
        box-shadow:0 0 0 1px $db;
        width:12.5px;
        height:12.5px;
        border-radius:100%;
        font-size:0.65rem;
        left:7.5px;
        top:50%;
        transform:translateY(-50%) scale(0);
        transition:0.2s ease-in-out;
        transition-delay:0s;
        cursor:pointer;
      }
      &:hover{
        padding-left:25px;
        .close{
          transition-delay:0.2s;
          transform:translateY(-50%) scale(1);
        }
        .liked{
          transform:translateX(-50%) scale(0.5);
          z-index:10;
        }
      }
      @keyframes slideDown{
        to{
          transform:translateY(0);
        }
      }
    }
  }
}
.heart{
  position:absolute;
  top:15px;
  left:15px;
  width:20px;
  height:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  transform:rotate(45deg);
  background:$p;
  margin-right:30px;
  transition:0.3s ease-in-out;
  &:before, &:after{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:inherit;
    border-radius:100%;
    left:0;
    top:-50%;
  }
  &:after{
    top:0;
    left:-50%;
  }
  h2{
    margin:0;
    transform:translateX(-2px) translateY(-2px) rotate(-45deg);
    font-size:14px;
    color:$b;
    position:relative;
    z-index:2;
  }
}
.card {
  background: $db;
  border-radius: 4px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
  max-width: 300px;
  display: flex;
  flex-direction: column;
  width:100%;
  min-height:200px;
  position:absolute;
  left:50%;
  top:50%;
  perspective:1000px;
  transform:translateX(-50%) translateY(-50%);
  transform-style:preserve-3d;
  transition:transform 0.3s cubic-bezier(1,0,0,1);
  z-index:2;
  transform-origin:50% 500%;
  min-height:400px;
  box-shadow:0 10px 0 -5px darken($db, 5%), 0 10px 0 -4px #222, 0 20px 0 -10px darken($db, 10%), 0 20px 0 -9px #222;
  &.remove{
    pointer-events:none;
    transform:translateX(-50%) translateY(-50%) scale(0) !important;
    transform-origin:50% 50%;
  }
  &.cardStyle1{
    background: $p;
    &:before{
      background:$db;
    }
    *, .title{
      color:$db;
    }
  }
  &.cardStyle2{
    background: $w;
    &:before{
      background:$y;
    }
    img, svg{
      filter:none;
      opacity:0.75;
    }
    *, .title{
      color:$b;
    }
  }
  &:before{
    content:'';
    position:absolute;
    width:150px;
    height:150px;
    background:$b2;
    border-radius:100%;
    left:calc(50% - 75px);
    top:95px;
    z-index:0;
  }
  h2{
    font-family:"Grenze";
  }
  &.new{
    box-shadow:0 10px 0 -5px darken($db, 5%), 0 10px 0 -4px #222, 0 20px 0 -10px darken($db, 10%), 0 20px 0 -9px #222;
  }
  &.liked{
    button.close{
      display:none;
      opacity:0;
    }
  }
  &.liked.tooltip{
    animation:moveUp 0.75s cubic-bezier(1,0,0,1) 1 forwards;
    animation-delay:0.5s;
    @keyframes moveUp{
      from{
        transform:translateX(-50%) translateY(-50%) scale(1);
      }
      to{
        transform:translateX(-50%) translateY(-200vh) scale(0.75);
        box-shadow:0 0px 0 -5px darken($db, 5%), 0 0px 0 -4px #222, 0 0px 0 -10px darken($db, 10%), 0 0px 0 -9px #222;
      }
    }
  }
  &.liked:not(.tooltip){
    position: absolute;
    min-height:0px;
    background:#fff;
    height:auto;
    width:400px;
    left: 50%;
    height:auto;
    top: calc(100% + 25px);
    transform: translateX(-50%) scale(0);
    transform-origin: top;
    transition:0.2s cubic-bezier(1,0,0,1);
    box-shadow:0 10px 20px -5px rgba(0,0,0,0.25);
    z-index:999;
    padding:30px;
    display:flex;
    align-items:center;
    &:before{
      display:none;
    }
    img, svg{
      filter:none;
      opacity:0.5;
    }
    img{
      margin-bottom:25px;
    }
    .title:before{
      display:none;
    }
    *{
      color:$db;
      line-height:1;
    }
    .desc{
      display:none;
    }
    *{
      text-align:center;
      border:none;
    }
    &:after{
      content:'';
      position:absolute;
      top:-20px;
      left:calc(50% - 20px);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 20px 20px 20px;
      border-color: transparent transparent #fff transparent;
      border-radius:0px;
    }
    .actions{
      display:none;
    }
  }
  &:not(.new):not(.liked):not(.tooltip){
    animation:rotateOut 0.75s cubic-bezier(1,0,0,1) 1 forwards;
    animation-delay:0.5s;
    &.rightSide{
      animation:rotateOut2 0.75s cubic-bezier(1,0,0,1) 1 forwards;
    animation-delay:0.5s;
    }
    @keyframes rotateOut2{
      0%{
        transform:translateX(-50%) translateY(-50%);
      }
      50%{
        transform:translateX(-50%) translateY(-50%) rotate(15deg);
        box-shadow:0 0px 0 -5px darken($db, 5%), 0 0px 0 -4px #222, 0 0px 0 -10px darken($db, 10%), 0 0px 0 -9px #222;
        filter:brightness(1);
      }
      100%{
        transform:translateX(-50%) translateY(-50%);
        z-index:-1;
        box-shadow:0 0px 0 -5px #fff, 0 0px 0 -4px #ccc, 0 0px 0 -10px #fff, 0 0px 0 -9px #ccc;
        filter:brightness(0.75);
      }
    }
    @keyframes rotateOut{
      0%{
        transform:translateX(-50%) translateY(-50%);
      }
      50%{
        transform:translateX(-50%) translateY(-50%) rotate(-15deg);
        box-shadow:0 0px 0 -5px #fff, 0 0px 0 -4px #ccc, 0 0px 0 -10px #fff, 0 0px 0 -9px #ccc;
        filter:brightness(1);
      }
      100%{
        transform:translateX(-50%) translateY(-50%);
        box-shadow:0 0px 0 -5px #fff, 0 0px 0 -4px #ccc, 0 0px 0 -10px #fff, 0 0px 0 -9px #ccc;
        z-index:-1;
        filter:brightness(0.75);
      }
    }
  }
  &.new{
    transform:translateX(-50%) translateY(-50%);
    z-index:1;
    animation:fadeIn 0.5s ease-in-out 1 forwards;
    opacity:0;
    .title{
      &:before{
        animation:scaleIn 0.5s ease-in-out 1 forwards;
        transform:scaleX(0);
        animation-delay:1s;
        @keyframes scaleIn{
          from{
            transform:scaleX(0);
          }
          to{
            transform:scaleX(1);
          }
        }
      }
    }
    @keyframes fadeIn{
      50%{
        opacity:0;
      }
      100%{
        opacity:1;
      }
    }
  }
}
.card h2 {
  margin: 0;
  padding: 0.25rem 1rem;
  font-size:2rem;
  color:$w;
}
.card .title {
  padding: 0.45rem 1rem 0.25rem;
  position:relative;
  color:$w;
  text-transform:uppercase;
  font-size:0.75rem;
  letter-spacing:2px;
  &:before{
    content:'';
    width:50px;
    top:-0.35rem;
    left:1rem;
    height:5px;
    background:$y;
    position:absolute;
    border-radius:50px;
    transition:0.3s ease-in-out;
    transform-origin:left;
  }
}
.card .desc {
  padding: 0.5rem 1.5rem;
  line-height:1.5;
  order: 99;
  color:$w;
  font-size:0.85rem;
}
.card .actions {
  order: 100;
  padding: 1rem 1rem 0;
  display:flex;
  justify-content:space-around;
  button{
    background:transparent;
    box-shadow: 0 0 0 1px $db;
    padding:10px;
    overflow:hidden;
    border:0px;
    text-transform:uppercase;
    letter-spacing:2px;
    width:45%;
    color:$db;
    cursor:pointer;
    outline:none;
    transition:0.3s ease-in-out;
    background:$w;
    font-weight:900;
    &.close{
      display:none;
      position:absolute;
      top:-5px;
      right:-5px;
      width:20px;
      height:20px;
      padding:0;
      font-size:0;
      background:$y;
      border:none;
      border-radius:100%;
      &:before{
        content:'X';
        color:$db;
        font-size:14px;
        position:absolute;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        z-index:2;
        margin-left:1.5px;
        transition:0.3s ease-in-out;
      }
    }
    &:hover{
      color:$w;
      background:$b;
      outline:none;
      &:before{
        color:$w;
      }
    }
  }
}
.card svg{
  width: 150px;
  height: 150px;
  margin: 0 auto;
  filter:invert(1);
}

.card svg, .card img{
  z-index:3;
  position:relative;
  margin-top:20px;
}

.card img{
  width:100px;
  height:100px;
  margin:40px auto 75px;
  filter:invert(1);
} 

var cardCount = 0;
var likedCards = 0;
var styleCount = 0;

$("body").on("click", ".trade", function(){
    cardCount++;
    newCard();
    if(cardCount % 2 == 0){
      $(".new").removeClass("rightSide");
    }
});

$("body").on("click", ".like", function(){
    likedCards++;
    if (likedCards == 5){
      $("body").addClass("inactive");
    };
    newCard();    
 $(".card").not(".liked").not(".new").addClass("tooltip");
    $(".card").not(".new").addClass("liked");
    var newLike = $(".card.tooltip h2").text();
  console.log(newLike);
    $(".gutter .inner").append("<h4 class='newLike'><span class='close'>X</span>"+newLike+"</h4>");
    $(".heart h2").html(likedCards);
    setTimeout(function(){
      $(".tooltip").appendTo(".newLike")
      $(".tooltip").removeClass("tooltip");
      $(".newLike").removeClass("newLike");
    }, 1500);
  
});

$("body").on("click", "h4 .close", function(){
  $(this).parent().addClass("remove");
  setTimeout(function(){
    $(".remove").remove();
   }, 500);
  likedCards--;
  $(".heart h2").html(likedCards);
  if (likedCards < 5){
      $("body").removeClass("inactive");
    };
});

$("body").on("click", "button.close", function(){
  $(this).parent().parent().addClass("remove");
  $("body").addClass("finish");
  $('.gutter h4 .card').each(function(index) {
        $(this).removeClass("liked").addClass("new").appendTo("#wrap");
    });
});

function newCard(){
  styleCount++;
  if (styleCount > 3){
    styleCount = 1;
  }
  var randomName = faker.name.findName().substr(0, 15);
  var randomTitle = faker.commerce.productName();
  var randomDesc = faker.commerce.productName();
  $("body").addClass("noClick");
    setTimeout(function(){
      $(".card").not(".new").not(".liked").remove();
      $("body").removeClass("noClick");
    }, 1500);
  $(".new").removeClass("new");  
  $("body").append("<div class='card new rightSide cardStyle"+styleCount+"'></div>");
  $(".card.new").append("<h2>"+randomName+"</h2><div class='title'>"+randomTitle+"</div><div class='actions'><button class='like'>like</button><button class='trade'>trade</button><button class='close'>close</button></div><img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/user"+(Math.floor(Math.random() * 29)+1)+".svg'>");
};