body.glitch-hit {
  animation: glitch-hit var(--glitch-duration, 0.2s) steps(4) forwards;
}

#page-ghost.active {
  animation: glitch-ghost var(--glitch-duration, 0.25s) steps(4) forwards;
}

#page-ghost.scan {
  background: #fff;
  animation: glitch-scan var(--glitch-duration, 0.3s) steps(4) forwards;
}

#page-ghost {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  }

body.glitch-burn {
  animation: glitch-burn var(--glitch-duration, 0.2s) steps(4) forwards;
}

body.glitch-squash {
  animation: glitch-squash var(--glitch-duration, 0.2s) steps(4) forwards;
}

#signal-strength {
  font-family: "DM Mono", monospace;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#signal-lost {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

#signal-lost.visible {
  opacity: 1;
  pointer-events: all;
}

#signal-lost p {
  font-family: "DM Mono", monospace;
  font-size: 18px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #111;
  visibility: visible;
}

#signal-strength {
  visibility: hidden;
}

#signal-lost .cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: #111;
  margin-left: 4px;
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}

#signal-lost .glitch-hover {
  visibility: hidden;
}

.type-on {
  visibility: hidden;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes glitch-hit {
  0%   { transform: translateX(0) skewX(0deg); filter: none; }
  15%  { transform: translateX(-5px) skewX(-2deg); filter: brightness(1.2) contrast(1.1); }
  30%  { transform: translateX(4px) skewX(1deg); filter: brightness(0.85); }
  50%  { transform: translateX(-2px) skewX(-0.5deg); filter: brightness(1.1); }
  70%  { transform: translateX(3px) skewX(0.5deg); filter: none; }
  100% { transform: translateX(0) skewX(0deg); filter: none; }
}

@keyframes glitch-ghost {
  0%   { clip-path: inset(0 0 0 0);     transform: translateX(0);    opacity: 0; }
  20%  { clip-path: inset(0 0 80% 0);   transform: translateX(-8px); opacity: 0.6; }
  40%  { clip-path: inset(10% 0 70% 0); transform: translateX(10px); opacity: 0.6; }
  60%  { clip-path: inset(5% 0 75% 0);  transform: translateX(-4px); opacity: 0.6; }
  80%  { clip-path: inset(15% 0 65% 0); transform: translateX(6px);  opacity: 0.6; }
  100% { clip-path: inset(0 0 0 0);     transform: translateX(0);    opacity: 0; }
}

@keyframes glitch-scan {
  0%   { clip-path: inset(0 0 100% 0);   transform: translateX(0);    opacity: 0; }
  20%  { clip-path: inset(0 0 80% 0);    transform: translateX(6px);  opacity: 0.8; }
  40%  { clip-path: inset(20% 0 60% 0);  transform: translateX(-8px); opacity: 0.8; }
  60%  { clip-path: inset(50% 0 30% 0);  transform: translateX(5px);  opacity: 0.8; }
  80%  { clip-path: inset(80% 0 0% 0);   transform: translateX(-4px); opacity: 0.8; }
  100% { clip-path: inset(100% 0 0 0);   transform: translateX(0);    opacity: 0; }
}

@keyframes glitch-burn {
  0%   { filter: none; }
  20%  { filter: brightness(2) contrast(0.5); }
  40%  { filter: brightness(0.7) contrast(2); }
  60%  { filter: brightness(1.8) contrast(0.3); }
  80%  { filter: brightness(0.9) contrast(1.2); }
  100% { filter: none; }
}

@keyframes glitch-squash {
  0%   { transform: scaleY(1); }
  25%  { transform: scaleY(0.97) translateY(-8px); }
  50%  { transform: scaleY(1.03) translateY(4px); }
  75%  { transform: scaleY(0.98) translateY(-3px); }
  100% { transform: scaleY(1); }
}