@font-face {
    font-family: 'MyHuawenXingkai';
    src: url('../font/STXingkai.woff2') format('woff2'),
         url('../font/STXingkai.woff') format('woff'),
         url('../font/huawenxingkai.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

        .animation-stage {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(2px);
            border-radius: 28px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 0;
            overflow: visible;
            transform: translateZ(0);
        }

        .word-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

        /* 核心文字样式：清秀行楷，精致小巧 */
        .animated-word {
            position: absolute;
            font-family:'MyHuawenXingkai', '华文行楷', '华文行书', 'STXingkai', 'KaiTi', '楷体', cursive;
            font-weight: 400;
            color: #16aae6;
            text-shadow: 0 1px 3px rgba(22, 170, 230, 0.15);
            white-space: nowrap;
            pointer-events: none;
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 2.4rem;
            letter-spacing: 0.5px;
            filter: none;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        @media (min-width: 255px) and (max-width: 265px) {
            .animated-word {
                font-size: 2.35rem;
                letter-spacing: 0.3px;
            }
        }
        
        /* 动画效果完全不变，但使用 forwards 让动画停在最后一帧，方便 JS 控制重播 */
        .text-shangxue-final {
            animation: shangxueFlow 6s linear forwards;
            animation-play-state: paused;
        }
        
        .text-maotong-final {
            animation: maotongFlow 6s linear forwards;
            animation-play-state: paused;
        }

        /* 商学致远：入场+停留+消失 (效果不变) */
        @keyframes shangxueFlow {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
            }
            8% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.02);
            }
            12% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            42% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            46% {
                opacity: 0.6;
                transform: translate(-50%, -50%) scale(0.7);
            }
            50% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
                visibility: hidden;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
                visibility: hidden;
            }
        }

        /* 贸通天下：延迟出场+停留+消失 (效果不变) */
        @keyframes maotongFlow {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
                visibility: hidden;
            }
            48% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
                visibility: hidden;
            }
            50% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
                visibility: visible;
            }
            58% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.02);
                visibility: visible;
            }
            62% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            92% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
            96% {
                opacity: 0.6;
                transform: translate(-50%, -50%) scale(0.7);
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.2);
                visibility: hidden;
            }
        }
        
        .design-note {
            position: fixed;
            bottom: 8px;
            right: 10px;
            font-family: system-ui, 'Segoe UI', sans-serif;
            font-size: 8px;
            color: #8f9eb2;
            background: rgba(240, 248, 255, 0.7);
            padding: 2px 8px;
            border-radius: 20px;
            backdrop-filter: blur(4px);
            pointer-events: none;
            z-index: 10;
            white-space: nowrap;
        }

        .animation-stage {
            background: rgba(255, 255, 255, 0.88);
        }
        
        /* 强制GPU加速 */
        .animated-word {
            transform: translate(-50%, -50%) translateZ(0);
        }