Fixed Blurred Navbar with Scroll Animation

<nav id="navbar"
  class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 ease-out backdrop-blur-xl border-b border-black/5"
  style="background-color: rgba(255, 255, 255, 0.6);">

  <!-- GSAP Library Imports -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

  <div
    class="w-full max-w-7xl mx-auto px-6 md:px-8 h-auto md:h-[72px] flex flex-col md:flex-row items-center justify-between py-4 md:py-0 gap-4 md:gap-0">

    <!-- Left Group -->
    <div
      class="flex md:justify-start md:gap-8 lg:gap-12 md:w-1/3 order-2 md:order-1 flex-wrap w-full gap-x-6 gap-y-6 items-center justify-center">
      <a href="#"
        class="text-[10px] uppercase tracking-[0.2em] font-medium text-[#1c1917]/80 hover:text-[#1c1917]/50 transition-colors duration-300">
        Residences
      </a>
      <a href="#"
        class="text-[10px] uppercase tracking-[0.2em] font-medium text-[#1c1917]/80 hover:text-[#1c1917]/50 transition-colors duration-300">
        Neighbourhoods
      </a>
    </div>

    <!-- Center Logo -->
    <div class="flex justify-center w-full md:w-1/3 order-1 md:order-2">
      <a href="#" class="font-serif text-xl md:text-2xl font-medium tracking-tight text-[#1c1917]"
        style="font-family: serif;">
        NOVERA
      </a>
    </div>

    <!-- Right Group -->
    <div class="flex items-center justify-center md:justify-end gap-6 md:gap-8 lg:gap-12 w-full md:w-1/3 order-3">
      <a href="#"
        class="text-[10px] uppercase tracking-[0.2em] font-medium text-[#1c1917]/80 hover:text-[#1c1917]/50 transition-colors duration-300">
        Lifestyle
      </a>
      <a href="#"
        class="border border-[#1c1917]/30 px-5 py-2 text-[10px] uppercase tracking-[0.2em] font-medium rounded-[2px] hover:bg-[#1c1917] hover:text-white transition-all duration-300">
        Inquire
      </a>
    </div>

  </div>

  <script>
    (function() {
      document.addEventListener("DOMContentLoaded", () => {
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
        
        // Ensure GSAP is loaded before execution
        const initScroll = () => {
          if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
            gsap.registerPlugin(ScrollTrigger);
            const nav = document.getElementById("navbar");

            ScrollTrigger.create({
              start: "top -50",
              onUpdate: (self) => {
                if (self.scroll() > 50) {
                  gsap.to(nav, {
                    backgroundColor: "rgba(255, 255, 255, 0.85)",
                    boxShadow: "0 6px 24px rgba(0,0,0,0.03)",
                    backdropFilter: "blur(12px)",
                    duration: 0.4,
                    ease: "power2.out"
                  });
                } else {
                  gsap.to(nav, {
                    backgroundColor: "rgba(255, 255, 255, 0.6)",
                    boxShadow: "none",
                    backdropFilter: "blur(0px)",
                    duration: 0.4,
                    ease: "power2.out"
                  });
                }
              }
            });
          } else {
            setTimeout(initScroll, 100);
          }
        };
        
        initScroll();
      });
    })();
  </script>
</nav>