: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 {
    position: relative;
  }
  
  .gooey-nav-container > ul {
    position: relative;
    transform: translate3d(0, 0, 0.01px);
  }

  /* --- vanilla-port integration with the site theme --- */
  .gooey-nav-container {
    --color-1: var(--amber);
    --color-2: var(--cream);
    --color-3: var(--blue);
    --color-4: var(--green);
  }
  /* gooey pill is the active indicator now — drop the old underline */
  .gooey-nav-container .nav-links a::after { display: none; }
  /* keep links readable on the white active pill */
  .gooey-nav-container ul li.active a { color: #000; }
  /* let the gooey blobs spill past the header (the transparent-field SVG goo
     that replaces the blur+contrast+black trick is set on .effect.filter below) */
  nav:has(.gooey-nav-container) { overflow: visible; }
  
  .gooey-nav-container ul {
    display: flex;
    gap: 2em;
    list-style: none;
    padding: 0 1em;
    margin: 0;
    position: relative;
    z-index: 3;
    color: white;
    text-shadow: 0 1px 1px hsl(205deg 30% 10% / 0.2);
  }
  
  .gooey-nav-container ul li {
    border-radius: 100vw;
    position: relative;
    cursor: pointer;
    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: white;
  }
  
  .gooey-nav-container ul li a {
    display: inline-block;
    padding: 0.6em 1em;
  }
  
  .gooey-nav-container ul li:focus-within:has(:focus-visible) {
    box-shadow: 0 0 0.5px 1.5px white;
  }
  
  .gooey-nav-container ul li::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: white;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: -1;
  }
  
  .gooey-nav-container ul li.active {
    color: black;
    text-shadow: none;
  }
  
  .gooey-nav-container ul li.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: 1;
  }
  
  .gooey-nav-container .effect.text {
    color: white;
    transition: color 0.3s ease;
  }
  
  .gooey-nav-container .effect.text.active {
    color: black;
  }
  
  /* transparent-field gooey: merge via SVG goo filter, no black backdrop, no
     blend mode — so the bubbles spill out of the bar with nothing else showing */
  .gooey-nav-container .effect.filter {
    filter: url(#gooey-nav-goo);
    mix-blend-mode: normal;
  }
  /* (black backdrop field removed — the SVG goo filter works on transparency) */
  
  .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: pill 0.3s ease both;
  }
  
  @keyframes pill {
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .particle,
  .point {
    display: block;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    transform-origin: center;
  }
  
  .particle {
    --time: 5s;
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    animation: particle calc(var(--time)) ease 1 -350ms;
  }
  
  .point {
    background: var(--color);
    opacity: 1;
    animation: point calc(var(--time)) ease 1 -350ms;
  }
  
  @keyframes 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 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;
    }
  }