/* ===========================================================
   BUBBLE FIELD — efeito de bolhas de sabão/água
   Isolado de propósito. Aplicado via .bubble-field dentro das
   sections de fundo branco (não altera layout existente).
=========================================================== */

.bubble-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* camada de bolhas por cima do card do formulário (bk-wrapper).
   z-index alto dentro do stacking context do próprio bk-wrapper
   (isolation:isolate), e pointer-events:none garante que os
   cliques continuam passando direto pros botões/inputs. */
.bubble-field--card {
  z-index: 5;
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* obs: propositalmente NÃO forçamos z-index no .container aqui —
   elementos position:absolute (como .bubble-field) já pintam por
   cima de conteúdo não posicionado por padrão, então as bolhas
   ficam visíveis sobre todo o conteúdo da section, incluindo o
   card do formulário. pointer-events:none garante que cliques
   continuam passando direto. */

.bubble {
  position: absolute;
  bottom: -12%;
  left: var(--left);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.18) 38%, rgba(140, 205, 255, 0.14) 58%, rgba(255, 255, 255, 0.02) 76%);
  box-shadow:
    inset 0 0 6px rgba(255, 255, 255, 0.65),
    inset -5px -5px 12px rgba(120, 190, 255, 0.28),
    inset 4px 6px 10px rgba(255, 190, 230, 0.18),
    0 0 12px rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation:
    bkBubbleRise var(--duration) linear var(--delay) infinite,
    bkBubbleShimmer 5.5s ease-in-out var(--delay) infinite;
  will-change: transform, opacity, filter;
}

.bubble::after {
  content: '';
  position: absolute;
  top: 13%;
  left: 20%;
  width: 30%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(1px);
  transform: rotate(-18deg);
}

.bubble::before {
  content: '';
  position: absolute;
  bottom: 16%;
  right: 18%;
  width: 16%;
  height: 12%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  filter: blur(0.5px);
}

@keyframes bkBubbleRise {
  0% {
    transform: translate(0, 0) scale(0.35) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 0.85;
  }

  50% {
    transform: translate(var(--drift), -58vh) scale(1) rotate(8deg);
  }

  90% {
    opacity: 0.8;
  }

  100% {
    transform: translate(calc(var(--drift) * 1.7), -118vh) scale(1.18) rotate(-6deg);
    opacity: 0;
  }
}

@keyframes bkBubbleShimmer {

  0%,
  100% {
    filter: hue-rotate(calc(var(--tint) * 1deg)) saturate(1);
  }

  50% {
    filter: hue-rotate(calc(var(--tint) * 1deg + 45deg)) saturate(1.35);
  }
}

@media (max-width:768px) {
  .bubble:nth-child(n+13) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble {
    animation: none;
    opacity: 0;
    display: none;
  }
}