/* Liquid shapes from the selected navigation references; the labels are never blurred. */
.site-nav,
html.js.past-hero .site-nav,
html.motion.nav-hidden .site-nav {
  position: fixed;
  background: transparent;
  color: var(--sand);
  transform: none;
  pointer-events: none;
}
.site-nav__inner { max-width: none; gap: 1.25rem; }
.site-nav .brand,
.site-nav .site-nav__links,
.site-nav .site-nav__tools { pointer-events: auto; }
.liquid-nav { position: relative; display: flex; align-items: center; gap: .35rem; }
.liquid-nav__filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.liquid-nav__fluid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: url(#turbeings-nav-goo);
  z-index: 0;
}
.liquid-nav__pill,
.liquid-nav__particles {
  position: absolute;
  left: var(--pill-x, 0px);
  top: var(--pill-y, 0px);
  width: var(--pill-w, 0px);
  height: var(--pill-h, 44px);
  transition: left 360ms cubic-bezier(.22,.8,.2,1), top 360ms cubic-bezier(.22,.8,.2,1), width 360ms cubic-bezier(.22,.8,.2,1), height 360ms cubic-bezier(.22,.8,.2,1);
}
.liquid-nav__pill { background: var(--sand); border-radius: 100vw; }
.liquid-nav__drop {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--drop-size);
  height: var(--drop-size);
  border-radius: 50%;
  background: var(--sand);
  animation: nav-droplet var(--drop-time) cubic-bezier(.22,.8,.2,1) both;
}
@keyframes nav-droplet {
  0% { transform: translate(-50%, -50%) scale(0); }
  35% { transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) scale(1); }
  100% { transform: translate(-50%, -50%) scale(0); }
}
.site-nav.liquid-navigation .site-nav__links,
.site-nav.liquid-navigation .site-nav__tools { position: relative; z-index: 1; }
.site-nav.liquid-navigation .site-nav__links ul { gap: .15rem; }
.site-nav.liquid-navigation .site-nav__links a,
.site-nav.liquid-navigation .lang-toggle,
.site-nav.liquid-navigation .sound-toggle,
.site-nav.liquid-navigation .nav-action {
  padding-inline: 1rem;
  border-radius: 100vw;
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms ease;
}
.site-nav.liquid-navigation .site-nav__tools { gap: .15rem; }
.site-nav.liquid-navigation .nav-action,
html.past-hero .site-nav.liquid-navigation .nav-action {
  border-color: transparent;
  background: var(--granite-fill);
  color: var(--sand);
}
.site-nav.liquid-navigation .is-liquid-active,
html.past-hero .site-nav.liquid-navigation .is-liquid-active {
  color: var(--ink);
  background: transparent;
}
.site-nav.liquid-navigation :is(a, button, summary):focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 4px;
}
.site-nav.liquid-navigation .is-liquid-active:focus-visible { outline-color: var(--sand); }
.nav-menu__tools { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.nav-menu__fluid { display: none; }

@media (min-width: 1200px) {
  .liquid-nav {
    padding: 4px;
    border-radius: 100vw;
    background: var(--ink);
  }
  .site-nav .site-nav__links { display: block; }
  .site-nav .nav-menu { display: none; }
  .site-nav .nav-action { display: inline-flex; }
}
@media (max-width: 1199.98px) {
  .site-nav .site-nav__links { display: none; }
  .site-nav .nav-menu { display: block; }
  .liquid-nav__fluid { display: none; }
  .site-nav__inner { gap: .75rem; }
  .site-nav .site-nav__tools { gap: .25rem; }
  .site-nav.liquid-navigation .nav-menu > summary {
    position: relative;
    z-index: 3;
    min-width: 80px;
    justify-content: center;
    background: var(--sand);
    border-color: var(--sand);
    color: var(--ink);
  }
  .site-nav .nav-menu__panel {
    position: absolute;
    inset: 56px 0 auto auto;
    width: min(19rem, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100dvh - var(--nav-h) - 1.5rem - env(safe-area-inset-bottom));
    padding: 1.25rem;
    border: 0;
    border-radius: 1.5rem;
    color: var(--ink);
    background: var(--sand);
    overflow: auto;
    overscroll-behavior: contain;
  }
  .site-nav .nav-menu__panel ul { gap: .1rem; }
  .site-nav .nav-menu__panel a { min-height: 44px; font-size: clamp(1.4rem, 5vw, 1.8rem); }
  .site-nav.liquid-navigation .nav-menu__panel {
    background: transparent;
    isolation: isolate;
    overflow: visible;
    padding: 0;
    transform-origin: top right;
  }
  .site-nav.liquid-navigation .nav-menu__content {
    position: relative;
    z-index: 1;
    padding: 1.25rem;
    max-height: inherit;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: inherit;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 150ms ease, transform 220ms ease;
  }
  .site-nav.liquid-navigation .nav-menu.is-open .nav-menu__content {
    opacity: 1;
    transform: none;
    transition-delay: 140ms;
  }
  .site-nav.liquid-navigation .nav-menu.is-closing .nav-menu__panel { pointer-events: none; }
  .site-nav.liquid-navigation .nav-menu__fluid {
    display: block;
    position: absolute;
    inset: -56px 0 0;
    z-index: 0;
    filter: url(#turbeings-nav-goo);
    pointer-events: none;
  }
  .nav-menu__surface {
    position: absolute;
    top: 56px;
    right: 0;
    width: 100%;
    height: var(--menu-height, 380px);
    border-radius: 1.5rem;
    background: var(--sand);
    transform-origin: top right;
    transform: translateY(-48px) scale(.23, .12);
    transition: transform 400ms cubic-bezier(.18,.85,.3,1.08), border-radius 400ms ease;
  }
  .nav-menu__bridge {
    position: absolute;
    top: 24px;
    right: 25px;
    width: 30px;
    height: 68px;
    border-radius: 50%;
    background: var(--sand);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 260ms ease;
  }
  .nav-menu.is-open .nav-menu__surface { transform: none; }
  .nav-menu.is-open .nav-menu__bridge { transform: scaleY(1); }
  .nav-menu.is-closing .nav-menu__surface { transition-duration: 250ms; border-radius: 3rem; }
  .site-nav.liquid-navigation .nav-menu__tools .lang-toggle,
  .site-nav.liquid-navigation .nav-menu__tools .sound-toggle {
    min-height: 44px;
    padding-inline: .85rem;
    border: 1px solid currentColor;
    color: var(--ink);
  }
  .site-nav.liquid-navigation .nav-menu__tools .nav-action {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: .35rem;
    background: var(--granite-fill);
    color: var(--sand);
    white-space: normal;
    text-align: center;
  }
  .site-nav.liquid-navigation .nav-menu__panel :is(a, button):focus-visible { outline-color: var(--ink); }
}
@media (max-height: 540px) and (max-width: 1199.98px) {
  .site-nav.liquid-navigation .nav-menu__panel { overflow: auto; background: var(--sand); }
  .site-nav.liquid-navigation .nav-menu__fluid { display: none; }
  .site-nav .nav-menu__panel a { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-nav__pill,
  .liquid-nav__particles,
  .nav-menu__surface,
  .nav-menu__bridge,
  .site-nav.liquid-navigation .nav-menu__content { transition: none; }
  .liquid-nav__drop { display: none; }
}