/* Animation layer for the existing SemaX public header. Colours, size, shape and links are untouched. */
body > header.semax-header{
  --mx:50%;--spot:0;
  transition:opacity .55s ease,width .5s cubic-bezier(.16,1,.3,1),height .4s cubic-bezier(.16,1,.3,1),padding .4s cubic-bezier(.16,1,.3,1);
}
/* shrink while scrolling down, restore on scroll up */
@media(min-width:761px){
  body > header.semax-header.smx-scrolled{width:min(1000px,calc(100% - 32px));height:56px}
  body > header.semax-header.smx-scrolled .logo{width:124px}
}
body > header.semax-header .logo{transition:width .4s cubic-bezier(.16,1,.3,1)}

/* cursor light that runs along the pill's border */
body > header.semax-header .smx-glow{position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;opacity:var(--spot);
  transition:opacity .25s ease;
  background:radial-gradient(170px 60px at var(--mx) 0,#8B5CF6 0,rgba(139,92,246,.75) 25%,rgba(139,92,246,.2) 55%,transparent 100%),
             radial-gradient(170px 60px at var(--mx) 100%,rgba(139,92,246,.55) 0,rgba(139,92,246,.14) 45%,transparent 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* dock magnification + underline on links */
body > header.semax-header .navlinks a{position:relative;display:inline-block;will-change:transform;transform-origin:center}
body > header.semax-header .navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:999px;background:#8B5CF6;
  box-shadow:0 1px 6px rgba(139,92,246,.55);transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s ease}
body > header.semax-header .navlinks a:hover::after{transform:scaleX(1);opacity:1}

/* letter wave on the sign-in button */
body > header.semax-header .desktop-cta .smx-wave,body > .mobile-sidebar .sidebar-cta .smx-wave{display:inline-flex}
body > header.semax-header .smx-wave i{display:inline-block;font-style:normal;backface-visibility:hidden}
body > header.semax-header .desktop-cta:hover .smx-wave i{animation:smxWave .38s ease-in-out both}
@keyframes smxWave{0%{transform:translateY(0)}35%{transform:translateY(4px)}65%{transform:translateY(-.5px)}100%{transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
  body > header.semax-header{transition:opacity .55s ease!important}
  body > header.semax-header .smx-glow{display:none}
  body > header.semax-header .desktop-cta:hover .smx-wave i{animation:none}
}

/* the closed mobile menu's shadow was leaking a grey strip onto the right edge of the screen */
body > .mobile-sidebar:not(.open){box-shadow:none!important}