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

@media (prefers-reduced-motion: reduce) {
  .hero-shot {
    opacity: 1;
    transform: none;
    animation: none;
    will-change: auto;
  }
}

/* Reserve space for the collage; every offset scales with its container. */
.hero-showcase {
  display: none;
  position: relative;
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 1 / 1;
  margin: auto;
  align-self: center;
}

.hero-showcase .hero-shot { position: absolute; }
.hero-showcase img { width: 100%; height: auto; }
.hero-showcase .hero-shot-dashboard { width: 76%; top: 5%; right: 5%; z-index: 10; }
.hero-showcase .hero-shot-map { width: 52%; top: 27%; left: 2%; z-index: 20; }
.hero-showcase .hero-shot-tms { width: 76%; top: 54%; right: 3%; z-index: 30; }
.hero-showcase .hero-shot-phone { width: 24%; top: 27%; right: 5%; z-index: 40; }

@media (min-width: 48rem) {
  .hero-showcase { display: block; }
}