/**
 * Bubble CTA (goo + exploding circles) — Meteorbet88 palette.
 * Scoped to .button--bubble__container only (no global hue-rotate).
 */

.button--bubble__svg-goo {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.button--bubble__container {
  position: relative;
  display: inline-block;
  vertical-align: top;
  --bubble-pink: #ff2d95;
  --bubble-magenta: #ff1a8c;
  --bubble-orange: #ff8c1a;
  --bubble-gold: #ffd700;
  --bubble-coral: #ff4d6d;
}

.button--bubble__container--spin {
  display: block;
  width: 100%;
}

.button--bubble__container .button--bubble {
  position: relative;
  z-index: 2;
}

/* Goo-filtered effect layer (hue only on circles — keeps goo filter stable) */
.button--bubble__effect-container {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
  filter: url("#goo-bubble-spin");
  -webkit-filter: url("#goo-bubble-spin");
}

.button--bubble__effect {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
  transform: scale(1);
  transform-origin: center center;
  opacity: 0;
  box-shadow:
    0 0 0 0 rgba(255, 45, 149, 0.35),
    0 0 18px 2px rgba(255, 215, 0, 0.25);
}

.button--bubble__container .circle {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bubble-pink);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  /* Scoped hue drift on bubbles only — never on page/div */
  animation: bubble-circle-hue 6.5s linear infinite;
}

.button--bubble__container .circle.top-left {
  top: 8px;
  left: 14px;
  background: radial-gradient(circle at 35% 35%, var(--bubble-gold), var(--bubble-pink) 70%);
}

.button--bubble__container .circle.top-left:nth-child(1) {
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 35%, #fff6a8, var(--bubble-gold) 55%, var(--bubble-orange));
}

.button--bubble__container .circle.top-left:nth-child(2) {
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 40% 30%, var(--bubble-coral), var(--bubble-magenta));
}

.button--bubble__container .circle.top-left:nth-child(3) {
  width: 14px;
  height: 14px;
  background: var(--bubble-orange);
}

.button--bubble__container .circle.bottom-right {
  right: 14px;
  bottom: 8px;
  background: radial-gradient(circle at 35% 35%, var(--bubble-orange), var(--bubble-magenta) 75%);
}

.button--bubble__container .circle.bottom-right:nth-child(5) {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 40% 30%, var(--bubble-gold), var(--bubble-coral));
}

.button--bubble__container .circle.bottom-right:nth-child(6) {
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 35% 35%, #ffb347, var(--bubble-pink));
}

.button--bubble__container .circle.bottom-right:nth-child(7) {
  width: 12px;
  height: 12px;
  background: var(--bubble-gold);
}

/* Mild hue drift on bubble circles only (brand stays pink/gold-forward) */
@keyframes bubble-circle-hue {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(32deg);
  }
}

/* Room for exploding bubbles around the festive CTA */
#meteorbet88-slot-standalone-v3 .slot-wrapper {
  overflow: visible;
}

#meteorbet88-slot-standalone-v3 .button--bubble__container--spin {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .button--bubble__effect-container {
    filter: none;
    -webkit-filter: none;
  }

  .button--bubble__container .circle {
    animation: none !important;
  }

  .button--bubble__container .circle,
  .button--bubble__effect {
    display: none !important;
  }
}