.fruit-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  isolation: isolate;
}

.fruit-item {
  position: absolute;
  width: var(--fruit-width, 8%);
  height: var(--fruit-height, 12%);
  transform: translate(-50%, -100%);
  transform-origin: 50% 88%;
  pointer-events: none;
  will-change: left, top, transform;
  -webkit-user-select: none;
  user-select: none;
}

.fruit-item::after {
  content: '';
  position: absolute;
  left: 27%;
  right: 22%;
  bottom: 6%;
  height: 6%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(117, 65, 21, .17);
  filter: blur(.17cqw);
}

.fruit-whole, .fruit-half, .fruit-half-fallback, .fruit-first-bite {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: opacity 110ms ease;
}

.fruit-half, .fruit-half-fallback, .fruit-first-bite { opacity: 0; }
.fruit-item.is-bitten .fruit-whole,
.fruit-item.is-bitten .fruit-first-bite { opacity: 0; }
.fruit-item.is-bitten .fruit-half { opacity: .7; }
.fruit-item.is-bitten.half-fallback .fruit-half-fallback { opacity: .7; }
.fruit-item.half-fallback .fruit-half { display: none; }
.fruit-item.is-first-bite:not(.is-bitten) .fruit-whole { opacity: 0; }
.fruit-item.is-first-bite:not(.is-bitten) .fruit-first-bite { opacity: .86; }
.fruit-item.is-flying { z-index: 3; }

.fruit-crumb {
  position: absolute;
  width: .35%;
  aspect-ratio: 1;
  border-radius: 35%;
  background: #f8af31;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .fruit-whole, .fruit-half, .fruit-half-fallback, .fruit-first-bite { transition: none; }
  .fruit-item { will-change: auto; }
}