/* Estilos globales para burbujas animadas */
.sccll-bubble {
  position: fixed;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0.92;
  background: radial-gradient(circle at 28% 28%,
    #e3f6ff 0%,
    #b3e6ff 35%,
    #7fd4ff 60%,
    #4fc3f7 80%,
    #29b6f6 100%);
  box-shadow:
    0 0 12px 2px #7fd4ff,
    0 2px 12px 2px #29b6f6,
    inset 0 0 8px #e3f6ff;
  filter: saturate(1.25) blur(0.2px);
  transform: translate(-50%, -50%) scale(0.8) rotate(var(--rot));
  animation: sccll-bubble-rise var(--dur) ease-out forwards;
  will-change: transform, opacity;
}

@keyframes sccll-bubble-rise {
  0% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(0.8) rotate(var(--rot));
  }
  60% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)))
      scale(var(--scale)) rotate(calc(var(--rot) + 15deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sccll-bubble {
    animation-duration: 300ms !important;
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.35);
  }
  @keyframes sccll-bubble-rise {
    to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
  }
}