/* Page-anchored ambient bubbles — scroll with the document, sit behind content */
body{position:relative;}

.water-bubbles{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
  /* Hard cut: nothing above the wave / waterline */
  clip-path:inset(100svh 0 0 0);
  clip-path:inset(100dvh 0 0 0);
}
body > :not(.water-bubbles):not(.ambiance):not(.sea-scene){
  position:relative;
  z-index:2;
}
/* Sea sky should sit behind hero text but cover body navy in the hero */
.sea-scene{z-index:0;}
.ambiance{z-index:1;}

.water-bubble{
  position:absolute;
  top:0;
  left:0;
  width:var(--size,16px);
  height:var(--size,16px);
  border-radius:50%;
  background:radial-gradient(circle at 30% 28%, rgba(190,235,237,0.9), rgba(123,194,196,0.45) 55%, rgba(123,194,196,0.18));
  border:1px solid rgba(123,194,196,0.5);
  box-shadow:0 0 18px rgba(123,194,196,0.35);
  opacity:0.65;
  animation:bubble-rise var(--dur,8s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  animation-fill-mode:backwards;
}
@keyframes bubble-rise{
  0%{
    transform:translate3d(0,0,0) scale(0.7);
    opacity:0;
  }
  14%{
    opacity:0.75;
  }
  86%{
    opacity:0.3;
  }
  100%{
    transform:translate3d(0,-200px,0) scale(1.06);
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .water-bubble{
    animation-duration:14s;
  }
}