Mailspring/_sass/_animated-hero.scss

$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-y: visible; // So the screenshot can bleed
  overflow-x: hidden;
  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%;

  @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;
  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 {
    position: absolute;
    top: -35px;
    text-align: center;
    width: 100%;
    font-weight: 400;
    z-index: 20;
    text-shadow: 0px 0px 4px white;
  }

  #step1, #step2 {
    position: relative;
    top: 40px; // So h4 can go above the step containers
  }
}

.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-left: 100px;
  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));
    }
  }
  .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 300ms 800ms $ease-in-out-cubic both);
  }
  h2 { @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); }
}

.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));
    }
  }
}