/* ============================================================
   Korben Glitch Effect - CSS
   https://korben.info
   ============================================================ */

.glitch-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
}

.glitch-wrap > img {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.glitch-wrap::before,
.glitch-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--glitch-src);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0;
}

.glitch-wrap[data-glitch-mode="contain"]::before,
.glitch-wrap[data-glitch-mode="contain"]::after {
  background-size: contain;
}

.glitch-wrap.is-glitching::before {
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: korben-glitch-a var(--glitch-duration, 520ms) steps(2, end);
  transform: translate3d(2px, 0, 0);
  filter: hue-rotate(20deg) saturate(1.2) contrast(1.05);
}

.glitch-wrap.is-glitching::after {
  opacity: 0.65;
  mix-blend-mode: lighten;
  animation: korben-glitch-b var(--glitch-duration, 520ms) steps(2, end);
  transform: translate3d(-2px, 0, 0);
  filter: hue-rotate(-20deg) saturate(1.2) contrast(1.05);
}

@keyframes korben-glitch-a {
  0%   { clip-path: inset(0 0 85% 0); }
  20%  { clip-path: inset(15% 0 55% 0); }
  40%  { clip-path: inset(45% 0 35% 0); }
  60%  { clip-path: inset(10% 0 70% 0); }
  80%  { clip-path: inset(65% 0 10% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes korben-glitch-b {
  0%   { clip-path: inset(80% 0 0 0); }
  25%  { clip-path: inset(50% 0 25% 0); }
  50%  { clip-path: inset(25% 0 55% 0); }
  75%  { clip-path: inset(5% 0 75% 0); }
  100% { clip-path: inset(0 0 0 0); }
}