body {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #0a0014 0%, #1a0033 40%, #3a0066 100%);
  background-size: 200% 200%;
  animation: cyberpunkGlow 12s ease infinite;
  color: #e0e0ff;
}
@keyframes cyberpunkGlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
      circle at 20% 20%,
      rgba(255, 0, 255, 0.05) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 255, 255, 0.05) 0%,
      transparent 40%
    );
  mix-blend-mode: screen;
}
.glitch-img {
  position: relative;
  display: inline-block;
}
.glitch-img .glitch-layer {
  animation: none;
}
.glitch-img .glitch-layer img {
  transform: none;
  filter: none;
}
.glitch-img:hover .glitch-red {
  animation: glitch-anim-red 2s infinite linear alternate-reverse;
}
.glitch-img:hover .glitch-red img {
  transform: translateX(2px);
  filter: drop-shadow(-1px 0 red);
}
.glitch-img:hover .glitch-blue {
  animation: glitch-anim-blue 3s infinite linear alternate-reverse;
}
.glitch-img:hover .glitch-blue img {
  transform: translateX(-2px);
  filter: drop-shadow(1px 0 blue);
}
.glitch-img img {
  display: block;
  width: 100%;
  height: auto;
}
/* Base image */
.glitch-base {
  position: relative;
  z-index: 1;
}
/* Layer wrapper */
.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
/* Actual image inside each layer */
.glitch-layer img {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes glitch-anim-red {
  0% {
    clip-path: inset(307px 0 262px 0);
  }
  5% {
    clip-path: inset(292px 0 221px 0);
  }
  10% {
    clip-path: inset(331px 0 308px 0);
  }
  15% {
    clip-path: inset(23px 0 281px 0);
  }
  20% {
    clip-path: inset(3px 0 359px 0);
  }
  25% {
    clip-path: inset(357px 0 76px 0);
  }
  30% {
    clip-path: inset(363px 0 279px 0);
  }
  35% {
    clip-path: inset(321px 0 333px 0);
  }
  40% {
    clip-path: inset(9px 0 156px 0);
  }
  45% {
    clip-path: inset(350px 0 381px 0);
  }
  50% {
    clip-path: inset(275px 0 159px 0);
  }
  55% {
    clip-path: inset(160px 0 108px 0);
  }
  60% {
    clip-path: inset(249px 0 234px 0);
  }
  65% {
    clip-path: inset(150px 0 209px 0);
  }
  70% {
    clip-path: inset(326px 0 243px 0);
  }
  75% {
    clip-path: inset(34px 0 213px 0);
  }
  80% {
    clip-path: inset(50px 0 263px 0);
  }
  85% {
    clip-path: inset(141px 0 211px 0);
  }
  90% {
    clip-path: inset(165px 0 314px 0);
  }
  95% {
    clip-path: inset(381px 0 175px 0);
  }
  100% {
    clip-path: inset(166px 0 265px 0);
  }
}
@keyframes glitch-anim-blue {
  0% {
    clip-path: inset(241px 0 106px 0);
  }
  5% {
    clip-path: inset(16px 0 175px 0);
  }
  10% {
    clip-path: inset(398px 0 38px 0);
  }
  15% {
    clip-path: inset(356px 0 73px 0);
  }
  20% {
    clip-path: inset(386px 0 220px 0);
  }
  25% {
    clip-path: inset(386px 0 358px 0);
  }
  30% {
    clip-path: inset(24px 0 97px 0);
  }
  35% {
    clip-path: inset(25px 0 113px 0);
  }
  40% {
    clip-path: inset(119px 0 162px 0);
  }
  45% {
    clip-path: inset(35px 0 139px 0);
  }
  50% {
    clip-path: inset(263px 0 257px 0);
  }
  55% {
    clip-path: inset(107px 0 209px 0);
  }
  60% {
    clip-path: inset(206px 0 346px 0);
  }
  65% {
    clip-path: inset(306px 0 229px 0);
  }
  70% {
    clip-path: inset(115px 0 142px 0);
  }
  75% {
    clip-path: inset(4px 0 218px 0);
  }
  80% {
    clip-path: inset(357px 0 148px 0);
  }
  85% {
    clip-path: inset(159px 0 346px 0);
  }
  90% {
    clip-path: inset(116px 0 150px 0);
  }
  95% {
    clip-path: inset(330px 0 135px 0);
  }
  100% {
    clip-path: inset(19px 0 285px 0);
  }
}