/* ==========================================================================
   GLITCH EFFECTS - WATCH DOGS STYLE
   ========================================================================== */

:root {
  --glitch-primary: #00ff41;
  --glitch-red: #ff0040;
  --glitch-blue: #0040ff;
  --glitch-cyan: #00ffff;
  --glitch-purple: #8000ff;
  --glitch-yellow: #ffff00;
}

/* ==========================================================================
   MAIN GLITCH TITLE
   ========================================================================== */

.glitch-title {
  position: relative;
  display: inline-block;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

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

.glitch-title::before {
  animation: glitch-anim-1 0.6s infinite linear alternate-reverse;
  color: var(--glitch-red);
  z-index: -1;
}

.glitch-title::after {
  animation: glitch-anim-2 1s infinite linear alternate-reverse;
  color: var(--glitch-blue);
  z-index: -2;
} */

.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch-layer:nth-child(1) {
  color: var(--glitch-cyan);
  animation: glitch-layer-1 2s infinite linear;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch-layer:nth-child(2) {
  color: var(--glitch-purple);
  animation: glitch-layer-2 2.3s infinite linear;
  clip-path: polygon(0 45%, 100% 45%, 100% 85%, 0 85%);
}

.glitch-layer:nth-child(3) {
  color: var(--glitch-yellow);
  animation: glitch-layer-3 1.7s infinite linear;
  clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
}

/* ==========================================================================
   GLITCH ANIMATIONS
   ========================================================================== */

@keyframes glitch-anim-1 {
  0% {
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    transform: translateX(2px) rotateX(10deg);
  }
  5% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    transform: translateX(-1px);
  }
  10% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    transform: translateX(-1px);
  }
  15% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    transform: translateX(1px);
  }
  20% {
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    transform: translateX(1px);
  }
  25% {
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    transform: translateX(-1px);
  }
  30% {
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    transform: translateX(-1px) rotateX(-10deg);
  }
  35% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    transform: translateX(1px);
  }
  40% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    transform: translateX(-1px);
  }
  45% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    transform: translateX(1px);
  }
  50% {
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    transform: translateX(-1px) rotateX(10deg);
  }
  55% {
    clip-path: polygon(0 2%, 100% 2%, 100% 40%, 0 40%);
    transform: translateX(1px);
  }
  60% {
    clip-path: polygon(0 15%, 100% 15%, 100% 50%, 0 50%);
    transform: translateX(-1px) rotateX(-10deg);
  }
  65% {
    clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
    transform: translateX(1px);
  }
  70% {
    clip-path: polygon(0 1%, 100% 1%, 100% 7%, 0 7%);
    transform: translateX(-1px);
  }
  75% {
    clip-path: polygon(0 33%, 100% 33%, 100% 39%, 0 39%);
    transform: translateX(1px) rotateX(10deg);
  }
  80% {
    clip-path: polygon(0 44%, 100% 44%, 100% 90%, 0 90%);
    transform: translateX(-1px);
  }
  85% {
    clip-path: polygon(0 50%, 100% 50%, 100% 52%, 0 52%);
    transform: translateX(1px);
  }
  90% {
    clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%);
    transform: translateX(-1px) rotateX(-10deg);
  }
  95% {
    clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
    transform: translateX(1px);
  }
  100% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    transform: translateX(-1px);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    transform: translateX(-2px) rotateY(10deg);
  }
  15% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    transform: translateX(2px);
  }
  25% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    transform: translateX(2px) rotateY(-10deg);
  }
  35% {
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    transform: translateX(-2px);
  }
  45% {
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    transform: translateX(2px);
  }
  55% {
    clip-path: polygon(0 65%, 100% 65%, 100% 65%, 0 65%);
    transform: translateX(-2px) rotateY(10deg);
  }
  65% {
    clip-path: polygon(0 75%, 100% 75%, 100% 76%, 0 76%);
    transform: translateX(2px);
  }
  75% {
    clip-path: polygon(0 1%, 100% 1%, 100% 40%, 0 40%);
    transform: translateX(-2px) rotateY(-10deg);
  }
  85% {
    clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%);
    transform: translateX(2px);
  }
  100% {
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    transform: translateX(-2px);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(0deg);
  }
  10% {
    transform: skew(2deg);
  }
  20% {
    transform: skew(-1deg);
  }
  30% {
    transform: skew(1deg);
  }
  40% {
    transform: skew(-2deg);
  }
  50% {
    transform: skew(0deg);
  }
  60% {
    transform: skew(1deg);
  }
  70% {
    transform: skew(-1deg);
  }
  80% {
    transform: skew(2deg);
  }
  90% {
    transform: skew(-1deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes glitch-layer-1 {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  5% {
    opacity: 1;
    transform: translateX(5px);
  }
  10% {
    opacity: 0;
    transform: translateX(-3px);
  }
  15% {
    opacity: 1;
    transform: translateX(2px);
  }
  20% {
    opacity: 0;
    transform: translateX(0px);
  }
  80% {
    opacity: 0;
    transform: translateX(0px);
  }
  85% {
    opacity: 1;
    transform: translateX(-4px);
  }
  90% {
    opacity: 0;
    transform: translateX(2px);
  }
  95% {
    opacity: 1;
    transform: translateX(-2px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px);
  }
}

@keyframes glitch-layer-2 {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  12% {
    opacity: 1;
    transform: translateX(-3px);
  }
  18% {
    opacity: 0;
    transform: translateX(4px);
  }
  25% {
    opacity: 1;
    transform: translateX(-2px);
  }
  30% {
    opacity: 0;
    transform: translateX(0px);
  }
  70% {
    opacity: 0;
    transform: translateX(0px);
  }
  75% {
    opacity: 1;
    transform: translateX(3px);
  }
  82% {
    opacity: 0;
    transform: translateX(-4px);
  }
  88% {
    opacity: 1;
    transform: translateX(2px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px);
  }
}

@keyframes glitch-layer-3 {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  8% {
    opacity: 1;
    transform: translateX(4px);
  }
  14% {
    opacity: 0;
    transform: translateX(-2px);
  }
  22% {
    opacity: 1;
    transform: translateX(-3px);
  }
  28% {
    opacity: 0;
    transform: translateX(0px);
  }
  65% {
    opacity: 0;
    transform: translateX(0px);
  }
  72% {
    opacity: 1;
    transform: translateX(-4px);
  }
  78% {
    opacity: 0;
    transform: translateX(3px);
  }
  86% {
    opacity: 1;
    transform: translateX(-1px);
  }
  100% {
    opacity: 0;
    transform: translateX(0px);
  }
}

/* ==========================================================================
   HOVER GLITCH INTENSIFICATION
   ========================================================================== */

.glitch-title:hover {
  animation-duration: 0.2s;
}

.glitch-title:hover::before {
  animation-duration: 0.1s;
}

.glitch-title:hover::after {
  animation-duration: 0.15s;
}

.glitch-title:hover .glitch-layer:nth-child(1) {
  animation-duration: 0.3s;
}

.glitch-title:hover .glitch-layer:nth-child(2) {
  animation-duration: 0.25s;
}

.glitch-title:hover .glitch-layer:nth-child(3) {
  animation-duration: 0.35s;
}

/* ==========================================================================
   SCAN LINES EFFECT
   ========================================================================== */

.glitch-title::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 255, 65, 0.03) 50%,
    transparent 100%
  );
  background-size: 100% 4px;
  animation: 
    glitch-anim-2 1s infinite linear alternate-reverse,
    scanlines 0.1s infinite linear;
}

@keyframes scanlines {
  0% {
    background-position: 0 0px;
  }
  100% {
    background-position: 0 4px;
  }
}

/* ==========================================================================
   MEDIA QUERIES FOR GLITCH EFFECTS
   ========================================================================== */

@media screen and (max-width: 480px) {
  .glitch-title {
    animation-duration: 1.5s;
  }
  
  .glitch-title::before,
  .glitch-title::after {
    animation-duration: 1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glitch-title,
  .glitch-title::before,
  .glitch-title::after,
  .glitch-layer {
    animation: none;
  }
}

/* Comentar ou remover as regras problemáticas do título */
/*
.glitch-title::before,
.glitch-title::after {
  // Remover ou comentar estes pseudo-elementos
}
*/

/* Manter apenas efeitos simples se necessário */
.glitch-title {
  /* Efeitos básicos apenas */
  position: relative;
}

/* Aplicar glitch apenas nos botões se necessário */
/* .btn.glitch-btn::before,
.btn.glitch-btn::after {
  /* Manter efeitos de glitch apenas para elementos específicos */
/* } */