Animated Formula Ingredients Info Section

<section class="overflow-hidden bg-white border-neutral-100 border-b pt-32 pb-32 relative" id="formula">
  <!-- Background Big Text -->
  <div class="absolute top-0 left-0 w-full text-center pointer-events-none select-none">
    <h2 class="text-[15vw] font-semibold tracking-tighter text-neutral-100 leading-none mt-10 reveal-on-scroll"
      id="formula-bg-text" style="transform: translateY(1.8px);">
      Formula
    </h2>
  </div>

  <div class="relative z-10 max-w-6xl mx-auto px-6">
    <!-- 3D Molecule Placeholder -->
    <div class="flex justify-center mb-20">
      <div class="relative w-64 h-64 md:w-96 md:h-96 reveal-on-scroll reveal-delay-200" id="formula-molecule-wrapper"
        style="transform: translateY(-0.9px);">
        <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">
          <!-- Bonds -->
          <line x1="60" y1="100" x2="100" y2="100" stroke="#171717" stroke-width="6"></line>
          <line x1="100" y1="100" x2="140" y2="70" stroke="#171717" stroke-width="6"></line>
          <line x1="100" y1="100" x2="140" y2="130" stroke="#171717" stroke-width="6" class=""></line>
          <!-- Atoms -->
          <circle cx="60" cy="100" r="18" fill="#404040" class=""></circle>
          <circle cx="100" cy="100" r="20" fill="#171717"></circle>
          <circle cx="140" cy="70" r="16" fill="#A3A3A3" class=""></circle>
          <circle cx="140" cy="130" r="16" fill="#A3A3A3" class=""></circle>
        </svg>
      </div>
    </div>

    <!-- Data Table -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-y-8 md:gap-x-8 border-t border-neutral-200 pt-12">
      <!-- Headings -->
      <div class="hidden md:contents text-xs font-medium text-neutral-400 uppercase tracking-widest mb-4">
        <div>Ingredient</div>
        <div class="">Structure</div>
        <div class="">Function</div>
      </div>

      <!-- Row 1 -->
      <div
        class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-4 py-4 border-b border-neutral-100 hover:bg-neutral-50 transition-colors group cursor-default reveal-on-scroll reveal-delay-100">
        <div class="text-lg font-medium text-neutral-800">Alpha Lipoic</div>
        <div class="text-base font-mono text-neutral-500 group-hover:text-black transition-colors">
          [C8H14O2S2]
        </div>
        <div class="text-base text-neutral-600 reveal-on-scroll reveal-delay-200">
          Restores cellular energy and texture.
        </div>
      </div>

      <!-- Row 2 -->
      <div
        class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-4 py-4 border-b border-neutral-100 hover:bg-neutral-50 transition-colors group cursor-default">
        <div class="text-lg font-medium text-neutral-800">Niacinamide</div>
        <div class="text-base font-mono text-neutral-500 group-hover:text-black transition-colors">
          [C6H6N2O]
        </div>
        <div class="text-base text-neutral-600">
          Strengthens lipid barrier function.
        </div>
      </div>

      <!-- Row 3 -->
      <div
        class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-4 py-4 border-b border-neutral-100 hover:bg-neutral-50 transition-colors group cursor-default reveal-on-scroll reveal-delay-300">
        <div class="text-lg font-medium text-neutral-800">
          Hyaluronic Acid
        </div>
        <div class="text-base font-mono text-neutral-500 group-hover:text-black transition-colors">
          [C14H21NO11]n
        </div>
        <div class="text-base text-neutral-600">
          Deep hydration retention matrix.
        </div>
      </div>
    </div>
  </div>
  <script>
    (function(){const s=document.getElementById('formula'),t=document.getElementById('formula-bg-text'),m=document.getElementById('formula-molecule-wrapper');if(!s||!t||!m)return;function p(){const r=s.getBoundingClientRect(),h=window.innerHeight;if(r.top<=h&&r.bottom>=0){const d=(h-r.top);t.style.transform=`translateY(${d*0.1}px)`;m.style.transform=`translateY(${d*-0.05}px)`}}window.addEventListener('scroll',p,{passive:true});p()})();
  </script>
</section>