/* 垂直扫描动画 - 用于app-logo */
@keyframes verticalScan {
    0% { top: 0; }
    100% { top: calc(100% - 2px); }
}

/* 呼吸灯动画 */
@keyframes breathePulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* 淡入效果 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 电流线段沿边框移动动画 */
@keyframes circuitLineFlow {
    /* 顶部边框从左到右 */
    0% {
        top: 0;
        left: 0;
        width: 20px;
        height: 2px;
        transform: rotate(0deg);
        opacity: 1;
    }
    24% {
        top: 0;
        left: calc(100% - 20px);
        width: 20px;
        height: 2px;
        transform: rotate(0deg);
        opacity: 1;
    }
    /* 右边转角 */
    25% {
        top: 0;
        left: calc(100% - 2px);
        width: 2px;
        height: 2px;
        opacity: 0.8;
    }
    /* 右边框从上到下 */
    26% {
        top: 0;
        left: calc(100% - 2px);
        width: 2px;
        height: 20px;
        transform: rotate(0deg);
        opacity: 1;
    }
    49% {
        top: calc(100% - 20px);
        left: calc(100% - 2px);
        width: 2px;
        height: 20px;
        transform: rotate(0deg);
        opacity: 1;
    }
    /* 右下角转角 */
    50% {
        top: calc(100% - 2px);
        left: calc(100% - 2px);
        width: 2px;
        height: 2px;
        opacity: 0.8;
    }
    /* 底部边框从右到左 */
    51% {
        top: calc(100% - 2px);
        left: calc(100% - 20px);
        width: 20px;
        height: 2px;
        transform: rotate(0deg);
        opacity: 1;
    }
    74% {
        top: calc(100% - 2px);
        left: 0;
        width: 20px;
        height: 2px;
        transform: rotate(0deg);
        opacity: 1;
    }
    /* 左下角转角 */
    75% {
        top: calc(100% - 2px);
        left: 0;
        width: 2px;
        height: 2px;
        opacity: 0.8;
    }
    /* 左边框从下到上 */
    76% {
        top: calc(100% - 20px);
        left: 0;
        width: 2px;
        height: 20px;
        transform: rotate(0deg);
        opacity: 1;
    }
    99% {
        top: 0;
        left: 0;
        width: 2px;
        height: 20px;
        transform: rotate(0deg);
        opacity: 1;
    }
    /* 回到起点 */
    100% {
        top: 0;
        left: 0;
        width: 20px;
        height: 2px;
        opacity: 1;
    }
}

/* 动画类 */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}