@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message {
    animation: fadeIn 0.3s ease-in-out;
}

.glitch {
    position: relative;
}

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

@keyframes glitch-anim {
  0% {
    clip: rect(20px, 9999px, 56px, 0);
    transform: translate(0, 0);
  }
  5% {
    clip: rect(80px, 9999px, 90px, 0);
    transform: translate(-5px, -5px);
  }
  10% {
    clip: rect(130px, 9999px, 150px, 0);
    transform: translate(5px, 5px);
  }
  15% {
    clip: rect(10px, 9999px, 40px, 0);
    transform: translate(-10px, 10px);
  }
  20% {
    clip: rect(60px, 9999px, 70px, 0);
    transform: translate(10px, -10px);
  }
  25% {
    clip: rect(100px, 9999px, 120px, 0);
    transform: translate(-5px, 0);
  }
  30% {
    clip: rect(35px, 9999px, 45px, 0);
    transform: translate(5px, -5px);
  }
  35% {
    clip: rect(70px, 9999px, 110px, 0);
    transform: translate(-10px, 0);
  }
  40% {
    clip: rect(20px, 9999px, 50px, 0);
    transform: translate(10px, 5px);
  }
  45% {
    clip: rect(50px, 9999px, 85px, 0);
    transform: translate(-5px, -5px);
  }
  50% {
    clip: rect(90px, 9999px, 100px, 0);
    transform: translate(5px, 5px);
  }
  55% {
    clip: rect(25px, 9999px, 65px, 0);
    transform: translate(-10px, -10px);
  }
  60% {
    clip: rect(115px, 9999px, 130px, 0);
    transform: translate(10px, 0);
  }
  65% {
    clip: rect(40px, 9999px, 70px, 0);
    transform: translate(-5px, 5px);
  }
  70% {
    clip: rect(75px, 9999px, 105px, 0);
    transform: translate(5px, -5px);
  }
  75% {
    clip: rect(15px, 9999px, 55px, 0);
    transform: translate(-10px, -5px);
  }
  80% {
    clip: rect(55px, 9999px, 90px, 0);
    transform: translate(10px, 5px);
  }
  85% {
    clip: rect(100px, 9999px, 125px, 0);
    transform: translate(-5px, 5px);
  }
  90% {
    clip: rect(35px, 9999px, 80px, 0);
    transform: translate(5px, -10px);
  }
  95% {
    clip: rect(85px, 9999px, 115px, 0);
    transform: translate(-10px, 10px);
  }
  100% {
    clip: rect(50px, 9999px, 95px, 0);
    transform: translate(10px, -10px);
  }
}

/* Applying the glitch effect to the text */
.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--secondary-color);
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim 1s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--primary-color);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 1.2s infinite linear alternate-reverse;
}