/* GooeyNav.css, gooey particle navigation (react-bits) */
.gooey-nav-container {
  --color-1: #06d2dd;
  --color-2: #9c6cfe;
  --color-3: #5731dc;
  --color-4: #ffffff;
  position: relative;
  height: 100%;
}
.gooey-nav-container nav { position: relative; }
.gooey-nav-container ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 3;
  color: #ffffff;
}
.gooey-nav-container ul li {
  padding: 0;
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  border-radius: var(--r-pill);
}
.gooey-nav-container ul li a {
  display: block;
  padding: 9px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  outline: none;
}
.gooey-nav-container ul li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: #ffffff;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: -1;
}
.gooey-nav-container ul li.active {
  color: #07090d;
  text-shadow: none;
}
.gooey-nav-container ul li.active::after {
  opacity: 1;
  transform: scale(1);
}

.gooey-nav-container .effect {
  position: absolute;
  opacity: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 1;
}
.gooey-nav-container .effect.text {
  color: #ffffff;
  transition: color 0.3s ease;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14.5px;
}
.gooey-nav-container .effect.text.active { color: #07090d; }
.gooey-nav-container .effect.filter {
  filter: blur(7px) contrast(100) blur(0);
  mix-blend-mode: lighten;
}
.gooey-nav-container .effect.filter::before {
  content: "";
  position: absolute;
  inset: -75px;
  z-index: -2;
  background: transparent;
}
.gooey-nav-container .effect.filter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: scale(0);
  opacity: 0;
  z-index: -1;
  border-radius: var(--r-pill);
}
.gooey-nav-container .effect.active::after {
  animation: gooey-pill 0.3s ease both;
}
@keyframes gooey-pill { to { transform: scale(1); opacity: 1; } }

.gooey-nav-container .particle,
.gooey-nav-container .point {
  display: block;
  opacity: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  transform-origin: center;
}
.gooey-nav-container .particle {
  --time: 5s;
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  animation: gooey-particle calc(var(--time)) ease 1 -350ms;
}
.gooey-nav-container .point {
  background: var(--color);
  opacity: 1;
  animation: gooey-point calc(var(--time)) ease 1 -350ms;
}
@keyframes gooey-particle {
  0%   { transform: rotate(0deg) translate(calc(var(--start-x)), calc(var(--start-y))); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  70%  { transform: rotate(calc(var(--rotate) * 0.5)) translate(calc(var(--end-x) * 1.2), calc(var(--end-y) * 1.2)); opacity: 1; animation-timing-function: ease; }
  85%  { transform: rotate(calc(var(--rotate) * 0.66)) translate(calc(var(--end-x)), calc(var(--end-y))); opacity: 1; }
  100% { transform: rotate(calc(var(--rotate) * 1.2)) translate(calc(var(--end-x) * 0.5), calc(var(--end-y) * 0.5)); opacity: 1; }
}
@keyframes gooey-point {
  0%   { transform: scale(0); opacity: 0; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  25%  { transform: scale(calc(var(--scale) * 0.25)); }
  38%  { opacity: 1; }
  65%  { transform: scale(var(--scale)); opacity: 1; animation-timing-function: ease; }
  85%  { transform: scale(var(--scale)); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}