.react-layer { position: absolute; right: 0; bottom: 0; width: 34%; height: 75%; pointer-events: none; overflow: hidden; z-index: 4; }
.react-float { position: absolute; bottom: -10px; display: flex; flex-direction: column; align-items: center; animation: reactUp var(--dur, 2.6s) ease-out forwards; will-change: transform, opacity; }
.react-emoji { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.react-name { margin-top: 2px; font: 700 11px/1.2 "Segoe UI", system-ui, sans-serif; color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.react-layer.big .react-emoji { font-size: 48px; }
.react-layer.big .react-name { font-size: 13px; }
@keyframes reactUp {
  0% { transform: translate(0, 0) scale(.5); opacity: 0; }
  12% { transform: translate(0, -12%) scale(1.1); opacity: 1; }
  25% { transform: translate(calc(var(--drift) * .3), -25%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(var(--drift), -520%) scale(1); opacity: 0; }
}