/**
 * EmojiMeter Component Styles
 * Smooth crossfade transitions, no blinks
 */

.emoji-meter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  overflow: hidden;
}

.emoji-meter-emoji {
  position: absolute;
  font-size: 64px;
  line-height: 1;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  /* Prevent emoji from causing layout shift */
  will-change: opacity, transform;
}

/* Entering state - starts invisible and slightly small */
.emoji-meter-emoji.emoji-meter-entering {
  opacity: 0;
  transform: scale(0.8);
}

/* Exiting state - fades out and shrinks */
.emoji-meter-emoji.emoji-meter-exiting {
  opacity: 0;
  transform: scale(0.8);
}