Animated Hamburger

<!-- Bars morph into an X; state flips under reduced motion, only the transition drops. -->
<button type="button" class="hamburger inline-flex h-11 w-11 flex-col items-center justify-center gap-1.5 rounded-lg border border-gray-200 bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:border-gray-800 dark:bg-gray-900" aria-expanded="false" aria-label="Toggle menu">
  <span class="bar-1 h-0.5 w-6 rounded-full bg-gray-900 transition-transform duration-300 ease-out motion-reduce:transition-none dark:bg-gray-100"></span>
  <span class="bar-2 h-0.5 w-6 rounded-full bg-gray-900 transition-opacity duration-300 ease-out motion-reduce:transition-none dark:bg-gray-100"></span>
  <span class="bar-3 h-0.5 w-6 rounded-full bg-gray-900 transition-transform duration-300 ease-out motion-reduce:transition-none dark:bg-gray-100"></span>
</button>

<script>
  (function () {
    var btn = document.querySelector('.hamburger');
    if (!btn) return;
    btn.addEventListener('click', function () {
      var open = btn.getAttribute('aria-expanded') === 'true';
      btn.setAttribute('aria-expanded', String(!open));
      btn.querySelector('.bar-1').style.transform = !open ? 'translateY(8px) rotate(45deg)' : '';
      btn.querySelector('.bar-2').style.opacity = !open ? '0' : '1';
      btn.querySelector('.bar-3').style.transform = !open ? 'translateY(-8px) rotate(-45deg)' : '';
    });
  })();
</script>