.motion {
  overflow: hidden;
  font-size: 0;
}

.motion img {
  opacity: 1;
  width: 100%;
  transition: opacity 3s ease-in-out;
}

.motion.loaded img:not(.motion-image) {
  opacity: 0;
  pointer-events: none;
}

.motion {
  background-size: cover;
}

.motion .motion-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: 10;

  transition: transform 15000ms linear, transform-origin 15000ms linear;
  transform-origin: 50% 50%;

  animation-name: kenburns;
  animation-duration: 25000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

.motion.panLeftRight .motion-image {
  animation-name: panLeftRight;
  animation-duration: 250000ms;
}

.motion.panRightLeft .motion-image {
  animation-name: panRightLeft;
  animation-duration: 250000ms;
}

.motion.loaded.playing .motion-image,
.motion.loaded.autoplay .motion-image,
.motion.loaded.desktop:hover .motion-image,
.motion.loaded.desktop video[autoplay] + .motion-image {
  animation-play-state: running;
}

@keyframes kenburns {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, 0, 0) scale(1.3);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes panLeftRight {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  5% { transform: translate3d(10%, 0, 0) scale(1.2); }
  10% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  15% { transform: translate3d(10%, 0, 0) scale(1.2); }
  20% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  25% { transform: translate3d(10%, 0, 0) scale(1.2); }
  30% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  35% { transform: translate3d(10%, 0, 0) scale(1.2); }
  40% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  45% { transform: translate3d(10%, 0, 0) scale(1.2); }
  50% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  55% { transform: translate3d(10%, 0, 0) scale(1.2); }
  60% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  65% { transform: translate3d(10%, 0, 0) scale(1.2); }
  70% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  75% { transform: translate3d(10%, 0, 0) scale(1.2); }
  80% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  85% { transform: translate3d(10%, 0, 0) scale(1.2); }
  90% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  95% { transform: translate3d(10%, 0, 0) scale(1.2); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes panRightLeft {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  5% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  10% { transform: translate3d(10%, 0, 0) scale(1.2); }
  15% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  20% { transform: translate3d(10%, 0, 0) scale(1.2); }
  25% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  30% { transform: translate3d(10%, 0, 0) scale(1.2); }
  35% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  40% { transform: translate3d(10%, 0, 0) scale(1.2); }
  45% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  50% { transform: translate3d(10%, 0, 0) scale(1.2); }
  55% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  60% { transform: translate3d(10%, 0, 0) scale(1.2); }
  65% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  70% { transform: translate3d(10%, 0, 0) scale(1.2); }
  75% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  80% { transform: translate3d(10%, 0, 0) scale(1.2); }
  85% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  90% { transform: translate3d(10%, 0, 0) scale(1.2); }
  95% { transform: translate3d(-10%, 0, 0) scale(1.2); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}