Animated Audio Brand Footer with Newsletter CTA

<div id="footer-section-container" class="relative overflow-hidden bg-neutral-950 text-white border-t border-white/5">
  <!-- Required Scripts -->
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <footer class="w-full max-w-7xl mx-auto px-6 pt-24 pb-12">
    <!-- Top Section: CTA and Newsletter -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-24 items-start">
      <div class="space-y-8">
        <h2 class="text-5xl md:text-7xl font-light tracking-tighter leading-[0.9] font-bricolage"
          style="font-family: 'Bricolage Grotesque', sans-serif;">
          Experience <br>
          <span class="text-neutral-500">Pure Sound.</span>
        </h2>
        <div class="flex flex-col sm:flex-row gap-4 max-w-md">
          <input
            type="email"
            placeholder="Email Address"
            class="bg-white/5 border border-white/10 rounded-full px-6 py-4 flex-grow outline-none focus:border-white/40 transition-colors text-sm"
          />
          <button class="bg-white text-black font-medium px-8 py-4 rounded-full hover:bg-neutral-200 transition-all text-sm whitespace-nowrap">
            Join the List
          </button>
        </div>
        <p class="text-xs text-neutral-500 tracking-wide uppercase">Weekly updates on hardware and sonic engineering.
        </p>
      </div>

      <div class="grid grid-cols-2 md:grid-cols-3 gap-12 lg:pl-12">
        <!-- Column 1 -->
        <div class="space-y-6">
          <h4 class="text-xs font-bold uppercase tracking-widest text-white">Shop</h4>
          <ul class="space-y-4 text-sm text-neutral-400">
            <li><a href="#" class="hover:text-white transition-colors">Over-Ear</a></li>
            <li><a href="#" class="hover:text-white transition-colors">In-Ear</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Studio Pro</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Accessories</a></li>
          </ul>
        </div>
        <!-- Column 2 -->
        <div class="space-y-6">
          <h4 class="text-xs font-bold uppercase tracking-widest text-white">System</h4>
          <ul class="space-y-4 text-sm text-neutral-400">
            <li><a href="#" class="hover:text-white transition-colors">Support</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Software</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Connectivity</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Developers</a></li>
          </ul>
        </div>
        <!-- Column 3 -->
        <div class="space-y-6">
          <h4 class="text-xs font-bold uppercase tracking-widest text-white">Studio</h4>
          <ul class="space-y-4 text-sm text-neutral-400">
            <li><a href="#" class="hover:text-white transition-colors">Journal</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Our Story</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Sustainability</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Middle: Big Branding -->
    <div class="border-y border-white/5 py-12 mb-12 overflow-hidden relative group">
      <div class="flex whitespace-nowrap animate-marquee">
        <span class="text-[12vw] font-bold tracking-tighter leading-none text-white/5 px-4 font-bricolage select-none" style="font-family: 'Bricolage Grotesque', sans-serif;">ACOUSTIC REVOLUTION • ACOUSTIC REVOLUTION • </span>
        <span class="text-[12vw] font-bold tracking-tighter leading-none text-white/5 px-4 font-bricolage select-none" style="font-family: 'Bricolage Grotesque', sans-serif;">ACOUSTIC REVOLUTION • ACOUSTIC REVOLUTION • </span>
      </div>
    </div>

    <!-- Bottom: Legal and Social -->
    <div class="flex flex-col md:flex-row justify-between items-center gap-8">
      <div class="flex items-center gap-8">
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
          <span class="text-[10px] uppercase tracking-[0.2em] text-neutral-500">System Operational</span>
        </div>
        <div class="hidden md:flex gap-6 text-[11px] uppercase tracking-widest text-neutral-600">
          <a href="#" class="hover:text-neutral-400 transition-colors">Privacy Policy</a>
          <a href="#" class="hover:text-neutral-400 transition-colors">Terms of Service</a>
          <a href="#" class="hover:text-neutral-400 transition-colors">Cookies</a>
        </div>
      </div>

      <div class="flex items-center gap-6">
        <a href="#"
          class="w-10 h-10 flex items-center justify-center rounded-full border border-white/10 hover:border-white/30 hover:bg-white/5 transition-all text-neutral-400 hover:text-white">
          <iconify-icon icon="ri:instagram-line" width="18"></iconify-icon>
        </a>
        <a href="#"
          class="w-10 h-10 flex items-center justify-center rounded-full border border-white/10 hover:border-white/30 hover:bg-white/5 transition-all text-neutral-400 hover:text-white">
          <iconify-icon icon="ri:twitter-x-line" width="18"></iconify-icon>
        </a>
        <a href="#"
          class="w-10 h-10 flex items-center justify-center rounded-full border border-white/10 hover:border-white/30 hover:bg-white/5 transition-all text-neutral-400 hover:text-white">
          <iconify-icon icon="ri:youtube-line" width="18"></iconify-icon>
        </a>
      </div>

      <p class="text-[11px] text-neutral-600 uppercase tracking-widest md:hidden">
        © 2024 Audio Collective.
      </p>
    </div>

    <div class="mt-12 text-center hidden md:block">
      <p class="text-[11px] text-neutral-700 uppercase tracking-[0.5em]">Defining the future of frequency • © 2024</p>
    </div>
  </footer>

  <style>
    @keyframes marquee {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .animate-marquee {
      display: flex;
      width: fit-content;
      animation: marquee 30s linear infinite;
    }

    .font-bricolage {
      font-family: 'Bricolage Grotesque', sans-serif;
    }
  </style>

  <script>
    (function() {
      // Intersection Observer for subtle fade-in
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
          }
        });
      }, { threshold: 0.1 });

      const footer = document.querySelector('#footer-section-container footer');
      footer.style.opacity = '0';
      footer.style.transform = 'translateY(20px)';
      footer.style.transition = 'opacity 1s ease-out, transform 1s ease-out';
      
      observer.observe(footer);
    })();
  </script>
</div>