Luxury Full-Screen Navigation Menu

<div
  class="relative w-[1280px] h-[960px] bg-[#050505] text-[#EAEAEA] font-sans selection:bg-[#D4AF37] selection:text-[#050505] overflow-hidden"
  style="cursor: none;">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            void: '#050505',
            starlight: '#EAEAEA',
            champagne: '#D4AF37',
            ash: '#4A4A4A',
          },
          fontFamily: {
            serif: ['"Bodoni Moda"', 'serif'],
            sans: ['"Inter"', 'sans-serif'],
            display: ['"Cormorant Garamond"', 'serif'],
          }
        }
      }
    }
  </script>

  <style>
    @keyframes slideUp {
      from {
        transform: translateY(100%);
        opacity: 0;
      }

      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .animate-slide-up {
      animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .menu-link::before {
      content: attr(data-index);
      position: absolute;
      left: -45px;
      top: 25%;
      font-family: "Inter", sans-serif;
      font-size: 10px;
      letter-spacing: 0.2em;
      color: #D4AF37;
      opacity: 0;
      transform: translateX(10px);
      transition: all 0.4s ease;
    }

    .menu-link:hover::before {
      opacity: 1;
      transform: translateX(0);
    }

    .grid-line {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.03);
      pointer-events: none;
    }
  </style>

  <!-- Background Elements -->
  <div class="absolute inset-0 pointer-events-none"
    style="background-image: url('data:image/svg+xml,%3Csvg viewBox=\'0 0 200 200\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.65\' numOctaves=\'3\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23n)\' opacity=\'0.05\'/%3E%3C/svg%3E'); opacity: 0.05;">
  </div>

  <!-- Grid -->
  <div class="grid-line w-px h-full left-[15%]"></div>
  <div class="grid-line w-px h-full left-[50%]"></div>
  <div class="grid-line w-px h-full left-[85%]"></div>
  <div class="grid-line h-px w-full top-[15%]"></div>
  <div class="grid-line h-px w-full bottom-[15%]"></div>

  <!-- Cursor -->
  <div id="cursor-dot"
    class="fixed w-1.5 h-1.5 bg-starlight rounded-full pointer-events-none z-[9999] mix-blend-difference"
    style="transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s;"></div>
  <div id="cursor-circle"
    class="fixed w-10 h-10 border border-white/30 rounded-full pointer-events-none z-[9998] mix-blend-difference"
    style="transform: translate(-50%, -50%); transition: transform 0.1s ease-out, width 0.3s, height 0.3s, border-color 0.3s;">
  </div>

  <!-- Interactive Backdrop -->
  <div id="nav-bg"
    class="absolute right-[25%] top-1/2 -translate-y-1/2 w-[400px] h-[500px] pointer-events-none opacity-0 transition-all duration-1000 blur-3xl rounded-full bg-gradient-to-tr from-champagne/20 to-transparent">
  </div>

  <div class="relative z-10 h-full flex flex-col">
    <!-- Header -->
    <header class="h-[15%] flex items-center justify-between px-[5%]">
      <div class="flex items-center gap-6">
        <span class="font-serif text-3xl tracking-tighter">LUMO</span>
        <span class="h-px w-12 bg-white/20"></span>
        <span class="font-sans text-[10px] tracking-[0.2em] uppercase text-ash">Navigation</span>
      </div>
      <button class="group flex items-center gap-4">
        <span class="text-[10px] uppercase tracking-widest text-starlight/60 group-hover:text-champagne transition-colors">Close</span>
        <div class="relative w-8 h-8 flex items-center justify-center">
          <span class="absolute w-6 h-px bg-champagne rotate-45"></span>
          <span class="absolute w-6 h-px bg-champagne -rotate-45"></span>
        </div>
      </button>
    </header>

    <main class="flex-1 flex">
      <!-- Left Sidebar -->
      <div class="w-[15%] h-full border-r border-white/5 flex flex-col justify-end p-10 pb-20">
        <div class="flex flex-col gap-10 items-center text-[9px] text-ash tracking-[0.3em]"
          style="writing-mode: vertical-rl;">
          <a href="#" class="hover:text-champagne transition-colors">INSTAGRAM</a>
          <a href="#" class="hover:text-champagne transition-colors">PINTEREST</a>
          <a href="#" class="hover:text-champagne transition-colors">BEHANCE</a>
        </div>
      </div>

      <!-- Navigation Content -->
      <div class="flex-1 flex flex-col justify-center px-[10%]">
        <nav class="flex flex-col gap-8">
          <div class="overflow-hidden">
            <a href="#"
              class="menu-link nav-item font-serif text-7xl italic text-starlight hover:text-champagne hover:translate-x-5 transition-all duration-500 block animate-slide-up"
              data-index="01" style="animation-delay: 0.1s;">
              Nocturne <span class="not-italic text-white/10 font-light ml-4 text-5xl">Series</span>
            </a>
          </div>
          <div class="overflow-hidden">
            <a href="#"
              class="menu-link nav-item font-serif text-7xl italic text-starlight hover:text-champagne hover:translate-x-5 transition-all duration-500 block animate-slide-up"
              data-index="02" style="animation-delay: 0.2s;">
              Prisma <span class="not-italic text-white/10 font-light ml-4 text-5xl">Collection</span>
            </a>
          </div>
          <div class="overflow-hidden">
            <a href="#"
              class="menu-link nav-item font-serif text-7xl italic text-starlight hover:text-champagne hover:translate-x-5 transition-all duration-500 block animate-slide-up"
              data-index="03" style="animation-delay: 0.3s;">
              Aether <span class="not-italic text-white/10 font-light ml-4 text-5xl">Works</span>
            </a>
          </div>
          <div class="overflow-hidden">
            <a href="#"
              class="menu-link nav-item font-serif text-7xl italic text-starlight hover:text-champagne hover:translate-x-5 transition-all duration-500 block animate-slide-up"
              data-index="04" style="animation-delay: 0.4s;">
              About <span class="not-italic text-white/10 font-light ml-4 text-5xl">Studio</span>
            </a>
          </div>
        </nav>
      </div>

      <!-- Right Contact Info -->
      <div class="w-[30%] h-full border-l border-white/5 p-12 flex flex-col justify-center gap-16">
        <div class="animate-slide-up" style="animation-delay: 0.5s;">
          <h4 class="text-[10px] uppercase tracking-[0.3em] text-champagne mb-6">Studio Address</h4>
          <p class="font-display text-xl text-starlight/60 leading-relaxed">
            24 Rue du Faubourg<br>Saint-Honoré, 75008<br>Paris, France
          </p>
        </div>
        <div class="animate-slide-up" style="animation-delay: 0.6s;">
          <h4 class="text-[10px] uppercase tracking-[0.3em] text-champagne mb-6">Inquiries</h4>
          <a href="mailto:studio@lumo.design"
            class="font-display text-xl text-starlight/60 hover:text-starlight transition-colors block mb-2">studio@lumo.design</a>
          <span class="font-display text-xl text-starlight/60">+33 (0) 1 42 65 30 11</span>
        </div>
      </div>
    </main>

    <!-- Footer -->
    <footer class="h-[15%] border-t border-white/5 flex items-center justify-between px-[5%]">
      <div class="flex items-center gap-12">
        <span class="text-[9px] text-ash uppercase tracking-widest">© 2024 LUMO OBJECTS</span>
        <span class="text-[9px] text-ash uppercase tracking-widest">TERMS & PRIVACY</span>
      </div>
      <div class="flex items-center gap-4">
        <div class="w-1.5 h-1.5 rounded-full bg-champagne"></div>
        <span class="text-[10px] uppercase tracking-widest text-starlight/40">Curated in Paris</span>
      </div>
    </footer>
  </div>

  <script>
    const dot = document.getElementById('cursor-dot');
    const circle = document.getElementById('cursor-circle');
    const bg = document.getElementById('nav-bg');

    document.addEventListener('mousemove', (e) => {
      const { clientX: x, clientY: y } = e;
      dot.style.left = `${x}px`;
      dot.style.top = `${y}px`;
      circle.style.left = `${x}px`;
      circle.style.top = `${y}px`;
    });

    document.querySelectorAll('a, button').forEach(el => {
      el.addEventListener('mouseenter', () => {
        circle.style.width = '70px';
        circle.style.height = '70px';
        circle.style.borderColor = '#D4AF37';
        circle.style.backgroundColor = 'rgba(212, 175, 55, 0.05)';
        if (el.classList.contains('nav-item')) {
          bg.style.opacity = '1';
          bg.style.transform = 'translateY(-50%) scale(1.1)';
        }
      });
      el.addEventListener('mouseleave', () => {
        circle.style.width = '40px';
        circle.style.height = '40px';
        circle.style.borderColor = 'rgba(234, 234, 234, 0.3)';
        circle.style.backgroundColor = 'transparent';
        bg.style.opacity = '0';
        bg.style.transform = 'translateY(-50%) scale(1)';
      });
    });
  </script>
</div>