/*!
 * TBOT Hello Glitch — presentation. The span inherits the heading's font;
 * during a transition it gets the site's RGB-split glitch treatment.
 */
#tbot-hello {
  display: inline-block;
  white-space: nowrap;
  min-width: 2ch;
}

#tbot-hello.is-glitching {
  animation: tbot-hello-jitter 90ms steps(2) infinite;
  text-shadow:
    2px 0 rgba(255, 60, 220, 0.85),
    -2px 0 rgba(60, 220, 255, 0.85),
    0 0 18px rgba(255, 255, 255, 0.25);
}

@keyframes tbot-hello-jitter {
  0%   { transform: translate(0, 0) skewX(0deg); }
  25%  { transform: translate(-2px, 1px) skewX(-4deg); }
  50%  { transform: translate(2px, -1px) skewX(3deg); }
  75%  { transform: translate(-1px, -1px) skewX(-2deg); }
  100% { transform: translate(1px, 1px) skewX(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  #tbot-hello.is-glitching { animation: none; text-shadow: none; }
}