/********
  Header
 */
.hero-scene {
  perspective: 1600px;
  perspective-origin: center center;
  overflow: hidden;
  background: #fefefe;

}

.hero {
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform, opacity;
}

.hero {
  transform: rotateX(65deg) translateY(-60px);
  opacity: 1;
}

@keyframes heroIntro {
  0% {
    transform: rotateX(65deg) translateY(-60px);
    opacity: 0;
  }
  40% {
    transform: rotateX(-45deg) translateY(27px);
    opacity: 1;
  }
  55% {
    transform: rotateX(20deg) translateY(-12px);
  }
  70% {
    transform: rotateX(-15deg) translateY(9px);
  }
  85% {
    transform: rotateX(9deg) translateY(-6px);
  }
  100% {
    transform: rotateX(0deg) translateY(0);
  }
}

.hero.animate {
  animation: heroIntro 1.4s ease-out forwards;
}



/**********
  Features
 */
.features-grid .feature-card:nth-child(2n) {
  transition-delay: 0.2s;
}

.feature-card {
  flex: 1;
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease-out;
}
.feature-card.active {
  opacity: 1;
  transform: translateY(0);
}


/**********
  Pipeline
 */
.text-box {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-out;
}

.pipeline-scene.active .text-box {
  opacity: 1;
  transform: translateY(0);
}

.image-box {
  opacity: 0;
  transform: rotate(-180deg);
  transition: all 1s ease-out;
}

.pipeline-scene.active .image-box {
  opacity: 1;
  transform: rotate(0deg);
}


/*******
  Video
 */
.video-grid .video-card:nth-child(2n) {
  transition-delay: 0.2s;
}

.video-card {
  flex: 1;
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease-out;
}
.video-card.active {
  opacity: 1;
  transform: translateY(0);
}



.screenshot-grid .screenshot:nth-child(2n) {
  transition-delay: 0.2s;
}

.screenshot {
  flex: 1;
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease-out;
}
.screenshot.active {
  opacity: 1;
  transform: translateY(0);
}