#bubble-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:hidden}.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,hsla(210,80%,78%,0.25),hsla(208,90%,65%,0.15),hsla(201,80%,40%,0.08));border:1px solid hsla(210,80%,78%,0.15);box-shadow:0 2px 4px hsla(201,80%,40%,0.05);animation:floatUp var(--duration) linear infinite;opacity:0;will-change:transform,opacity;transform:translateZ(0)}.bubble::before{content:'';position:absolute;top:25%;left:25%;width:20%;height:20%;background:hsla(210,80%,90%,0.3);border-radius:50%;filter:blur(0.5px)}.bubble.bubble-sm{width:8px;height:8px}.bubble.bubble-md{width:16px;height:16px}.bubble.bubble-lg{width:24px;height:24px}.bubble.bubble-xl{width:32px;height:32px}@keyframes floatUp{0%{opacity:0;transform:translateY(100vh) translateX(0px) scale(0.8)}10%{opacity:0.6;transform:translateY(90vh) translateX(calc(var(--drift,0px) * 0.2)) scale(0.9)}50%{transform:translateY(50vh) translateX(calc(var(--drift,0px) * 0.6)) scale(1.0)}90%{opacity:0.6;transform:translateY(10vh) translateX(var(--drift,0px)) scale(1.1)}100%{opacity:0;transform:translateY(-10vh) translateX(var(--drift,0px)) scale(1.2)}}