/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes slideDown {
  from { 
    opacity: 0;
    transform: translateY(-20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0% {
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
  }
  100% {
    text-shadow: 0 0 20px rgba(0, 255, 157, 0.8), 0 0 30px rgba(0, 255, 157, 0.6);
  }
}

/* 故障效果 */
.glitch {
  position: relative;
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

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

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--cyber-accent);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--cyber-accent2);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(16px, 9999px, 86px, 0);
    transform: skew(0.4deg);
  }
  20% {
    clip: rect(62px, 9999px, 78px, 0);
    transform: skew(0.35deg);
  }
  40% {
    clip: rect(89px, 9999px, 7px, 0);
    transform: skew(0.79deg);
  }
  60% {
    clip: rect(35px, 9999px, 56px, 0);
    transform: skew(0.57deg);
  }
  80% {
    clip: rect(85px, 9999px, 86px, 0);
    transform: skew(0.4deg);
  }
  100% {
    clip: rect(84px, 9999px, 67px, 0);
    transform: skew(0.4deg);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(45px, 9999px, 50px, 0);
    transform: skew(0.7deg);
  }
  20% {
    clip: rect(24px, 9999px, 59px, 0);
    transform: skew(0.71deg);
  }
  40% {
    clip: rect(33px, 9999px, 93px, 0);
    transform: skew(0.11deg);
  }
  60% {
    clip: rect(81px, 9999px, 85px, 0);
    transform: skew(0.66deg);
  }
  80% {
    clip: rect(33px, 9999px, 2px, 0);
    transform: skew(0.58deg);
  }
  100% {
    clip: rect(64px, 9999px, 94px, 0);
    transform: skew(0.14deg);
  }
}

@keyframes glitch-skew {
  0% { transform: skew(-1deg); }
  20% { transform: skew(1deg); }
  40% { transform: skew(-1deg); }
  60% { transform: skew(1deg); }
  80% { transform: skew(0.5deg); }
  100% { transform: skew(0deg); }
}

/* Typing animation */
.typing {
  overflow: hidden;
  border-right: 0.15em solid var(--cyber-accent);
  white-space: nowrap;
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--cyber-accent) }
}