/* Job board nav tab: a flame-coloured spark circles the pill's outline (Bryan's pick 4, Oct 23). */
.header nav a.nav-roles {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: transparent;
}
.header nav a.nav-roles::before {
  content: '';
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: max(260px, 150%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(#f0c45a, #e07a3a 12%, transparent 30%, transparent 70%, #f0c45a);
  animation: nav-torch 2.6s linear infinite;
  pointer-events: none;
}
.header nav a.nav-roles::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 2px;
  display: block;
  border-radius: inherit;
  background: linear-gradient(color-mix(in srgb, var(--green) 12%, transparent), color-mix(in srgb, var(--green) 12%, transparent)), var(--bg);
  pointer-events: none;
}
.header nav a.nav-roles:hover::after {
  background: linear-gradient(color-mix(in srgb, var(--green) 20%, transparent), color-mix(in srgb, var(--green) 20%, transparent)), var(--bg);
}
.header nav a.nav-roles[aria-current='page']::after {
  display: block;
}
@keyframes nav-torch {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .header nav a.nav-roles::before {
    animation: none;
  }
}