/*
 * Glitch effect for avtomatik.org
 * Apply to your theme's style.css or load as a separate file.
 */

/* The anchor/element that carries data-glitch */
.has-glitch {
  position: relative;
  display: inline-block;
  vertical-align: top;       /* prevents nav links shifting vertically */
}

/* The inner span that JS scrambles */
.has-glitch .glitch-text {
  display: inline-block;
  position: relative;
  z-index: 1;               /* sits above the pseudo-elements */
}

/* Chromatic aberration overlays -- read data-glitch which never changes */
.has-glitch::before,
.has-glitch::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  /* Inherit font from parent so overlay text matches exactly */
  font: inherit;
  letter-spacing: inherit;
}

.has-glitch::before {
  color: #e0003a;
  transform: translate(-2px, 0);
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
}

.has-glitch::after {
  color: #00d4e0;
  transform: translate(2px, 0);
  clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
}

.has-glitch:hover::before {
  opacity: 0.55;
  animation: avtomatik-glitch-a 0.45s steps(2) infinite;
}

.has-glitch:hover::after {
  opacity: 0.55;
  animation: avtomatik-glitch-b 0.45s steps(2) 0.1s infinite;
}

@keyframes avtomatik-glitch-a {
  0%   { clip-path: polygon(0 5%,  100% 5%,  100% 20%, 0 20%); transform: translate(-2px,  0);   }
  25%  { clip-path: polygon(0 40%, 100% 40%, 100% 55%, 0 55%); transform: translate( 3px,  1px); }
  50%  { clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%); transform: translate(-1px,  0);   }
  75%  { clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%); transform: translate( 2px, -1px); }
  100% { clip-path: polygon(0 5%,  100% 5%,  100% 20%, 0 20%); transform: translate(-2px,  0);   }
}

@keyframes avtomatik-glitch-b {
  0%   { clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); transform: translate( 2px,  0);   }
  25%  { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); transform: translate(-3px,  1px); }
  50%  { clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%); transform: translate( 1px,  0);   }
  75%  { clip-path: polygon(0 10%, 100% 10%, 100% 25%, 0 25%); transform: translate(-2px, -1px); }
  100% { clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); transform: translate( 2px,  0);   }
}