/* Floating balloons (Riva's drawings). The layer never blocks taps; only the balloons themselves do. */
.balloons {
  position: fixed;
  inset: 0;
  z-index: 15;            /* above the page, below the speaker button (40) and the video player (100) */
  overflow: hidden;
  pointer-events: none;
}
.balloons.is-paused .balloon { animation-play-state: paused; }

.balloon {
  position: absolute;
  bottom: 0;
  width: var(--w, 70px);
  margin-left: calc(var(--w, 70px) / -2);
  transform: translateY(105%);
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: balloon-rise var(--rise, 14s) linear forwards;
}
.balloon img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  animation: balloon-sway 3.6s ease-in-out infinite alternate;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}
@keyframes balloon-rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(calc(-100vh - 110%)); }
}
@keyframes balloon-sway {
  from { transform: translateX(calc(var(--sway, 12px) * -1)) rotate(-3deg); }
  to   { transform: translateX(var(--sway, 12px)) rotate(3deg); }
}

/* Pop: the balloon swells and vanishes, a few dots fly out. */
.balloon.is-popped { pointer-events: none; animation-play-state: paused; }
.balloon.is-popped img { transform: scale(1.3); opacity: 0; animation: none; }
.balloon__dot {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--pop, #f3a3b6);
  animation: balloon-dot 420ms ease-out forwards;
}
@keyframes balloon-dot {
  from { transform: translate(0, 0) scale(1); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; }
}

/* Small, quiet tip under "Tap the letter to open"; fades away after the first pop. */
.balloon-tip {
  margin: 8px 0 0;
  padding: 0 16px;
  font-size: 17px;
  font-style: italic;
  color: #8a96ab;
  text-align: center;
  transition: opacity 600ms ease, visibility 600ms;
}
.balloon-tip.is-done { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .balloons, .balloon-tip { display: none; }
}