.navigation-bar {
  background-color: var(--navy);
  padding: 10px 20px;
  text-align: center;
  border-radius: 18px;
  margin-top: 20px;
  position: relative;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 6px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  animation: navSlideIn 0.8s ease-out forwards;
}

.navigation-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 40%,
    rgba(255, 255, 255, 0) 70%
  );
  transform: skewX(-15deg);
  transition: all 1s ease;
  z-index: 0;
}

.navigation-bar:hover::after {
  left: -20%;
}

.navigation-bar a {
  position: relative;
  display: inline-block;
  color: white;
  margin: 8px 14px;
  font-family: "subway", sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition:
    color 0.25s ease-in,
    transform 0.25s ease-out;
  z-index: 1;
}

.navigation-bar a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.navigation-bar a:hover::after {
  width: 100%;
}

.navigation-bar a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}

.navigation-bar a:active {
  transform: scale(0.95);
  opacity: 0.9;
}