/* Decorative bubbles using assets/ele-11-1.png */
.bubbles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.bubble {
  position: absolute;
  width: 280px;
  height: 280px;
  background: url('assets/ele-11-1.png') center/contain no-repeat;
  opacity: 0.8;
  filter: 
    drop-shadow(0 0 40px rgba(95, 230, 249, 0.6))
    drop-shadow(0 0 80px rgba(198, 106, 231, 0.4))
    drop-shadow(0 15px 35px rgba(0,0,0,0.3))
    brightness(1.2)
    saturate(1.3);
  animation: bubbleFloat var(--dur, 16s) ease-in-out infinite, bubbleGlow 4s ease-in-out infinite alternate;
}

/* Size variants */
.bubble--sm { 
  width: 240px; 
  height: 240px; 
  opacity: .75; 
  --dur: 16s;
  filter: 
    drop-shadow(0 0 30px rgba(95, 230, 249, 0.5))
    drop-shadow(0 0 60px rgba(198, 106, 231, 0.3))
    drop-shadow(0 12px 25px rgba(0,0,0,0.2))
    brightness(1.15)
    saturate(1.2);
}
.bubble--md { 
  width: 320px; 
  height: 320px; 
  opacity: .8;  
  --dur: 18s;
  filter: 
    drop-shadow(0 0 50px rgba(95, 230, 249, 0.7))
    drop-shadow(0 0 90px rgba(198, 106, 231, 0.5))
    drop-shadow(0 18px 40px rgba(0,0,0,0.3))
    brightness(1.25)
    saturate(1.4);
}
.bubble--lg { 
  width: 420px; 
  height: 420px; 
  opacity: .85; 
  --dur: 20s;
  filter: 
    drop-shadow(0 0 60px rgba(95, 230, 249, 0.8))
    drop-shadow(0 0 120px rgba(198, 106, 231, 0.6))
    drop-shadow(0 25px 50px rgba(0,0,0,0.4))
    brightness(1.3)
    saturate(1.5);
}

/* Sample placements; JS can also add more at runtime */
.bubble--tl { left: 3%; top: 8%; --dur: 18s; transform: rotate(-8deg); }
.bubble--tr { right: 5%; top: 20%; --dur: 15s; transform: rotate(6deg); }
.bubble--bl { left: 6%; bottom: 12%; --dur: 20s; transform: rotate(12deg); }
.bubble--br { right: 7%; bottom: 8%; --dur: 17s; transform: rotate(-4deg); }
.bubble--c1 { left: 18%; top: 46%; transform: rotate(3deg); }
.bubble--c2 { right: 16%; top: 52%; transform: rotate(-6deg); }

/* Make bottom-left bubble significantly larger and extra glowy */
.bubble--bl { 
  width: 560px; 
  height: 560px; 
  filter: 
    drop-shadow(0 0 80px rgba(95, 230, 249, 1.0))
    drop-shadow(0 0 160px rgba(198, 106, 231, 0.8))
    drop-shadow(0 30px 60px rgba(0,0,0,0.5))
    brightness(1.4)
    saturate(1.6);
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 4deg)); }
}

@keyframes bubbleGlow {
  0% { 
    filter: 
      drop-shadow(0 0 40px rgba(95, 230, 249, 0.6))
      drop-shadow(0 0 80px rgba(198, 106, 231, 0.4))
      drop-shadow(0 15px 35px rgba(0,0,0,0.3))
      brightness(1.2)
      saturate(1.3);
  }
  100% { 
    filter: 
      drop-shadow(0 0 60px rgba(95, 230, 249, 0.9))
      drop-shadow(0 0 120px rgba(198, 106, 231, 0.7))
      drop-shadow(0 15px 35px rgba(0,0,0,0.3))
      brightness(1.4)
      saturate(1.6);
  }
}