/* Mantiene el martillo cuadrado y nítido durante el impacto de una puja. */
.hammer {
  width: 36%;
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: none;
  transform-origin: 50% 65%;
  will-change: transform, opacity;
}

.hammer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hammer svg rect {
  vector-effect: non-scaling-stroke;
}

.hammer.play {
  animation: hammerFade .55s ease-out;
}

.hammer .gavel-head {
  transform-box: view-box;
  transform-origin: 32px 29px;
}

.hammer .gavel-mallet {
  transform-box: fill-box;
  transform-origin: center;
}

.hammer .gavel-impact {
  opacity: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.hammer.play .gavel-head {
  animation: gavelStrike .55s cubic-bezier(.2, .8, .25, 1) both;
}

.hammer.play .gavel-mallet {
  animation: gavelHeadImpact .55s ease-out both;
}

.hammer.play .gavel-impact {
  animation: gavelImpact .55s ease-out both;
}

@keyframes hammerFade {
  0% { opacity: 0; }
  14%, 66% { opacity: .36; }
  100% { opacity: 0; }
}

@keyframes gavelStrike {
  0% { transform: translate(-3px, -6px) rotate(0) scale(.92); }
  44% { transform: translate(7px, 5px) rotate(-82deg) scale(1); }
  62% { transform: translate(6px, 4px) rotate(-76deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes gavelHeadImpact {
  0%, 32%, 100% { transform: scale(1); }
  44% { transform: scale(1.13, .91); }
  60% { transform: scale(1.04, .98); }
}

@keyframes gavelImpact {
  0%, 35%, 74%, 100% { opacity: 0; }
  44%, 58% { opacity: .9; }
}