<svg viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
    <style>
        :root {
            --brand-blue: #0052D9;
            --text-main: #1d2129;
            --bg-gray: #f2f3f5;
            --border-color: #e5e6eb;
            /* 总循环时长: 14s动画 + 2s停顿 = 16s */
            --loop-duration: 16s;
        }

        .canvas-bg { fill: #ffffff; }
        .browser-chrome { fill: #f1f3f5; stroke: var(--border-color); stroke-width: 1; }
        .dot-red { fill: #ff5f56; }
        .dot-yellow { fill: #ffbd2e; }
        .dot-green { fill: #27c93f; }
        
        /* 核心滚动动画：映射到总时间轴 50%(8s) 开始，87.5%(14s) 结束 */
        .web-page-content {
            animation: fullPageScroll var(--loop-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }

        /* 布局1：初始状态，43.75%(7s) 时消失 */
        .layout-v1 {
            animation: layoutV1Loop var(--loop-duration) forwards infinite;
        }

        /* 布局2：修复后一致的 2x4，46.8%(7.5s) 时显现 */
        .layout-v2 {
            animation: layoutV2Loop var(--loop-duration) forwards infinite;
        }

        /* 组件样式 */
        .card-bg { fill: white; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.05)); }
        .img-box { fill: #e5e6eb; }
        .line-main { fill: var(--bg-gray); }

        /* AI 输入框：0.5s起，4s灭 */
        .ai-input-group {
            animation: aiInputLoop var(--loop-duration) forwards infinite;
        }
        .typewriter-mask {
            animation: typingLoop var(--loop-duration) steps(18) infinite;
        }

        /* AI 处理状态：4s起，7.5s灭 */
        .ai-status {
            animation: aiStatusLoop var(--loop-duration) forwards infinite;
        }
        .ring {
            fill: none;
            stroke: var(--brand-blue);
            stroke-width: 2;
            stroke-dasharray: 8, 4;
            transform-origin: 500px 300px;
            animation: rotate 3.5s linear infinite;
        }
        .ai-icon-wrapper {
            transform-origin: 500px 300px;
            animation: breathingIcon 2s infinite ease-in-out;
        }

        /* --- 循环动画关键帧 --- */

        /* 打字机遮罩动画 */
        @keyframes typingLoop {
            0%, 6.25% { width: 0; } /* 0s - 1s */
            18.75%, 100% { width: 350px; } /* 3s 之后保持 */
        }

        /* AI 输入框整体出现与消失 */
        @keyframes aiInputLoop {
            0%, 3.125% { opacity: 0; transform: translate(250px, 320px); } /* 0s - 0.5s */
            6.25%, 25% { opacity: 1; transform: translate(250px, 268px); } /* 1s - 4s */
            28.125%, 100% { opacity: 0; transform: translate(250px, 268px); visibility: hidden; } /* 4.5s 消失 */
        }

        /* AI 旋转状态层 */
        @keyframes aiStatusLoop {
            0%, 25% { opacity: 0; } /* 4s 前隐藏 */
            31.25%, 43.75% { opacity: 1; } /* 5s - 7s 显示 */
            46.875%, 100% { opacity: 0; } /* 7.5s 消失 */
        }

        /* 布局V1隐藏 */
        @keyframes layoutV1Loop {
            0%, 43.75% { opacity: 1; visibility: visible; } /* 0s - 7s */
            46.875%, 100% { opacity: 0; visibility: hidden; } /* 7.5s 后消失 */
        }

        /* 布局V2显现 */
        @keyframes layoutV2Loop {
            0%, 46.875% { opacity: 0; transform: translateY(20px); } /* 7.5s 前隐藏 */
            50%, 100% { opacity: 1; transform: translateY(0); } /* 8s 后显现 */
        }

        /* 页面滚动：8s开始移动，14s到达，14-16s停顿 */
        @keyframes fullPageScroll { 
            0%, 50% { transform: translateY(0); } /* 0s - 8s 不动 */
            87.5%, 100% { transform: translateY(-500px); } /* 14s 到达终点并保持到 16s */
        }

        /* 辅助小动画（独立循环） */
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes breathingIcon { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    </style>

    <!-- 剪切蒙版 -->
    <defs>
        <clipPath id="browser-view">
            <rect x="0" y="40" width="1000" height="560" />
        </clipPath>
        
        <g id="card-v1">
            <rect width="180" height="200" rx="12" class="card-bg" />
            <rect x="15" y="15" width="150" height="130" rx="8" class="img-box" />
            <rect x="40" y="155" width="100" height="10" rx="3" class="line-main" />
            <rect x="65" y="175" width="50" height="10" rx="3" class="line-main" />
        </g>
        
        <g id="card-v2">
            <rect width="400" height="100" rx="12" class="card-bg" />
            <rect x="15" y="15" width="70" height="70" rx="8" class="img-box" />
            <rect x="100" y="35" width="240" height="10" rx="3" class="line-main" />
            <rect x="100" y="55" width="120" height="10" rx="3" class="line-main" />
        </g>
    </defs>

    <rect width="1000" height="600" class="canvas-bg" />

    <g clip-path="url(#browser-view)">
        <g class="web-page-content">
            <text x="500" y="100" text-anchor="middle" font-family="sans-serif" font-weight="600" font-size="28" fill="#1d2129">核心团队成员</text>
            
            <g class="layout-v1">
                <use href="#card-v1" x="90" y="140" />
                <use href="#card-v1" x="310" y="140" />
                <use href="#card-v1" x="530" y="140" />
                <use href="#card-v1" x="750" y="140" />
                <use href="#card-v1" x="90" y="370" />
                <use href="#card-v1" x="310" y="370" />
                <use href="#card-v1" x="530" y="370" />
                <use href="#card-v1" x="750" y="370" />
            </g>

            <g class="layout-v2">
                <use href="#card-v2" x="80" y="140" />
                <use href="#card-v2" x="80" y="260" />
                <use href="#card-v2" x="80" y="380" />
                <use href="#card-v2" x="80" y="500" />
                <use href="#card-v2" x="80" y="620" />
                <use href="#card-v2" x="80" y="740" />
                <use href="#card-v2" x="520" y="140" />
                <use href="#card-v2" x="520" y="260" />
                <use href="#card-v2" x="520" y="380" />
                <use href="#card-v2" x="520" y="500" />
                <use href="#card-v2" x="520" y="620" />
                <use href="#card-v2" x="520" y="740" />
            </g>
        </g>
    </g>

    <g>
        <rect width="1000" height="40" class="browser-chrome" />
        <circle cx="20" cy="20" r="6" class="dot-red" />
        <circle cx="40" cy="20" r="6" class="dot-yellow" />
        <circle cx="60" cy="20" r="6" class="dot-green" />
        <rect x="90" y="14" width="120" height="12" rx="6" fill="#e5e6eb" />
    </g>

    <g class="ai-input-group">
        <rect width="500" height="64" rx="32" fill="white" stroke="var(--brand-blue)" stroke-width="2" style="filter: drop-shadow(0 10px 30px rgba(0,82,217,0.2));" />
        <path d="M19,12L12.5,9L11,2L9.5,9L3,12L9.5,15L11,22L12.5,15L19,12Z" fill="var(--brand-blue)" transform="translate(25, 20) scale(1.2)" />
        <clipPath id="typing-clip">
            <rect x="65" y="0" width="0" height="64" class="typewriter-mask" />
        </clipPath>
        <text x="70" y="40" font-family="sans-serif" font-size="18" fill="var(--text-main)" clip-path="url(#typing-clip)">帮我将团队成员修改为左图右文结构</text>
    </g>

    <g class="ai-status">
        <circle cx="500" cy="300" r="80" class="ring" />
        <g class="ai-icon-wrapper">
            <g transform="translate(465, 265) scale(0.068)">
                <path 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" fill="var(--brand-blue)"></path>
                <path 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" fill="var(--brand-blue)"></path>
            </g>
        </g>
    </g>
</svg>