/* Товари стоять на передньому краї кожної полиці. */
.target {
  --product-height: clamp(74px, 18vh, 155px);
  width: clamp(72px, 15vh, 142px);
  height: var(--product-height);
  z-index: 2;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.target:hover { transform: scale(1.045); box-shadow: none; }

.target.shatter {
  animation: package-shatter .25s ease-out forwards;
}

@keyframes package-shatter {
  0% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(.72) rotate(7deg); }
}

.package-particle {
  position: absolute;
  z-index: 18;
  display: block;
  pointer-events: none;
  border-radius: 2px;
  background-repeat: no-repeat;
  box-shadow: 1px 2px 2px rgba(48, 23, 12, .34);
  transform: translate(-50%, -50%);
  animation: package-fragment .76s cubic-bezier(.18,.76,.28,1) var(--delay) forwards;
}

/* Рулон починає політ біля руки й візуально віддаляється до цілі. */
.shot-roll {
  left: clamp(92px, 14vw, 220px);
  bottom: clamp(90px, 14vh, 160px);
  transform-origin: center;
}

.shot-roll.throw { animation: roll-flight .58s cubic-bezier(.15,.76,.24,1) forwards; }

@keyframes roll-flight {
  0% { opacity: 1; transform: translate(0, 0) rotate(-14deg) scale(1.18); }
  42% { opacity: 1; transform: translate(calc(var(--tx) * .43), calc(var(--ty) * .43)) rotate(150deg) scale(.69); }
  88% { opacity: 1; transform: translate(calc(var(--tx) * .88), calc(var(--ty) * .88)) rotate(322deg) scale(.23); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(390deg) scale(.12); }
}

@keyframes package-fragment {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35) rotate(var(--spin)); }
}

.ruta-logo {
  width: clamp(74px, 9vw, 136px);
  height: clamp(52px, 6.4vw, 96px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 1px rgba(55, 30, 16, .18));
}

/* Обидва типи упаковок мають однаковий вигляд: відрізняється лише результат влучання. */
.target.bad::after,
.target.target.good::after { content: none; }

.target.target.good,
.target.target.good img {
  background: transparent;
  border: 0;
  box-shadow: none;
  opacity: 1;
  transform: none;
  mix-blend-mode: normal;
}

/* Вісім кадрів руки з прозорого sprite-sheet. */
.hand-sprite {
  position: absolute;
  z-index: 7;
  left: clamp(-44px, 1vw, 16px);
  bottom: clamp(-18px, -1vw, 4px);
  width: clamp(205px, 28vw, 430px);
  aspect-ratio: 512 / 576;
  pointer-events: none;
  background-image: url('hand/hand-png.png');
  background-size: 400% 200%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  mix-blend-mode: normal;
  filter: drop-shadow(-7px 9px 7px rgba(40, 22, 13, .32));
  transform-origin: right bottom;
}

.hand-sprite.throwing { animation: hand-motion .62s ease-out; }

@keyframes hand-motion {
  0% { transform: translate(0, 0) rotate(0deg); }
  34% { transform: translate(-3%, 2%) rotate(-5deg); }
  70% { transform: translate(6%, -2%) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (max-width: 600px) {
  .target { --product-height: clamp(68px, 16vh, 105px); width: clamp(56px, 17vw, 78px); }
  .hand-sprite { left: -32px; bottom: -6px; width: 215px; }
  .ruta-logo { width: 64px; height: 46px; }
  .shot-roll { left: 72px; bottom: 120px; }
}