@charset "UTF-8";
/* CSS Document */

/* Banner 容器基础样式 */
.banner {
    width: 100%;
    height: 360px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff);
    background-size: 400% 400%; /* 扩大渐变范围，实现更丰富的位移动画 */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "微软雅黑", sans-serif;
    position: relative;
    overflow: hidden;
    /* 背景渐变动画 */
    animation: bgMove 12s ease infinite;
}

/* 标题动画 - 从左侧平行移动到中间 */
.banner-title1 {
    font-size: 48px;
    font-weight: normal; /* 字体变细 */
    margin: 0 0 20px;
    opacity: 0; /* 初始透明 */
    transform: translateX(-100%); /* 初始从最左侧开始 */
    /* 标题从左到中动画：延迟0.3s，持续1.6s（原速度的1/2），结束后保持最终状态 */
    animation: slideFromLeft 1.6s ease 0.3s forwards;
}

/* 副标题动画 - 从右侧平行移动到中间 */
.banner-title2 {
    font-size: 48px;
    font-weight: normal; /* 字体变细 */
    margin: 0 0 20px;
    opacity: 0;
    transform: translateX(100%); /* 初始从最右侧开始 */
    /* 副标题从右到中动画：延迟0.8s，持续1.6s（原速度的1/2），结束后保持最终状态 */
    animation: slideFromRight 1.6s ease 0.8s forwards;
}

/* 从左侧滑入动画 */
@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 从右侧滑入动画 */
@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 背景渐变位移动画 - 更丰富的颜色变化 */
@keyframes bgMove {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}