Circular Floating Menu

.floating-menu-demo {
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 370px;
  border-radius: 16px;
  overflow: hidden;
  padding: 30px;
}

.demo-content {
  color: white;
  text-align: center;
  margin-bottom: 30px;
}

.demo-content h2 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 700;
}

.demo-content p {
  margin: 8px 0;
  opacity: 0.9;
  line-height: 1.6;
}

.demo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.demo-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.demo-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.15);
}

.card-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.demo-card h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.demo-card p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.floating-menu-container {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}

.floating-menu {
  position: relative;
  width: 60px;
  height: 60px;
}

.fab-main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(238, 90, 36, 0.4);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1002;
}

.fab-main:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 35px rgba(238, 90, 36, 0.5);
}

.fab-main.active {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
}

.fab-icon {
  font-size: 24px;
  color: white;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.menu-items {
  position: absolute;
  bottom: 30px;
  right: 30px;
  pointer-events: none;
}

.menu-item {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: scale(0) rotate(180deg);
  pointer-events: none;
  z-index: 1001;
}

.floating-menu.active .menu-item {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  pointer-events: auto;
}

.menu-item:nth-child(1) { /* Home */
  transition-delay: 0.1s;
}

.menu-item:nth-child(2) { /* Search */
  transition-delay: 0.15s;
}

.menu-item:nth-child(3) { /* Favorites */
  transition-delay: 0.2s;
}

.menu-item:nth-child(4) { /* Profile */
  transition-delay: 0.25s;
}

.menu-item:nth-child(5) { /* Settings */
  transition-delay: 0.3s;
}

.menu-item:nth-child(6) { /* Messages */
  transition-delay: 0.35s;
}

.floating-menu.active .menu-item:nth-child(1) {
  transform: translate(-80px, -20px) scale(1) rotate(0deg);
}

.floating-menu.active .menu-item:nth-child(2) {
  transform: translate(-100px, -60px) scale(1) rotate(0deg);
}

.floating-menu.active .menu-item:nth-child(3) {
  transform: translate(-80px, -100px) scale(1) rotate(0deg);
}

.floating-menu.active .menu-item:nth-child(4) {
  transform: translate(-40px, -120px) scale(1) rotate(0deg);
}

.floating-menu.active .menu-item:nth-child(5) {
  transform: translate(0px, -120px) scale(1) rotate(0deg);
}

.floating-menu.active .menu-item:nth-child(6) {
  transform: translate(40px, -100px) scale(1) rotate(0deg);
}

.menu-item:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.floating-menu.active .menu-item:hover {
  z-index: 1003;
}

.item-icon {
  font-size: 18px;
  margin-bottom: 2px;
}

.item-label {
  font-size: 8px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
  pointer-events: none;
}

.floating-menu.active .menu-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Ripple effect */
.menu-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.menu-item:active::before {
  width: 60px;
  height: 60px;
}

/* Responsive */
@media (max-width: 768px) {
  .floating-menu-demo {
    padding: 20px;
  }
  
  .demo-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .floating-menu-container {
    bottom: 20px;
    right: 20px;
  }
  
  .fab-main {
    width: 56px;
    height: 56px;
  }
  
  .menu-item {
    width: 46px;
    height: 46px;
  }
  
  .item-icon {
    font-size: 16px;
  }
  
  .item-label {
    font-size: 7px;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const floatingMenu = document.getElementById('floatingMenu');
  const fabMain = document.getElementById('fabMain');
  const menuBackdrop = document.getElementById('menuBackdrop');
  const menuItems = document.querySelectorAll('.menu-item');
  
  let isMenuOpen = false;
  
  // Toggle menu function
  function toggleMenu() {
    isMenuOpen = !isMenuOpen;
    
    if (isMenuOpen) {
      floatingMenu.classList.add('active');
      fabMain.classList.add('active');
      fabMain.setAttribute('aria-label', 'Close menu');
      showFeedback('Menu opened');
    } else {
      floatingMenu.classList.remove('active');
      fabMain.classList.remove('active');
      fabMain.setAttribute('aria-label', 'Open menu');
      showFeedback('Menu closed');
    }
  }
  
  // Main FAB click handler
  if (fabMain) {
    fabMain.addEventListener('click', function(e) {
      e.stopPropagation();
      toggleMenu();
    });
  }
  
  // Backdrop click handler
  if (menuBackdrop) {
    menuBackdrop.addEventListener('click', function() {
      if (isMenuOpen) {
        toggleMenu();
      }
    });
  }
  
  // Menu item click handlers
  menuItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.stopPropagation();
      
      const action = this.getAttribute('data-action');
      const label = this.querySelector('.item-label').textContent;
      
      // Add ripple effect
      this.style.transform = 'scale(0.95)';
      setTimeout(() => {
        this.style.transform = '';
      }, 150);
      
      // Show feedback and close menu
      showFeedback(`Action: ${label}`);
      
      // Close menu after action
      setTimeout(() => {
        if (isMenuOpen) {
          toggleMenu();
        }
      }, 500);
    });
    
    // Add hover sound effect (visual feedback)
    item.addEventListener('mouseenter', function() {
      this.style.transform = 'scale(1.1)';
    });
    
    item.addEventListener('mouseleave', function() {
      this.style.transform = '';
    });
  });
  
  // Close menu on escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && isMenuOpen) {
      toggleMenu();
    }
  });
  
  // Close menu when clicking outside
  document.addEventListener('click', function(e) {
    if (isMenuOpen && !floatingMenu.contains(e.target)) {
      toggleMenu();
    }
  });
  
  // Prevent menu from closing when clicking on menu items
  floatingMenu.addEventListener('click', function(e) {
    e.stopPropagation();
  });
  
  // Touch support for mobile
  let touchStartY = 0;
  let touchStartX = 0;
  
  fabMain.addEventListener('touchstart', function(e) {
    touchStartY = e.touches[0].clientY;
    touchStartX = e.touches[0].clientX;
  });
  
  fabMain.addEventListener('touchend', function(e) {
    const touchEndY = e.changedTouches[0].clientY;
    const touchEndX = e.changedTouches[0].clientX;
    const deltaY = Math.abs(touchEndY - touchStartY);
    const deltaX = Math.abs(touchEndX - touchStartX);
    
    // Only trigger if it's a tap, not a swipe
    if (deltaY < 10 && deltaX < 10) {
      e.preventDefault();
      toggleMenu();
    }
  });
  
  // Feedback function
  function showFeedback(message) {
    const existing = document.querySelector('.demo-feedback');
    if (existing) existing.remove();
    
    const feedback = document.createElement('div');
    feedback.className = 'demo-feedback';
    feedback.textContent = message;
    feedback.style.cssText = `
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
      color: white;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      z-index: 10001;
      box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    
    document.body.appendChild(feedback);
    
    requestAnimationFrame(() => {
      feedback.style.opacity = '1';
    });
    
    setTimeout(() => {
      feedback.style.opacity = '0';
      setTimeout(() => feedback.remove(), 300);
    }, 2500);
  }
  
  // Initial feedback
  setTimeout(() => {
    showFeedback('Click the floating button to open menu!');
  }, 1000);
  
  // Add pulse animation to FAB on load
  setTimeout(() => {
    fabMain.style.animation = 'pulse 2s infinite';
  }, 2000);
  
  // Add pulse keyframes
  const style = document.createElement('style');
  style.textContent = `
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }
  `;
  document.head.appendChild(style);
});