.signup-form
  form action=""
    fieldset.email-card
        h1 Anthropologie
        h2 Enjoy
        h1 Free Shipping
        h2 on your next order
        input type="email" placeholder="Email Address"
        br
        button type="button" class="next action-button" value="Next"  Continue →
        br
        button type="button" No, Thanks
    fieldset.phone-card
        h1 Anthropologie
        h2 Enjoy
        h1 Free Shipping
        h2 on your next order
        p By signing up via text, you agree to receive recurring automated marketing text messages from Anthropologie at the cell number used when signing up. Consent is not a condition of any purchase. Msg & data rates may apply. 
        input type="text" placeholder="Mobile Number"
        button type="button" 
          | GET FREE SHIPPING NOW
          br
          | when you signup for email and text

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400,600&display=swap')

$body-bg: #fff8dc
$form-bg: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2211858-jpeg.jpg"
$primary-text-color: #fff9d9
$primary-sans-serif: 'Open Sans Condensed'
$primary-serif: 'Playfair Display'

*
  padding: 0
  margin: 0
  box-sizing: border-box

body 
  display: grid
  height: 100vh
  width: 100vw
  align-items: center
  justify-items: center
  background: $body-bg

.signup-form
  height: 725px
  width: 725px
  background: url($form-bg) center center no-repeat
  background-size: cover
  text-align: center
  padding: 50px
  position: relative
  
h1, h2
  color: $primary-text-color
  font-weight: normal
  
h1
  font-family: $primary-serif
  
h1:nth-of-type(1)
  font-size: 28px
  letter-spacing: 4px

h1:nth-of-type(2)
  font-size: 42px
  letter-spacing: 4px

h2
  font-size: 24px
  margin: 40px 0
  
h2, p, input, button
  font-family: $primary-sans-serif
  
input
  border: 1px solid black
  
input, button
  width: 70%
  line-height: 60px
  height: 60px
  padding-left: 5px
  font-size: 24px
  
p
  width: 70%
  margin: 0 auto
  text-align: left
  color: $primary-text-color
  margin-bottom: 20px

button
  margin-top: 40px
  border: none
  color: white
  
button:nth-of-type(1)
  background: #8fb8c5

button:nth-of-type(2)
  background: #236385

.phone-card button
  height: 120px
  line-height: 30px
  background: #305e7e

fieldset
    border: 0 none
    position: relative
  
    &:not(:first-of-type)
      display: none

var current_fs, next_fs, previous_fs; 
var left, opacity, scale;
var animating; 

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	next_fs.show(); 
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			scale = 0;
			left = (now * 50)+"%";
			opacity = 1 - now;
			current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 600, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		easing: 'easeInOutBack'
	});
});