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

img.hero-bg {
  height: 100%;
  min-height: 400px;
  position: absolute;
  top: 0;
  @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));
    }
  }
}

#watercolor-left {
  z-index: 1;
  left: 0;
}
#watercolor-right {
  z-index: 2;
  right: 0;
}

#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-right: 30px;
  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;
}

.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 {
  @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 {
    position: relative;
    display: inline-block;
  }
  .p-0 { @include animation(providerPopIn 300ms 0 $ease-in-out-cubic both); }
  .p-1 { @include animation(providerPopIn 300ms 150ms $ease-in-out-cubic both); }
  .p-2 { @include animation(providerPopIn 300ms 300ms $ease-in-out-cubic both); }
  .p-3 { @include animation(providerPopIn 300ms 450ms $ease-in-out-cubic both); }
  .p-4 { @include animation(providerPopIn 300ms 600ms $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));
    }
  }
}