.overlay
.contents
	.contents__front
		- var i = 7
			while i--
				span
		button.contents__btn
	.contents__back
		h2 Contact Us
		form(action="" method="")
			label(for="name") name
			input(type="text" id="name" class="name")
			label(for="email") email
			input(type="text" id="email" class="email")
			input(type="submit" value="Send")

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

$height: 300px;
$width: $height*6/9;
$base-aniTime: 0.35s;
$first-aniTime: $base-aniTime/2;
$color1: #49586E;
$color2: #309E72;
//-----------------------------------------------

* {	box-sizing: border-box;}

html,body { height: 100%;}

body {
  perspective: 1000px;
	background-color: $color1;
	font-size: 14px;
	font-family: 'Lato', sans-serif;
}

.overlay {
  position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	visibility: hidden;
  z-index: 1;
	transition-property: background-color, visibility;
	transition-duration: $base-aniTime*2, 0s;
	transition-timing-function: ease;
	transition-delay: 0s, $first-aniTime*2;
  
  &.active {
		transition-delay: $first-aniTime*2 0s;
    background-color: $color2;
    visibility: visible;
  }
}

span {
	width: 90%;
	height: 8px;
	margin-top: 20px;
	display: block;
	background-color: lighten($color1,30%);
}

.contents {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: $height/-2;
	margin-left: $width/-2;
  width: $width;
  height: $height;
	transform-style: preserve-3d;
	z-index: 5;

	&__front {
		height: 100%;
		position: relative;
		background-color: lighten($color1,7%);
		padding: 24px;
		border-radius: 6px;
		box-shadow: 0 3px 15px rgba(0,0,0,0.45);
		transition-property: transform, background-color;
		transition-duration: $base-aniTime, $base-aniTime;
		transition-timing-function: cubic-bezier(0.5,-0.15,0.5,0.05), ease;
		transition-delay: 0s, 0s;
	}
	
	&__btn {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 27px;
		background-color: $color2;
		box-shadow: 0 1px 1px rgba(white,0.25) inset;
		border-radius: inherit;
		overflow: hidden;
		cursor: pointer;
		appearance: none;
		border: none;
		z-index: 4;
		
		// background
		&:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 100%;
			margin: auto;
			background-color: #fff;
			transform: translate(-50%,-50%);
			transition: width $first-aniTime ease;
		}
    
    &:focus {
      outline: none;
    }
	}
		
	&__back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-shadow: 0 3px 15px rgba(0,0,0,0.45);
		transform: rotateX(-90deg) translateZ($height/2);
		opacity: 0;
		transition-property: transform, opacity;
		transition-duration: $base-aniTime, $base-aniTime;
		transition-delay: 0s, $base-aniTime;
		transition-timing-function: cubic-bezier(0.5,-0.3,0.85,0.05), ease;
		
		h2 {
			height: 40%;
			background-color: #63BD99;
			color: #fff;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		form {
			padding: 20px;
		}
		
    label {
      display: block;
      color: $color2;
      margin-bottom: 3px;
    }
    
    input[type="text"] {
      width: 100%;
      margin-bottom: 10px;
      padding: 3px 0px;
			color: #555;
      display: block;
			border: none;
			border-bottom: 1px solid #aaa;
			background-color: transparent;
      
      &:focus {
        border-bottom: 1px solid $color2;
				outline: none;
      }
    }
    
    input[type="submit"] {
      background-color: none;
      border: none;
      background-color: $color2;
      color: #fff;
      padding: 3px 10px;
			margin-top: 15px;
      border-radius: 3px;
      cursor: pointer;
      
      &:hover {
        background-color: lighten($color2,10%);
      }
      
      &:focus {
        outline: none;
      }
    }
	}
	
	// Click - .contents__btn 
	&.active {
		
		.contents__front {
			background-color: darken($color1,7%);
			transition-timing-function: cubic-bezier(0.55,0.1,0.7,0.5), ease;
			transition-delay: $first-aniTime*2, $first-aniTime*2;
			transform-origin: top center;
			transform: rotateX(($height/1px)/-13+deg) translateZ($height*-1);
		}
		
		.contents__btn {
			&:before {
				width: 100%;
			}
		}
		
		.contents__back {
			transform: rotateX(0deg) translateZ($height/2);
			opacity: 1;
			transition-duration: $base-aniTime*2, $base-aniTime;
			transition-delay: $first-aniTime*2, $first-aniTime*2;
			transition-timing-function: cubic-bezier(0.2,0.8,0.25,1.2), ease;
		}
	}
}

$(function(){
	
  var overlay = $(".overlay"),
			contents = $(".contents"),
			btn = $(".contents__btn");

  btn.on("click",function(){
		contents.addClass("active");
    overlay.addClass("active");
  });

	overlay.on("click",function(){
		overlay.removeClass("active");
		contents.removeClass("active");
  });
});