/* All four canvases share the exact original banner crop and dimensions. */
.hee-stats--banner > .hee-fleet {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: hidden;
}
.hee-fleet > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0;
}
html.hee-fleet-motion .hee-stats--banner > .hee-stats__background { visibility: hidden; }
html.hee-fleet-motion .hee-stats--banner > .hee-fleet { display: block; }
.hee-fleet__vehicle {
  opacity: 0;
  transform: translate3d(var(--fleet-x), var(--fleet-y), 0) scale(.985);
  transform-origin: 70% 75%;
  will-change: transform, opacity;
}
.hee-fleet__vehicle--rear { --fleet-x: 60px; --fleet-y: -15px; --fleet-delay: 0ms; --fleet-duration: 900ms; z-index: 1; }
.hee-fleet__vehicle--middle { --fleet-x: 85px; --fleet-y: -20px; --fleet-delay: 180ms; --fleet-duration: 900ms; z-index: 2; }
.hee-fleet__vehicle--front { --fleet-x: 110px; --fleet-y: -28px; --fleet-delay: 360ms; --fleet-duration: 900ms; z-index: 3; }
.hee-fleet.is-playing .hee-fleet__vehicle {
  animation: hee-fleet-arrive var(--fleet-duration) cubic-bezier(.25,.5,.45,1) var(--fleet-delay) both;
}
.hee-fleet.is-complete .hee-fleet__vehicle { will-change: auto; }
@keyframes hee-fleet-arrive {
  from { opacity: 0; transform: translate3d(var(--fleet-x), var(--fleet-y), 0) scale(.985); }
  55% { opacity: 1; }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (max-width: 1000px) {
  .hee-stats--banner > .hee-fleet {
    top: auto;
    bottom: 0;
    height: calc(100vw / 1.9);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%);
    mask-image: linear-gradient(to bottom, transparent, #000 13%);
  }
  .hee-fleet > img { object-position: right bottom; }
  .hee-fleet__vehicle--rear { --fleet-x: 36px; --fleet-y: -9px; }
  .hee-fleet__vehicle--middle { --fleet-x: 51px; --fleet-y: -12px; }
  .hee-fleet__vehicle--front { --fleet-x: 66px; --fleet-y: -17px; }
}
@media (prefers-reduced-motion: reduce) {
  html.hee-fleet-motion .hee-stats--banner > .hee-stats__background { visibility: visible; }
  html.hee-fleet-motion .hee-stats--banner > .hee-fleet { display: none; }
}
@media print {
  html.hee-fleet-motion .hee-stats--banner > .hee-stats__background { visibility: visible; }
  html.hee-fleet-motion .hee-stats--banner > .hee-fleet { display: none; }
}