/* 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('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);
    }
  }