Animated Formula Ingredients Data Section

<style>
  @keyframes molecule-rotate {
  0% { transform: rotate(0deg) translateY(0px); }
  50% { transform: rotate(180deg) translateY(-6px); }
  100% { transform: rotate(360deg) translateY(0px); }
  }
  
  .animate-molecule {
  animation: molecule-rotate 10s ease-in-out infinite;
  }
  </style>

<section class="relative py-32 bg-white overflow-hidden border-b border-neutral-100" id="formula">

  <!-- Background Big Text -->
  <div class="absolute top-0 left-0 w-full text-center pointer-events-none select-none">
    <h2 id="formula-bg-text"
      class="text-[15vw] font-semibold tracking-tighter text-neutral-100 leading-none mt-10 transition-transform duration-300">
      Formula
    </h2>
  </div>

  <div class="relative z-10 max-w-6xl mx-auto px-6">

    <!-- Molecule -->
    <div class="flex justify-center mb-20">
      <div id="formula-molecule-wrapper" class="relative w-64 h-64 md:w-96 md:h-96">
        <svg viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"
          class="w-full h-full drop-shadow-2xl animate-molecule">

          <!-- Atoms -->
          <circle cx="100" cy="100" r="28" fill="#000000" />
          <circle cx="60" cy="100" r="24" fill="#4A4A4A" />
          <circle cx="135" cy="65" r="20" fill="#C0C0C0" />
          <circle cx="135" cy="135" r="20" fill="#C0C0C0" />

          <!-- Bonds -->
          <line x1="100" y1="100" x2="60" y2="100" stroke="#555" stroke-width="8" stroke-linecap="round" />
          <line x1="100" y1="100" x2="135" y2="65" stroke="#777" stroke-width="8" stroke-linecap="round" />
          <line x1="100" y1="100" x2="135" y2="135" stroke="#777" stroke-width="8" stroke-linecap="round" />
        </svg>
      </div>
    </div>

  </div>
<script>
  (() => {
    const molecule = document.getElementById('formula-molecule-wrapper');
    const bgText = document.getElementById('formula-bg-text');
    const section = document.getElementById('formula');

    function onScroll() {
      const rect = section.getBoundingClientRect();
      const progress = Math.min(Math.max(rect.top * -0.2, -80), 80);
      const textShift = Math.min(Math.max(rect.top * -0.1, -50), 50);

      // Parallax molecule
      molecule.style.transform = `translateY(${progress}px)`;

      // Parallax background title
      bgText.style.transform = `translateY(${textShift}px)`;
    }

    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
  })();
</script>
</section>