/* ==================================================================
   THE GREEN TURTLES — bubbles.css
   ------------------------------------------------------------------
   Standalone styling for the rising background bubbles — see
   bubbles.js for the click-to-pop behavior.
   ================================================================== */

/* .bubbles sits inside the fixed .background layer (see style.css)
   and, like .page, would otherwise swallow every click across its
   full box even where visually empty — pointer-events: none here,
   with .bubble opting back in below, lets clicks fall through to
   whatever's behind it (the swimming turtles). */
.bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Each bubble rises from below the fold to above the top edge while
   drifting sideways and fading in/out. nth-child rules below give
   every bubble a unique size, horizontal position, duration and
   delay so the group reads as "random" despite being pure CSS. */
.bubble {
  position: absolute;
  bottom: -10%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.15));
  animation: rise 14s linear infinite;
  pointer-events: auto;
  cursor: pointer;
}

/* Invisible padding around each bubble so the click target is
   noticeably bigger than the visible circle — especially helpful for
   the smallest bubbles, which are otherwise fiddly to hit. Clicking
   anywhere on this pseudo-element still registers as a click on the
   bubble itself, since pseudo-elements resolve to their host element
   for event purposes. */
.bubble::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

@keyframes rise {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.6; }
  100% { transform: translate(40px, -115vh) scale(1.1); opacity: 0; }
}

/* Negative animation-delay values make each bubble start already
   partway through its rise (browsers seek the animation forward by
   that amount immediately) instead of waiting off-screen at the
   bottom — so the sky is already full of bubbles on page load. */
.bubble:nth-child(1)  { left: 4%;  width: 18px; height: 18px; animation-duration: 11s; animation-delay: 0s; }
.bubble:nth-child(2)  { left: 14%; width: 34px; height: 34px; animation-duration: 16s; animation-delay: -1.3s; }
.bubble:nth-child(3)  { left: 24%; width: 14px; height: 14px; animation-duration: 9s;  animation-delay: -1.5s; }
.bubble:nth-child(4)  { left: 34%; width: 28px; height: 28px; animation-duration: 13s; animation-delay: -3.3s; }
.bubble:nth-child(5)  { left: 44%; width: 20px; height: 20px; animation-duration: 15s; animation-delay: -5s; }
.bubble:nth-child(6)  { left: 54%; width: 36px; height: 36px; animation-duration: 12s; animation-delay: -5s; }
.bubble:nth-child(7)  { left: 64%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: -5s; }
.bubble:nth-child(8)  { left: 72%; width: 24px; height: 24px; animation-duration: 17s; animation-delay: -9.9s; }
.bubble:nth-child(9)  { left: 80%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: -9.3s; }
.bubble:nth-child(10) { left: 88%; width: 18px; height: 18px; animation-duration: 11s; animation-delay: -8.3s; }
.bubble:nth-child(11) { left: 94%; width: 22px; height: 22px; animation-duration: 18s; animation-delay: -15s; }
.bubble:nth-child(12) { left: 60%; width: 12px; height: 12px; animation-duration: 8s;  animation-delay: -7.3s; }

/* Pop burst spawned by bubbles.js via TurtlesAnimations.spawnFx —
   lands in the shared .fx-layer (see style.css). */
.pop-fx {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
  animation: bubble-pop 0.35s ease-out forwards;
}

@keyframes bubble-pop {
  0%   { transform: scale(0.9); opacity: 0.9; }
  60%  { transform: scale(1.9); opacity: 0.55; }
  100% { transform: scale(2.6); opacity: 0; }
}