.surprise-poof {
  position: absolute;
  width: 140px;
  height: 140px;
  margin: -70px;
  pointer-events: none;
}
.surprise-poof::before {
  content: '';
  position: absolute;
  inset: 43px;
  border-radius: 50%;
  background: #fffdf5;
  animation: poof-flash 420ms ease-out both;
}
.poof-puff, .poof-fleck {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 46% 54% 48% 52%;
  background: radial-gradient(circle at 35% 25%, #fffef9 15%, #f6f3e9 55%, #d8d0bf 100%);
  box-shadow: inset 0 -3px 6px #a69b8330, 0 1px 4px #655f5514;
  animation: poof-drift 780ms cubic-bezier(.16,.55,.38,1) var(--delay) both;
  will-change: transform, opacity;
}
.poof-fleck {
  background: #c5bca9;
  box-shadow: none;
  animation-name: poof-speck;
  animation-duration: 660ms;
}
@keyframes poof-flash {
  0% { opacity: 0; transform: scale(.2); }
  18% { opacity: .9; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes poof-drift {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); filter: blur(0); }
  18% { opacity: .96; transform: translate(calc(-50% + var(--x) * .35), calc(-50% + var(--y) * .35)) scale(.9); }
  45% { opacity: .85; transform: translate(calc(-50% + var(--x) * .7), calc(-50% + var(--y) * .7 - 4px)) scale(1.05); filter: blur(.3px); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 12px)) scale(1.3); filter: blur(3px); }
}
@keyframes poof-speck {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  22% { opacity: .5; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y) - 12px)) scale(.3); }
}
@media (max-width: 650px) {
  .surprise-poof { transform: scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .surprise-poof::before { animation: none; opacity: 0; }
  .poof-puff {
    transform: translate(calc(-50% + var(--x) * .45), calc(-50% + var(--y) * .45)) scale(.8);
    animation: poof-quiet 200ms linear both;
    will-change: auto;
  }
  .poof-fleck { display: none; }
}
@keyframes poof-quiet { from { opacity: .8; } to { opacity: 0; } }