:root {
  --linear-ease: linear(
    0, 0.068, 0.19 2.7%, 0.804 8.1%, 1.037, 1.199 13.2%, 1.245,
    1.27 15.8%, 1.274, 1.272 17.4%, 1.249 19.1%, 0.996 28%, 0.949,
    0.928 33.3%, 0.926, 0.933 36.8%, 1.001 45.6%, 1.013, 1.019 50.8%,
    1.018 54.4%, 1 63.1%, 0.995 68%, 1.001 85%, 1
  );
}

.gooey-nav-container {
  --gooey-active: #fff;
  --gooey-active-text: #08090d;
  --gooey-mask: #08090d;
  --color-1: #c5f15a;
  --color-2: #ffffff;
  --color-3: #aa8cff;
  --color-4: #67b2ff;
  position: relative;
  isolation: isolate;
}

.gooey-nav-container nav {
  display: flex;
  position: relative;
  transform: translate3d(0, 0, .01px);
}

.gooey-nav-container nav ul {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px;
  list-style: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  background: rgba(14, 15, 21, .82);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.gooey-nav-container nav li {
  position: relative;
  border-radius: 999px;
  color: #d7d8dc;
  cursor: pointer;
  box-shadow: 0 0 .5px 1.5px transparent;
  transition: color .3s ease, box-shadow .3s ease;
}

.gooey-nav-container nav li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 16px;
  color: inherit;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .035em;
  text-decoration: none;
  white-space: nowrap;
}

.gooey-nav-container nav li:focus-within:has(:focus-visible) {
  box-shadow: 0 0 0 2px var(--color-1);
}

.gooey-nav-container nav li::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 999px;
  background: var(--gooey-active);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s ease, transform .3s var(--linear-ease);
}

.gooey-nav-container nav li.active {
  color: var(--gooey-active-text);
  text-shadow: none;
}

.gooey-nav-container nav li.active::after {
  opacity: 1;
  transform: scale(1);
}

.gooey-nav-container .effect {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 0;
  height: 0;
  opacity: 1;
  border-radius: 999px;
  pointer-events: none;
}

.gooey-nav-container .effect.text {
  z-index: 4;
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .035em;
  white-space: nowrap;
  transition: color .3s ease;
}

.gooey-nav-container .effect.text.active { color: var(--gooey-active-text); }

.gooey-nav-container .effect.filter {
  filter: blur(7px) contrast(28) blur(0);
  mix-blend-mode: screen;
}

.gooey-nav-container .effect.filter::before {
  display: none;
}

.gooey-nav-container .effect.filter::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 999px;
  background: var(--gooey-active);
  opacity: 0;
  transform: scale(0);
}

.gooey-nav-container .effect.active::after { animation: gooey-pill .3s ease both; }

.gooey-nav-container .particle,
.gooey-nav-container .point {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  opacity: 0;
  transform-origin: center;
}

.gooey-nav-container .particle {
  --time: 5s;
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  animation: gooey-particle var(--time) ease 1 -350ms;
}

.gooey-nav-container .point {
  background: var(--color);
  opacity: 1;
  animation: gooey-point var(--time) ease 1 -350ms;
}

@keyframes gooey-pill {
  to { transform: scale(1); opacity: 1; }
}

@keyframes gooey-particle {
  0% {
    opacity: 1;
    transform: rotate(0deg) translate(var(--start-x), var(--start-y));
    animation-timing-function: cubic-bezier(.55, 0, 1, .45);
  }
  70% {
    opacity: 1;
    transform: rotate(calc(var(--rotate) * .5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2));
    animation-timing-function: ease;
  }
  85% {
    opacity: 1;
    transform: rotate(calc(var(--rotate) * .66)) translate(var(--end-x), var(--end-y));
  }
  100% {
    opacity: 1;
    transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * .5), calc(var(--end-y) * .5));
  }
}

@keyframes gooey-point {
  0% { opacity: 0; transform: scale(0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  25% { transform: scale(calc(var(--scale) * .25)); }
  38% { opacity: 1; }
  65% { opacity: 1; transform: scale(var(--scale)); animation-timing-function: ease; }
  85% { opacity: 1; transform: scale(var(--scale)); }
  100% { opacity: 0; transform: scale(0); }
}

@media (max-width: 680px) {
  .gooey-nav-container { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .gooey-nav-container::-webkit-scrollbar { display: none; }
  .gooey-nav-container nav { width: max-content; }
  .gooey-nav-container nav li a { min-height: 36px; padding: 0 13px; font-size: 10px; }
  .gooey-nav-container .effect.text { font-size: 10px; }
  .gooey-nav-container .effect.filter,
  .gooey-nav-container .effect.text { display: none; }
}

@media (hover: none), (pointer: coarse) {
  .gooey-nav-container .effect.filter,
  .gooey-nav-container .effect.text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gooey-nav-container .effect.filter { display: none; }
  .gooey-nav-container nav li::after { transition-duration: .01ms; }
}