/* Glitch animation */
@keyframes glitch {
 	0% { -webkit-transform: skewX(24deg); } 
    10% { -webkit-transform: skewX(-8deg); }
    20% { -webkit-transform: skewX(55deg); }
    30% { -webkit-transform: skewX(-82deg); }
    40% { -webkit-transform: skewX(29deg); }
    50% { -webkit-transform: skewX(-82deg); }
    60% { -webkit-transform: skewX(3deg); }
    70% { -webkit-transform: skewX(-2deg); }
    80% { -webkit-transform: skewX(1deg); }
    90% { -webkit-transform: skewX(10deg); }
    100% { -webkit-transform: skewX(0deg); }
}

/* Wrapper */
.name-glitch-wrap {
  width: 50%;
  text-align: center;
  margin: 0 auto;
}

/* Text element */
.name-glitch {
  position: relative;
  display: inline-block;
  line-height: 1.1;
  cursor: pointer;
  will-change: transform, text-shadow;
  }

/* Enable glitch only on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .name-glitch-wrap:hover {
    animation: glitch 0.4s 1;
    text-shadow:15px 7px rgba(246, 0, 153,0.4),
             -19px -2px rgba(15, 210, 255,0.4),
             -1px -2px rgba(255, 210, 0, 0.5);
  }

  .name-glitch:hover {
  	animation: glitch 0.2s 3;
	text-shadow:30px 13px rgba(246, 0, 153,0.8),
             -38px -4px rgba(15, 210, 255,0.8),
             -2px -4px rgba(255, 210, 0, 1);
  }
}

/* Disable effect on touch/mobile */
@media (hover: none), (pointer: coarse) {
  .name-glitch-wrap:hover .name-glitch,
  .name-glitch:hover {
    animation: none;
    text-shadow: none;
  }
}