/* Decorative page insect — no pointer capture */
#tm-bug {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;
  width: 32px;
  height: 26px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  #tm-bug,
  #tm-bug * {
    animation: none !important;
  }
}
#tm-bug .tm-bug-core {
  position: absolute;
  inset: 0;
  transform-origin: 50% 60%;
  animation: tm-bug-bob 0.22s steps(2, end) infinite;
}
#tm-bug .tm-bug-shadow {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 18px;
  height: 4px;
  margin-left: -9px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  filter: blur(1px);
}
#tm-bug .tm-bug-body {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -5px;
  width: 16px;
  height: 10px;
  background: #3a3028;
  border-radius: 40% 40% 45% 45%;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#tm-bug .tm-bug-feeler {
  position: absolute;
  top: 4px;
  width: 1px;
  height: 9px;
  background: linear-gradient(to top, #3a3028, rgba(58, 48, 40, 0.3));
  border-radius: 1px;
  transform-origin: bottom center;
  animation: tm-bug-feel 0.5s ease-in-out infinite alternate;
}
#tm-bug .tm-bug-feeler.l1 { left: 5px; transform: rotate(-16deg); }
#tm-bug .tm-bug-feeler.l2 { right: 5px; transform: rotate(16deg); }
@keyframes tm-bug-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5px);
  }
}
@keyframes tm-bug-feel {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(12deg);
  }
}
/* —— Ant: slim, long antennae —— */
#tm-bug.tm-bug--ant .tm-bug-body {
  width: 14px;
  height: 7px;
  margin-top: -3px;
  background: #3d2f22;
  border-radius: 45% 50% 50% 45%;
}
#tm-bug.tm-bug--ant .tm-bug-abd {
  position: absolute;
  left: 50%;
  top: 10px;
  margin-left: 4px;
  width: 8px;
  height: 6px;
  background: #4a3a2c;
  border-radius: 50% 50% 45% 45%;
  transform: rotate(-8deg);
}
#tm-bug.tm-bug--ant .tm-bug-feeler {
  height: 12px;
  animation-duration: 0.42s;
}
/* —— Beetle: domed elytra —— */
#tm-bug.tm-bug--beetle .tm-bug-body {
  width: 18px;
  height: 12px;
  margin-top: -6px;
  margin-left: -9px;
  background: linear-gradient(145deg, #1c2540, #0d1528);
  border-radius: 50% 50% 45% 45%;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
#tm-bug.tm-bug--beetle .tm-bug-feeler {
  height: 6px;
  top: 7px;
}
#tm-bug.tm-bug--beetle .tm-bug-split {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 1px;
  height: 6px;
  margin-left: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.45));
  border-radius: 1px;
}
/* —— Fly: smaller body + “wings” —— */
#tm-bug.tm-bug--fly .tm-bug-body {
  width: 6px;
  height: 6px;
  margin-top: -2px;
  background: #2a2a2a;
  border-radius: 50%;
}
#tm-bug.tm-bug--fly .tm-bug-wing {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 14px;
  height: 10px;
  margin-left: -7px;
  background: linear-gradient(135deg, rgba(200, 220, 255, 0.45), rgba(200, 220, 255, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50% 50% 40% 40%;
  animation: tm-bug-wing 0.05s steps(2, end) infinite;
}
#tm-bug.tm-bug--fly .tm-bug-w2 {
  margin-left: -1px;
  top: 3px;
  opacity: 0.85;
  animation-delay: 0.03s;
}
@keyframes tm-bug-wing {
  0%,
  100% {
    transform: scaleY(1) translateY(0);
  }
  50% {
    transform: scaleY(0.6) translateY(1px);
  }
}
#tm-bug.tm-bug--fly .tm-bug-feeler {
  height: 5px;
  top: 5px;
}