/* /assets/css/bubbles.css
   Burbujas SOLO dentro del overlay1: #overlayBubbles
*/

#overlayBubbles.bc-bubbles-scope{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

#overlayBubbles .bc-bubble{
  position:absolute;
  bottom:-80px;
  border-radius:999px;
  opacity:.55;
  filter: blur(.2px);
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.35),
    rgba(255,255,255,.08) 45%,
    rgba(255,255,255,.02) 70%,
    rgba(255,255,255,0) 100%
  );
  border:1px solid rgba(255,255,255,.10);
  animation-name: bcFloat;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes bcFloat{
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10%  { opacity: .55; }
  80%  { opacity: .35; }
  100% { transform: translateY(-120vh) translateX(var(--drift, 0px)) scale(1.15); opacity: 0; }
}