/* Add this to your CSS file */
.navbar-transition {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
}
:root {
  --float-distance: 6px;
}
@keyframes floatY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-1 * var(--float-distance)));
  }
  100% {
    transform: translateY(0);
  }
}
/* subtle shimmering gradient over badges (optional) */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* class hooks added to badges via Tailwind utilities below */
.badge {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.02)
  );
  backdrop-filter: blur(6px);
  animation: floatY 4s ease-in-out infinite;
}

/* prefer-reduced-motion: turn off animations */
@media (prefers-reduced-motion: reduce) {
  .badge {
    animation: none !important;
  }
}
nav a,
#mobile-menu a {
  transition: color 0.3s, font-weight 0.3s;
}