/* Moving Gradient Button — Originkit, used only by the top navigation tabs. */
@property --button-orbit {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#navigation {
  /* Match the blue surfaces and mint accents without white or neon flashes. */
  --button-track: #24434f;
  --button-stroke: #2b777d;
  --button-mid: #6dcbd6;
  --button-head: #a7e4d4;
  --button-fill: #09131d;
  --button-text: var(--ink, #e7f1f7);
  --button-active: var(--green, #53ead2);
  --button-band: 2px;
}

#navigation button.nav-item {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--button-fill);
  color: var(--button-text);
  box-shadow: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease-in-out, color .25s ease-in-out,
    box-shadow .25s ease-in-out;
}

#navigation button.nav-item::before,
#navigation button.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--button-band);
  box-sizing: border-box;
  border-radius: inherit;
  pointer-events: none;
  transform: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

#navigation button.nav-item::before {
  background: repeating-conic-gradient(from var(--button-orbit),
    var(--button-track) 0deg, var(--button-track) 35deg,
    var(--button-stroke) 90deg, var(--button-mid) 125deg,
    var(--button-head) 155deg, var(--button-track) 180deg);
  animation: button-orbit 22.72s linear infinite;
}

#navigation button.nav-item::after {
  background: conic-gradient(var(--button-stroke), var(--button-mid),
    var(--button-head), var(--button-stroke), var(--button-mid),
    var(--button-head), var(--button-stroke));
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

#navigation button.nav-item:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
  background: var(--button-fill);
  color: var(--button-text);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

#navigation button.nav-item:is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"])::after {
  opacity: 1;
}

#navigation button.nav-item:focus-visible {
  outline: 2px solid var(--button-head);
  outline-offset: 4px;
}

/* The filled tab is the current-section indicator. */
#navigation button.nav-item.active,
#navigation button.nav-item.active:is(:hover, :focus-visible) {
  background: var(--button-active);
  color: #062a28;
  border-color: transparent;
  box-shadow: none;
}

#navigation .nav-item.active svg { color: currentColor; transform: none; }
#navigation .nav-item .nav-count { color: var(--button-text); background: #ffffff14; }
#navigation .nav-item.active .nav-count { color: #062a28; background: #062a2815; }
#navigation .nav-item.active .nav-dot { background: #062a28; }

#navigation button.nav-item:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
}
#navigation button.nav-item:is(:disabled, [aria-disabled="true"])::before { animation-play-state: paused; }
#navigation button.nav-item:is(:disabled, [aria-disabled="true"])::after { opacity: 0; }

@keyframes button-orbit { to { --button-orbit: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  #navigation button.nav-item::before { animation: none; }
  #navigation button.nav-item::after { transition: none; }
}