/* CSS Reimplemented with SPANs for Multi-line Glitch */

.glitch {
  position: relative; /* Needed for absolute positioning of layers */
  overflow: hidden;
  background-color: transparent;
  text-shadow:
    0 3px 7px rgba(0,0,0,0.55),   /* Sombra projetada, escura, mas não espalha tanto */
    0 1px 1px rgba(0,0,0,0.36);   /* Leve reforço próximo do texto */
  /* z-index: 1; <-- No longer needed here, handled by spans */
}

/* Style for the SPAN layers created by JS */
.glitch-layer {
  position: absolute;
  top: 0;
  left: 0; /* Start aligned */
  width: 100%;
  height: 100%;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  /* No white-space: nowrap; */
  overflow: hidden;
  pointer-events: none;
  background-color: transparent;
  z-index: 0; /* Behind the original text span */
  opacity: 0; /* Start hidden */
}

/* Red layer specific styles */
.glitch-layer--red {
  text-shadow: -2px 0 red;
  animation: glitch-anim-red-intense 2s infinite linear alternate;
}

/* Blue layer specific styles */
.glitch-layer--blue {
  text-shadow: -2px 0 blue;
  animation: glitch-anim-blue-intense 2s infinite linear alternate;
}

/* --- Keyframes remain the same --- */

/* Keyframes para ::before (vermelha) - Intenso com Pausa */
@keyframes glitch-anim-red-intense {
  /* --- Resting Phase (Pause Between Cycles) --- */
  0%, 10% { /* Increased pause duration */
    left: 0;
    opacity: 0;
    clip-path: inset(50% 0 50% 0); /* Fully hidden */
  }

  /* --- Intense Glitch Phase --- */
  11% {
    left: 7px;
    opacity: 0.8;
    clip-path: inset(15% 0 70% 0);
  }
  14% {
    left: -5px;
    opacity: 0.7;
    clip-path: inset(80% 0 5% 0);
  }
  17% {
    left: 6px;
    opacity: 0.85;
    clip-path: inset(2% 0 90% 0);
  }
  20% {
    left: -7px;
    opacity: 0.6;
    clip-path: inset(65% 0 10% 0);
  }
  23% {
    left: 5px;
    opacity: 0.75;
    clip-path: inset(30% 0 55% 0);
  }
  26% {
    left: -6px;
    opacity: 0.8;
    clip-path: inset(90% 0 3% 0);
  }
  29% {
    left: 7px;
    opacity: 0.7;
    clip-path: inset(45% 0 40% 0);
  }
  32% {
    left: -5px;
    opacity: 0.8;
    clip-path: inset(10% 0 85% 0);
  }
  35% {
    left: 6px;
    opacity: 0.65;
    clip-path: inset(75% 0 5% 0);
  }
  /* Add more intense steps, avoiding smooth transitions */
  40% {
    left: -8px;
    opacity: 0.8;
    clip-path: inset(20% 0 60% 0);
  }
  45% {
    left: 8px;
    opacity: 0.7;
    clip-path: inset(50% 0 20% 0);
  }
  50% {
    left: -6px;
    opacity: 0.85;
    clip-path: inset(5% 0 75% 0);
  }
  55% {
    left: 7px;
    opacity: 0.6;
    clip-path: inset(85% 0 8% 0);
  }
  60% {
    left: -7px;
    opacity: 0.75;
    clip-path: inset(35% 0 45% 0);
  }
  65% {
    left: 6px;
    opacity: 0.8;
    clip-path: inset(60% 0 15% 0);
  }
  70% {
    left: -5px;
    opacity: 0.7;
    clip-path: inset(25% 0 50% 0);
  }
  75% {
    left: 8px;
    opacity: 0.85;
    clip-path: inset(70% 0 5% 0);
  }
  80% {
    left: -6px;
    opacity: 0.7;
    clip-path: inset(10% 0 65% 0);
  }
  85% {
    left: 7px;
    opacity: 0.8;
    clip-path: inset(55% 0 25% 0);
  }

  /* --- Return to Resting Phase --- */
  90%, 100% { /* Increased pause duration */
    left: 0;
    opacity: 0;
    clip-path: inset(50% 0 50% 0); /* Fully hidden */
  }
}

/* Keyframes para ::after (azul) - Intenso com Pausa */
@keyframes glitch-anim-blue-intense {
  /* --- Resting Phase (Pause Between Cycles) --- */
  0%, 10% { /* Increased pause duration */
    left: 0;
    opacity: 0;
    clip-path: inset(50% 0 50% 0); /* Fully hidden */
  }

  /* --- Intense Glitch Phase --- */
  12% {
    left: -7px;
    opacity: 0.8;
    clip-path: inset(70% 0 15% 0);
  }
  15% {
    left: 5px;
    opacity: 0.7;
    clip-path: inset(5% 0 80% 0);
  }
  18% {
    left: -6px;
    opacity: 0.85;
    clip-path: inset(90% 0 2% 0);
  }
  21% {
    left: 7px;
    opacity: 0.6;
    clip-path: inset(10% 0 65% 0);
  }
  24% {
    left: -5px;
    opacity: 0.75;
    clip-path: inset(55% 0 30% 0);
  }
  27% {
    left: 6px;
    opacity: 0.8;
    clip-path: inset(3% 0 90% 0);
  }
  30% {
    left: -7px;
    opacity: 0.7;
    clip-path: inset(40% 0 45% 0);
  }
  33% {
    left: 5px;
    opacity: 0.8;
    clip-path: inset(85% 0 10% 0);
  }
  36% {
    left: -6px;
    opacity: 0.65;
    clip-path: inset(5% 0 75% 0);
  }
  /* Add more intense steps */
  41% {
    left: 8px;
    opacity: 0.8;
    clip-path: inset(60% 0 20% 0);
  }
  46% {
    left: -8px;
    opacity: 0.7;
    clip-path: inset(20% 0 50% 0);
  }
  51% {
    left: 6px;
    opacity: 0.85;
    clip-path: inset(75% 0 5% 0);
  }
  56% {
    left: -7px;
    opacity: 0.6;
    clip-path: inset(8% 0 85% 0);
  }
  61% {
    left: 7px;
    opacity: 0.75;
    clip-path: inset(45% 0 35% 0);
  }
  66% {
    left: -6px;
    opacity: 0.8;
    clip-path: inset(15% 0 60% 0);
  }
  71% {
    left: 5px;
    opacity: 0.7;
    clip-path: inset(50% 0 25% 0);
  }
  76% {
    left: -8px;
    opacity: 0.85;
    clip-path: inset(5% 0 70% 0);
  }
  81% {
    left: 6px;
    opacity: 0.7;
    clip-path: inset(65% 0 10% 0);
  }
  86% {
    left: -7px;
    opacity: 0.8;
    clip-path: inset(25% 0 55% 0);
  }

  /* --- Return to Resting Phase --- */
  90%, 100% { /* Increased pause duration */
    left: 0;
    opacity: 0;
    clip-path: inset(50% 0 50% 0); /* Fully hidden */
  }
}

/* Optional media query */

@media (max-width: 576px) {
  .glitch { font-size: 38px; line-height: 1.1; }
}