/* ========================================================
   REACCIONES FLOTANTES (ESTILO INSTAGRAM / TIKTOK LIVE)
   Animación limpia y ligera acelerada por GPU
   ======================================================== */
#floating-reactions-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

.floating-particle {
  position: absolute;
  font-size: 1.8rem;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  will-change: transform, opacity;
  animation: floatUpClean 1.9s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes floatUpClean {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate3d(var(--offset-x, 0px), -40px, 0) scale(1.1) rotate(var(--rot-angle, 6deg));
  }
  70% {
    opacity: 0.85;
    transform: translate3d(calc(var(--offset-x, 0px) * 1.3), -240px, 0) scale(1) rotate(calc(var(--rot-angle, 6deg) * -1));
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--offset-x, 0px) * 1.8), -380px, 0) scale(0.7) rotate(var(--rot-angle, 6deg));
  }
}