body {
  background: linear-gradient(180deg, #4cc9f0, #4361ee 70%, #3a0ca3);
}

#sea {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.bubble {
  position: absolute;
  top: 100%;
  width: var(--size);
  height: var(--size);
  animation: rise var(--rise) linear forwards;
  cursor: pointer;
}

/* the wobble lives on the inner element so it combines with the rise */
.bubble span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: calc(var(--size) * 0.5);
  line-height: 1;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 8%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 50% 50%, transparent 55%, color-mix(in srgb, var(--color) 70%, transparent) 100%),
    color-mix(in srgb, var(--color) 35%, transparent);
  border: max(2px, 0.4vmin) solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 2vmin rgba(255, 255, 255, 0.35);
  animation: sway var(--sway) ease-in-out infinite alternate;
}

@keyframes rise {
  to { transform: translateY(calc(-100vh - var(--size) - 10vh)); }
}

@keyframes sway {
  from { transform: translateX(calc(var(--drift) * -1)) scale(1, 0.96); }
  to { transform: translateX(var(--drift)) scale(0.96, 1); }
}

.bubble.popped {
  pointer-events: none;
}

.bubble.popped span {
  animation: burst 0.3s ease-out forwards;
}

@keyframes burst {
  to { transform: scale(1.5); opacity: 0; }
}

.drop {
  position: absolute;
  width: 2.2vmin;
  height: 2.2vmin;
  margin: -1.1vmin 0 0 -1.1vmin;
  border-radius: 50%;
  pointer-events: none;
  animation: splash 0.5s ease-out forwards;
}

@keyframes splash {
  to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

.friend {
  position: absolute;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: swim-away 1.4s ease-in forwards;
}

@keyframes swim-away {
  0% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(-50%, -50%) scale(1.4) rotate(-10deg); }
  100% { transform: translate(-50%, -250%) scale(1) rotate(10deg); opacity: 0; }
}