<svg viewBox="0 0 1000 562.5" xmlns="http://www.w3.org/2000/svg">
    <style>
        :root {
            --brand-blue: #0052D9;
            --success-green: #52C41A;
            --bg-gray: #f8fafc;
            --text-main: #1d2129;
            --text-secondary: #86909c;
            --anim-duration: 13s; /* 总时长：11s序列 + 2s停顿 */
        }

        .text { font-family: -apple-system, "SF Pro Display", "PingFang SC", sans-serif; }
        
        /* 场景切换总控 */
        /* 场景 1: 选择界面 (0s - 4.5s) */
        .scene-selection {
            animation: scene1-fade var(--anim-duration) infinite;
        }
        
        /* 列表项进入动画 */
        .item-anim-wrapper { opacity: 0; }
        .row-1 .item-anim-wrapper { animation: slideUp-1 var(--anim-duration) infinite; }
        .row-2 .item-anim-wrapper { animation: slideUp-2 var(--anim-duration) infinite; }
        .row-3 .item-anim-wrapper { animation: slideUp-3 var(--anim-duration) infinite; }

        /* 勾选框动画 */
        .checkbox-tick { opacity: 0; }
        .row-1 .checkbox-tick { animation: tick-fade-1 var(--anim-duration) infinite; }
        .row-2 .checkbox-tick { animation: tick-fade-2 var(--anim-duration) infinite; }
        .row-3 .checkbox-tick { animation: tick-fade-3 var(--anim-duration) infinite; }

        /* 模式按钮点击 */
        .mode-btn-fast { animation: btn-click-rect var(--anim-duration) infinite; }
        .mode-btn-fast-text { animation: btn-click-text var(--anim-duration) infinite; }

        /* 场景 2: AI 处理 (4.5s - 9.5s) */
        .scene-processing {
            opacity: 0;
            animation: scene2-fade var(--anim-duration) infinite;
        }
        .ring {
            transform-origin: 500px 281px;
            animation: rotateFull 3.5s linear infinite;
        }
        .ai-icon-wrapper {
            transform-origin: 500px 281px;
            animation: breathingIcon 2s infinite ease-in-out;
        }

        /* 场景 3: 成功 (9.5s - 13s) */
        .success-overlay {
            opacity: 0;
            visibility: hidden;
            animation: scene3-fade var(--anim-duration) infinite;
        }
        .success-icon-bg {
            transform-origin: 500px 230px;
            opacity: 0;
            animation: pop-in var(--anim-duration) infinite;
        }
        .success-msg {
            opacity: 0;
            animation: tick-fade-final var(--anim-duration) infinite;
        }
        .btn-pulse {
            opacity: 0;
            transform-origin: 500px 380px;
            animation: success-btn-anim var(--anim-duration) infinite;
        }

        /* --- 核心循环百分比定义 --- */
        
        /* 场景1可见性：0-34% (4.4s) 处消失 */
        @keyframes scene1-fade {
            0%, 34% { opacity: 1; visibility: visible; }
            35%, 100% { opacity: 0; visibility: hidden; }
        }

        /* 列表项逐行升起 (4% 约 0.5s) */
        @keyframes slideUp-1 {
            0%, 2% { opacity: 0; transform: translateY(15px); }
            5%, 34% { opacity: 1; transform: translateY(0); }
            35%, 100% { opacity: 0; }
        }
        @keyframes slideUp-2 {
            0%, 4% { opacity: 0; transform: translateY(15px); }
            7%, 34% { opacity: 1; transform: translateY(0); }
            35%, 100% { opacity: 0; }
        }
        @keyframes slideUp-3 {
            0%, 6% { opacity: 0; transform: translateY(15px); }
            9%, 34% { opacity: 1; transform: translateY(0); }
            35%, 100% { opacity: 0; }
        }

        /* 勾选动画 (10% 约 1.3s) */
        @keyframes tick-fade-1 { 0%, 9% { opacity: 0; } 11%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } }
        @keyframes tick-fade-2 { 0%, 11% { opacity: 0; } 13%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } }
        @keyframes tick-fade-3 { 0%, 13% { opacity: 0; } 15%, 34% { opacity: 1; } 35%, 100% { opacity: 0; } }

        /* 按钮点击 (19% 约 2.5s) */
        @keyframes btn-click-rect {
            0%, 18% { fill: none; stroke: #eee; }
            20%, 34% { fill: rgba(0,82,217,0.08); stroke: var(--brand-blue); }
            35%, 100% { fill: none; stroke: #eee; }
        }
        @keyframes btn-click-text {
            0%, 18% { fill: #86909c; }
            20%, 34% { fill: var(--brand-blue); }
            35%, 100% { fill: #86909c; }
        }

        /* 场景2可见性：35%-72% (4.5s - 9.4s) */
        @keyframes scene2-fade {
            0%, 34% { opacity: 0; transform: scale(0.9); }
            35%, 38% { opacity: 1; transform: scale(1); }
            69%, 72% { opacity: 1; transform: scale(1); }
            73%, 100% { opacity: 0; transform: scale(0.9); }
        }

        /* 场景3可见性：73%-100% (9.5s - 13s) */
        @keyframes scene3-fade {
            0%, 72% { opacity: 0; visibility: hidden; }
            73%, 100% { opacity: 1; visibility: visible; }
        }

        /* 成功图标弹出 */
        @keyframes pop-in {
            0%, 74% { opacity: 0; transform: scale(0.5); }
            78%, 100% { opacity: 1; transform: scale(1); }
        }

        /* 成功文字 */
        @keyframes tick-fade-final { 0%, 76% { opacity: 0; } 80%, 100% { opacity: 1; } }

        /* 底部按钮脉冲及呼吸 */
        @keyframes success-btn-anim {
            0%, 78% { opacity: 0; transform: translateY(15px) scale(1); }
            82% { opacity: 1; transform: translateY(0) scale(1); }
            88% { transform: scale(1.05); }
            94% { transform: scale(1); }
            100% { opacity: 1; transform: translateY(0); }
        }

        /* 持续循环的小动画 */
        @keyframes rotateFull { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes breathingIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

    </style>

    <!-- 背景颜色 -->
    <rect width="1000" height="562.5" fill="#ffffff" />

    <!-- 场景 1: 选择界面 -->
    <g class="scene-selection">
        <rect x="150" y="50" width="700" height="460" rx="12" fill="#fff" stroke="#eee" stroke-width="1" />
        <rect x="150" y="50" width="700" height="35" rx="12" fill="#f1f3f5" />
        <circle cx="175" cy="67.5" r="4" fill="#ff5f56" />
        <circle cx="191" cy="67.5" r="4" fill="#ffbd2e" />
        <circle cx="207" cy="67.5" r="4" fill="#27c93f" />

        <g transform="translate(200, 110)">
            <rect width="110" height="36" rx="6" fill="none" stroke="#0052D9" stroke-width="2" />
            <text x="55" y="24" text-anchor="middle" font-size="14" font-weight="bold" fill="#0052D9" class="text">中文 (CN)</text>
            <path d="M135 18 L155 18 M148 11 L155 18 L148 25" fill="none" stroke="#999" stroke-width="2.5" />
            <g transform="translate(180, 0)">
                <rect width="110" height="36" rx="6" fill="none" stroke="#0052D9" stroke-width="2" />
                <text x="55" y="24" text-anchor="middle" font-size="14" font-weight="bold" fill="#0052D9" class="text">英文 (EN)</text>
            </g>
        </g>

        <g transform="translate(200, 175)">
            <g class="row-1" transform="translate(0, 0)">
                <g class="item-anim-wrapper">
                    <rect width="600" height="42" rx="8" fill="#f8fafc" />
                    <rect x="12" y="12" width="18" height="18" rx="4" fill="none" stroke="#ddd" stroke-width="2" />
                    <rect x="12" y="12" width="18" height="18" rx="2" fill="#0052D9" class="checkbox-tick" />
                    <text x="21" y="26" text-anchor="middle" font-size="12" fill="#fff" class="text checkbox-tick">✓</text>
                    <text x="45" y="26" font-size="13" fill="#1d2129" class="text">10 个页面</text>
                </g>
            </g>
            <g class="row-2" transform="translate(0, 52)">
                <g class="item-anim-wrapper">
                    <rect width="600" height="42" rx="8" fill="#f8fafc" />
                    <rect x="12" y="12" width="18" height="18" rx="4" fill="none" stroke="#ddd" stroke-width="2" />
                    <rect x="12" y="12" width="18" height="18" rx="2" fill="#0052D9" class="checkbox-tick" />
                    <text x="21" y="26" text-anchor="middle" font-size="12" fill="#fff" class="text checkbox-tick">✓</text>
                    <text x="45" y="26" font-size="13" fill="#1d2129" class="text">30 个产品</text>
                </g>
            </g>
            <g class="row-3" transform="translate(0, 104)">
                <g class="item-anim-wrapper">
                    <rect width="600" height="42" rx="8" fill="#f8fafc" />
                    <rect x="12" y="12" width="18" height="18" rx="4" fill="none" stroke="#ddd" stroke-width="2" />
                    <rect x="12" y="12" width="18" height="18" rx="2" fill="#0052D9" class="checkbox-tick" />
                    <text x="21" y="26" text-anchor="middle" font-size="12" fill="#fff" class="text checkbox-tick">✓</text>
                    <text x="45" y="26" font-size="13" fill="#1d2129" class="text">50 篇文章</text>
                </g>
            </g>
        </g>

        <g transform="translate(200, 355)">
            <text y="0" font-size="12" fill="#86909c" class="text">翻译模式</text>
            <g transform="translate(0, 15)">
                <rect width="290" height="42" rx="8" fill="none" stroke="#eee" stroke-width="2" class="mode-btn-fast" />
                <text x="145" y="26" text-anchor="middle" font-size="14" font-weight="600" fill="#86909c" class="text mode-btn-fast-text">AI 快速翻译</text>
                <g transform="translate(310, 0)" opacity="0.5">
                    <rect width="290" height="42" rx="8" fill="none" stroke="#eee" stroke-width="2" />
                    <text x="145" y="26" text-anchor="middle" font-size="14" font-weight="600" fill="#86909c" class="text">AI 深度翻译</text>
                </g>
            </g>
        </g>
    </g>

    <!-- 场景 2: AI 处理中 -->
    <g class="scene-processing">
        <circle cx="500" cy="281" r="70" fill="none" stroke="#0052D9" stroke-width="2" stroke-dasharray="6,6" class="ring" />
        <g class="ai-icon-wrapper">
            <path transform="translate(465, 245) scale(0.068)" fill="#0052D9" d="M178.086957 700.326957m-63.814493 0a63.814493 63.814493 0 1 0 127.628985 0 63.814493 63.814493 0 1 0-127.628985 0ZM821.129275 260.006957h103.438841v504.134492h-103.438841zM566.01971 260.006957h-116.053333l-189.068986 504.57971h105.071305l52.980869-135.791305h181.648696l44.521739 135.791305h105.961739z m-117.092174 279.893333l57.136232-159.833044h5.936232l56.987826 159.833044z" />
        </g>
    </g>

    <!-- 场景 3: 成功 -->
    <g class="success-overlay">
        <rect width="1000" height="562.5" fill="rgba(255,255,255,0.98)" />
        <circle cx="500" cy="230" r="35" fill="#52C41A" class="success-icon-bg" />
        <path d="M485 230 L495 240 L515 220" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="success-icon-bg" />
        <text x="500" y="295" text-anchor="middle" font-size="18" font-weight="600" fill="#52C41A" letter-spacing="1" class="text success-msg">网站翻译成功</text>
        <g class="btn-pulse">
            <rect x="420" y="340" width="160" height="45" rx="6" fill="#0052D9" />
            <text x="500" y="368" text-anchor="middle" font-size="14" font-weight="500" fill="white" class="text">前往编辑</text>
        </g>
    </g>
</svg>