.bubble{backdrop-filter:blur(4px);border:1px solid hsl(var(--primary)/.3);background:linear-gradient(135deg,hsl(var(--primary)/.15) 0,hsl(186 72% 85%/.08) 50%,hsl(var(--primary)/.12) 100%);border-radius:50%;will-change:transform,opacity;box-shadow:0 4px 16px hsl(var(--primary)/.1),inset 0 1px 0 hsl(var(--primary)/.2);position:relative}.bubble:before{content:"";position:absolute;top:20%;left:30%;width:30%;height:30%;background:linear-gradient(135deg,hsl(var(--primary)/.4) 0,transparent 70%);border-radius:50%;pointer-events:none}.flow-particle{background:linear-gradient(135deg,hsl(var(--primary)/.6) 0,hsl(186 72% 65%/.4) 50%,hsl(var(--primary)/.3) 100%);border-radius:50%;box-shadow:0 0 12px hsl(var(--primary)/.5),0 0 24px hsl(var(--primary)/.2);will-change:transform,opacity}.dark .bubble{border:1px solid hsl(var(--primary)/.4);background:linear-gradient(135deg,hsl(var(--primary)/.2) 0,hsl(206 60% 25%/.15) 50%,hsl(var(--primary)/.1) 100%);box-shadow:0 4px 20px hsl(var(--primary)/.15),inset 0 1px 0 hsl(var(--primary)/.3),0 0 40px hsl(var(--primary)/.05)}.dark .bubble:before{background:linear-gradient(135deg,hsl(var(--primary)/.5) 0,hsl(194 100% 70%/.3) 50%,transparent 70%)}.dark .flow-particle{background:linear-gradient(135deg,hsl(var(--primary)/.8) 0,hsl(194 100% 60%/.6) 50%,hsl(186 72% 45%/.4) 100%);box-shadow:0 0 16px hsl(var(--primary)/.7),0 0 32px hsl(var(--primary)/.3),0 0 48px hsl(194 100% 60%/.1)}@keyframes bubble-float{0%{transform:translateY(0) translateX(0) scale(1);opacity:.7}25%{opacity:.8}50%{opacity:.6}75%{opacity:.4}to{transform:translateY(-100vh) translateX(var(--random-x)) scale(.3);opacity:0}}@keyframes particle-flow{0%{transform:translateY(-50px) translateX(0) rotate(0deg);opacity:0}10%{opacity:.8}50%{opacity:1}90%{opacity:.6}to{transform:translateY(100vh) translateX(var(--random-x)) rotate(var(--random-rotation));opacity:0}}@keyframes water-ripple{0%{transform:scale(0) rotate(0deg);opacity:.4}50%{opacity:.8}to{transform:scale(3) rotate(180deg);opacity:0}}.bubble-css-animation{animation:bubble-float linear infinite}.particle-css-animation{animation:particle-flow linear forwards}.water-ripple{animation:water-ripple ease-out forwards}#bubbles-container,#flow-particles{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none}#bubbles-container{z-index:1}#flow-particles{z-index:2}.water-surface{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent 0,hsl(var(--primary)/.3) 50%,transparent 100%);animation:water-surface-flow 8s ease-in-out infinite}@keyframes water-surface-flow{0%,to{transform:translateX(-100%);opacity:.2}50%{transform:translateX(100%);opacity:.6}}