@keyframes fold-x {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes fold-x-fit-content {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

@keyframes unfold-x {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}

@keyframes fold-y {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

@keyframes unfold-y {
    0% {
        height: 100%;
    }
    100% {
        height: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        display: none; /* 确保元素在动画结束后不占用空间 */
    }
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translate(-50%,-120%);
    }
    100% {
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}

@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translate(-50%,-50%);
    }
    100% {
        opacity: 0;
        transform: translate(-50%,-100%);
    }
}

@keyframes borderFold{
    0%{
        border-width: 0;
    } 100%{
        border-width: 100%;
    }
}

@keyframes borderUnfold{
    0%{
        border-width: 100%;
    } 100%{
        border-width: 0;
    }
}

@keyframes titleMove{
    0% {
        top: 50%;
    }100%{
        top: 8%;
    }
}

@keyframes titleZoom{
    0% {
        font-size: 96px;
        color: lightblue;
    }
    80%{
        font-size: 48px;
        color: darkblue;
        background-color: rgba(255, 255, 255, 0.6);
    }100%{
        font-size: 32px;
        color: black;
        background-color: rgba(255, 255, 255, 1);
    }
}

/* 移动端标题动画 - 优化iOS兼容性 */
@keyframes titleMoveMobile{
    0% {
        top: 50%;
        left: 50%;
    }80%{
        top: 6%;
        left: 60%; 
    }100%{
        top: 6%; 
        left: 60%; 
    }
}

@keyframes titleZoomMobile{
    0% {
        font-size: 48px;
        color: lightblue;
        background-color: rgba(255, 255, 255, 0);
    }
    80%{
        font-size: 28px;
        color: darkblue;
        background-color: rgba(255, 255, 255, 0.6);
        text-align: right;
        width: 60%;
    }100%{
        font-size: 28px;
        color: black;
        background-color: rgba(255, 255, 255, 1);
        text-align: right;
        width: 60%;
    }
}

/* 移动端菜单垂直展开动画 */
@keyframes mobileSideListExpand {
    0% {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    100% {
        height: 100%;
        padding-top: 80px;
        padding-bottom: 30px;
    }
}

/* 移动端菜单垂直折叠动画 */
@keyframes mobileSideListCollapse {
    0% {
        height: 100%;
        padding-top: 80px;
        padding-bottom: 30px;
    }
    100% {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}