.form#form
	.field.email
		.icon
		input.input#email(type="email" placeholder="Email" autocomplete="off")
	.field.password
		.icon
		input.input#password(type="password" placeholder="Password")
	button.button#submit LOGIN
		.side-top-bottom
		.side-left-right
	small Fill in the form

.form
	margin: auto
	width: 400px
	padding: 20px 30px
	background: #fff
	border: 1px solid #dfdfdf
	transform-style: preserve-3d
	perspective-origin: 50px center
	perspective: 2000px
	transition: transform 1s ease
	&::before, &::after
		content: ''
		position: absolute
		width: 100%
		left: 0
	&::before
		height: 100%
		top: 0
		transform: translateZ(-100px)
		background: #333
		opacity: 0.3
	&::after
		content: 'SUCCESS!'
		transform: translateY(-50%) translateZ(-101px) scaleX(-1)
		top: 50%
		color: #fff
		text-align: center
		font-weight: bold

.field
	position: relative
	background: #cfcfcf
	transform-style: preserve-3d
	& + & 
		margin-top: 10px

.icon
	width: 24px
	height: 24px
	position: absolute
	top: calc(50% - 12px)
	left: 12px
	transform: translateZ(50px)
	transform-style: preserve-3d
	&::before, &::after
		content: ''
		display: block
		width: 100%
		height: 100%
		position: absolute
		top: 0
		left: 0
	&::after
		transform: translateZ(-23px)
		opacity: 0.5

.input
	border: 1px solid #dfdfdf
	background: #fff
	height: 48px
	line-height: 48px
	padding: 0 10px 0 48px
	width: 100%
	transform: translateZ(26px)

.button
	display: block
	width: 100%
	border: 0
	text-align: center
	font-weight: bold
	color: #fff
	background: linear-gradient(45deg, #e53935, #e35d5b)
	margin-top: 20px
	padding: 14px
	position: relative
	transform-style: preserve-3d
	transform: translateZ(26px)
	transition: transform 0.3s ease
	cursor: pointer
	&:hover
		transform: translateZ(13px)

.side-top-bottom
	width: 100%
	&::before, &::after
		content: ''
		width: 100%
		height: 26px
		background: linear-gradient(45deg, darken(#e53935, 5%), darken(#e35d5b, 5%))
		position: absolute
		left: 0
	&::before
		transform-origin: center top
		transform: translateZ(-26px) rotateX(90deg)
		top: 0
	&::after
		transform-origin: center bottom
		transform: translateZ(-26px) rotateX(-90deg)
		bottom: 0
.side-left-right
	height: 100%
	&::before, &::after
		content: ''
		height: 100%
		width: 26px
		position: absolute
		top: 0
	&::before
		background: #e53935
		transform-origin: left center
		transform: rotateY(90deg)
		left: 0
	&::after
		background: #e35d5b
		transform-origin: right center
		transform: rotateY(-90deg)
		right: 0

.email .icon
	&::before, &::after
		background: url(https://image.flaticon.com/icons/svg/131/131040.svg) center/contain no-repeat

.password .icon
	&::before, &::after
		background: url(https://image.flaticon.com/icons/svg/130/130996.svg) center/contain no-repeat

	
.face-up-left
	transform: rotateY(-30deg) rotateX(30deg)
.face-up-right
	transform: rotateY(30deg) rotateX(30deg)
.face-down-left
	transform: rotateY(-30deg) rotateX(-30deg)
.face-down-right
	transform: rotateY(30deg) rotateX(-30deg)
.form-complete
	animation: formComplete 2s ease
.form-error
	animation: formError 2s ease

input, button
	&:active, &:focus
		outline: none
		border: 1px solid lighten(#e35d5b, 5%)

@keyframes formComplete
	50%, 55%
		transform: rotateX(30deg) rotateY(180deg)
	100%
		transform: rotateX(0deg) rotateY(1turn)

@keyframes formError
	0%, 100%
		transform: rotateX(0deg) rotateY(0deg)
	25%
		transform: rotateX(-25deg)
	33%
		transform: rotateX(-25deg) rotateY(45deg)
	66%
		transform: rotateX(-25deg) rotateY(-30deg)

small
	color: #999
	text-align: center
	display: block
	margin-top: 20px
	backface-visibility: hidden

html, body
	width: 100%
	height: 100%
	display: flex
	background: linear-gradient(45deg, #83a4d4, #b6fbff)

*, *::before, *::after
	box-sizing: border-box

var formAnim = {
	$form: $('#form'),
	animClasses: ['face-up-left', 'face-up-right', 'face-down-left', 'face-down-right', 'form-complete', 'form-error'],
	resetClasses: function() {
		var $form = this.$form;
		
		$.each(this.animClasses, function(k, c) {
			$form.removeClass(c);
		});
	},
	faceDirection: function(d) {
		this.resetClasses();
		
		d = parseInt(d) < this.animClasses.length? d : -1;
		
		if(d >= 0) {
			this.$form.addClass(this.animClasses[d]);
		} 
	}
}

var $input = $('#email, #password'),
		$submit = $('#submit'),
		focused = false,
		completed = false;


$input.focus(function() {
	focused = true;
	
	if(completed) {
		formAnim.faceDirection(1);
	} else {
		formAnim.faceDirection(0);
	}
});

$input.blur(function() {
	formAnim.resetClasses();
});

$input.on('input paste keyup', function() {
	completed = true;
	
	$input.each(function() {
		if(this.value == '') {
			completed = false;
		}
	});
	
	if(completed) {
		formAnim.faceDirection(1);
	} else {
		formAnim.faceDirection(0);
	}
});

$submit.click(function() {
	focused = true;
	formAnim.resetClasses();
	
	if(completed) {
		$submit.css('pointer-events', 'none');
		setTimeout(function() {
			formAnim.faceDirection(4);
			$input.val('');
			completed = false;

			setTimeout(function() {
				$submit.css('pointer-events', '');
				formAnim.resetClasses();
			}, 2000);
		}, 1000);
	} else {
		setTimeout(function() {
			formAnim.faceDirection(5);

			setTimeout(function() {
				formAnim.resetClasses();
			}, 2000);
		}, 1000);
	}
});

$(function() {
	setTimeout(function() {
		if(!focused) {
			$input.eq(0).focus();
		}
	}, 2000);
})