/* GlitchText Component Styles */
/* Hover-activated RGB split glitch effect */

.glitch {
  color: inherit;
  white-space: nowrap;
  position: relative;
  user-select: none;
  cursor: pointer;
  isolation: isolate; /* Create stacking context */
}

.glitch::after,
.glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: inherit;
  background: transparent; /* Transparent to show parent background */
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
}

/* Red layer */
.glitch::after {
  color: #ff3333;
  text-shadow: 0 0 2px #ff3333;
}

/* Cyan layer */
.glitch::before {
  color: #00ffff;
  text-shadow: 0 0 2px #00ffff;
}

/* When hover mode is enabled but NOT hovering - hide pseudo-elements */
.glitch.enable-on-hover::after,
.glitch.enable-on-hover::before {
  opacity: 0;
  animation: none;
}

/* When hovering OR randomly triggered - show the glitch effect */
.glitch.enable-on-hover:hover::after,
.glitch.enable-on-hover.glitching::after {
  opacity: 0.8;
  animation: glitch-red 0.3s steps(2) infinite;
}

.glitch.enable-on-hover:hover::before,
.glitch.enable-on-hover.glitching::before {
  opacity: 0.8;
  animation: glitch-cyan 0.25s steps(2) infinite;
}

/* Jittery offset animations */
@keyframes glitch-red {
  0% {
    transform: translate(2px, 0);
    clip-path: inset(10% 0 70% 0);
  }
  25% {
    transform: translate(3px, 1px);
    clip-path: inset(40% 0 30% 0);
  }
  50% {
    transform: translate(1px, -1px);
    clip-path: inset(70% 0 10% 0);
  }
  75% {
    transform: translate(4px, 0);
    clip-path: inset(20% 0 50% 0);
  }
  100% {
    transform: translate(2px, 1px);
    clip-path: inset(50% 0 20% 0);
  }
}

@keyframes glitch-cyan {
  0% {
    transform: translate(-2px, 0);
    clip-path: inset(60% 0 20% 0);
  }
  25% {
    transform: translate(-3px, -1px);
    clip-path: inset(20% 0 50% 0);
  }
  50% {
    transform: translate(-1px, 1px);
    clip-path: inset(80% 0 5% 0);
  }
  75% {
    transform: translate(-4px, 0);
    clip-path: inset(5% 0 80% 0);
  }
  100% {
    transform: translate(-2px, -1px);
    clip-path: inset(35% 0 40% 0);
  }
}