@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Varela|Roboto:400,100,700);
* {
  box-sizing:border-box;
}
body {
  font-family: 'Roboto', 'sans-serif';
  font-weight:100;
  font-size:2em;
}
.container, .container:after, .container:before, .sign-up {
  transition:all .5s ease-in-out;
}
.container {
  width:100%;
  height:400px;
  background: url('https://31.media.tumblr.com/86905a26349fe508ddfa9614fcc42d89/tumblr_n3vuzrEjDJ1sfie3io1_1280.jpg');
  background-position: left 40%;
  background-repeat:no-repeat;
  background-size: 115%;
  position:relative;
  text-align:center;
  &:hover {
    background-position:15% 40%;
    
    &:before {  background-color:rgba(0,0,0,.6); }
    .text, .sign-up { transform:translateY(-15px); }
    &:after { margin-top:-91.5px; }
  }
 
  &:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0,0,0,.7);
  } 
 &:after {
    content:"";
    position:absolute;
    left:50%;
    margin-top:-74.5px;
     margin-left:-1.04em;
    z-index:0;
    height:2em;
    width:2em;
    display:inline-block;
    box-shadow: inset 0 0 30px white;
    border-radius: 120%;
    animation: pulsate 3s infinite ease-out;
    border: .05em solid rgba(white, .9);
  }
}
.text {
  display:block;
  position:relative;
  padding-top:120px;
  text-shadow:2px 2px rgba(black,.3);
  color:white;
  font-size:1.8em;
  transition: all .5s  ease-in-out;
  z-index:2;
}
.sign-up {
    border-radius: 50%;
  	cursor: pointer;
    font-size:.2em;
    width: 30em;
    height: 30em;
    display:inline-block;
    position:relative;
    padding: .55em;
  // Box shadow borrowed in part from here: https://codepen.io/peterhry/pen/DKcGx
    box-shadow: 
    	0 0 8em rgba(255,255,255,.25),
        0 0 8em rgba(255,255,255,.25),
        0 0 .25em rgba(0,0,0,.3),
        inset 0 .25em .125em rgba(255,255,255,.3),
        inset 0 -.25em .125em rgba(0,0,0,.3);
    z-index:200;
    background: #cc0000;
	&:active {
		box-shadow: 0 0 .5em rgba(0,0,0,1),
		    inset 0 .1em .3em rgba(0,0,0,.5),
		    inset 0 -.1em .3em rgba(0,0,0,.5);
	}
}
.blast-off {
  animation: blast-off 4s linear;
  top:-5000px;
}

.email-input {
  width:250px;
  padding:10px 20px;
  margin-left:-125px;
  position:absolute;
  bottom:100px;
  left:50%;
  border:none;
  background: rgba(white,.7);
  border-radius:3px;
  border-bottom:5px solid darken(#cc0000, 10%);
  font-size:.65em;
  opacity:0;
  visibility:hidden;
  transition: all 400ms 1s, visibility 0s 1s; 
  &.active {
    visibility:visible;
    opacity:1;
    transform:translateY(-125px);
  }
}



@keyframes pulsate {
	0% {
		transform: scale(.8);
		opacity: .3;
	}
	100% {
		transform: scale(1.3);
		opacity: 0;
	}
}


// Animation Shortcut taken from https://codepen.io/greenweb/pen/dCjDu
@keyframes blast-off {
  0%, 100% { top: 0px; left: 0px; }
  1% 	{ top: 2px; left: 2px; }
  2% 	{ top: -2px; left: 2px; }
  3% 	{ top: 4px; left: -2px; }
  4% 	{ top: 4px; left: 0px; }
  5% 	{ top: -3px; left: -2px; }
  6% 	{ top: 4px; left: 5px; }
  7% 	{ top: -4px; left: 7px; }
  8% 	{ top: 5px; left: -8px; }
  9% 	{ top: -4px; left: 6px; }
  10% { top: 3px; left: -9px; } 
  11% { top: 9px; left: -5px; }
  12% { top: 2px; left: 5px; }
  99% { top: -5000px;left:0px; } 
}