/* ===========================
   Global Animations
   Shared keyframes used by the loading overlay and title animation
   =========================== */

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

    100% {
        opacity: 1;
    }
}

@keyframes sideFadeIn {
    0% {
        opacity: 0;
        pointer-events: none;
    }

    100% {
        opacity: 1;
        pointer-events: auto;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        pointer-events: none;
        /* 确保元素在动画结束后不阻挡交互 */
    }
}

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

    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* ===========================
   标题动画 — 桌面端
   =========================== */
@keyframes titleMove {
    0% {
        top: 50%;
    }

    100% {
        top: 12%;
    }
}

@keyframes titleZoom {
    0% {
        font-size: 96px;
        color: var(--title-color-start, rgba(180, 215, 255, 0.9));
        background-color: transparent;
    }

    60% {
        color: var(--title-color-mid, rgba(200, 220, 255, 0.8));
    }

    100% {
        font-size: 36px;
        color: var(--text-primary, rgba(255, 255, 255, 0.92));
        background-color: var(--title-bg, rgba(10, 10, 25, var(--outer-alpha)));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
        border-radius: calc(var(--title-height) / 2);
        padding: 0 calc(var(--title-height) / 2 + 10px);
        height: var(--title-height);
        line-height: var(--title-height);
        box-sizing: border-box;
    }
}

/* ===========================
   标题动画 — 移动端
   =========================== */
@keyframes titleMoveMobile {
    0% {
        top: 50%;
    }

    100% {
        top: calc(5% + 10px);
    }
}

@keyframes titleZoomMobile {
    0% {
        font-size: 48px;
        color: var(--title-color-start, rgba(180, 215, 255, 0.9));
        background-color: transparent;
    }

    60% {
        color: var(--title-color-mid, rgba(200, 220, 255, 0.8));
    }

    100% {
        font-size: 26px;
        color: var(--text-primary, rgba(255, 255, 255, 0.92));
        background-color: var(--title-bg, rgba(10, 10, 25, var(--outer-alpha)));
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
        border-radius: calc(var(--title-height-mobile) / 2);
        padding: 0 calc(var(--title-height-mobile) / 2);
        text-align: center;
        width: auto;
        height: var(--title-height-mobile);
        line-height: var(--title-height-mobile);
        box-sizing: border-box;
    }
}