/* =========================================
   动画效果
========================================= */

/* 文字闪烁故障效果 */
@keyframes glitchText {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.hash-code {
    animation: glitchText 2s infinite;
}

/* 旋转动画 - 使用GPU加速 */
@keyframes spin {
    100% { transform: rotate(360deg); }
}

.reactor-core::before {
    animation: spin 6s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

.radar-scan {
    animation: spin 4s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

/* 反向旋转 - 使用GPU加速 */
@keyframes reverseSpin {
    100% { transform: rotate(-360deg); }
}

.reactor-core::after {
    animation: reverseSpin 3s linear infinite;
    will-change: transform;
    transform: translateZ(0);
}

/* 闪烁警告 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.seg.danger {
    animation: blink 0.5s infinite;
}

/* 日志滑入动画 - 使用GPU加速 */
@keyframes slideIn {
    from {
        transform: translate3d(-20px, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.log-row {
    animation: slideIn 0.2s ease-out;
    will-change: transform, opacity;
}

/* 脉冲效果 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* 扫描线效果 */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100%);
    }
}

/* 数据流动效果 */
@keyframes dataFlow {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

/* 霓虹灯光晕 */
@keyframes neonGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--neon-blue),
                    0 0 10px var(--neon-blue),
                    0 0 20px var(--neon-blue);
    }
    50% {
        box-shadow: 0 0 10px var(--neon-blue),
                    0 0 20px var(--neon-blue),
                    0 0 30px var(--neon-blue);
    }
}

/* 故障效果 */
@keyframes glitch {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, 2px);
    }
    40% {
        transform: translate(-2px, -2px);
    }
    60% {
        transform: translate(2px, 2px);
    }
    80% {
        transform: translate(2px, -2px);
    }
    100% {
        transform: translate(0);
    }
}

/* 呼吸灯效果 */
@keyframes breathe {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* 波纹扩散 */
@keyframes ripple {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}
