*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: url("https://placehold.co/1920x1080/0f172a/1e293b?text=Desktop+Wallpaper") center/cover no-repeat;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 30px;
}

.dock-container {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 12px;
  border-radius: 24px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dock-icon {
  width: 50px;
  height: 50px;
  background: #ffffff;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3b82f6;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.dock-tooltip {
  position: absolute;
  top: -45px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
}

const icons = document.querySelectorAll(".dock-icon");
const dock = document.querySelector(".dock-container");

dock.addEventListener("mousemove", function(e) {
  icons.forEach(function(icon) {
    const rect = icon.getBoundingClientRect();
    // Calculate distance from cursor to the center of the icon
    const centerX = rect.left + rect.width / 2;
    const distance = Math.abs(e.clientX - centerX);
    
    // Scale effect based on distance (closer = bigger)
    // Max scale is 1.5, min scale is 1
    const maxDistance = 150;
    let scale = 1;
    
    if (distance < maxDistance) {
      scale = 1 + (0.5 * (1 - distance / maxDistance));
    }
    
    icon.style.transform = "scale(" + scale + ") translateY(-" + ((scale - 1) * 20) + "px)";
  });
});

dock.addEventListener("mouseleave", function() {
  // Reset all icons when cursor leaves the dock
  icons.forEach(function(icon) {
    icon.style.transform = "scale(1) translateY(0)";
  });
});