Magnetic Dock Nav

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<nav class="dock-nav">
  <a href="#" class="dock-nav__item">H</a>
  <a href="#" class="dock-nav__item">S</a>
  <a href="#" class="dock-nav__item">M</a>
  <a href="#" class="dock-nav__item">F</a>
  <a href="#" class="dock-nav__item">C</a>
</nav>

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

.dock-nav {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: fit-content;
}
.dock-nav__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease;
  animation: dock-idle-wave 2.4s ease-in-out infinite;
}
.dock-nav__item:nth-child(1) {
  animation-delay: 0s;
}
.dock-nav__item:nth-child(2) {
  animation-delay: 0.15s;
}
.dock-nav__item:nth-child(3) {
  animation-delay: 0.3s;
}
.dock-nav__item:nth-child(4) {
  animation-delay: 0.45s;
}
.dock-nav__item:nth-child(5) {
  animation-delay: 0.6s;
}
@keyframes dock-idle-wave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
.dock-nav__item:hover {
  transform: translateY(-10px) scale(1.35);
  background: rgba(255, 255, 255, 0.12);
  animation-play-state: paused;
}
.dock-nav__item:has(+ .dock-nav__item:hover) {
  transform: scale(1.12);
}
.dock-nav__item:hover + .dock-nav__item {
  transform: scale(1.12);
}