$blue: #419bf9;

@include keyframes(fadeIn) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@include keyframes(fadeOut) {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hero {
  z-index: 2;
  position: relative;
  width: 100%;
  height: 1200px; // Reset by js on boot
  position: relative;
  overflow: hidden;
  // @include transition(height 1s ease-in-out);
  img {
    -webkit-user-select: none;
  }
}

img {
  border: 0;
}

#watercolor-left {
  z-index: 1;
  left: 0;
  text-align: left;
  // min-width: 196+708;
}
#watercolor-right {
  z-index: 2;
  right: 0;
  text-align: right;
  // min-width: 433+295;
}
.hero-bg {
  position: absolute;
  top: 0;
  height: 100%;

  @include animation(burnIn 1.5s 0.5s $ease-in-out-cubic both);
  @include keyframes(burnIn) {
    0% {
      opacity: 0;
      @include filter(brightness(2));
    }
    100% {
      opacity: 1;
      @include filter(brightness(1));
    }
  }
}


#bg-fade {
  z-index: 3;
  width: 100%;
  position: absolute;
  bottom: 0;
  height: 200px;
  @include linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

.hero-text {
  position: absolute;
  z-index: 5;
  max-width: 500px;
  text-align: center;
  @include transform(translate(-50%, -50%));
  top: 50%;
  left: 50%;

  &:hover {
    cursor: pointer;
  }

  @include animation(fadeIn 2s $ease-in-out-cubic both);
}

#play-intro {
  display: inline-block;
  position: relative;
  font-weight: 400;
  font-size: 20px;
  margin: 0 30px 30px 40px;
  // margin-right: -20px;
  position: relative;
  &:hover {
    cursor: pointer;
    color: $blue;
    .triangle {
      @include triangle(20px, $blue, right);
    }
  }
  .triangle {
    top: 2px;
    position: absolute;
    left: -20px;
    @include triangle(20px, gray, right);
  }
}

$nav-height: 53px;
$extra-hero-height: 200px;

.initial {
  .animation-container {
    display: none;
  }
}
.animation-container {
  z-index: 10;
  position: absolute;

  h4 {
    font-size:34px;
    text-shadow: 0px 0px 4px white;
    text-align: center;
    width: 100%;
    z-index: 20;
    display:block;
    font-weight:400;
  }

  #step1, #step2 {
    h4 {
      margin-top: 0;
      position:absolute;
      top: -80px;
    }
    position: relative;
    top: 140px;
  }
}


.start-animation.finished {
  #hero-text {
    @include animation(fadeIn 1s $ease-in-out-cubic both);
  }
  .animation-container {
    @include animation(fadeOut 1s $ease-in-out-cubic both);
  }
}

.start-animation {
  #hero-text {
    @include animation(fadeOut 1s $ease-in-out-cubic both);
  }

  .animation-container {
    display: block;
    top: $nav-height;
    left: 50%;
    @include animation(fadeIn 1s 1s $ease-in-out-cubic both);
    @include transform-origin(center top);

    &:hover {
      cursor: default;
    }

    img {
      display: none;
      position: absolute;
    }

    #editable {
      z-index: 10;
      width: 442px;
      border: 0;
      position: absolute;
      outline: 0;
    }
    #editable:focus {
      outline: 0;
      border: 0;
    }
  }
}

#provider-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-top: 17%;
  text-align: center;
  @include keyframes(providerPopIn) {
    0% {
      opacity: 0;
      @include transform(translateY(10px) scale(0.5));
    }
    100% {
      opacity: 1;
      @include transform(translateY(0) scale(0.5));
    }
  }
  @include keyframes(providerPopOut) {
    0% {
      opacity: 1;
      @include transform(translateY(0) scale(0.5));
    }
    100% {
      opacity: 0;
      @include transform(translateY(-10px) scale(0.5));
    }
  }
  .provider-img {
    display: block;
    float: left;
    margin: 0 0 -90px -90px;
    left: 90px;
    position: relative;
    border-radius: 45px;
  }
  #outlook { @include linear-gradient(to top, #1174c3, #1174c3); }
  #exchange { @include linear-gradient(to top, #1ea2a3, #1ea2a3); }
  #gmail { @include linear-gradient(to top, #e99999, #e99999); }
  #icloud { @include linear-gradient(to top, #61bfe9, #61bfe9); }
  #yahoo { @include linear-gradient(to top, #a76ead, #a76ead); }
  .os-image {
    position: relative;
    display: inline;
    width: 400px;
    margin-top: 100px;
    @include animation(fadeIn 350ms 800ms $ease-in-out-cubic both);
  }
  h4 { @include animation(fadeIn 300ms $ease-in-out-cubic both); }
  .p-0 { @include animation(providerPopIn 350ms 100ms $ease-in-out-cubic both); }
  .p-1 { @include animation(providerPopIn 350ms 200ms $ease-in-out-cubic both); }
  .p-2 { @include animation(providerPopIn 350ms 300ms $ease-in-out-cubic both); }
  .p-3 { @include animation(providerPopIn 350ms 400ms $ease-in-out-cubic both); }
  .p-4 { @include animation(providerPopIn 350ms 500ms $ease-in-out-cubic both); }

  &.provider-out {
    h4 { @include animation(fadeOut 350ms 350ms $ease-in-out-cubic both); }
    .os-image { @include animation(fadeOut 350ms 350mms $ease-in-out-cubic both); }
    .p-0 { @include animation(providerPopOut 350ms 100ms $ease-in-out-cubic both); }
    .p-1 { @include animation(providerPopOut 350ms 200ms $ease-in-out-cubic both); }
    .p-2 { @include animation(providerPopOut 350ms 300ms $ease-in-out-cubic both); }
    .p-3 { @include animation(providerPopOut 350ms 400ms $ease-in-out-cubic both); }
    .p-4 { @include animation(providerPopOut 350ms 500ms $ease-in-out-cubic both); }
  }
}

.slide-out {
  @include animation(slideOut 1s $ease-in-out-cubic both);
  @include keyframes(slideOut) {
    0% {
      opacity: 1;
      @include transform(translateX(0));
    }
    100% {
      opacity: 0;
      @include transform(translateX(-120%));
    }
  }
}
.slide-in {
  @include animation(slideIn 1s $ease-in-out-cubic both);
  @include keyframes(slideIn) {
    0% {
      opacity: 0;
      @include transform(translateX(120%));
    }
    100% {
      opacity: 1;
      @include transform(translateX(0));
    }
  }
}

.slide-in-from-top {
  @include animation(slideInFromTop 300ms $ease-in-out-cubic both);
  @include keyframes(slideInFromTop) {
    0% {
      opacity: 0;
      @include transform(translateY(-100%));
    }
    100% {
      opacity: 1;
      @include transform(translateY(0));
    }
  }
}
.slide-out-to-top {
  @include animation(slideOutToTop 300ms $ease-in-out-cubic both);
  @include keyframes(slideOutToTop) {
    0% {
      opacity: 1;
      @include transform(translateY(0));
    }
    100% {
      opacity: 0;
      @include transform(translateY(-100%));
    }
  }
}

.pop-in {
  @include animation(popIn 150ms $ease-in-out-cubic both);
  @include keyframes(popIn) {
    0% {
      opacity: 0;
      @include transform(translateY(5px));
    }
    100% {
      opacity: 1;
      @include transform(translateY(0));
    }
  }
}
.pop-out {
  @include animation(popOut 150ms 100ms $ease-in-out-cubic both);
  @include keyframes(popOut) {
    0% {
      opacity: 1;
      @include transform(translateY(0));
    }
    100% {
      opacity: 0;
      @include transform(translateY(5px));
    }
  }
}


#plugins-title {
  @include transition(opacity 1s ease-out);
  @include animation(fade-in-screenshot 1.5s);
  text-align: center;
  display:block;
  margin-top: 75px;
  opacity: 1;
}
.color-white > div > div {
  background-color: #f6f7f8 !important;
}
.color-transparent > div > div {
  /*background-color: rgba(255,255,255,0) !important;*/
}
.color-a > div > div {
  background-color: rgba(172, 235, 254, 1);
}
.color-b > div > div {
  background-color: rgba(182, 245, 254, 1);
}
.color-c > div > div {
  background-color: rgba(152, 225, 234, 1);;
}
.color-d > div > div {
  background-color: rgba(162, 225, 234, 1);;
}
.color-e > div > div {
  background-color: #d3aec8;
}

@keyframes fade-in-screenshot {
    from {transform: scale(1, 1); opacity: 0;}
    to {transform: scale(1, 1); opacity: 1;}
}

@keyframes contact-bottom {
    from {transform: translate3d(700px,700px,0); opacity: 0; }
    to {transform: translate3d(0,0,0); opacity: 1; }
}
.contact-bottom { animation: contact-bottom 2s; animation-fill-mode:both; }


@keyframes contact {
    from {transform: scale(1.2,1.2); opacity: 0; }
    to {transform: scale(1,1);   opacity: 1; }
}
.contact { animation: contact 2s; animation-delay: 3s; animation-fill-mode:both;  }


@keyframes thread {
    from {transform: translate3d(0,700px,0); opacity: 0;}
    to {transform: translate3d(0,0,0); opacity: 1;}
}
.thread { animation: thread 2s; animation-fill-mode:both; }


@keyframes threads {
    from {transform: translate3d(-100px,700px,0); opacity: 0;}
    to {transform: translate3d(0,0,0); opacity: 1;}
}
.threads { animation: threads 2s; animation-delay: 0.4s; animation-fill-mode:both;  }


@keyframes left-bottom {
    from {transform: translate3d(-400px,700px,0); opacity: 0;}
    to {transform: translate3d(0,0,0); opacity: 1;}
}
.left-bottom { animation: left-bottom 2s; animation-fill-mode:both; }


@keyframes left {
    from {transform: translate3d(-700px,0,0); opacity: 0;}
    to {transform: translate3d(0,0,0); opacity: 1;}
}
.left { animation: left 2s; animation-delay: 0.3s; animation-fill-mode:both; }


@keyframes top {
    from {transform: translate3d(0,-400px,0); opacity: 0;}
    to {transform: translate3d(0,0,0); opacity: 1;}
}
.top { animation: top 2s; animation-delay: 0.4s; animation-fill-mode:both; }

// part 3 - plugins

.animation-container #window-container {
  @include animation(fade-in-screenshot 0.2s);
  @include transition(top 1s ease-in-out);

  .static-screenshot {
    @include box-shadow(0 2px 8px rgba(0,0,0,0.25));
    @include animation(fade-in-screenshot 1.5s);
    @include animation-fill-mode(both);
    @include animation-delay(5.1s);
  }
}

#window-container {
  display: block;
  width: 921px;
  height: 640px;
  top: 40px;
  position: relative;
  margin: auto;
  background-color: rgba(248, 248, 248, 0.7);
  box-shadow: 0 1px 2px rgba(0,0,0, 0.2);
  border-radius: 4px;
  overflow: hidden;
  @include transition(box-shadow 2s ease-in-out);

  &.add-shadow {
    box-shadow: 0px 8px 25px rgba(0,0,0,0.25);
  }

  &.fade-out {
    @include animation(fadeOut 500ms $ease-in-out-cubic both);
  }

  .static-composer {
    @include animation(fadeIn 500ms 500ms $ease-in-out-cubic both);
    z-index: 200;
  }
  .static-screenshot {
    background:url('../images/1-initial-outlook-base-noshadow.png') top left no-repeat;
    background-size: contain;
    box-shadow: 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index:  100;
  }
}

#window-container.free-falling {
  position: absolute;
  top: 98px;
  margin: auto;
  display: block;
  transform: translate(-50%,0);
  left: 50%;
  z-index: 2;
  overflow: visible;
  height: auto;
  background: transparent;

  .static-screenshot {
    opacity: 1;
    position: relative;
  }
  .composer {
    width: 615px;
    position: absolute;
    z-index: 100;
    left: 600px;
    top: 335px;
    opacity: 0;
    @include box-shadow(0 1px 3px rgba(0,0,0,0.2));
    @include transition(opacity 500ms ease-in-out);
  }
}
#window-container.free-falling.finished {
  @include transition(all 2s $ease-in-out-cubic);

  top: 800px;
  transform: translate(-55%,0);
  // width: 1024px;
  // height: 712px;

  .composer {
    opacity: 1;
  }
}

#window-container-after-spacer {
  margin-top:50px;
  margin-bottom:40px;
  @include transition(opacity 400ms $ease-in-out-cubic);
}
#window-container-after-spacer.free-falling {
  margin-top:538px;
}



.part {
  display:inline-block;
  position: absolute;
  @include transform(translate3d(0,0,0));
  @include transition(all 1.0s cubic-bezier(0.22, 0.61, 0.36, 1));
}
.part > div > div {
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 6px;
  left: 6px;
  @include transition(all 0.75s linear);
}