/* WeSpaces Emoji Reaction Animations */
/* Floating emoji animations - Instagram Live / TikTok style */

.emoji-reaction {
  will-change: transform, opacity;
  animation-fill-mode: forwards;
}

/* Wiggle variation 1: starts left, sways right */
.emoji-wiggle-1 {
  animation:
    emojiRise var(--duration, 3000ms) ease-out forwards,
    emojiWiggle1 0.8s ease-in-out infinite alternate;
}

/* Wiggle variation 2: starts right, sways left */
.emoji-wiggle-2 {
  animation:
    emojiRise var(--duration, 3000ms) ease-out forwards,
    emojiWiggle2 0.8s ease-in-out infinite alternate;
}

/* Rise animation: moves up, scales, fades out */
/* Uses --rise-distance CSS variable for responsive height */
@keyframes emojiRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translateY(-10%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(calc(var(--rise-distance, 180px) * -0.55)) scale(1.15);
  }
  85% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(var(--rise-distance, 180px) * -1)) scale(1);
  }
}

/* Wiggle 1: sway left to right */
@keyframes emojiWiggle1 {
  0% { margin-left: -12px; }
  100% { margin-left: 12px; }
}

/* Wiggle 2: sway right to left (opposite direction) */
@keyframes emojiWiggle2 {
  0% { margin-left: 12px; }
  100% { margin-left: -12px; }
}