.boxing-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.boxing-photo:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.boxing-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: var(--punch-x, 50%);
  top: var(--punch-y, 50%);
  width: 22px;
  aspect-ratio: 1;
  border: 4px solid var(--yellow);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
}

.boxing-photo__impact {
  position: absolute;
  z-index: 3;
  left: var(--punch-x, 50%);
  top: var(--punch-y, 50%);
  display: grid;
  place-items: center;
  width: 78px;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 4px 4px 0 var(--ink);
  font: 400 42px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.25) rotate(-20deg);
  pointer-events: none;
}

.boxing-photo.is-punched img { animation: boxing-jolt .55s ease-out both; }
.boxing-photo.is-punched::after { animation: boxing-ring .55s ease-out both; }
.boxing-photo.is-punched .boxing-photo__impact { animation: boxing-impact .65s cubic-bezier(.2,1,.3,1) both; }

@keyframes boxing-jolt {
  0%, 100% { transform: none; }
  18% { transform: translate(-8px, 3px) rotate(-3deg) scale(.97); }
  42% { transform: translate(5px, -2px) rotate(2deg) scale(1.02); }
  68% { transform: translate(-2px, 1px) rotate(-1deg); }
}

@keyframes boxing-jolt-mobile {
  0%, 100% { transform: none; }
  20% { transform: translate(-11px, 4px) rotate(-5deg) scale(.96); }
  48% { transform: translate(7px, -3px) rotate(3deg) scale(1.03); }
  75% { transform: translate(-3px, 1px) rotate(-1deg); }
}

@keyframes boxing-ring {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.2); }
  75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@keyframes boxing-impact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-20deg); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.14) rotate(9deg); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-7deg); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-7deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2) rotate(-7deg); }
}

@media (max-width: 767px) {
  .boxing-photo.is-punched img { animation: boxing-jolt-mobile .48s ease-out both; }
}

@media (prefers-reduced-motion: reduce) {
  .boxing-photo.is-punched::after,
  .boxing-photo.is-punched .boxing-photo__impact { animation: none; }
  .boxing-photo.is-punched img { animation: boxing-jolt-lite .24s ease-out both; }
  .boxing-photo.is-punched .boxing-photo__impact { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .boxing-photo.is-punched { outline: 3px solid var(--yellow); outline-offset: 3px; }
}

@keyframes boxing-jolt-lite {
  0%, 100% { transform: none; }
  35% { transform: translateX(-5px) rotate(-1.5deg); }
  70% { transform: translateX(3px) rotate(.8deg); }
}