/* moving_bug — a blob that loops a figure-8 in the header gap, around the two
   nav links. The roam area is this flex item; the .bug is positioned and moved
   along the path by easter-eggs/moving_bug/moving_bug.js, and bounces via the CSS below. */

.moving-bug{
  flex:2 1 auto;
  min-width:clamp(280px,30vw,440px); /* room for 3 links + 2 separators + the blob */
  align-self:stretch;
  position:relative;
  overflow:visible;
  pointer-events:none;     /* the blob never blocks; the links re-enable clicks */
}

.moving-bug .bug{
  position:absolute;
  left:0;
  top:0;
  width:clamp(32px,3.4vw,46px);
  height:clamp(32px,3.4vw,46px);
  transform:translate(0,0);
  will-change:transform;
  z-index:1;               /* behind the nav links */
}

/* every blob bounces — squash/stretch with a little hop */
.moving-bug .bug svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin:50% 85%;
  animation:bug-bounce 2.3s ease-in-out infinite;
}

@keyframes bug-bounce{
  0%,100%{transform:translateY(0)    scale(1,1);}
  20%    {transform:translateY(3px)  scale(1.18,.82);}
  48%    {transform:translateY(-6px) scale(.84,1.18);}
  72%    {transform:translateY(0)    scale(1.1,.92);}
}

@media (prefers-reduced-motion:reduce){
  .moving-bug .bug svg{animation:none;}
}