<svg width="1000" height="600" viewBox="0 0 1000 600" fill="none" xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <style>
                :root {
                    --brand-blue: #0052D9;
                    --success-green: #52C41A;
                    --text-main: #1d2129;
                    /* 总时长 = 16s(原始动画逻辑) + 2s(停顿等待) */
                    --duration: 18s;
                }

                .canvas-svg {
                    width: 1000px;
                    height: 600px;
                    background: #ffffff;
                    position: relative;
                    font-family: -apple-system, "SF Pro Display", "PingFang SC", sans-serif;
                    overflow: hidden;
                    margin: 0;
                    padding: 0;
                }

                /* --- 场景1：输入框 --- */
                .scene-input {
                    position: absolute;
                    top: 50%; left: 50%;
                    transform: translate(-50%, -50%);
                    width: 460px; height: 60px;
                    background: #fff;
                    border: 2px solid var(--brand-blue);
                    border-radius: 30px;
                    display: flex; align-items: center;
                    padding: 0 25px;
                    box-shadow: 0 10px 30px rgba(0,82,217,0.1);
                    z-index: 10;
                    box-sizing: border-box;
                    animation: inputFadeLoop var(--duration) infinite;
                }

                .typewriter {
                    font-size: 20px;
                    color: var(--text-main);
                    white-space: nowrap;
                    overflow: hidden;
                    width: 0;
                    border-right: 3px solid var(--brand-blue);
                    /* 保持打字机阶梯感，使用 steps(11) 配合百分比控制 */
                    animation: typingLoop var(--duration) steps(1, end) infinite, cursorBlink 0.7s infinite;
                }

                /* --- 场景2：定制AI图标 --- */
                .scene-ai-icon {
                    position: absolute;
                    top: 50%; left: 50%;
                    transform: translate(-50%, -50%);
                    width: 200px; height: 200px;
                    opacity: 0;
                    display: flex; justify-content: center; align-items: center;
                    animation: aiIconLoop var(--duration) infinite;
                }

                .ring {
                    position: absolute;
                    width: 160px; height: 160px;
                    border: 2px dashed var(--brand-blue);
                    border-radius: 50%;
                    animation: rotateFull 4s linear infinite;
                }

                .ai-svg-container {
                    width: 80px; height: 80px;
                    display: flex; justify-content: center; align-items: center;
                    animation: breathingIcon 2s infinite ease-in-out;
                }

                /* --- 场景3：浏览器内容 --- */
                .browser {
                    position: absolute;
                    top: 5%; left: 5%; 
                    width: 90%; height: 90%;
                    background: #fff;
                    border-radius: 12px;
                    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
                    border: 1px solid #eee;
                    opacity: 0;
                    transform: translateY(30px);
                    overflow: hidden;
                    animation: browserLoop var(--duration) infinite;
                }

                .browser-header { height: 40px; background: #f1f3f5; display: flex; align-items: center; padding: 0 20px; }
                .dot { width: 12px; height: 12px; border-radius: 50%; background: #ff5f56; margin-right: 8px; }
                .web-content { animation: pageScrollLoop var(--duration) infinite; }

                .banner {
                    height: 400px; background: linear-gradient(135deg, #0052D9 0%, #00A3FF 100%);
                    color: white; display: flex; flex-direction: column; justify-content: center; padding: 0 80px;
                }
                .banner h1 { font-size: 48px; margin: 0; opacity: 0; animation: slideUpLoop var(--duration) infinite; }
                .banner p { font-size: 20px; margin-top: 15px; opacity: 0; animation: slideUpLoopDesc var(--duration) infinite; }

                .cards { display: flex; justify-content: space-around; padding: 60px 40px; }
                .card { width: 28%; height: 180px; background: #f8fafc; border-radius: 12px; opacity: 0; transform: scale(0.8); }
                .card:nth-child(1) { animation: popInCard1 var(--duration) infinite; }
                .card:nth-child(2) { animation: popInCard2 var(--duration) infinite; }
                .card:nth-child(3) { animation: popInCard3 var(--duration) infinite; }

                /* --- 场景4：成功层 --- */
                .success-overlay {
                    position: absolute;
                    top: 0; left: 0; width: 100%; height: 100%;
                    background: rgba(255, 255, 255, 0.98);
                    display: flex; flex-direction: column; justify-content: center; align-items: center;
                    opacity: 0; visibility: hidden;
                    z-index: 100;
                    animation: finalFadeLoop var(--duration) infinite;
                }

                .success-icon {
                    width: 70px; height: 70px; background: var(--success-green); border-radius: 100px;
                    display: flex; justify-content: center; align-items: center; margin-bottom: 15px;
                    opacity: 0; transform: scale(0.5);
                    animation: popInSuccess var(--duration) infinite;
                }

                .btn-pulse {
                    padding: 12px 36px; background: var(--brand-blue); color: white; border-radius: 6px;
                    font-size: 14px; font-weight: 500; opacity: 0;
                    box-shadow: 0 4px 12px rgba(0, 82, 217, 0.2);
                    animation: slideUpBtn var(--duration) infinite;
                }

                /* --- 动画帧逻辑 --- */

                /* 打字机循环：0.5s开始，3.0s结束打字 (共11步) */
                @keyframes typingLoop {
                    0%, 2.7% { width: 0; }
                    4.0% { width: 21px; } 5.3% { width: 42px; } 6.6% { width: 63px; }
                    7.9% { width: 84px; } 9.2% { width: 105px; } 10.5% { width: 126px; }
                    11.8% { width: 147px; } 13.1% { width: 168px; } 14.4% { width: 189px; }
                    15.7% { width: 210px; }
                    16.6%, 22.2% { width: 230px; } /* 3s-4s 保持 */
                    23%, 100% { width: 0; }
                }

                @keyframes inputFadeLoop {
                    0%, 20% { opacity: 1; visibility: visible; }
                    22.2%, 100% { opacity: 0; visibility: hidden; }
                }

                /* AI图标循环：4s-7s */
                @keyframes aiIconLoop {
                    0%, 22.2% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
                    25%, 36% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
                    38.8%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); }
                }

                /* 浏览器循环：7s开始显示，15s开始滚动，16s结束显示 */
                @keyframes browserLoop {
                    0%, 38.8% { opacity: 0; transform: translateY(30px); }
                    44.4%, 88.8% { opacity: 1; transform: translateY(0); }
                    91%, 100% { opacity: 0; transform: translateY(0); }
                }

                @keyframes slideUpLoop {
                    0%, 44.4% { opacity: 0; transform: translateY(20px); }
                    50%, 88.8% { opacity: 1; transform: translateY(0); }
                    91%, 100% { opacity: 0; }
                }

                @keyframes slideUpLoopDesc {
                    0%, 46% { opacity: 0; transform: translateY(20px); }
                    52%, 88.8% { opacity: 1; transform: translateY(0); }
                    91%, 100% { opacity: 0; }
                }

                @keyframes popInCard1 { 0%, 50% { opacity: 0; transform: scale(0.8); } 55%, 88.8% { opacity: 1; transform: scale(1); } 91%, 100% { opacity: 0; } }
                @keyframes popInCard2 { 0%, 52% { opacity: 0; transform: scale(0.8); } 57%, 88.8% { opacity: 1; transform: scale(1); } 91%, 100% { opacity: 0; } }
                @keyframes popInCard3 { 0%, 54% { opacity: 0; transform: scale(0.8); } 59%, 88.8% { opacity: 1; transform: scale(1); } 91%, 100% { opacity: 0; } }

                /* 页面滚动：12s(66.6%) - 15s(83.3%) */
                @keyframes pageScrollLoop {
                    0%, 66.6% { transform: translateY(0); }
                    83.3%, 88.8% { transform: translateY(-400px); }
                    91%, 100% { transform: translateY(0); }
                }

                /* 成功层循环：15s(83.3%)开始，停留至18s(100%)重置 */
                @keyframes finalFadeLoop {
                    0%, 83.3% { opacity: 0; visibility: hidden; }
                    86%, 98% { opacity: 1; visibility: visible; }
                    100% { opacity: 0; visibility: hidden; }
                }

                @keyframes popInSuccess {
                    0%, 84.4% { opacity: 0; transform: scale(0.5); }
                    88.8%, 98% { opacity: 1; transform: scale(1); }
                    100% { opacity: 0; }
                }

                @keyframes slideUpBtn {
                    0%, 87.2% { opacity: 0; transform: translateY(20px); }
                    91.6%, 98% { opacity: 1; transform: translateY(0); }
                    100% { opacity: 0; }
                }

                /* 基础辅助动画 */
                @keyframes cursorBlink { 50% { border-color: transparent; } }
                @keyframes rotateFull { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
                @keyframes breathingIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
            </style>

            <div class="canvas-svg">
                <!-- 阶段1: 输入 -->
                <div class="scene-input">
                    <div class="typewriter">请帮我生成一个公司官网</div>
                </div>

                <!-- 阶段2: AI图标 -->
                <div class="scene-ai-icon">
                    <div class="ring"></div>
                    <div class="ai-svg-container">
                        <svg width="80" height="80" viewBox="0 0 1038 1024" xmlns="http://www.w3.org/2000/svg">
                            <path 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 0Z"></path>
                            <path fill="#0052D9" d="M821.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"></path>
                        </svg>
                    </div>
                </div>

                <!-- 阶段3: 浏览器 -->
                <div class="browser">
                    <div class="browser-header">
                        <div class="dot"></div>
                        <div class="dot" style="background:#ffbd2e"></div>
                        <div class="dot" style="background:#27c93f"></div>
                        <div style="margin-left:20px; width:200px; height:20px; background:#e5e7eb; border-radius:10px;"></div>
                    </div>
                    <div class="web-content">
                        <div class="banner">
                            <h1>创意 · 数字 · 未来</h1>
                            <p>让AI为您构建无限可能的品牌官网</p>
                        </div>
                        <div class="cards">
                            <div class="card"></div>
                            <div class="card"></div>
                            <div class="card"></div>
                        </div>
                    </div>
                </div>

                <!-- 阶段4: 成功 -->
                <div class="success-overlay">
                    <div class="success-icon">
                        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </div>
                    <div style="color:var(--success-green); font-size:14px; margin-bottom:20px; font-weight:bold;">生成成功</div>
                    <div class="btn-pulse">前往编辑</div>
                </div>
            </div>
        </div>
    </foreignObject>
</svg>