/* Header artistry (kept in its own file so it never collides with site.css edits):
   1) a sliding highlight pill that glides between menu items (desktop, pointer devices);
   2) a spark burst + spring pop on the theme toggle that rides the existing circular theme wipe. */
@media (min-width:64em) and (hover:hover){
  .nav-pill{position:absolute;left:0;top:0;z-index:0;width:var(--w,0);height:var(--h,0);border-radius:1rem;pointer-events:none;opacity:0;
    translate:var(--x,0) var(--y,0);box-shadow:var(--press);background:color-mix(in srgb,var(--orange) 5%,transparent);
    transition:translate .5s var(--spring),width .5s var(--spring),height .5s var(--spring),opacity .25s,box-shadow .3s,background .3s}
  .nav-pill.on{opacity:1}
  .nav-pill.snap{transition:none}
  /* Resting on the current page = pressed in; gliding to another item = raised and faintly orange */
  .nav-pill.hover{box-shadow:var(--raise);background:color-mix(in srgb,var(--orange) 10%,transparent)}
  .site-header #menu :is(.nav-l,.nav-r)>li>:is(a,.sub-toggle){position:relative;z-index:1}
  .site-header.pill-on #menu :is(a:not(.btn),.sub-toggle):is(:hover,[aria-current],[aria-expanded=true]){box-shadow:none}
  .site-header.pill-on #menu .has-sub>ul a[aria-current]{background:color-mix(in srgb,var(--orange) 14%,transparent)}
}
.spark{position:fixed;z-index:201;width:.5rem;height:.5rem;margin:-.25rem 0 0 -.25rem;border-radius:50%;background:var(--deco);box-shadow:0 0 10px var(--deco);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .theme.pop svg{animation:theme-pop .6s var(--spring)}
  @keyframes theme-pop{0%{scale:.4;rotate:-120deg}100%{scale:1;rotate:0deg}}
}