.adn-bee__sprite {
  --adn-bee-frame-x: 0;
  --adn-bee-frame-y: 0;
  position: relative;
  z-index: 2;
  display: block;
  width: 116px;
  height: 116px;
  background-image: var(--adn-bee-sprite);
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position:
    calc(var(--adn-bee-frame-x) * 100% / 3)
    calc(var(--adn-bee-frame-y) * 100% / 2);
  transform-origin: 50% 55%;
  will-change: background-position, transform;
  pointer-events: none;
}

.adn-bee.is-facing-right .adn-bee__sprite { transform: scaleX(-1); }
.adn-bee.is-facing-left .adn-bee__sprite { transform: scaleX(1); }
.adn-bee[data-bee-state="fly"] .adn-bee__sprite,
.adn-bee[data-bee-state="carry"] .adn-bee__sprite { animation: adnBeeSpriteFlight .42s ease-in-out infinite alternate; }
.adn-bee[data-bee-state="inspect"] .adn-bee__sprite { animation: adnBeeSpriteInspect 1.1s ease-in-out infinite alternate; }
.adn-bee[data-bee-state="celebrate"] .adn-bee__sprite { animation: adnBeeSpriteCelebrate .36s ease-in-out 3 alternate; }

.adn-bee-preloader__bee.adn-bee__sprite {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -150px 0 0 -75px;
  --adn-bee-frame-x: 2;
  --adn-bee-frame-y: 2;
  background-size: 400% 300%;
}

@keyframes adnBeeSpriteFlight { from { margin-top: 2px; } to { margin-top: -3px; } }
@keyframes adnBeeSpriteInspect { from { margin-top: 0; } to { margin-top: -2px; } }
@keyframes adnBeeSpriteCelebrate { from { margin-top: 1px; } to { margin-top: -4px; } }

@media (prefers-reduced-motion: reduce) {
  .adn-bee__sprite { animation: none !important; }
}