.glitch-wrap {
  position: relative;
  display: inline-block;
}

.glitch {
  position: relative;
  display: inline-block;
  color: var(--text);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  pointer-events: none;
}

.glitch::before {
  color: #ff003c;
  mix-blend-mode: screen;
  animation:
    glitch-r 3.5s infinite steps(1),
    glitch-flicker 4s infinite;
  clip-path: inset(0 0 100% 0);
}

.glitch::after {
  color: #00f0ff;
  mix-blend-mode: screen;
  animation:
    glitch-b 3.5s infinite steps(1),
    glitch-flicker 5s infinite 1s;
  clip-path: inset(100% 0 0 0);
}

@keyframes glitch-r {
  0%   { clip-path: inset(0 0 100% 0);  transform: translate(0); }
  4%   { clip-path: inset(8% 0 78% 0);  transform: translate(-4px, 1px); }
  6%   { clip-path: inset(55% 0 22% 0); transform: translate(4px, -1px); }
  8%   { clip-path: inset(30% 0 55% 0); transform: translate(-3px, 2px); }
  10%  { clip-path: inset(0 0 100% 0);  transform: translate(0); }
  40%  { clip-path: inset(0 0 100% 0);  transform: translate(0); }
  42%  { clip-path: inset(62% 0 18% 0); transform: translate(5px, -2px); }
  44%  { clip-path: inset(15% 0 72% 0); transform: translate(-5px, 1px); }
  46%  { clip-path: inset(0 0 100% 0);  transform: translate(0); }
  70%  { clip-path: inset(0 0 100% 0);  transform: translate(0); }
  72%  { clip-path: inset(45% 0 35% 0); transform: translate(-6px, 3px); }
  73%  { clip-path: inset(20% 0 60% 0); transform: translate(6px, -3px); }
  74%  { clip-path: inset(80% 0 5% 0);  transform: translate(-2px, 1px); }
  75%  { clip-path: inset(0 0 100% 0);  transform: translate(0); }
  100% { clip-path: inset(0 0 100% 0);  transform: translate(0); }
}

@keyframes glitch-b {
  0%   { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  4%   { clip-path: inset(78% 0 8% 0);  transform: translate(4px, -1px); }
  6%   { clip-path: inset(22% 0 55% 0); transform: translate(-4px, 2px); }
  8%   { clip-path: inset(55% 0 30% 0); transform: translate(3px, -2px); }
  10%  { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  40%  { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  42%  { clip-path: inset(18% 0 62% 0); transform: translate(-5px, 2px); }
  44%  { clip-path: inset(72% 0 15% 0); transform: translate(5px, -1px); }
  46%  { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  70%  { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  72%  { clip-path: inset(35% 0 45% 0); transform: translate(6px, -3px); }
  73%  { clip-path: inset(60% 0 20% 0); transform: translate(-6px, 2px); }
  74%  { clip-path: inset(5% 0 80% 0);  transform: translate(2px, -1px); }
  75%  { clip-path: inset(100% 0 0 0);  transform: translate(0); }
  100% { clip-path: inset(100% 0 0 0);  transform: translate(0); }
}

@keyframes glitch-flicker {
  0%,95%,100% { opacity: 1; }
  96%          { opacity: 0.3; }
  97%          { opacity: 1; }
  98%          { opacity: 0.1; }
  99%          { opacity: 0.9; }
}

.glitch-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  opacity: 0;
  animation: scanSweep 3.5s infinite steps(1);
  border-radius: 2px;
  z-index: 10;
}

@keyframes scanSweep {
  0%,9%,11%,39%,47%,69%,76%,100% { opacity: 0; }
  4%,6%,8%,41%,43%,71%,72%,73%   { opacity: 1; }
}

.glitch.burst::before {
  animation:
    glitch-burst-r .4s steps(1),
    glitch-flicker .3s linear;
}
.glitch.burst::after {
  animation:
    glitch-burst-b .4s steps(1),
    glitch-flicker .35s linear;
}

@keyframes glitch-burst-r {
  0%  { clip-path: inset(0% 0 80% 0);  transform: translate(-8px, 2px); }
  15% { clip-path: inset(40% 0 40% 0); transform: translate(8px, -3px); }
  30% { clip-path: inset(70% 0 10% 0); transform: translate(-6px, 4px); }
  45% { clip-path: inset(20% 0 60% 0); transform: translate(6px, -2px); }
  60% { clip-path: inset(55% 0 25% 0); transform: translate(-4px, 1px); }
  80% { clip-path: inset(10% 0 75% 0); transform: translate(4px, -1px); }
  100%{ clip-path: inset(0 0 100% 0);  transform: translate(0); }
}

@keyframes glitch-burst-b {
  0%  { clip-path: inset(80% 0 0% 0);  transform: translate(8px, -2px); }
  15% { clip-path: inset(40% 0 40% 0); transform: translate(-8px, 3px); }
  30% { clip-path: inset(10% 0 70% 0); transform: translate(6px, -4px); }
  45% { clip-path: inset(60% 0 20% 0); transform: translate(-6px, 2px); }
  60% { clip-path: inset(25% 0 55% 0); transform: translate(4px, -1px); }
  80% { clip-path: inset(75% 0 10% 0); transform: translate(-4px, 1px); }
  100%{ clip-path: inset(100% 0 0 0);  transform: translate(0); }
}

.glitch .grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before,
  .glitch::after,
  .glitch-wrap::after { animation: none; opacity: 0; }
}