/* Easter egg: a rare bug crawls across the screen. Squash it (see bugs.js). */

/* The bug is a round 44px button, so it's easy to hit; the drawing inside is smaller.
   bugs.js sets --bug-size on each bug and splat (28px on desktop, 14px on phones). */
.bug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 201;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  will-change: transform;
}

/* A dark ring with a light one inside, so focus shows on every section color. */
.bug:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px var(--paper);
}

.bug-art {
  width: var(--bug-size);
  height: var(--bug-size);
  overflow: visible;
  /* A thin light rim keeps the dark legs visible on the dark green sections. */
  filter: drop-shadow(0 0 .6px var(--paper)) drop-shadow(0 0 .6px var(--paper));
  transition: transform .12s ease-out, opacity .18s .1s;
}
.bug-legs, .bug-antennae { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.bug-legs { stroke-width: 2; }
.bug-antennae { stroke-width: 1.6; }
.bug-head { fill: var(--ink); }
.bug-eye { fill: var(--paper); }
.bug-shell { fill: var(--orange); stroke: var(--ink); stroke-width: 1.5; }
.bug-lines { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; }
.bug-shine { fill: var(--paper); opacity: .8; }

/* Walking: the legs step in two sets of three, out of step with each other. Faster when running. */
.bug.is-moving .bug-tripod { animation: bug-step .2s ease-in-out infinite alternate; }
.bug.is-moving .bug-tripod-b { animation-delay: -.2s; }
.bug.is-running .bug-tripod { animation-duration: .09s; }
.bug.is-running .bug-tripod-b { animation-delay: -.09s; }

/* Squashed: it flattens and fades while the splat appears underneath. */
.bug.is-squashed { pointer-events: none; }
.bug.is-squashed .bug-art { transform: scale(1.25, .3); opacity: 0; }

.bug-splat {
  position: fixed;
  z-index: 200;
  width: calc(var(--bug-size) * 1.3);
  height: calc(var(--bug-size) * 1.3);
  translate: -50% -50%;
  pointer-events: none;
  animation: bug-splat 1.5s ease-out forwards;
}
.bug-splat svg { width: 100%; height: 100%; overflow: visible; }
.bug-splat path, .bug-splat circle { fill: var(--orange); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }

/* "Bugs fixed: N" in the footer, sized like the fine print. */
.bug-counter { color: var(--muted); }

@keyframes bug-step {
  from { transform: translateX(-1.8px); }
  to { transform: translateX(1.8px); }
}
@keyframes bug-splat {
  0% { opacity: 1; scale: .4; }
  10% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1; }
}

@media print {
  .bug, .bug-splat { display: none !important; }
}