@mumulinya167/ccm-pet-assets 2.0.0

package/assets/clawd/clawd-working-typing-boss.svg

@@ -0,0 +1,307 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <!-- ✅ FINAL · clawd 老板皮肤定稿版 (2026-04-16 鹿鹿确认)
+       定稿 = v13. 后续 v14/v15 尝试加墨镜反光滑动被否, 画蛇添足, 留档不删
+
+       动作清单:
+         - 踱步 pacing gait (左两腿 / 右两腿 交替抬, 周期 2.2s 气定神闲)
+         - body-walk 身体起伏 + 左右重心转移 (锁相踱步)
+         - 金币摆 (pivot 金币顶部挂点, rotate ±3°, 锁相 body-walk)
+         - 雪茄摆 (pivot 手握端, rotate -150°±3°, 周期 2.8s 互质自主节奏)
+         - 影子跟随 (translateX 跟 body-walk, scale+opacity 脉动)
+         - 代码烟雾 (8 符号从火星飘起, 已在 v10 修好初始帧 bug)
+         - 外层 rotate(+1°) 克制抬头气场
+         - 墨镜 / V 形金链条 / 雪茄火星明灭 (v8 / v10 继承)
+
+       v13 · v12 基础上修影子 (让影子跟身体走 + 改对相位)
+       v12 → v13 修改:
+         1. 影子加 translateX 跟随 body-walk 左右晃:
+            - 身体 25% 向右偏 +0.15 → 影子也 +0.15
+            - 身体 75% 向左偏 -0.15 → 影子也 -0.15
+         2. scale/opacity 相位修正:
+            - v12 错在: 身体抬起瞬间 (25%/75%) 影子变大+深, 反物理
+            - v13 改: 身体下沉瞬间 (0%/50%/100%) 影子变大+深 (贴地重, 压得深)
+                     身体抬起瞬间 (25%/75%) 影子变小+浅 (离地轻, 影子收敛)
+         3. 幅度保持克制 (scale ±1.5%, opacity 0.5↔0.52) — 身体本身起伏就小
+
+       其他保留 v12 (踱步 pacing gait / 金币摆 / 雪茄摆 / 代码烟雾)
+
+       v11 → v12 修改:
+         1. 金币摆 (coin-sway):
+            - pivot 金币顶部挂点 (12.7, 10.9275) — 链条汇合点, 模拟从链条挂下
+            - rotate ±3°, 周期 1.1s + alternate = 来回 2.2s 锁相 body-walk
+            - 金币外层包一层 g.coin-sway, 内层保持原 translate+scale
+         2. 雪茄摆 bug 修复:
+            - v11 用 transform-box: fill-box + 百分比 origin
+              SVG <g> 上浏览器 fill-box 支持不一致, 可能导致 animation 不生效
+            - 改成 carrying/pack-swing 同款的绝对坐标 origin (1px 10.5px), 稳妥
+            - 雪茄结构重构:
+              * 去掉外层 <g transform="translate(1 10)">, rects 坐标直接 shift 到 (1..6, 10..11)
+              * 内层新增 <g transform="rotate(-150 1 10.5)"> 做基础 -150° 旋转
+              * 外层 .cigar-sway 用 CSS 叠加 ±3° 旋转, pivot 同样 (1, 10.5)
+              * 两层 rotate 绕同一 pivot, 矩阵复合 = rotate(-150 ± 3°)
+         3. 火星全局坐标 (-2.9, 8.25) 不变 (验算: (5.5, 10.5) 绕 (1, 10.5) rotate(-150) = (-2.9, 8.25))
+            codesmoke 起点保持不变
+
+       为什么金币 pivot 在顶部而不是中心:
+         物理上金币是从链条挂点吊下, 摆动轴 = 链条末端 = 金币顶部中心
+         pivot 放金币底部会看起来像"金币从底部被钉住", 反物理
+
+       为什么金币周期对齐 body-walk (2.2s) 而不是错开:
+         金币挂在身上, 走路时自然应和身体律动, 不是独立节奏
+         错开反而显得金币有自主意识, 违和
+         雪茄是"大佬主动叼的", 有自主节奏 (2.8s 互质) 才像"悠着抽"
+
+       其他保留 v11 (踱步 pacing gait / body-walk / 阴影脉动 / 代码烟雾) -->
+
+  <defs>
+    <filter id="smoke-glow" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur stdDeviation="0.3" result="glow"/>
+      <feMerge>
+        <feMergeNode in="glow"/>
+        <feMergeNode in="glow"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <style>
+      .body-walk {
+        transform-origin: 7.5px 15px;
+        animation: body-walk 2.2s infinite ease-in-out;
+      }
+      .step-left {
+        animation: step-left 2.2s infinite ease-in-out;
+      }
+      .step-right {
+        animation: step-right 2.2s infinite ease-in-out;
+      }
+      .coin-sway {
+        transform-origin: 12.7px 10.9275px;
+        animation: coin-sway 1.1s infinite alternate ease-in-out;
+      }
+      .cigar-sway {
+        transform-origin: 1px 10.5px;
+        animation: cigar-sway 2.8s infinite alternate ease-in-out;
+      }
+      .shadow-pulse {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-pulse 2.2s infinite ease-in-out;
+      }
+
+      @keyframes body-walk {
+        0%, 50%, 100% { transform: translate(0px, 0.5px); }
+        25%           { transform: translate(0.15px, 0px); }
+        75%           { transform: translate(-0.15px, 0px); }
+      }
+      @keyframes step-left {
+        0%, 15%, 35%, 100% { transform: translateY(0); }
+        25%                { transform: translateY(-0.7px); }
+      }
+      @keyframes step-right {
+        0%, 65%, 85%, 100% { transform: translateY(0); }
+        75%                { transform: translateY(-0.7px); }
+      }
+      @keyframes coin-sway {
+        0%   { transform: rotate(-3deg); }
+        100% { transform: rotate(3deg); }
+      }
+      @keyframes cigar-sway {
+        0%   { transform: rotate(-3deg); }
+        100% { transform: rotate(3deg); }
+      }
+      @keyframes shadow-pulse {
+        0%, 50%, 100% { transform: translate(0px, 0px)     scale(1.015); opacity: 0.52; }
+        25%           { transform: translate(0.15px, 0px)  scale(1);     opacity: 0.5;  }
+        75%           { transform: translate(-0.15px, 0px) scale(1);     opacity: 0.5;  }
+      }
+    </style>
+  </defs>
+
+  <rect class="shadow-pulse" id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+  <g transform="rotate(1 7.5 15)">
+    <g id="master-group">
+
+      <g id="legs" fill="#DE886D">
+        <rect class="step-left"  id="outer-left-leg"  x="3"  y="13" width="1" height="2"/>
+        <rect class="step-left"  id="inner-left-leg"  x="5"  y="13" width="1" height="2"/>
+        <rect class="step-right" id="inner-right-leg" x="9"  y="13" width="1" height="2"/>
+        <rect class="step-right" id="outer-right-leg" x="11" y="13" width="1" height="2"/>
+      </g>
+
+      <g class="body-walk">
+
+        <g id="body-parts" fill="#DE886D">
+          <rect id="torso"     x="2"  y="6" width="11" height="7"/>
+          <rect id="left-arm"  x="0"  y="9" width="2"  height="2"/>
+          <rect id="right-arm" x="13" y="9" width="2"  height="2"/>
+        </g>
+
+        <g id="eyes-color-group" fill="#000000">
+          <rect id="left-eye"  x="4"  y="8" width="1" height="2"/>
+          <rect id="right-eye" x="10" y="8" width="1" height="2"/>
+        </g>
+
+        <g id="chain" fill="none" stroke="#FFD700" stroke-width="0.15">
+          <circle cx="2.200" cy="8.800"  r="0.22"/>
+          <circle cx="2.856" cy="9.207"  r="0.22"/>
+          <circle cx="3.513" cy="9.607"  r="0.22"/>
+          <circle cx="4.169" cy="9.994"  r="0.22"/>
+          <circle cx="4.825" cy="10.361" r="0.22"/>
+          <circle cx="5.481" cy="10.705" r="0.22"/>
+          <circle cx="6.138" cy="11.019" r="0.22"/>
+          <circle cx="6.794" cy="11.302" r="0.22"/>
+          <circle cx="7.450" cy="11.550" r="0.22"/>
+          <circle cx="8.106" cy="11.764" r="0.22"/>
+          <circle cx="8.763" cy="11.944" r="0.22"/>
+          <circle cx="9.419" cy="12.092" r="0.22"/>
+          <circle cx="10.075" cy="12.211" r="0.22"/>
+          <circle cx="10.731" cy="12.306" r="0.22"/>
+          <circle cx="11.388" cy="12.382" r="0.22"/>
+          <circle cx="12.044" cy="12.444" r="0.22"/>
+          <circle cx="12.700" cy="12.500" r="0.22"/>
+          <circle cx="12.800" cy="8.800"  r="0.22"/>
+          <circle cx="12.780" cy="9.716"  r="0.22"/>
+          <circle cx="12.760" cy="10.565" r="0.22"/>
+          <circle cx="12.740" cy="11.305" r="0.22"/>
+          <circle cx="12.720" cy="11.936" r="0.22"/>
+          <circle cx="12.700" cy="12.500" r="0.22"/>
+        </g>
+
+        <g id="glasses" transform="translate(1.325 7.375) scale(0.65)">
+          <g fill="#000000">
+            <rect x="0"  y="0" width="19" height="1"/>
+            <rect x="0"  y="1" width="8"  height="1"/>
+            <rect x="11" y="1" width="8"  height="1"/>
+            <rect x="0"  y="2" width="8"  height="1"/>
+            <rect x="11" y="2" width="8"  height="1"/>
+            <rect x="1"  y="3" width="6"  height="1"/>
+            <rect x="12" y="3" width="6"  height="1"/>
+            <rect x="2"  y="4" width="4"  height="1"/>
+            <rect x="13" y="4" width="4"  height="1"/>
+          </g>
+          <g fill="#FFFFFF">
+            <rect x="5"  y="1" width="1" height="1"/>
+            <rect x="4"  y="2" width="1" height="1"/>
+            <rect x="16" y="1" width="1" height="1"/>
+            <rect x="15" y="2" width="1" height="1"/>
+          </g>
+        </g>
+
+        <g class="coin-sway">
+          <g id="coin" transform="translate(11.1275 10.9275) scale(0.185)">
+            <g fill="#CC6600">
+              <rect x="6" y="0"  width="5"  height="1"/>
+              <rect x="4" y="1"  width="9"  height="1"/>
+              <rect x="3" y="2"  width="11" height="1"/>
+              <rect x="2" y="3"  width="13" height="1"/>
+              <rect x="1" y="4"  width="15" height="2"/>
+              <rect x="0" y="6"  width="17" height="5"/>
+              <rect x="1" y="11" width="15" height="2"/>
+              <rect x="2" y="13" width="13" height="1"/>
+              <rect x="3" y="14" width="11" height="1"/>
+              <rect x="4" y="15" width="9"  height="1"/>
+              <rect x="6" y="16" width="5"  height="1"/>
+            </g>
+            <g fill="#FFD700">
+              <rect x="7" y="1"  width="3"  height="1"/>
+              <rect x="5" y="2"  width="7"  height="1"/>
+              <rect x="4" y="3"  width="9"  height="1"/>
+              <rect x="3" y="4"  width="11" height="1"/>
+              <rect x="2" y="5"  width="13" height="2"/>
+              <rect x="1" y="7"  width="15" height="3"/>
+              <rect x="2" y="10" width="13" height="2"/>
+              <rect x="3" y="12" width="11" height="1"/>
+              <rect x="4" y="13" width="9"  height="1"/>
+              <rect x="5" y="14" width="7"  height="1"/>
+              <rect x="7" y="15" width="3"  height="1"/>
+            </g>
+            <g fill="#FF9900">
+              <rect x="8"  y="4"  width="1" height="9"/>
+              <rect x="6"  y="5"  width="5" height="1"/>
+              <rect x="6"  y="6"  width="1" height="1"/>
+              <rect x="6"  y="7"  width="2" height="1"/>
+              <rect x="7"  y="8"  width="1" height="1"/>
+              <rect x="9"  y="8"  width="1" height="1"/>
+              <rect x="9"  y="9"  width="2" height="1"/>
+              <rect x="10" y="10" width="1" height="1"/>
+              <rect x="6"  y="11" width="5" height="1"/>
+            </g>
+            <g fill="#FFEE55">
+              <rect x="6" y="2" width="2" height="1"/>
+              <rect x="5" y="3" width="2" height="1"/>
+            </g>
+          </g>
+        </g>
+
+        <g class="cigar-sway">
+          <g id="cigarette-rotor" transform="rotate(-150 1 10.5)">
+            <rect x="1" y="10" width="1" height="1" fill="#8B4513"/>
+            <rect x="2" y="10" width="3" height="1" fill="#F0E4C8"/>
+            <rect x="5" y="10" width="1" height="1" fill="#FFD700">
+              <animate attributeName="fill"
+                       values="#FFD700;#FF8800;#CC3300;#CC3300;#FFD700"
+                       keyTimes="0;0.1;0.25;0.9;1"
+                       dur="3s"
+                       repeatCount="indefinite"/>
+            </rect>
+          </g>
+        </g>
+
+        <g id="codesmoke" font-family="Consolas, 'Courier New', Menlo, monospace"
+           font-size="1.5" font-weight="bold"
+           text-anchor="middle" dominant-baseline="central"
+           fill="#5A5A5A" filter="url(#smoke-glow)">
+
+          <text x="-2.9" y="8.25" opacity="0">{<animateTransform attributeName="transform" type="translate"
+              values="0,0; 0.5,-3; -0.3,-6; 0.4,-9; -0.2,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="0s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="0s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">;<animateTransform attributeName="transform" type="translate"
+              values="0,0; -0.4,-3; 0.5,-6; -0.3,-9; 0.2,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="0.5s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="0.5s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">&lt;<animateTransform attributeName="transform" type="translate"
+              values="0,0; 0.3,-3; -0.5,-6; 0.2,-9; -0.4,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="1s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="1s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">}<animateTransform attributeName="transform" type="translate"
+              values="0,0; -0.5,-3; 0.4,-6; -0.2,-9; 0.3,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="1.5s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="1.5s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">=<animateTransform attributeName="transform" type="translate"
+              values="0,0; 0.6,-3; -0.2,-6; 0.5,-9; -0.3,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="2s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="2s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">&gt;<animateTransform attributeName="transform" type="translate"
+              values="0,0; -0.3,-3; 0.5,-6; -0.4,-9; 0.2,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="2.5s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="2.5s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">*<animateTransform attributeName="transform" type="translate"
+              values="0,0; 0.4,-3; -0.6,-6; 0.3,-9; -0.5,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="3s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="3s" repeatCount="indefinite"/></text>
+
+          <text x="-2.9" y="8.25" opacity="0">#<animateTransform attributeName="transform" type="translate"
+              values="0,0; -0.5,-3; 0.3,-6; -0.6,-9; 0.4,-12"
+              keyTimes="0;0.25;0.5;0.75;1" dur="4s" begin="3.5s" repeatCount="indefinite"/>
+            <animate attributeName="opacity" values="0;1;1;0.5;0"
+              keyTimes="0;0.12;0.5;0.8;1" dur="4s" begin="3.5s" repeatCount="indefinite"/></text>
+
+        </g>
+
+      </g>
+    </g>
+  </g>
+</svg>

package/assets/clawd/clawd-working-typing.svg

@@ -0,0 +1,273 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ===== Body (KEEP) ===== */
+      .body-bounce {
+        transform-origin: 7.5px 15px;
+        animation: body-bounce 0.35s infinite ease-in-out;
+      }
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      /* ===== Arms (KEEP) ===== */
+      .arm-l-type {
+        transform-origin: 2px 10px;
+        animation: type-l 0.15s infinite ease-in-out;
+      }
+      .arm-r-type {
+        transform-origin: 13px 10px;
+        animation: type-r 0.12s infinite ease-in-out;
+      }
+
+      /* ===== Eyes ===== */
+      .eyes-code {
+        transform-origin: 7.5px 9px;
+        animation: eye-code 10s infinite ease-in-out;
+      }
+
+      /* ===== Code lines: each line grows, holds, then slides up + fades ===== */
+      .code-line {
+        transform-box: fill-box;
+        transform-origin: left center;
+      }
+      .cl1 { animation: cl1 6s infinite; }
+      .cl2 { animation: cl2 6s infinite; }
+      .cl3 { animation: cl3 6s infinite; }
+      .cl4 { animation: cl4 6s infinite; }
+
+      /* Key press flashes — different periods so they look random */
+      .key-flash { opacity: 0; }
+      .kf1 { animation: kflash 0.6s infinite; }
+      .kf2 { animation: kflash 0.8s infinite; animation-delay: -0.25s; }
+      .kf3 { animation: kflash 0.5s infinite; animation-delay: -0.1s; }
+      .kf4 { animation: kflash 0.7s infinite; animation-delay: -0.45s; }
+      .kf5 { animation: kflash 0.55s infinite; animation-delay: -0.3s; }
+      .kf6 { animation: kflash 0.9s infinite; animation-delay: -0.5s; }
+
+      /* Data particles (float up behind screen) */
+      .data-bit { opacity: 0; animation: float-data 1.5s infinite linear; }
+      .d1 { animation-delay: 0s; }
+      .d2 { animation-delay: -0.4s; }
+      .d3 { animation-delay: -0.8s; }
+      .d4 { animation-delay: -1.2s; }
+
+      /* Shadow */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-bob 0.4s infinite ease-in-out;
+      }
+
+      /* ==================== Keyframes ==================== */
+
+      @keyframes body-bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(0.8px); }
+      }
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+      @keyframes shadow-bob {
+        0%, 100% { transform: scaleX(1.02); opacity: 0.5; }
+        50% { transform: scaleX(1.05); opacity: 0.55; }
+      }
+
+      @keyframes type-l {
+        0%   { transform: rotate(-5deg); }
+        25%  { transform: rotate(-38deg); }
+        50%  { transform: rotate(-10deg); }
+        75%  { transform: rotate(-30deg); }
+        100% { transform: rotate(-5deg); }
+      }
+      @keyframes type-r {
+        0%   { transform: rotate(5deg); }
+        25%  { transform: rotate(38deg); }
+        50%  { transform: rotate(10deg); }
+        75%  { transform: rotate(30deg); }
+        100% { transform: rotate(5deg); }
+      }
+
+      /* Eyes: long keyboard squint → 2 consecutive scans → keyboard */
+      @keyframes eye-code {
+        0%   { transform: translate(0, 1px) scaleY(0.6); }
+        14%  { transform: translate(0, 1px) scaleY(0.6); }
+        15%  { transform: translate(0, 1px) scaleY(0.1); }
+        16%  { transform: translate(0, 1px) scaleY(0.6); }
+        36%  { transform: translate(0, 1px) scaleY(0.6); }
+        37%  { transform: translate(0, 1px) scaleY(0.1); }
+        38%  { transform: translate(0, 1px) scaleY(0.6); }
+        54%  { transform: translate(0, 1px) scaleY(0.6); }
+        55%  { transform: translate(0, 1px) scaleY(0.1); }
+        57%  { transform: translate(-1px, -0.5px) scaleY(1); }
+        62%  { transform: translate(1.5px, -0.5px) scaleY(1); }
+        64%  { transform: translate(-0.5px, -0.3px) scaleY(1); }
+        69%  { transform: translate(1.5px, -0.5px) scaleY(1); }
+        71%  { transform: translate(1px, -0.3px) scaleY(0.1); }
+        73%  { transform: translate(0, 1px) scaleY(0.6); }
+        89%  { transform: translate(0, 1px) scaleY(0.6); }
+        90%  { transform: translate(0, 1px) scaleY(0.1); }
+        91%  { transform: translate(0, 1px) scaleY(0.6); }
+        100% { transform: translate(0, 1px) scaleY(0.6); }
+      }
+
+      /* Code lines: grow from left → hold → slide up + fade out
+         Each line staggers by ~15%. Slide-up gives "scroll" feel.
+         At 95-100% all invisible → brief blank → cycle restarts */
+      @keyframes cl1 {
+        0%        { transform: scaleX(0); opacity: 0; }
+        3%        { transform: scaleX(0); opacity: 1; }
+        13%       { transform: scaleX(1); opacity: 1; }
+        13%, 78%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        88%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        89%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+      @keyframes cl2 {
+        0%, 14%   { transform: scaleX(0); opacity: 0; }
+        15%       { transform: scaleX(0); opacity: 1; }
+        27%       { transform: scaleX(1); opacity: 1; }
+        27%, 82%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        91%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        92%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+      @keyframes cl3 {
+        0%, 29%   { transform: scaleX(0); opacity: 0; }
+        30%       { transform: scaleX(0); opacity: 1; }
+        42%       { transform: scaleX(1); opacity: 1; }
+        42%, 85%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        93%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        94%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+      @keyframes cl4 {
+        0%, 44%   { transform: scaleX(0); opacity: 0; }
+        45%       { transform: scaleX(0); opacity: 1; }
+        57%       { transform: scaleX(1); opacity: 1; }
+        57%, 88%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        95%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        96%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+
+      /* Key flash: brief bright pulse, mostly off */
+      @keyframes kflash {
+        0%, 70%, 100% { opacity: 0; }
+        35% { opacity: 0.8; }
+      }
+
+      @keyframes float-data {
+        0%   { transform: translateY(0) scale(0.5); opacity: 0; }
+        10%  { opacity: 0.8; }
+        100% { transform: translateY(-17px) scale(1); opacity: 0; }
+      }
+    </style>
+    <g id="pixel-packet">
+      <rect x="0" y="0" width="1.5" height="1.5"/>
+    </g>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
+
+  <!-- Data particles (behind screen, float up and disappear behind it) -->
+  <g fill="#40C4FF">
+    <use href="#pixel-packet" class="data-bit d1" x="3" y="7"/>
+    <use href="#pixel-packet" class="data-bit d2" x="7" y="8"/>
+    <use href="#pixel-packet" class="data-bit d3" x="11" y="7"/>
+    <use href="#pixel-packet" class="data-bit d4" x="5" y="8"/>
+  </g>
+
+  <!-- Mini Screen -->
+  <g id="screen" transform="translate(1.25, 0)">
+    <rect x="-0.5" y="-6" width="13.5" height="10.5" fill="#1E1E2E" rx="0.3"/>
+    <rect x="-0.5" y="-6" width="13.5" height="1.2" fill="#2D2D3D" rx="0.3"/>
+    <rect x="0.3" y="-5.6" width="0.5" height="0.4" fill="#FF5F56"/>
+    <rect x="1.2" y="-5.6" width="0.5" height="0.4" fill="#FFBD2E"/>
+    <rect x="2.1" y="-5.6" width="0.5" height="0.4" fill="#27C93F"/>
+
+    <!-- Code lines (indented, varying lengths = code structure) -->
+    <rect class="code-line cl1" x="0.5" y="-3.5" width="5"   height="0.7" fill="#4CAF50" opacity="0.8"/>
+    <rect class="code-line cl2" x="2"   y="-1.8" width="8"   height="0.7" fill="#4CAF50" opacity="0.8"/>
+    <rect class="code-line cl3" x="2"   y="-0.1" width="4.5" height="0.7" fill="#40C4FF" opacity="0.7"/>
+    <rect class="code-line cl4" x="0.5" y="1.6"  width="2"   height="0.7" fill="#FFC107" opacity="0.7"/>
+
+  </g>
+
+  <!-- Layer 1: Body -->
+  <g class="body-bounce">
+    <g class="breathe">
+      <g fill="#DE886D">
+        <rect x="3" y="13" width="1" height="2"/>
+        <rect x="5" y="13" width="1" height="2"/>
+        <rect x="9" y="13" width="1" height="2"/>
+        <rect x="11" y="13" width="1" height="2"/>
+        <rect x="2" y="6" width="11" height="7"/>
+      </g>
+      <g class="eyes-code" fill="#000">
+        <rect x="4" y="8" width="1" height="2"/>
+        <rect x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Layer 2: Keyboard -->
+  <g id="keyboard" transform="translate(-0.5, 11.8)">
+    <rect x="0" y="0" width="16" height="3.2" fill="#455A64" rx="0.3"/>
+    <g fill="#78909C">
+      <rect x="0.5" y="0.4" width="1" height="0.7"/>
+      <rect x="1.8" y="0.4" width="1" height="0.7"/>
+      <rect x="3.5" y="0.4" width="6" height="0.7" rx="0.2"/>
+      <rect x="10.2" y="0.4" width="1" height="0.7"/>
+      <rect x="11.5" y="0.4" width="1" height="0.7"/>
+      <rect x="12.8" y="0.4" width="1" height="0.7"/>
+      <rect x="14.1" y="0.4" width="1.3" height="0.7"/>
+    </g>
+    <g fill="#78909C">
+      <rect x="0.8" y="1.3" width="0.9" height="0.7"/>
+      <rect x="2.0" y="1.3" width="0.9" height="0.7"/>
+      <rect x="3.2" y="1.3" width="0.9" height="0.7"/>
+      <rect x="4.4" y="1.3" width="0.9" height="0.7"/>
+      <rect x="5.6" y="1.3" width="0.9" height="0.7"/>
+      <rect x="6.8" y="1.3" width="0.9" height="0.7"/>
+      <rect x="8.0" y="1.3" width="0.9" height="0.7"/>
+      <rect x="9.2" y="1.3" width="0.9" height="0.7"/>
+      <rect x="10.4" y="1.3" width="0.9" height="0.7"/>
+      <rect x="11.6" y="1.3" width="0.9" height="0.7"/>
+      <rect x="12.8" y="1.3" width="0.9" height="0.7"/>
+      <rect x="14.0" y="1.3" width="0.9" height="0.7"/>
+    </g>
+    <g fill="#78909C">
+      <rect x="0.5" y="2.2" width="0.9" height="0.7"/>
+      <rect x="1.7" y="2.2" width="0.9" height="0.7"/>
+      <rect x="2.9" y="2.2" width="0.9" height="0.7"/>
+      <rect x="4.1" y="2.2" width="0.9" height="0.7"/>
+      <rect x="5.3" y="2.2" width="0.9" height="0.7"/>
+      <rect x="6.5" y="2.2" width="0.9" height="0.7"/>
+      <rect x="7.7" y="2.2" width="0.9" height="0.7"/>
+      <rect x="8.9" y="2.2" width="0.9" height="0.7"/>
+      <rect x="10.1" y="2.2" width="0.9" height="0.7"/>
+      <rect x="11.3" y="2.2" width="0.9" height="0.7"/>
+      <rect x="12.5" y="2.2" width="0.9" height="0.7"/>
+      <rect x="13.7" y="2.2" width="0.9" height="0.7"/>
+      <rect x="14.9" y="2.2" width="0.6" height="0.7"/>
+    </g>
+    <!-- Key press highlights (overlay on top of keys) -->
+    <g fill="#B0BEC5">
+      <rect class="key-flash kf1" x="4.4" y="1.3" width="0.9" height="0.7"/>
+      <rect class="key-flash kf2" x="9.2" y="1.3" width="0.9" height="0.7"/>
+      <rect class="key-flash kf3" x="2.9" y="2.2" width="0.9" height="0.7"/>
+      <rect class="key-flash kf4" x="7.7" y="2.2" width="0.9" height="0.7"/>
+      <rect class="key-flash kf5" x="11.6" y="1.3" width="0.9" height="0.7"/>
+      <rect class="key-flash kf6" x="3.5" y="0.4" width="6" height="0.7" rx="0.2"/>
+    </g>
+  </g>
+
+  <!-- Layer 3: Arms -->
+  <g class="body-bounce">
+    <g class="breathe">
+      <g fill="#DE886D">
+        <g class="arm-l-type"><rect x="0" y="9" width="2" height="2"/></g>
+        <g class="arm-r-type"><rect x="13" y="9" width="2" height="2"/></g>
+      </g>
+    </g>
+  </g>
+</svg>