/* ============================================
   通用动画效果
   ============================================ */

/* Glitch 故障效果 */
.glitch {
    position: relative;
    animation: glitch 0.2s infinite;
}

@keyframes glitch {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
    20% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(-2px, -2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(2px, 2px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(2px, -2px);
        filter: hue-rotate(360deg);
    }
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}

.glitch-fade {
    animation: glitchFade 0.2s ease-out;
}

@keyframes glitchFade {
    0% {
        opacity: 1;
        filter: hue-rotate(0deg) brightness(1);
    }
    50% {
        opacity: 0.3;
        filter: hue-rotate(180deg) brightness(1.5);
    }
    100% {
        opacity: 0;
        filter: hue-rotate(360deg) brightness(2);
    }
}

/* Scramble 乱码重组效果 */
.scramble {
    font-family: var(--font-mono);
    position: relative;
}

.scramble-text {
    animation: scrambleReveal 0.5s ease-out;
}

@keyframes scrambleReveal {
    0% {
        opacity: 0;
        letter-spacing: 5px;
        filter: blur(2px);
    }
    50% {
        opacity: 0.5;
        letter-spacing: 2px;
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        letter-spacing: 0px;
        filter: blur(0);
    }
}

/* 边框流动动画 */
.border-flow {
    position: relative;
    overflow: hidden;
}

.border-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        var(--color-danger),
        transparent
    );
    animation: borderFlow 1s ease-out;
}

@keyframes borderFlow {
    0% {
        left: -100%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* 故障抖动效果（用于雷达图） */
.fault-shake {
    animation: faultShake 0.5s infinite;
}

@keyframes faultShake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-2px, -1px) rotate(-0.5deg);
    }
    20% {
        transform: translate(2px, 1px) rotate(0.5deg);
    }
    30% {
        transform: translate(-1px, 2px) rotate(-0.3deg);
    }
    40% {
        transform: translate(1px, -2px) rotate(0.3deg);
    }
    50% {
        transform: translate(-2px, 1px) rotate(-0.2deg);
    }
    60% {
        transform: translate(2px, -1px) rotate(0.2deg);
    }
    70% {
        transform: translate(-1px, -2px) rotate(-0.1deg);
    }
    80% {
        transform: translate(1px, 2px) rotate(0.1deg);
    }
    90% {
        transform: translate(-2px, -1px) rotate(-0.05deg);
    }
}

/* 辉光效果 */
.glow-effect {
    filter: drop-shadow(0 0 10px currentColor);
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 10px currentColor);
    }
    50% {
        filter: drop-shadow(0 0 20px currentColor);
    }
}

/* 数据注入动画 */
.data-inject {
    animation: dataInject 0.5s ease-out;
}

@keyframes dataInject {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}