.card
  .card__shadow
  .card__container
    .card__front
      a(href="https://myscreate.com" target="_blank")
        img.logo(src="https://myscreate.com/wp-content/themes/mycreate/common/img/sideLogo.svg" alt="logo" title="Go to Website")
      .introBtn
        p
          | introduction
      .prof
        p.profession
          | - WEB DESIGN -
        p.name
          | ma-ya's CREATE ©︎
      .icons
        a(href="https://codepen.io/mycreatesite/" target="_blank")
          i.fab.fa-codepen
        a(href="https://twitter.com/hello_myscreate" target="_blank")
          i.fab.fa-twitter
    .card__back
      p.title
        | introduction
      p.desc
        | 初めまして。東京・神奈川を拠点とするWEBデザイナー、ma-ya’s CREATE［まーやずくりえいと］です。趣味の延長でWEBデザイン活動を続けること早10年弱。WEBから印刷物まで、やれそうなことなら何でも挑戦させて貰っています。シンプルでスマートな中にほんのりとポップさを感じるデザインを基本とし、ご要望に応じてダイナミックな表現や異なるテイストを出せるように日々奮闘しています。
      .backBtn
        p
          | back→

@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p|Oswald:500');
$logoW : 85px;
$logoH : $logoW * (7/17);

* {
  margin : 0;
  padding : 0;
  box-sizing : border-box;
}

html,body {
  padding : 1em;
  height : 100%;
  font-family: 'Oswald','M PLUS 1p',sans-serif;
  letter-spacing : 1px;
  background: linear-gradient(to top,#fff, #bfbfbf);
}

.card {
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50%,-50%);
  width : 250px;
  height : 400px;
  .card__container {
    width : 100%;
    height : 100%;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    transform : rotate(-30deg);
    transition : transform .4s ease-out;
  }
}

.card__front,.card__back {
  z-index: 0;//overflow:hidden doesn't works transformed elem
  outline: 1px solid transparent;//firefox anti-jag
  position : absolute;
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  border-radius : 3px;
  overflow : hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition : transform .4s ease-out;
}

.card__front {
  background : #fff;
  .logo,.introBtn {
    display : block;
    position : absolute;
    left : 50%;
    transform : translate(-50%,-50%);
  }
  .logo {
    top : 48%;
    width : $logoW;
    height : $logoH;
    transition : opacity .3s;
    &:hover {
      opacity : .5;
    }
  }
  .introBtn {
    top : 60%;
    padding : .4em;
    color : #333;
    font-size : .7em;
    border : 1px solid #333;
    border-radius : 2px;
    cursor : pointer;
    opacity : 0;
    transition : opacity .3s .3s ease-in-out;
  }
  .prof {
    position : absolute;
    left : -15%;
    top : -30%;
    color : #333;
    text-align : left;
    transform : rotate(90deg);
    transition : top .4s ease-out;
    .profession {
      font-size : .6em;
      color : #4aa8b5;
    }
  }
  .icons {
    position : absolute;
    bottom : -5%;
    width : 100%;
    height : 20%;
    transform : skewY(-3deg);
    background : #333;
    a {
      position : absolute;
      bottom : 42%;
      right : 1em;
      color : #fff;
      font-size : 1.1em;
      transition : color .3s;
      &:hover {
        color : #4aa8b5;
      }
    }
    a + a {
      right : 2.5em;
    }
  }
  &:hover .prof {
    top : 15%;
  }
  &:hover .introBtn {
    opacity : 1;
  }
}

.card__back {
  padding : 1em;
  color : #f3f3f3;
  background : #333;
  transform : rotateY(180deg);
  .title::after {
    content : "";
    display : block;
    height : 1px;
    margin : .5em 0;
    background : #fff;
  }
  .desc {
    text-align : justify;
    font-size : .8em;
  }
  .backBtn {
    position : absolute;
    bottom : .5em;
    right : .5em;
    cursor : pointer;
    transition : color .3s;
    &:hover {
      color : #4aa8b5;
    }
  } 
}

.flip {
  .card__front{
    transform : rotateY(-180deg);
  }
  .card__back{
    transform : rotateY(0);
  }
  &.rotate {
    transform : rotate(0) translateY(40px);
  }
}

.card__shadow {
  position : absolute;
  bottom : -11%;
  left : 31%;
  width : 80px;
  height : 20px;
  border-radius : 50%;
  background : #cacaca;
  transition : transform .5s;
  &.expand {
    transform : scaleX(3.5) translate(2px,5px);
    -webkit-filter: blur(0);//mac safari? anti-blurry
  }
}

$(function(){
  $('.introBtn').on('click',function(){
    $('.card__container').addClass('flip rotate');
    $('.card__shadow').addClass('expand');
  });
  $('.backBtn').on('click',function(){
    $('.card__container').removeClass('flip rotate');
    $('.card__shadow').removeClass('expand');
  })
});