/* ── GooeyNav Component (Vanilla JS) ── */
/* Adapted from React Bits with Poki Theme */

: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
  );
  --color-1: var(--poki-pink, #ff75a0);
  --color-2: var(--poki-lilac, #b588f7);
  --color-3: var(--poki-aqua, #7ad1ff);
  --color-4: var(--poki-peach, #ffd3b6);
}

.gooey-nav-container {
  position: relative;
  width: 100%;
}

.gooey-nav-container nav {
  display: flex;
  position: relative;
  z-index: 2;
  width: 100%;
}

.gooey-nav-container nav ul {
  display: flex;
  list-style: none;
  padding: 0 4px;
  margin: 0;
  position: relative;
  z-index: 3;
  color: var(--text-light, white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: -0.1px;
  scrollbar-width: none; /* Firefox */
  width: 100%;
  justify-content: stretch;
  overflow: visible;
}
.gooey-nav-container nav ul::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.gooey-nav-container nav ul li {
  border-radius: 100vw;
  position: relative;
  cursor: pointer;
  z-index: 2;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 0 0.5px 1.5px transparent;
  color: var(--text-light, white);
  flex: 1 1 0px; /* Distribute horizontal space exactly equally across all items */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.gooey-nav-container nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55em 0.25em; /* Tight padding to elegantly fit the elements */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.gooey-nav-container nav ul li a svg {
  flex-shrink: 0;
}

.gooey-nav-container nav ul li:focus-within:has(:focus-visible) {
  box-shadow: 0 0 0.5px 1.5px white;
}

.gooey-nav-container nav ul li.active {
  color: var(--poki-dark, #0d0a1b);
  text-shadow: none;
}

.gooey-nav-container .effect.filter {
  position: absolute;
  background: white;
  border-radius: 100vw;
  z-index: 1;
  pointer-events: none;
  transition:
    left 0.4s var(--linear-ease),
    top 0.4s var(--linear-ease),
    width 0.4s var(--linear-ease),
    height 0.4s var(--linear-ease);
}

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

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

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

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

@keyframes gooey-particle-move {
  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-move {
  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;
  }
}

/* ── Gooey Nav Wrapper inside header ── */
@keyframes dock-gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gooey-header-nav {
  pointer-events: auto;
  background: linear-gradient(135deg, rgba(13, 10, 27, 0.4), rgba(45, 25, 60, 0.4), rgba(13, 10, 27, 0.4));
  background-size: 200% 200%;
  animation: dock-gradient-flow 6s ease infinite;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  border-radius: 100vw;
  padding: 4px 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  overflow: visible;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .gooey-nav-container nav ul {
    gap: 0;
    font-size: 12.5px;
    padding: 0 2px;
  }
  .gooey-nav-container nav ul li a {
    padding: 0.55em 0.1em;
  }
  .ios-dock-wrapper {
    bottom: 20px;
    width: calc(100% - 24px); /* Slightly closer to the edges on mobile for maximum space allocation */
    max-width: calc(100% - 24px);
  }
  .gooey-header-nav {
    padding: 4px 4px;
    width: 100%;
  }
}

@media (max-width: 380px) {
  .gooey-nav-container nav ul {
    gap: 0;
    font-size: 11px; /* Slightly tighten size for extremely narrow screen widths (e.g. iPhone SE / 320px) */
    padding: 0 1px;
  }
  .gooey-nav-container nav ul li a {
    padding: 0.5em 0.05em;
  }
  .gooey-nav-container nav ul li a svg {
    margin-right: 2px !important; /* Decrease margin space between icon and text */
  }
}