/* Glitch link CSS */
.glitch {
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 0 4px;
  transition: color .15s ease;
  -webkit-font-smoothing: antialiased;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}

.glitch::before {
  color: #ff3bff;
  z-index: -1;
  transform: translate(2px, -2px);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: glitch-slice 2s infinite linear alternate-reverse;
}

.glitch::after {
  color: #00f9ff;
  z-index: -2;
  transform: translate(-2px, 2px);
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: glitch-shift 3s infinite linear alternate-reverse;
}

/* stronger burst when active (hover/JS toggled) */
.glitch.glitch--active::before { transform: translate(8px, -6px); animation-duration: .35s; opacity: 1; }
.glitch.glitch--active::after  { transform: translate(-8px, 6px); animation-duration: .35s; opacity: 1; }

@keyframes glitch-slice {
  0%   { clip-path: inset(0 0 90% 0); }
  10%  { clip-path: inset(10% 0 60% 0); transform: translate(3px, -3px); }
  20%  { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 2px); }
  30%  { clip-path: inset(0 0 40% 0); transform: translate(2px, -1px); }
  100% { clip-path: inset(0 0 0 0); transform: translate(0,0); }
}

@keyframes glitch-shift {
  0%   { transform: translate(-1px,1px); }
  25%  { transform: translate(4px,-4px); }
  50%  { transform: translate(-3px,3px); }
  75%  { transform: translate(2px,-2px); }
  100% { transform: translate(0,0); }
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { animation: none; transform: none; opacity: .9; }
}