/* Electric nav: the underline of the active link and the travelling streak are ONE element
   (.surge-spark). It is positioned by assets/js/modules/nav-surge.js. */
.navlinks{position:relative}
.navlinks a{transition:color .25s}
.navlinks a[aria-current="true"]{color:#fff}

.surge-spark{
  --surge-core:255,255,255;      /* head / settled underline */
  --surge-glow:92,200,255;       /* matches --blue-3 */
  --surge-glow-2:22,136,255;     /* matches --blue   */
  position:absolute;left:0;bottom:-5px;height:2px;width:0;
  border-radius:2px;pointer-events:none;opacity:0;
  background:rgb(var(--surge-core));
  filter:drop-shadow(0 0 3px rgba(var(--surge-glow),.9)) drop-shadow(0 0 8px rgba(var(--surge-glow-2),.55));
  transition:opacity .25s ease,filter .25s ease;
  will-change:transform,width;
}
.surge-spark.is-on{opacity:1}
.surge-spark.is-moving{
  height:3px;bottom:-5.5px;
  filter:drop-shadow(0 0 4px rgba(var(--surge-glow),1)) drop-shadow(0 0 14px rgba(var(--surge-glow-2),.85));
}

@media(max-width:720px){.surge-spark{display:none}}
@media(prefers-reduced-motion:reduce){.surge-spark{transition:none}}