.moon-container {
  position: absolute;
  width: 15cqw;
  height: 15cqw;
  z-index: 3;
  opacity: 1;
  pointer-events: none;
  transform-origin: center center;
}

.moon-container.interactive {
  pointer-events: auto;
  cursor: pointer;
}

.moon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 1.2cqw var(--color-glow-soft));
  animation: moon-idle 5.5s ease-in-out infinite;
}

.moon-container.collecting {
  pointer-events: none;
  animation: moon-collect 0.8s cubic-bezier(0.36, 1.2, 0.5, 1) forwards;
}

@keyframes moon-idle {

  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  50% {
    transform: translateY(-1.2cqh) scale(1.04) rotate(-3deg);
  }
}

@keyframes moon-collect {
  0% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1) drop-shadow(0 0 1.5cqw var(--color-glow));
    opacity: 1;
  }

  30% {
    transform: scale(1.2) rotate(15deg);
    filter: brightness(1.5) drop-shadow(0 0 3cqw var(--color-glow));
    opacity: 1;
  }

  100% {
    transform: scale(0) rotate(-45deg);
    filter: brightness(2) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    opacity: 0;
  }
}

.moon-container.correct {
  pointer-events: none;
  animation: correct-pulse 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes correct-pulse {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

.moon-container.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0) rotate(0deg);
  }

  15% {
    transform: translateX(-1cqw) rotate(-5deg);
  }

  30% {
    transform: translateX(1cqw) rotate(5deg);
  }

  45% {
    transform: translateX(-0.8cqw) rotate(-3deg);
  }

  60% {
    transform: translateX(0.8cqw) rotate(3deg);
  }

  75% {
    transform: translateX(-0.4cqw) rotate(-1deg);
  }

  90% {
    transform: translateX(0.4cqw) rotate(1deg);
  }
}

.moon-container.incorrect-choice .moon-image {
  filter: drop-shadow(0 0 2.5cqw rgba(255, 0, 0, 0.95)) brightness(1.1);
}

.moon-container.wrong {
  pointer-events: none;
  animation: wrongEffect 0.8s ease-in-out forwards;
}

@keyframes wrongEffect {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 1.5cqw rgba(255, 0, 0, 0.8));
    opacity: 1;
  }

  30% {
    transform: scale(1.2) rotate(-10deg);
    filter: drop-shadow(0 0 4cqw rgba(255, 0, 0, 1)) brightness(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0) rotate(45deg);
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    opacity: 0;
  }
}

.speech-bubble-wrapper {
  position: absolute;
  width: 10cqw;
  height: 10cqw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10000;
}

.speech-bubble {
  position: absolute;
  left: 50%;
  width: 15cqw;
  height: 15cqw;
  background: url('../assets/images/moon/speech-bubble.webp') no-repeat center center;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  --dir: 1;
  --scale-x: 1;
  --scale-y: 1;
  --scale-base: 0;
  bottom: 20%;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(calc(var(--dir) * 2cqw)) scale(calc(var(--scale-x) * var(--scale-base)), calc(var(--scale-y) * var(--scale-base)));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

.speech-bubble[data-position-y="below"] {
  --dir: -1;
  --scale-y: 1;
  bottom: auto;
  top: 0%;
  transform-origin: top center;
}

.speech-bubble[data-position-x="left"],
.speech-bubble[data-position-x="right"] {
  --scale-x: -1;
}

.speech-bubble-wrapper.show-dialogue .speech-bubble {
  opacity: 1;
  --scale-base: 1;
}

.speech-bubble-text {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale-x), var(--scale-y));
  color: #ffffff;
  font: 800 1.5cqw var(--font-family-primary);
  text-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.8);
  text-align: center;
  width: 75%;
  white-space: normal;
  z-index: 5;
}