/* ============================================
   THE VISITOR'S GUIDE - Real Glitch Effect
   ============================================ */

.glitch {
  position: relative;
  color: #000;
  font-weight: 700;
  text-transform: uppercase;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.5s infinite;
  color: var(--brand-red);
  z-index: -1;
  mix-blend-mode: multiply;
}

.glitch::after {
  animation: glitch-2 0.5s infinite;
  color: var(--brand-blue);
  z-index: -2;
  mix-blend-mode: multiply;
}

@keyframes glitch-1 {
  0% {
    clip-path: inset(40% 0 60% 0);
    transform: translate(-2px, -2px);
  }
  20% {
    clip-path: inset(90% 0 10% 0);
    transform: translate(2px, 2px);
  }
  40% {
    clip-path: inset(50% 0 50% 0);
    transform: translate(-2px, 2px);
  }
  60% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(2px, -2px);
  }
  80% {
    clip-path: inset(70% 0 30% 0);
    transform: translate(-2px, 2px);
  }
  100% {
    clip-path: inset(25% 0 70% 0);
    transform: translate(2px, -2px);
  }
}

@keyframes glitch-2 {
  0% {
    clip-path: inset(65% 0 35% 0);
    transform: translate(2px, 2px);
  }
  20% {
    clip-path: inset(15% 0 80% 0);
    transform: translate(-2px, -2px);
  }
  40% {
    clip-path: inset(85% 0 15% 0);
    transform: translate(2px, -2px);
  }
  60% {
    clip-path: inset(35% 0 60% 0);
    transform: translate(-2px, 2px);
  }
  80% {
    clip-path: inset(55% 0 45% 0);
    transform: translate(2px, 2px);
  }
  100% {
    clip-path: inset(75% 0 20% 0);
    transform: translate(-2px, -2px);
  }
}

/* Occasional glitch burst */
.glitch {
  animation: glitch-skew 3s infinite;
}

@keyframes glitch-skew {
  0%, 90%, 100% {
    transform: skew(0deg);
    filter: blur(0);
  }
  92% {
    transform: skew(0.5deg);
    filter: blur(0.5px);
  }
  94% {
    transform: skew(-0.5deg);
    filter: blur(0);
  }
  96% {
    transform: skew(0.3deg);
  }
  98% {
    transform: skew(-0.3deg);
  }
}

/* Digital noise overlay */
.glitch::before {
  background-image: 
    repeating-linear-gradient(
      0deg,
      rgba(255,0,0,0.03),
      rgba(255,0,0,0.03) 1px,
      transparent 1px,
      transparent 2px
    );
}

.glitch::after {
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(0,0,255,0.03),
      rgba(0,0,255,0.03) 1px,
      transparent 1px,
      transparent 2px
    );
}

/* Dark mode adjustments */
[data-theme="dark"] .glitch {
  color: #fff;
}

[data-theme="dark"] .glitch::before {
  color: var(--brand-gold);
  mix-blend-mode: screen;
}

[data-theme="dark"] .glitch::after {
  color: var(--brand-red);
  mix-blend-mode: screen;
}