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

@keyframes glitch-anim {
  0% { clip-path: inset(0 0 95% 0); }
  10% { clip-path: inset(15% 0 70% 0); }
  30% { clip-path: inset(5% 0 80% 0); }
  50% { clip-path: inset(25% 0 60% 0); }
  70% { clip-path: inset(10% 0 75% 0); }
  100% { clip-path: inset(5% 0 85% 0); }
}

@keyframes glitch-anim2 {
  0% { clip-path: inset(85% 0 5% 0); }
  20% { clip-path: inset(20% 0 65% 0); }
  40% { clip-path: inset(35% 0 50% 0); }
  60% { clip-path: inset(15% 0 70% 0); }
  100% { clip-path: inset(0 0 90% 0); }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.7; }
}

.glitch {
  position: relative;
  animation: flicker 5s infinite;
}

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

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 red;
  animation: glitch-anim 1s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 blue;
  animation: glitch-anim2 1.5s infinite linear alternate-reverse;
}

html, body {
  animation: scanlines 0.5s steps(2) infinite;
}

.text-block {
  animation: flicker 7s infinite;
}

.question-mark {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-size: 2rem;
  color: #fff;
  transition: all 0.3s ease;
  text-align: center;
  margin: 20px 0;
  padding: 10px;
}

.question-mark::before,
.question-mark::after {
  content: "?";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.question-mark::before {
  color: #ffffff;
  text-shadow: -3px 0 #ffffff;
  animation: glitch-anim 0.8s infinite linear alternate-reverse;
  filter: brightness(1.5);
}

.question-mark::after {
  color: #ffffff;
  text-shadow: 3px 0 #ffffff;
  animation: glitch-anim2 1.2s infinite linear alternate-reverse;
  filter: brightness(1.2);
}

.question-mark:hover {
  color: transparent;
}

.question-mark:hover::before,
.question-mark:hover::after {
  opacity: 0.8;
}

.question-mark.level-1::before,
.question-mark.level-1::after {
  opacity: 0.4;
  animation-duration: 0.6s;
}

.question-mark.level-2::before,
.question-mark.level-2::after {
  opacity: 0.7;
  animation-duration: 0.4s;
  text-shadow: -4px 0 #ffffff, 4px 0 #ffffff;
}

.question-mark.level-3::before,
.question-mark.level-3::after {
  opacity: 0.9;
  animation-duration: 0.2s;
  text-shadow: -5px 0 #ffffff, 5px 0 #ffffff;
  filter: brightness(2);
}

.question-mark.level-4 {
  color: transparent;
}

.question-mark.level-4::before,
.question-mark.level-4::after {
  opacity: 1;
  animation-duration: 0.1s;
  text-shadow: -6px 0 #ffffff, 6px 0 #ffffff;
  filter: brightness(3) blur(0.5px);
}

@keyframes fade-out {
  0% { 
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); 
    filter: brightness(3) blur(0px);
  }
  50% { 
    opacity: 0.8; 
    transform: translate(-50%, -50%) scale(1.2); 
    filter: brightness(4) blur(1px);
  }
  100% { 
    opacity: 0; 
    transform: translate(-50%, -50%) scale(1.5); 
    filter: brightness(5) blur(2px);
  }
}

.question-mark.redirecting::before,
.question-mark.redirecting::after {
  animation: fade-out 0.5s ease-in-out forwards;
}

@keyframes shake {
  0%, 100% { transform: translate(-50%, -50%); }
  25% { transform: translate(-52%, -48%); }
  50% { transform: translate(-48%, -52%); }
  75% { transform: translate(-51%, -49%); }
}

.question-mark.level-3,
.question-mark.level-4 {
  animation: shake 0.3s infinite;
}

.question-mark.redirecting {
  animation: shake 0.1s infinite;
}