#watermelon-launch-overlay {
  --fall-height: 100vh;
  --fall-height: 100dvh;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  overflow: hidden;
  contain: strict;
}

#watermelon-launch-overlay > span {
  --melon-size: min(280px, 52vw, 36vh);
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--melon-size);
  height: var(--melon-size);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: var(--melon-size);
  line-height: 1;
  text-align: center;
  user-select: none;
  will-change: transform, opacity;
  animation: watermelon-launch-fall 900ms both;
}

@keyframes watermelon-launch-fall {
  0% {
    transform: translate(-50%, calc(-1.3 * var(--melon-size))) rotate(var(--rotation-start, -16deg));
    animation-timing-function: cubic-bezier(.42, 0, .88, .55);
  }
  62% {
    transform: translate(-50%, calc(var(--fall-height) * 0.88 - var(--melon-size))) rotate(var(--rotation-bounce, 10deg));
    animation-timing-function: cubic-bezier(.15, .65, .3, 1);
  }
  78% {
    transform: translate(-50%, calc(var(--fall-height) * 0.76 - var(--melon-size))) rotate(var(--rotation-bounce, 3deg));
    opacity: 1;
    animation-timing-function: cubic-bezier(.5, 0, .85, .5);
  }
  100% {
    transform: translate(-50%, calc(var(--fall-height) * 1.05)) rotate(var(--rotation-end, 16deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #watermelon-launch-overlay { display: none; }
  #watermelon-launch-overlay > span { animation: none; }
}

.soon-wrap.is-soon-visible .tooltip { opacity: 1; transform: translate(-50%, 0); }