@charset "UTF-8";

.bubble-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* バブルがクリックを邪魔しない */
    z-index: 10;
  }
  
  .bubble {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: bubbleUp 8s linear forwards;
  }

  #bubble-trigger {
    background-color: transparent;
  }
  
  @keyframes bubbleUp {
    0% {
      transform: translate(0, 0) scale(1);
      opacity: 0;
    }
    20% {
      transform: translate(-5px, -20vh) scale(1.2);
      opacity: 0.4;
    }
    40% {
      transform: translate(5px, -40vh) scale(1.4);
    }
    60% {
      transform: translate(-4px, -60vh) scale(1.6);
    }
    80% {
      transform: translate(4px, -80vh) scale(1.8);
    }
    100% {
      transform: translate(0, -100vh) scale(2);
      opacity: 0;
    }
  }