/* ==========================================================================
   Modules - Component Bubbles CSS
   Transparent illustrative bubbles with dual Hero & Viewport-bottom modes
   ========================================================================== */

.bubble-container {
  pointer-events: none;
  overflow: hidden;
}

/* 1. Hero Section Scoped Container */
.bubble-container--hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

/* 2. Viewport-Bottom Page Scoped Container */
.bubble-container--viewport {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 999;
}

/* 3. Illustrative Transparent Bubble Base */
.bubble {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  /* Transparent, delicate illustrative glass aesthetic */
  background: radial-gradient(circle at 32% 32%,
              rgba(255, 255, 255, 0.42) 0%,
              rgba(255, 255, 255, 0.12) 40%,
              rgba(255, 255, 255, 0.03) 75%,
              rgba(255, 255, 255, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: inset -1px -1px 2px rgba(255, 255, 255, 0.12),
              0 0 3px rgba(255, 255, 255, 0.08);
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform, opacity, bottom;
}

/* Delicate illustrative specular highlight glint */
.bubble::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 20%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
}

/* Hero bubble: Rises from bottom of Hero to top of Hero */
.bubble--hero {
  bottom: -20px;
  animation-name: riseHeroBubble;
}

@keyframes riseHeroBubble {
  0% {
    bottom: -20px;
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.9;
  }
  100% {
    bottom: calc(100% + 25px);
    opacity: 0;
  }
}

/* Viewport bubble: Rises from bottom of page/screen to top */
.bubble--viewport {
  bottom: -25px;
  animation-name: riseViewportBubble;
}

@keyframes riseViewportBubble {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-110vh);
    opacity: 0;
  }
}