/**
 * 气泡背景效果样式
 * 为网页添加轻量级、美观的气泡动画背景
 * 使用Canvas实现高性能动画
 */

#bubble-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; /* 确保气泡显示在页面上方 */
    pointer-events: none; /* 确保不会干扰用户交互 */
    will-change: transform; /* 性能优化，提示浏览器这个元素会经常变化 */
    opacity: 0; /* 初始透明，由JS控制淡入效果 */
    transition: opacity 1.5s ease; /* 平滑淡入效果 */
}

/* 为页面添加一个微妙的渐变背景，与气泡效果相配合 */
body {
    background-image: linear-gradient(to bottom right, rgba(240, 248, 255, 0.2), rgba(230, 240, 250, 0.2));
    transition: background-image 0.5s ease; /* 平滑过渡效果 */
}

/* 响应式设计 - 在小屏幕上调整气泡效果 */
@media (max-width: 768px) {
    /* 中等屏幕上的样式调整由JS控制 */
}

@media (max-width: 480px) {
    /* 小屏幕上的样式调整由JS控制 */
}