@charset "utf-8";

#bubble-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  contain: strict; 
}

.bubble {
  position: absolute;
  bottom: -60px; /* サイズアップに合わせて開始位置を下げる */
  will-change: transform, opacity;
  animation: bubble-rise var(--rise-duration, 4s) ease-in forwards;
}

.bubble::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  /* 輝きアップ：中心の白を少し濃くし、光の反射を強調 */
  background: radial-gradient(circle at 35% 35%, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0.5) 100%
  );
  border: 0.5px solid rgba(255, 255, 255, 0.4);
  /* 粒が大きくなるので、影の範囲を広げてキラキラ感を出す */
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  
  animation: bubble-sway 1.5s ease-in-out infinite alternate;
}

@keyframes bubble-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.4); opacity: 0; }
  10% { opacity: 0.8; }
  100% { transform: translate3d(0, -115vh, 0) scale(1.1); opacity: 0; }
}

@keyframes bubble-sway {
  0% { transform: translate3d(-5px, 0, 0); }
  100% { transform: translate3d(5px, 0, 0); }
}