/* Glitch Effect - Global Theme Component */
/* Subtle, occasional glitch — not a constant RGB split */

/* Explicit font inheritance — previene race conditions con @import de theme.css */
p, li, .accordion-body, .info-box, .info-box p, .accordion-body p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.glitch-title {
  position: relative;
  display: inline-block;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.glitch-title::before {
  color: #64ffda;
  animation: glitch-before 6s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  -webkit-text-fill-color: #64ffda;
}
.glitch-title::after {
  color: #ff00ff;
  animation: glitch-after 7s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  -webkit-text-fill-color: #ff00ff;
}

/* 90% idle, glitch fires briefly twice per cycle */
@keyframes glitch-before {
  0%, 84%, 100%    { transform: translate(0);       opacity: 0; }
  85%              { transform: translate(-3px, 0);  opacity: 1; }
  86%              { transform: translate(3px, 0);   opacity: 1; }
  87%, 92%         { transform: translate(0);        opacity: 0; }
  93%              { transform: translate(-2px, 1px);opacity: 0.7; }
  94%              { transform: translate(0);        opacity: 0; }
}
@keyframes glitch-after {
  0%, 85%, 100%    { transform: translate(0);        opacity: 0; }
  86%              { transform: translate(3px, 0);   opacity: 1; }
  87%              { transform: translate(-3px, 0);  opacity: 1; }
  88%, 93%         { transform: translate(0);        opacity: 0; }
  94%              { transform: translate(2px, -1px);opacity: 0.7; }
  95%              { transform: translate(0);        opacity: 0; }
}