.bubble {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font: inherit;
  --size: 72px;
  --left: 50vw;
  --duration: 12s;
  --delay: 0s;
  --sway: 30px;
  --scale: 1;

  position: absolute;
  left: var(--left);
  bottom: calc(-1 * var(--size) - 24px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  cursor: pointer;
  transform: translate3d(-50%, 0, 0) scale(var(--scale));
  will-change: transform, opacity;
  animation: rise var(--duration) linear var(--delay) infinite;
  opacity: 0;

  background:
    radial-gradient(circle at 29% 25%,
      rgba(255,255,255,.96) 0 3%,
      rgba(255,255,255,.30) 5%,
      transparent 15%),
    radial-gradient(circle at 70% 72%,
      rgba(129, 252, 255, .12),
      transparent 32%),
    radial-gradient(circle at 45% 55%,
      rgba(255,255,255,.02) 35%,
      rgba(255, 104, 228, .11) 58%,
      rgba(92, 225, 255, .18) 76%,
      rgba(255,255,255,.34) 94%,
      rgba(255,255,255,.12) 100%);

  border: 1px solid rgba(255,255,255,.46);
  box-shadow:
    inset 8px 9px 16px rgba(255,255,255,.14),
    inset -10px -9px 18px rgba(59, 218, 255, .08),
    0 0 18px rgba(141, 228, 255, .12),
    0 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.bubble::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: inherit;
  background:
    conic-gradient(
      from 205deg,
      transparent 0deg,
      rgba(255, 115, 218, .38) 40deg,
      rgba(255,255,255,.05) 72deg,
      transparent 110deg,
      rgba(93, 226, 255, .38) 185deg,
      transparent 230deg,
      rgba(176, 129, 255, .30) 300deg,
      transparent 360deg
    );
  filter: blur(2px);
  opacity: .7;
  mix-blend-mode: screen;
}

.bubble::after {
  content: "";
  position: absolute;
  width: 28%;
  height: 12%;
  left: 20%;
  top: 15%;
  border-radius: 50%;
  border-top: 3px solid rgba(255,255,255,.74);
  transform: rotate(-28deg);
  filter: blur(.25px);
  opacity: .85;
}

@keyframes rise {
  0% {
    transform:
      translate3d(-50%, 0, 0)
      scale(calc(var(--scale) * .85));
    opacity: 0;
  }

  7% {
    opacity: .92;
  }

  28% {
    transform:
      translate3d(calc(-50% + var(--sway)), -32vh, 0)
      scale(var(--scale));
  }

  55% {
    transform:
      translate3d(calc(-50% - var(--sway) * .45), -66vh, 0)
      scale(calc(var(--scale) * 1.03));
  }

  80% {
    transform:
      translate3d(calc(-50% + var(--sway) * .7), -102vh, 0)
      scale(var(--scale));
    opacity: .88;
  }

  100% {
    transform:
      translate3d(calc(-50% - var(--sway) * .2), -135vh, 0)
      scale(calc(var(--scale) * 1.06));
    opacity: 0;
  }
}

/* Partículas do estouro */
.pop-particle {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  background: rgba(220, 252, 255, .95);
  box-shadow: 0 0 8px rgba(140, 236, 255, .8);
  animation: pop .52s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes pop {
  from {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  to {
    transform: translate3d(var(--dx), var(--dy), 0) scale(.1);
    opacity: 0;
  }
}

.bubble.popping {
  animation: none;
  pointer-events: none;
  opacity: 0;
}

.bubble:focus-visible { outline: 2px solid #dcfcff; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bubble { animation-duration: calc(var(--duration) * 1.8); }
}