/* ==================== 滑动容器：首页 + 主菜单 ==================== */

.swipe-wrapper {
    width: 786px; /* 两屏宽度 */
    height: 852px;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    /* 吸附过渡：松手后平滑归位 */
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swipe-wrapper.dragging {
    /* 拖拽中禁用过渡，实现跟随手指 */
    transition: none;
}

/* 共享背景人像：横跨两页 */
.shared-photo {
    position: absolute;
    left: 156px;
    top: 330.53px;
    width: 360px;
    height: 521.47px;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0px 15px 12px rgba(0, 0, 0, 0.22)) drop-shadow(0px 19px 38px rgba(0, 0, 0, 0.3));
}

/* 滑动页（首页 / 主菜单） */
.swipe-page {
    width: 393px;
    height: 852px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

/* ==================== 首页内容 ==================== */

.home-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 393px;
    height: 852px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 90px 30px 60px;
}

.home-text-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: fit-content;
}

.home-greeting {
    font-family: 'Source Han Sans', 'PingFang SC', sans-serif;
    font-size: 60px;
    font-weight: 700;
    color: #000000;
    line-height: 60px;
    margin: 0;
}

.home-intro {
    font-family: 'Source Han Serif CN', 'Songti SC', serif;
    font-size: 24px;
    font-weight: 400;
    color: #3D3D3D;
    line-height: 150%;
    letter-spacing: 0.05em;
    margin: 0;
}

.home-guide {
    width: 176px;
    height: 53px;
    object-fit: contain;
    opacity: 0;
}

.home-cta {
    width: 68px;
    height: 68px;
    cursor: pointer;
}

/* ==================== 逐字出现动效 ==================== */

.typewriter-char {
    display: inline;
    opacity: 0;
    animation: typewriterReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

/* ==================== 打字机光标 ==================== */

.typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 0.85em;
    background-color: #000;
    margin-left: 4px;
    vertical-align: text-bottom;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.typewriter-cursor.active {
    opacity: 1;
}

.typewriter-cursor.blink {
    animation: cursorBlink 0.6s step-end infinite;
}

.typewriter-cursor.fade-out {
    animation: none;
    transition: opacity 0.4s ease;
    opacity: 0;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.home-cta {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.home-cta.show {
    opacity: 1;
}

.home-cta-icon {
    width: 68px;
    height: 68px;
}

/* ==================== 外圈加载动效 ==================== */

.home-cta-icon .loader__eye1,
.home-cta-icon .loader__eye2,
.home-cta-icon .loader__mouth1,
.home-cta-icon .loader__mouth2 {
    animation: eye1 var(--loader-duration, 3s) ease-in-out infinite;
}

.home-cta-icon .loader__eye1,
.home-cta-icon .loader__eye2 {
    transform-origin: 34px 34px;
}

.home-cta-icon .loader__eye2 {
    animation-name: eye2;
}

.home-cta-icon .loader__mouth1 {
    animation-name: mouth1;
}

.home-cta-icon .loader__mouth2 {
    animation-name: mouth2;
    visibility: hidden;
}

@keyframes eye1 {
    from {
        transform: rotate(-260deg) translate(0, -30px);
    }
    50%, 60% {
        animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1);
        transform: rotate(-40deg) translate(0, -30px) scale(1);
    }
    to {
        transform: rotate(225deg) translate(0, -30px) scale(0.35);
    }
}

@keyframes eye2 {
    from {
        transform: rotate(-260deg) translate(0, -30px);
    }
    50% {
        transform: rotate(40deg) translate(0, -30px) rotate(-40deg) scale(1);
    }
    52.5% {
        transform: rotate(40deg) translate(0, -30px) rotate(-40deg) scale(1, 0);
    }
    55%, 70% {
        animation-timing-function: cubic-bezier(0, 0, 0.28, 1);
        transform: rotate(40deg) translate(0, -30px) rotate(-40deg) scale(1);
    }
    to {
        transform: rotate(150deg) translate(0, -30px) scale(0.4);
    }
}

@keyframes mouth1 {
    from {
        animation-timing-function: ease-in;
        stroke-dasharray: 0 175.93;
        stroke-dashoffset: 0;
    }
    25% {
        animation-timing-function: ease-out;
        stroke-dasharray: 87.96 175.93;
        stroke-dashoffset: 0;
    }
    50% {
        animation-timing-function: steps(1, start);
        stroke-dasharray: 87.96 175.93;
        stroke-dashoffset: -87.96;
        visibility: visible;
    }
    75%, to {
        visibility: hidden;
    }
}

@keyframes mouth2 {
    from {
        animation-timing-function: steps(1, end);
        visibility: hidden;
    }
    50% {
        animation-timing-function: ease-in-out;
        visibility: visible;
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -175.93;
    }
}

/* ==================== 主菜单内容 ==================== */

.menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 393px;
    height: 852px;
    display: flex;
    flex-direction: column;
    padding: 90px 30px;
    gap: 28px;
}

.menu-title {
    font-family: 'Source Han Serif CN', 'Songti SC', serif;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    margin: 0;
}

.menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    width: 333px;
    min-height: 49px;
    cursor: pointer;
}

.menu-item-icon {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.menu-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.menu-item-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Source Han Serif CN', 'Songti SC', serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.menu-item-title.active {
    color: rgb(0, 126, 255);
}

.menu-item-title.inactive {
    color: #8793A5;
}

.menu-item-arrow {
    flex-shrink: 0;
    transform: rotate(-90deg) rotateX(180deg);
}

div#page-menu > div.menu-content > div.menu-item:nth-child(n+2) > div.menu-item-text > div.menu-item-title > svg {
    transform: rotate(270deg);
}

.menu-item-sub {
    font-family: 'Source Han Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #8793A5;
    line-height: 1.4;
    margin-top: 2px;
}