:root {
  --nav-hover-glow: radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.9) 0%, rgba(232, 168, 62, 0.18) 58%, transparent 100%);
  --nav-hover-line: linear-gradient(90deg, rgba(232, 168, 62, 0.18), rgba(47, 80, 108, 0.95), rgba(232, 168, 62, 0.18));
  --nav-focus-ring: rgba(47, 80, 108, 0.16);
}

.terrain-topbar {
  --nav-hover-glow: radial-gradient(circle at 50% 50%, rgba(255, 241, 209, 0.22) 0%, rgba(232, 168, 62, 0.16) 58%, transparent 100%);
  --nav-hover-line: linear-gradient(90deg, rgba(232, 168, 62, 0.12), rgba(255, 235, 194, 0.94), rgba(232, 168, 62, 0.12));
  --nav-focus-ring: rgba(232, 168, 62, 0.2);
}

.top-links .top-link,
.trending-nav .trending-nav-link,
.menu > a {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  overflow: visible;
  background-image: var(--nav-hover-line);
  background-repeat: no-repeat;
  background-position: center calc(100% - 0.02rem);
  background-size: 0% 2px;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-size 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms cubic-bezier(0.22, 1, 0.36, 1),
    text-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.top-links .top-link::before,
.trending-nav .trending-nav-link::before,
.menu > a::before {
  content: "";
  position: absolute;
  inset: -0.28rem -0.5rem;
  border-radius: inherit;
  background: var(--nav-hover-glow);
  opacity: 0;
  transform: scale(0.9);
  filter: blur(0.15rem);
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: -1;
}

.top-links .top-link:hover,
.top-links .top-link:focus-visible,
.trending-nav .trending-nav-link:hover,
.trending-nav .trending-nav-link:focus-visible,
.menu > a:hover,
.menu > a:focus-visible {
  transform: translateY(-1px);
  background-size: 100% 2px;
  text-shadow: 0 0 0.5rem rgba(232, 168, 62, 0.18);
}

.top-links .top-link:hover::before,
.top-links .top-link:focus-visible::before,
.trending-nav .trending-nav-link:hover::before,
.trending-nav .trending-nav-link:focus-visible::before,
.menu > a:hover::before,
.menu > a:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.top-links .top-link.active,
.trending-nav .trending-nav-link.active,
.menu > a.active {
  background-size: 100% 2px;
}

.top-links .top-link.active::before,
.trending-nav .trending-nav-link.active::before,
.menu > a.active::before {
  opacity: 0.56;
  transform: scale(1);
}

.top-links .top-link:focus-visible,
.trending-nav .trending-nav-link:focus-visible,
.menu > a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--nav-focus-ring);
}

.nav-link-ready {
  animation: navLinkReveal 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--nav-link-order, 0) * 28ms);
}

@keyframes navLinkReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-links .top-link,
  .trending-nav .trending-nav-link,
  .menu > a,
  .top-links .top-link::before,
  .trending-nav .trending-nav-link::before,
  .menu > a::before,
  .nav-link-ready {
    animation: none !important;
    transition: none !important;
  }
}