[data-glitch-root] {
  --glitch-cyan: #8cf8ff;
  --glitch-pink: #ff6aa8;
}

.glitch-host {
  position: relative;
  isolation: isolate;
}

.glitch-host.glitch-pulse {
  animation: growit-glitch-shift 180ms steps(2, end);
}

.glitch-glyph,
.glitch-trail-glyph {
  color: var(--glitch-color, var(--glitch-cyan));
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 12px color-mix(in srgb, currentColor 65%, transparent);
}

.glitch-glyph {
  position: absolute;
  z-index: 4;
  top: var(--glitch-y);
  left: var(--glitch-x);
  font-size: clamp(10px, 0.16em, 18px);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--glitch-rotation)) scale(0.6);
  animation: growit-glitch-glyph 360ms steps(3, end) forwards;
}

.glitch-mouse-container {
  --glitch-cyan: #8cf8ff;
  --glitch-pink: #ff6aa8;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.glitch-trail-glyph {
  position: absolute;
  left: var(--glitch-x);
  top: var(--glitch-y);
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--glitch-rotation)) scale(0.55);
  transition: opacity 120ms ease-out, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.glitch-trail-glyph.is-visible {
  opacity: 0.78;
  transform: translate(-50%, -70%) rotate(var(--glitch-rotation)) scale(1);
}

@keyframes growit-glitch-shift {
  0%, 100% { translate: 0 0; text-shadow: none; }
  34% { translate: -1px 0; text-shadow: 2px 0 var(--glitch-cyan), -2px 0 var(--glitch-pink); }
  68% { translate: 1px 0; text-shadow: -2px 0 var(--glitch-cyan), 2px 0 var(--glitch-pink); }
}

@keyframes growit-glitch-glyph {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--glitch-rotation)) scale(0.6); }
  20%, 70% { opacity: 0.82; }
  100% { opacity: 0; transform: translate(-50%, -90%) rotate(var(--glitch-rotation)) scale(1.2); }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .glitch-host.glitch-pulse { animation: none; }
  .glitch-glyph,
  .glitch-mouse-container { display: none !important; }
}