.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 101;
    background: #091b25;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .8s ease, visibility .8s ease;

    .mask-header {
        margin: 1.5625rem auto 1.5625rem;
        left: 0;
        right: 0;
        width: 97%;
        height: 4rem;
        padding: 0 1.5625rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .mask-header__icon-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.375rem;
            height: 2.375rem;
            border-radius: .75rem;

            &.search-btn {
                border: 1px solid rgba(255, 255, 255, 1);
                background: transparent;
            }

            img,
            svg {
                fill: var(--color-white);
                width: 1.3438rem;
                height: 1.3438rem;
            }
        }
    }

    .mask-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mask-footer__nav-col {
        h4 {
            color: rgba(255, 255, 255, 1);
            font-family: "OPPO Sans 4.0";
            font-style: Medium;
            font-size: var(--font-16);
            line-height: var(--font-18);
            font-weight: 500;
            letter-spacing: 0rem;
            text-align: left;
            margin-bottom: 1rem;
        }

        a {
            display: block;
            color: rgba(255, 255, 255, 1);
            opacity: 0.8;
            font-family: "OPPO Sans 4.0";
            font-style: Regular;
            font-size: var(--font-14);
            line-height: var(--font-16);
            font-weight: 400;
            letter-spacing: 0rem;
            text-align: left;
            margin-bottom: .875rem;
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 1;
            }
        }
    }
}

.mask.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 菜单切换：三条线 → X（由 body.is-mask-open 驱动，与 mask 显隐同步） */
.nav-toggle-icon__bar {
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
}

.nav-toggle-icon__bar--top {
    transform-origin: 12px 7px;
}

.nav-toggle-icon__bar--mid {
    transform-origin: 12px 12px;
}

.nav-toggle-icon__bar--bot {
    transform-origin: 12px 17px;
}

body.is-mask-open .nav-toggle-icon__bar--top {
    transform: translateY(5px) rotate(45deg);
}

body.is-mask-open .nav-toggle-icon__bar--mid {
    opacity: 0;
    transform: scaleX(0);
}

body.is-mask-open .nav-toggle-icon__bar--bot {
    transform: translateY(-5px) rotate(-45deg);
}

/* 入场 GSAP 动 opacity 时关掉 transition，避免抢过渡；结束后去掉此类再 hover 才有平滑 */
.mask.mask--nav-motion .mask-footer__nav-col a,
.mask.mask--nav-motion .mask-footer__nav-col h4 {
    transition: none;
}

/* SplitText 行容器：裁切 y 位移，实现从上向下露出 */
.mask-split-line {
    overflow: hidden;
    display: block;
}