<div class="container">
  <h1 class="page-title">
    Animated card
  </h1>
  <h2 class="page-sub-title">Animate on page load, Flip on hover</h2>
</div>

<div class="card-container">
  <div class="card">
    <div class="front">
      <h2 class="sub-title">Season 1</h2>
      <h1 class="title">
        Rick and Morty
      </h1>
      <img class="image" src="http://pre14.deviantart.net/0aef/th/pre/f/2014/015/2/f/look_at_that_thing_morty____rick_and_morty_by_kory226-d72a6ub.png" alt="" />
    </div>
    <div class="back">
      <h3 class="synopsis">Synopsis</h3>
      <p>Rick and Morty is an American adult animated television series created by Justin Roiland and Dan Harmon for Adult Swim. The series follows the misadventures of alcoholic scientist Rick and his easily influenced grandson Morty, who split their time
        between domestic family life and interdimensional travel.</p>
      <div class="btn"><i class="fa fa-play"></i>Watch now</div>
      <div class="btn secondary"><i class="fa fa-heart "></i>Add to list</div>
    </div>
  </div>

//mixins
@mixin align {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}

//presentation 
.container {
  position: relative;
  .page-title, .page-sub-title  {
    color: white;
    text-align: center;
  }
  .page-title {
    margin: 30px 0 5px;
    font-size: 30px;
  }
  .page-sub-title {
    font-weight: 100;
    margin: 0 0 30px 0;
    font-size: 23px;
  }
}

//variables
$pink: #DE6262;
$dark: #333741;
$peach: #FFB88C;
$green: #52c234;


html {
  background: linear-gradient(45deg, $pink 10%, $peach 90%);
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  height: 100vh;
}

img {
  display: block;
  width: 100%;
}

.card-container {
  perspective: 1000;
  margin: 0 auto 50px;
  width: 400px;
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 30px;
  box-sizing: border-box;
  transition-delay: 0.15s;
  transition: 0;
}

.front {
	transform: rotateY(0deg);
}

.back {
	transform: rotateY(180deg);
  opacity: 0;
  padding-top: 60px;
  backface-visibility: visible;
  background: $dark;
  color: white;
}

.card {
  position: relative;
  width: 400px;
  height: 450px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: 0.5s;
	transform-style: preserve-3d;
  &:hover {
    transform: rotateY(180deg);
    .front {
      opacity: 0;
    }
    .back {
      opacity: 1;
    }
  }
}

.sub-title {
  color: $pink;
  animation: slide-in 0.75s;
  animation: slide-in 0.75s cubic-bezier(0.625, 0.075, 0.110, 1.165);
  animation-timing-function: cubic-bezier(0.625, 0.075, 0.110, 1.165);
  font-size: 18px;
  font-weight: 200;
  margin: 0 0 5px 0;
}

.title {
  color: $dark;
  animation: slide-in-slow 0.75s;
  animation: slide-in-slow 0.75s cubic-bezier(0.625, 0.075, 0.110, 1.165);
  animation-timing-function: cubic-bezier(0.625, 0.075, 0.110, 1.165);
  font-size: 30px;
  font-weight: 600;
  margin: 0;
}

.synopsis {
  color: $pink;
  font-size: 27px;
  font-weight: 600;
  margin: 0 0 15px;
}

p {
  color: rgba(white, 0.85);
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 35px;
}

.btn {
  border: 1px solid $peach;
  border-radius: 5px;
  background: transparent;
  display: inline-block;
  font-size: 17px;
  padding: 8px 20px 9px 15px;
  color: $peach;
  transition: 0.5s;
  margin: 0 2px 0;
  font-weight: 100;
  &.secondary {
    border-color: $pink;
    color: $pink;
      &:hover {
        background: $pink;
      }
  }
  &:hover {
    cursor: pointer;
    background: $peach;
    color: white;
  }
  i {
    margin: 0 5px 0;
  }
}

.image {
  position: absolute;
  bottom: 0;
  left: 0;
  animation: slide-in-right 1.25s;
  animation: slide-in-right 1.25s cubic-bezier(0.625, 0.075, 0.110, 1.165);
  animation-timing-function: cubic-bezier(0.625, 0.075, 0.110, 1.165);
  font-size: 35px;
  font-weight: 600;
  margin: 0;
}

//animation
@keyframes slide-in {
  0% {
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in-slow {
  0% {
    transform: translate3d(-300px, 0, 0);
  }
  20% {
    transform: translate3d(-300px, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slide-in-right {
  0% {
    transform: translate3d(400px, 0, 0);
  }
  30% {
    transform: translate3d(400px, 0, 0);
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}