<div class="container">
	<div id="form-wrap">

		<!-- Question One -->
		<div class="question">
			<h1>What's your name?</h1>
			<input type="text"></input>
			<button></button>
		</div>

		<!-- Question Two -->
		<div class="question">
			<h1>What's your favorite color?</h1>
			<input type="text"></input>
			<button></button>
		</div>

		<!-- Question Three -->
		<div class="question">
			<h1>What's your favorite food?</h1>
			<input type="text"></input>
			<button></button>
		</div>

		<!-- Question Four -->
		<div class="question">
			<h1>Who's your favorite superhero?</h1>
			<input type="text"></input>
			<button></button>
		</div>

		<!-- Question Five -->
		<div class="question">
			<h1>What's your favorite movie?</h1>
			<input type="text"></input>
			<button></button>
		</div>

		<!-- Completion Message -->
		<div class="completed">
			<img src="https://media.giphy.com/media/XBumSnvroiGxUSoDkZ/giphy.gif">
			<h1>Thank you for your input!</h1>
		</div>

	</div> <!--#form-wrap-->
</div> <!--.container-->

@import url(https://fonts.googleapis.com/css?family=Space+Mono:400,700);

/* === Quick Settings === */
:root {
	/* Colors */
	--primary: #3F46DC;
	--secondary: #FFFFFF;
	--background: #F6F7FB;
	--text: #3C3C69;
	--shadow: rgba(37,40,122,.09);
	
	/* Type */
	--font: 'Space Mono', monospace;
	
	/* Styles */
	--corner-radius: 10px;
	--stroke-thickness: 4px;
}

/* === Global === */

*, *:focus {
	font-family: var(--font);
	outline: none;
}

body {
	background: var(--background);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.container {
	width: 480px;
	padding: 0 60px 0 60px;
	overflow: hidden;
	position: relative;
}

#form-wrap{
	transition: all 800ms ease-in-out
}

.completed, .completed h1 {
	text-align: center;
	margin:0;
}

img {
	max-height: 100px;
}

/* === Questions === */

.question {
	display: grid;
	grid-template-columns: 1fr 60px;
	grid-template-rows: repeat(3, 60px);
	grid-column-gap: 20px;
	grid-row-gap: 0px;
	transition: all 250ms ease-in-out;
}

h1 {
	font-weight: 400;
	font-size: 22px;
	grid-area: 1 / 1 / 2 / 3;
}

h1.animation {
	animation: input-animation 1200ms ease-in-out;
}

input, button {
	background: linear-gradient(to right, var(--secondary) 0%, var(--secondary) 33.2%, var(--primary) 33.3%, var(--primary) 66.5%, var(--secondary) 66.6%, var(--secondary) 100% );
	background-size: 302% 100%;
	background-position: 100% 100%;
	border-radius: var(--corner-radius);
	box-shadow: 0px 20px 40px 0 var(--shadow);
	border: none;
}

input:hover, button:hover {
	box-shadow: 0px 10px 20px 0 var(--shadow), inset 0px 0px 0px var(--stroke-thickness) var(--primary);
}

input:active, input:focus, button:active, button:focus {
	background-position: 49.75% 100%;
	color: var(--secondary);
	box-shadow: 0px 0px 0px 0 var(--shadow);
}

input {
	color: var(--text);
	font-size: 18px;
	padding: 0 20px;
	grid-area: 2 / 1 / 3 / 2;
	border-radius: var(--corner-radius);
	box-shadow: 0px 20px 40px 0 var(--shadow);
	transition: all 200ms ease-in-out;
}

input.animation {
	animation: input-animation 1000ms ease-in-out;
}

button {
	grid-area: 2 / 2 / 3 / 3;
	transition: all 150ms ease;
	cursor: pointer;
}

button:after {
	content:'➜';
	font-size: 24px;
	color:var(--primary);
}

button:focus:after {
	color:var(--secondary);
}

button.animation {
	animation: button-animation 1000ms ease 200ms;
}

p {
	grid-area: 3 / 1 / 4 / 3;
	opacity: .25;
}

p.animation {
	animation: index-animation 1100ms ease;
}

@keyframes h1-animation {
  0% {transform: translateY(0);}
	20% {transform: translateY(20px);}
	60% {transform: translateY(-10px);}
  100% {transform: translateY(0px);}
}

@keyframes input-animation {
  0% {transform: translateY(0);}
	20% {transform: translateY(20px);}
	60% {transform: translateY(-20px);}
  100% {transform: translateY(0px);}
}

@keyframes button-animation {
  0% {transform: translateY(0);}
	20% {transform: translateY(20px);}
	60% {transform: translateY(-20px);}
  100% {transform: translateY(0px);}
}

@keyframes index-animation {
  0% {opacity: .25}
	20% {opacity: 0}
	80% {opacity: 0;}
  100% {opacity: .25}
}

// Take it easy, I'm a designer, not a developer. :)

// Setting some baseline variables
var quantityOfQuestions = $('.question').length;
var questionHeight = $('.question').height();
var stepHeight = ($('#form-wrap').height() - $('.completed').height()) / quantityOfQuestions;

// On page ready remove tabbability on future questions, set focus, set container height based on question height
$('input:not(:first), button:not(:first)').attr('tabindex', '-1');
$('.question:first input').focus();
$('.container').css({"height": questionHeight});

// Create question index "question 1 / 5"
$( '.question' ).each(function( index ) {
	$(this).append('<p>question ' + (index + 1) + ' / ' + quantityOfQuestions + '</p>' )
});

// Alternative transition for Inputs when button is focused - create spillover effect
$("button").focus(function() {
  $(this).siblings('input').css({"background-position":"-1% 100%","transition-delay":"0"})
});

// Remove the alternative transition set above on button focusout
$("button").focusout(function() {
  $(this).siblings('input').css("background-position","")
});

// On button click do the following
$('button').click(function() {
	
	//set variables in context of current & next question
	var currentQuestion = $(this).parent();
	var nextQuestion = $(this).parent().next('.question');
	var nextInput = $(nextQuestion).children('input');
	var nextButton = $(nextQuestion).children('button');

	//Move the question container down
	$('#form-wrap').css({"marginTop": '-=' + stepHeight});
	
	//Add animations to controls, and set tab index for next question
	$('input, button, h1, p').addClass('animation');
	$('input, button').attr('tabindex', '-1');
	$(nextInput).attr('tabindex', '1');
	$(nextButton).attr('tabindex', '2');
	$(currentQuestion).css({"opacity": '0'});
	$(nextQuestion).css({"opacity": '1'});
	
	//After animation, set focus and remove animations classes set above 
	setTimeout(function(){ 
		$(nextInput).focus();
		$('input, button, h1, p').removeClass('animation');
	}, 1100);
});