Como manter elementos decorativos (por exemplo, bolhas) visíveis, mas não interativos?

<script src="https://cdn.tailwindcss.com"></script>
    
<section
  class="bg-white md:py-20 pb-0 md:pb-28 overflow-hidden md:overflow-visible"
  style="position:relative;z-index:10"
>
  <div class="background-overlay2"></div>

  <div class="container mx-auto flex flex-col md:flex-row items-center">
    <div class="hidden md:block md:w-1/2">
      <img 
        src="https://placehold.co/600x400" 
        alt="Random image" 
        class="md:rounded-lg shadow-lg object-cover w-full h-full"
      >
    </div>

    <div class="relative z-10 md:w-1/2"> 
      <!-- Content Container (foreground content) -->
      <div class="relative bg-[#1fa7e0] text-white p-8 py-12 pb-16 md:rounded-lg shadow-lg md:-ml-10 z-10">
        <h1 class="text-3xl md:text-4xl font-semibold mb-6">
          Discover <span class="font-bold">The Wonders of The Universe</span>
        </h1>
        <p class="text-xl md:text-lg font-semibold leading-relaxed mb-4">
          Explore a vast array of adventures and possibilities.<br>
          From ancient myths to modern science, embark on a journey of knowledge and exploration.
        </p>
        <p class="text-xl md:text-lg leading-relaxed mb-6">
          Immerse yourself in diverse cultures, futuristic technologies, and timeless stories that shape the world around us.
        </p>
        <button class="bg-[#efd553] text-black font-bold px-8 py-3 rounded-full hover:bg-yellow-500 relative z-20">
          Dive In
        </button>
      </div>

      <!-- ✨ White bubbles in background -->
      <div class="absolute inset-0 z-0 overflow-hidden">
        <!-- Bubble 1 -->
        <div class="absolute w-16 h-16 bg-white opacity-10 rounded-full top-4 left-6 animate-pulse"></div>
        <!-- Bubble 2 -->
        <div class="absolute w-10 h-10 bg-white opacity-10 rounded-full top-24 left-1/2 animate-bounce"></div>
        <!-- Bubble 3 -->
        <div class="absolute w-20 h-20 bg-white opacity-5 rounded-full bottom-10 right-10 animate-ping"></div>
        <!-- Bubble 4 -->
        <div class="absolute w-12 h-12 bg-white opacity-15 rounded-full bottom-0 left-12 animate-bounce"></div>
      </div>
    </div>
  </div>
  
  <!-- Bubble shapes -->
  <div class="absolute inset-0 pointer-events-none">
    <!-- Bubble 1 -->
    <div class="absolute w-48 h-48 bg-[#77c434] rounded-full opacity-50 floaty" style="top: 10%; left: 15%; transform: rotate(12deg);"></div>

    <!-- Bubble 2 -->
    <div class="absolute w-60 h-60 bg-[#5e16eb] rounded-full opacity-40 floaty" style="top: 25%; left: 65%; transform: rotate(-25deg);"></div>

    <!-- Bubble 3 -->
    <div class="absolute w-40 h-40 bg-[#fa5755] rounded-full opacity-60 floaty" style="top: 60%; left: 30%; transform: rotate(8deg);"></div>

    <!-- Bubble 4 -->
    <div class="absolute w-72 h-72 bg-[#efd553] rounded-full opacity-50 floaty" style="top: 65%; left: 80%; transform: rotate(-6deg);"></div>
  </div>
</section>