@keyframes glitch-slice {
  0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 1px); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, -1px); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 2px); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, 1px); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, -1px); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(0); }
}

@keyframes rgb-split {
  0%, 100% { text-shadow: -2px 0 var(--hot), 2px 0 var(--phosphor); }
  50% { text-shadow: 2px 0 var(--hot), -2px 0 var(--phosphor); }
}

.logo.glitch {
  position: relative;
  animation: rgb-split 4s infinite;
}

.logo.glitch::before,
.logo.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  opacity: 0.8;
}

.logo.glitch::before {
  color: var(--hot);
  animation: glitch-slice 3s infinite linear alternate-reverse;
  z-index: -1;
}

.logo.glitch::after {
  color: var(--phosphor);
  animation: glitch-slice 2s infinite linear alternate;
  z-index: -2;
}

.btn.glitch-hover:hover {
  animation: glitch-slice 0.3s steps(2) 1;
  text-shadow: -1px 0 var(--hot), 1px 0 var(--phosphor);
}

.badge.critical.flicker {
  animation: rgb-split 0.4s steps(2) 3;
}

.sort-flash {
  animation: rgb-split 0.2s ease 1;
}

.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0) skewY(var(--skew)); }
  25% { transform: translateX(-6px) skewY(var(--skew)); }
  75% { transform: translateX(6px) skewY(var(--skew)); }
}