@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);

// keyframes mixin
@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content; 
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  } 
}

@mixin prefixer($property, $value) {
  -webkit-#{$property}: #{$value};
  -moz-#{$property}: #{$value};
  -ms-#{$property}: #{$value};
  -o-#{$property}: #{$value};
  #{$property}: #{$value};
}

$base-glass: rgba(46, 139, 87, 0.2);
$glass-glare: rgba(46, 139, 87, 0.25);
$glass-edge: #1B5435;

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  background: url('http://www.ryanfield.ca/misc/noise.png'),#A8BAAE;
}

.wrapper {
  display: flex;
  height: 90%;
  margin: auto;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: 'Roboto Slab';
  font-weight: 700;
 // border: 1px solid black;

}

.form {
  align-self: center;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  padding: 30px;
  
  .title{
    font-size: 2em;
    margin-bottom: 20px;
    display: inline-block;
  }
}
$input-width: 250px;
$input-height: 50px;
$animation: cubic-bezier(.69,-0.95,.42,1.87);

.form-item.window-pane {
  //border: 1px solid seagreen;
  position: relative;
  overflow: visible;
  margin: 15px 0 45px;
  @include prefixer(user-select, none);
  float: left;
  margin: 15px 15px 30px;
    perspective: 800px;
  input {
    width: $input-width;
    height: $input-height;
    border: none;
    font-size: 1.7em;
    font-weight: 700;
    outline: none;
    padding: 10px;
    font-family: inherit;
    top: 0;
    left: 0;
    background: transparent;
    color: $glass-edge;
  }
  span {
    width: $input-width;
    height: $input-height;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    &::before {
      content: '';
      display: block;
      width: $input-width;
      height: 2px;
      background: $glass-edge;
      position: absolute;
      top: -2px;
      left: 0;
      transform-origin: bottom;
      transform: rotate3d(1,0,0,0deg);
      transition: all 0.8s $animation;
    }
    &::after {
      content: '';
      display: block;
      width: $input-width;
      height: $input-height;
      background: rgba(46, 139, 87, 0.2);
      border-right: 1px solid rgba(255,255,255,0.2);
      border-bottom: 1px solid rgba(255,255,255,0.1);
      border-left: 1px solid rgba(255,255,255,0.1);
      border-top: 1px solid #5E7E6D;
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: top;
      transform: rotate3d(1,0,0,-92deg);
      transition: all 0.8s $animation;
    }
    &.active::after {
      transform: rotate3d(1,0,0,0deg);
      /*
      @include prefixer(animation-name, glass);
      @include prefixer(animation-duration, 0.4s);
      @include prefixer(animation-timing-function, ease-out);
      @include prefixer(animation-fill-mode, forwards);
      */
    }
      
    &.active::before {
      transform: rotate3d(1,0,0,90deg);
      /*
      @include prefixer(animation-name, glass-top);
      @include prefixer(animation-duration, 0.4s);
      @include prefixer(animation-timing-function, linear);
      @include prefixer(animation-fill-mode, forwards);
      */
    }
  }
  label {
    width: $input-width;
    height: $input-height;
    font-size: 1.3em;
    position: absolute;
    top: 0;
    left: 0;
    vertical-align: bottom;
    padding: 15px 0 0 15px;
    cursor: text;
    border-bottom: 3px solid $glass-edge;
    color: black;
    transition: all 500ms ease;
    &.active {
      transform: translate3d(-39px,40px,0px) scale(0.7);
      /*
      @include prefixer(animation-name, bump);
      @include prefixer(animation-duration, 0.3s);
      @include prefixer(animation-timing-function, ease-in);
      @include prefixer(animation-delay, 0.2s);
      @include prefixer(animation-fill-mode, both);
      */
    }
  }
}

@include keyframes(glass-top) {
  50% {
     transform: rotate3d(1,0,0,90deg);
  }
  67% {
    transform: rotate3d(1,0,0,80deg);
  }
  83% {
    transform: rotate3d(1,0,0,98deg);
  }
  100% {
    transform: rotate3d(1,0,0,90deg);
  } 
}

@include keyframes(glass) {
  50% {
     transform: rotate3d(1,0,0,0deg);

  }
  67% {
    transform: rotate3d(1,0,0,30deg);
    
  }
  83% {
    transform: rotate3d(1,0,0,-15deg);
  }
  100% {
    transform: rotate3d(1,0,0,0deg);
  } 
}

@include keyframes(bump) {
  0%{
    transform: translate3d(0,0,0);
  }  
  16% {
    transform: translate3d(0,10px,40px);
  }
  32% {
    transform: translate3d(0,20px,60px);
  }
  48% {
    transform: translate3d(0,30px,40px);
  }
  64% {
    transform: translate3d(0,40px,0px);
  }
  82% {
    transform: translate3d(0,35px,25px);
  }
  100% {
    transform: translate3d(0,40px,0px);
  }
}
@include keyframes(bump-back) {
  0%{
    transform: rotateY(0);
  }  
  100% {
    transform: rotateY(360deg);
  }
}