@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Sacramento);

html{
  height:100%;
}
body{
  box-sizing: border-box;
  background: url('http://jomesthewedding.com/wp-content/themes/jomes/library/images/dots.gif') #CEECED;
  font-family: 'Sacramento', cursive;
  font-size: 1.4rem;
  color:#2f2f2f;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height:100%;
  perspective:1000px;
}
.envelope{
  background: darken(#E9978C, 5);
  border-radius: 0 0 4px 4px;
  width: 320px;
  height: 320px;
  min-height: 320px;
  margin: 20px auto;
  position:relative;
  transition: all 0.3s cubic-bezier(.42,0,.58,1);
  transform-origin: 50 50%;
  //transform: scale(0.8);
  //transform-style:preserve-3d;
  &:before,
  &:after{
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    z-index:2;
  }
  &:before{
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 296px 0 0 300px;
    border-color: transparent transparent transparent #E9978C;
  }
  &:after{
    right:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 296px 300px;
    border-color: transparent transparent #E9978C transparent;
  }
  &.open{
    transform:rotateZ(7deg) translateY(130px) rotateY(-9deg);
    .flap-outside{ 
      top:-1px;
      //transform:rotateX(180deg);
      animation: open-flap 0.6s ease-in-out forwards;
      //transition-delay: 0s;
      .flap{
        background: darken(#E9978C, 5);
      }
    }
    .card{
      transform: translateX(14%) translateY(-200px);
      transition-delay:0.6s;
    }
  }
  .card{
    background:#ffffff;
    position: absolute;
    font-size:1.4rem;
    overflow: hidden;
    left: 0;
    bottom:0;
    width:70%;
    height:85%;
    padding: 10px 20px;
    transform: translateX(14%);
    transition: all 0.3s cubic-bezier(.42,0,.58,1) 0s;
    z-index:1;
  }
  .flap-container{
    border-radius: 4px;
    overflow:hidden;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: all 0.4s cubic-bezier(.18,.81,.76,.93) 0s;
    z-index:3;
  }
  .flap-outside{
    overflow-y: auto;
    transform-origin: 50% 0;
    animation-delay: 0.6s;
    animation-fill-mode:backwards;
    z-index: 4;
    .flap{
      background: #E9978C;
      backface-visibility: hidden;
      &:after{
        background: darken(#E9978C, 5);
        backface-visibility: hidden;
        content:'';
        display: block;
        position: absolute;
        transform: rotateX(180deg);
        height:100%;
        width:100%;
        left:0;
        top:0;
        z-index:1;
      }
    }
  }
  .flap-inside{
    transform: rotateX(180deg);
    border-radius: 0 0 4px 4px;
    overflow:hidden;
    .flap{
      border-radius: 40px 40px 80px 40px;
      border: 1px solid darken(#E9978C, 5);
      margin-top: 20px;
    }
  }
  .flap{
    background: #E9978C;
    border: 1px solid darken(#E9978C, 5);
    border-radius:40px;
    overflow: hidden;
    width:300px;
    height:300px;
    position: absolute;
    top:-50%;
    left:50%;
    margin: -20px 0 0 -151px;
    transform: rotateZ(45deg);
    transform-style: preserve-3d;
    transition: all 0.8s ease 0s;
    z-index:2;
    .lining{
      background: url('http://jomesthewedding.com/wp-content/themes/jomes/library/images/flyer-bouquet.jpg') 50% 50% #A3CAC0;
      backface-visibility: hidden;
      border-radius: 0 0 40px 0;
      position: absolute;
      top:0;
      left:0;
      width: 92%;
      height:92%;
    }
  }
  svg.string{
    position:relative;
    z-index:10;
  }
}

@keyframes open-flap {
  0%   { 
    transform:rotateX(0deg); 
    z-index:4;
  }
  50%  { 
    transform:rotateX(90deg); 
    z-index: 0;
  }
  100% { 
    transform:rotateX(180deg); 
    z-index: 0;
  }
}