/* GooeyNav (React Bits) — Vanilla-Port für die kempfart.de-Navigation */
:root {
  --gooey-color-1: #f0e040;
  --gooey-color-2: #e0448a;
  --gooey-color-3: #8b5cf6;
  --gooey-color-4: #1995FA;
}

.gooey-nav-container {
  position: relative;
  transform: translate3d(0, 0, 0.01px);
}
.gooey-nav-container ul {
  position: relative;
  z-index: 3;
}
.gooey-nav-container ul li {
  border-radius: 100vw;
  position: relative;
  cursor: pointer;
  transition: color 0.3s ease;
}
.gooey-nav-container ul li a {
  display: inline-block;
  padding: 0.45em 0.9em;
}
.gooey-nav-container ul li::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100vw;
  background: white;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease;
  z-index: -1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.gooey-nav-container ul li.gooey-active a { color: #14101c !important; }
.gooey-nav-container ul li.gooey-active::after {
  opacity: 1;
  transform: scale(1);
}

.gooey-nav-container .effect {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 4;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.gooey-nav-container .effect.text { color: white; transition: color 0.3s ease; }
.gooey-nav-container .effect.text.active { color: #14101c; }
/* ponytail: ohne Metaball-Blur/Kontrast-Trick — dessen schwarze Basis kollidiert
   mit dem backdrop-filter der Navbar. Partikel platzen als klare farbige Punkte. */
.gooey-nav-container .effect.filter { z-index: 2; }
.gooey-nav-container .effect.filter::after {
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.gooey-nav-container.gooey-idle .effect { display: none; }
.gooey-nav-container .point {
  box-shadow: 0 0 6px var(--color);
  width: 10px; height: 10px;
}
.gooey-nav-container .effect.filter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  transform: scale(0);
  opacity: 0;
  z-index: -1;
  border-radius: 100vw;
}
.gooey-nav-container .effect.active::after { animation: gooeyPill 0.3s ease both; }
@keyframes gooeyPill {
  to { transform: scale(1); opacity: 1; }
}

.gooey-nav-container .particle,
.gooey-nav-container .point {
  display: block;
  opacity: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transform-origin: center;
}
.gooey-nav-container .particle {
  --time: 5s;
  position: absolute;
  top: calc(50% - 8px);
  left: calc(50% - 8px);
  animation: gooeyParticle calc(var(--time)) ease 1 -350ms;
}
.gooey-nav-container .point {
  background: var(--color);
  opacity: 1;
  animation: gooeyPoint calc(var(--time)) ease 1 -350ms;
}
@keyframes gooeyParticle {
  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 gooeyPoint {
  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;
  }
}