.floatBubbles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  overflow:hidden;
}

.floatBubble{
  position:absolute;
  width:56px;
  height:56px;
}

.floatBubble__inner{
  position:absolute;
  inset:0;
  border-radius:999px;

  background:
    radial-gradient(circle at 30% 22%,
      rgba(255,255,255,.95),
      rgba(255,255,255,.55) 40%,
      rgba(255,255,255,.22) 72%
    ),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));

  border:1px solid rgba(255,255,255,.65);

  box-shadow:
    0 16px 40px rgba(0,0,0,.18),
    0 0 0 2px rgba(255,255,255,.35) inset,
    0 10px 24px rgba(255,231,0,.18);

  opacity:1;
  will-change:transform;
  transform-origin:center;
}

.floatBubble__inner::before{
  content:"";
  position:absolute;
  inset:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.45);
  opacity:1;
}

.floatBubble__inner::after{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  width:18px;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  opacity:.55;
  pointer-events:none;
}

.floatBubble__img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:30px;
  height:30px;
  object-fit:contain;
  opacity:1;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.28));
}

.floatBubble__inner.m-a{ animation:fbA 6.6s ease-in-out infinite; }
.floatBubble__inner.m-b{ animation:fbB 8.4s ease-in-out infinite; }
.floatBubble__inner.m-c{ animation:fbC 9.4s ease-in-out infinite; }

@keyframes fbA{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(var(--s,1)); }
  50%{ transform:translate3d(0,-12px,0) rotate(3deg) scale(var(--s,1)); }
}
@keyframes fbB{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(var(--s,1)); }
  50%{ transform:translate3d(10px,-10px,0) rotate(-3deg) scale(var(--s,1)); }
}
@keyframes fbC{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(var(--s,1)); }
  50%{ transform:translate3d(-10px,-12px,0) rotate(2deg) scale(var(--s,1)); }
}

@media (max-width:560px){
  .floatBubble{
    width:48px;
    height:48px;
  }
  .floatBubble__img{
    width:26px;
    height:26px;
  }
}

@media (prefers-reduced-motion: reduce){
  .floatBubble__inner.m-a,
  .floatBubble__inner.m-b,
  .floatBubble__inner.m-c{
    animation:none;
    transform:scale(var(--s,1));
  }
}
.floatBubbles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
  overflow:hidden;
}