Floating Dock Navigation

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<nav class="dock">
  <a href="#" class="dock__item" aria-label="Home">🏠</a>
  <a href="#" class="dock__item" aria-label="Search">🔍</a>
  <a href="#" class="dock__item" aria-label="Notifications">🔔</a>
  <a href="#" class="dock__item" aria-label="Profile">👤</a>
</nav>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.dock {
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.dock__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 20px;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.dock__item:hover {
  transform: translateY(-8px) scale(1.25);
  background: rgba(255, 255, 255, 0.2);
}