/* First-screen entrance: the copy and image meet at their normal positions. */
.hero-grid.hero-entrance-play > .hero-copy {
  animation: hero-copy-enter 1.18s cubic-bezier(.22, 1, .36, 1) 60ms both;
}

.hero-grid.hero-entrance-play > .hero-showcase {
  animation: hero-showcase-enter 1.45s cubic-bezier(.22, 1, .36, 1) 140ms both;
}

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translate3d(-90px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-showcase-enter {
  from { opacity: 0; transform: translate3d(240px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 1000px) {
  @keyframes hero-copy-enter {
    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  @keyframes hero-showcase-enter {
    from { opacity: 0; transform: translate3d(52px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}