.hero-shot {
  opacity: 0;

  transform: translateY(32px) scale(.94);
  animation: hero-enter .8s cubic-bezier(.16, 1, .3, 1) forwards;

  will-change: transform, opacity;
}

.hero-shot img {
  display: block;
  filter: drop-shadow(0 38px 20px);
}

.hero-shot-dashboard {
  animation-delay: 50ms;
  transform: translateY(32px) scale(.94) rotate(-3deg);
}

.hero-shot-map {
  animation-delay: 150ms;
  transform: translateY(32px) scale(.94) rotate(4deg);
}

.hero-shot-tms {
  animation-delay: 250ms;
  transform: translateY(32px) scale(.94) rotate(-2deg);
}

.hero-shot-phone {
  animation-delay: 350ms;
  transform: translateY(32px) scale(.94) rotate(6deg);
}

@keyframes hero-enter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
    transform:
      translateY(0) scale(1) rotate(var(--rotation));
  }
}

.hero-shot-dashboard {
  --rotation: -2deg;
}

.hero-shot-map {
  --rotation: 4deg;
}

.hero-shot-tms {
  --rotation: -3deg;
}

.hero-shot-phone {
  --rotation: 6deg;
}