.sign-up-container
	.envelope
		.paper
			h1 Join our mailing list!
			form.sign-up-form
				input.text-input(type='text' placeholder='Email')
				button.button(type='submit') Sign up
		.bottom-flap
	.thanks-text 
		span Thanks!
	button.reset-button Reset

$font-weight-main: 300;
$margin-vert: 1rem;
$margin-hori: $margin-vert * 1.4;

$col-paper: #fef8e1;
$col-paper-fg: #ffba20;
$col-env: #73c0e4;

$env-width: 400px;
$env-height: 250px;
$env-radius: 24px;

html,
body {
	font-size: 24px;
}

body {
	background-color: #d0eff3;
}

.sign-up-container {
	width: 100%;
	padding-top: $env-height/1.2;
	
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: $font-weight-main;
}

.paper {
	width: 85%;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	top: -$env-height/2 - 20px;
	padding: $margin-vert $margin-hori $env-height/2 $margin-hori;
	
	background: $col-paper;
	background: linear-gradient(to bottom, $col-paper 43%, desaturate(darken($col-paper, 12%), 30%) 100%);
	color: $col-paper-fg;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2);
	border-radius: 4px;
}

h1 {
	margin-bottom: $margin-vert;
	margin-top: 0;
	
	text-align: center;
	font-size: 1em;
	font-weight: $font-weight-main;
}

.text-input,
.button {
	box-sizing: border-box;
	padding: 0.2em 0.67em;
	margin-bottom: $margin-vert/2;
	
	background: transparent;
	border: none;
	border-radius: 2em;
	outline: none;
}

.button {
	border: 1px solid $col-paper-fg;
	
	transition: background 0.1s, color 0.1s;

	&:hover {
		background: $col-paper-fg;
		color: $col-paper;
	}
}

.text-input {
	background: transparentize($col-paper-fg, 0.9);
	color: darken($col-paper-fg, 20%);

	&::placeholder {
		color: inherit;
		font-style: italic;
	}
}

.sign-up-form {
	width: 100%;
	
	* {
		width: 100%;
	}
}

.envelope {
	position: relative;
	width: $env-width;
	height: $env-height;
	margin: 0 auto;
	
	background: $col-env;
	border-radius: $env-radius;
	
	&:before {
		content: '';
		display: block;
		position: absolute;
		top: (-$env-height) + 10px;
		width: 0;
		height: 0;
		z-index: -1;
		
		border-width: $env-height/2 $env-width/2;
		border-color: transparent;
		border-style: solid;
		border-bottom-color: $col-env;
		border-radius: $env-radius;
	}
	
	&:after {
		content: '';
		display: block;
		position: absolute;
		bottom: 0;
		width: 0;
		height: 0;
		pointer-events: none;
		
		border-width: $env-height/2 $env-width/2;
		border-style: solid;
		border-color: $col-env;
		border-top-color: transparent;
		border-radius: $env-radius;
	}
	
	.bottom-flap {
		width: $env-width;
		height: $env-height;
		display: block;
		position: absolute;
		top: 0;
		z-index: 1;
		
		border-radius: $env-radius;
		overflow: hidden;
		pointer-events: none;
		
		&:after {
			content: '';
			display: block;
			position: absolute;
			width: $env-width;
			height: $env-width;
			top: 40%;
			
			border-radius: $env-radius;
			background: lighten($col-env, 8%);
			transform:  scaleY(0.7) rotate(45deg);
			box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		}
	}
}

.thanks-text {
	position: absolute;
	width: 100%;
	top: $env-height;
	z-index: -1;
	
	text-align: center;
	font-weight: 400;
}

.submitted {
	$paper-dur: 0.8s;
	$fold-dur: 0.5s;
	
	.paper {
		animation: paper-in $paper-dur ease-out;
		animation-fill-mode: forwards;
	}
	
	&.sign-up-container {
		overflow: hidden;
	}
	
	.envelope {
		animation: fly-away 0.5s ease-in;
		animation-delay: $paper-dur + $fold-dur;
		animation-fill-mode: forwards;
		
		&:before {
			animation: fold $fold-dur ease-in;
			animation-delay: $paper-dur - 0.1s;
			animation-fill-mode: forwards;
		}
	}
}

@keyframes paper-in {
	30% {
		transform: translateY(-80px);
		padding-bottom: $env-height/2;
	}
	
	to {
		top: 10px;
		padding-bottom: 0;
	}
}

@keyframes fly-away {
	to {
		transform: translateX(200%) rotate(10deg);
		opacity: 0;
	}
}


@keyframes fold {
	from {
		transform-origin: bottom center;
		z-index: 10;
	}
	
	to {
		z-index: 10;
		transform-origin: bottom center;
		transform: rotateX(-180deg) translateY(10px);
		border-bottom-color: darken($col-env, 5%);
	}
}

.reset-button {
	display: block;
	padding: 0.6em 1em;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	
	font-size: 12px;
	
	background: transparent;
	border: 1px solid black;
	
	&:hover {
		color: white;
		background: black;
	}
}

$(document).ready(function() {
	$('.sign-up-form').on('submit', submit);
	$('.reset-button').on('click', reset);
});

function submit(e) {
	$('.sign-up-container').addClass('submitted');
	e.preventDefault();
}

function reset() {
	$('.sign-up-container').removeClass('submitted');
	$('.sign-up-form')[0].reset();
}