// There are parts of this that need to be refactored but I just wanted to get the proof of concept down. Feel free to fork and make it more DRY.

// Because of the webkit flicker bug I had to do some nasty things in the body tag to prevent it. 

// In the future I would like to add the ability to add more pages to the navigation and cycle through them in some way.

* {
  box-sizing : border-box;  
}

body {
  background-color      : #472E32;
  height                : 100vh;
  width                 : 100%;
  backface-visibility   : hidden;
  transform             : translateZ(0);
  overflow-y            : hidden;
}

.title {
  padding        : 100px 10px;
  color          : #eee;  
  text-align     : center;
  font-weight    : 300;
  letter-spacing : 1px;
}

.card__container {
  position         : fixed;
  bottom           : -150px;
  left             : 0;
  width            : 100%;
  height           : 150px;
  background-color : #833231;
  z-index          : 2;
  transition       : bottom 200ms ease-in-out;
  
  &.card__container--active {
    bottom : 0;
    box-shadow : 0 -3px 3px rgba(#000, .2);
  }
}

.card {
  position         : absolute;
  top              : 20px;
  left             : 50%;
  margin-left      : -100px;
  height           : 300px;
  width            : 200px;
  background-color : #eee;
  border           : 1px solid #833231;
  border-radius    : 8px;
  cursor           : pointer;
  transition       : top 100ms ease-in;
  
  &.card__1 {
    top         : 40px;
    margin-left : -200px;
    background-color : #FCA440;
    transform   : rotate(-20deg);
    z-index     : 1;
    
    &:hover {
      z-index : 4;
      top     : 30px;
    }
    
  }
  
  &.card__2 {
    background-color : #FC8131;
    z-index     : 2;
    
    &:hover {
      z-index : 4;
      top     : 10px;
    }
    
  }
  
  &.card__3 {
    top         : 40px;
    margin-left : 0px;
    background-color : #DA422A;
    transform   : rotate(20deg);
    z-index     : 3;
  }

  &:hover {
    z-index : 4;
    top     : 30px;
  }

}

.card__link {
  display : block;
  height  : inherit;
  text-decoration : none;
}

.card__title {
  text-align     : center;
  color          : #eee;
  font-weight    : 300;
  letter-spacing : 1px;
  user-select    : none;
}

.card-button {
  position         : absolute;
  bottom           : 40px;
  left             : 50%;
  margin-left      : -10px;
  height           : 30px;
  width            : 20px;
  background-color : #FC8131;
  border           : 1px solid #333;
  border-radius    : 3px;
  cursor           : pointer;
  padding          : 0 10px;

  &::before {
    content          : '';
    position         : absolute;
    top              : 2px;
    left             : -10px;
    height           : 29px;
    width            : 20px;
    background-color : #FCA440;
    border           : 1px solid #333;
    border-radius    : 3px;
    transform        : rotate(-15deg);
    z-index          : -1;
    transition       : transform 100ms ease-in;
  }
  
  &::after {
    content          : '';
    position         : absolute;
    top              : 2px;    
    left             : 10px;
    height           : 29px;
    width            : 20px;
    background-color : #DA422A;
    border           : 1px solid #333;
    border-radius    : 3px;
    transform        : rotate(15deg);
    z-index          : 1;
    transition       : all 100ms ease-in;
  }
  
  &:hover {
    &::before {
      left      : -11px;
      transform : rotate(-25deg);
    }
    &::after {
      left      : 11px;
      transform : rotate(25deg);
    }
  }

}

.close-button {
  position      : absolute;
  top           : 10px;
  right         : 10px;
  height        : 12px;
  width         : 12px;
  border        : 1px solid #fff;
  border-radius : 50%;
  font-weight   : 300;
  font-size     : 8px;
  text-align    : center;
  color         : #fff;
  cursor        : pointer;
  user-select   : none;
}