@mumulinya167/ccm-pet-assets 2.0.0

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

@@ -0,0 +1,245 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ═══ Independent animations (always running) ═══ */
+
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 4s infinite linear;
+      }
+
+      .leg-a {
+        animation: sneak-a 0.5s infinite linear;
+        transform-origin: top center;
+        transform-box: fill-box;
+      }
+      .leg-b {
+        animation: sneak-b 0.5s infinite linear;
+        transform-origin: top center;
+        transform-box: fill-box;
+      }
+
+      .glass-wobble {
+        transform-origin: 14px 10px;
+        animation: glass-wobble 3s infinite ease-in-out;
+      }
+
+      /* ═══ Main 14s timeline ═══ */
+
+      .body-main {
+        transform-origin: 7.5px 15px;
+        animation: body-main 14s infinite ease-in-out;
+      }
+
+      .shadow-main {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-main 14s infinite ease-in-out;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l 14s infinite ease-in-out;
+      }
+
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r 14s infinite ease-in-out;
+      }
+
+      .glass-vis {
+        animation: glass-vis 14s infinite linear;
+      }
+
+      .eye-squint {
+        transform-origin: 4.5px 9px;
+        animation: eye-squint 14s infinite ease-in-out;
+      }
+
+      .legs-idle {
+        animation: legs-idle 14s infinite linear;
+      }
+
+      .legs-sneak {
+        animation: legs-sneak 14s infinite linear;
+      }
+
+      /* ═══ Independent keyframes ═══ */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+
+      @keyframes sneak-a {
+        0%, 100% { transform: rotate(0deg) scaleY(1); }
+        50% { transform: rotate(-25deg) scaleY(0.7); }
+      }
+      @keyframes sneak-b {
+        0%, 100% { transform: rotate(-25deg) scaleY(0.7); }
+        50% { transform: rotate(0deg) scaleY(1); }
+      }
+
+      @keyframes glass-wobble {
+        0%, 100% { transform: rotate(0deg) scale(1); }
+        50% { transform: rotate(-3deg) scale(1.05); }
+      }
+
+      /* ═══ Main timeline keyframes (14s) ═══ */
+
+      /* Body: idle → hunch + patrol → idle (both idle phases trimmed) */
+      @keyframes body-main {
+        0%, 3%    { transform: translate(0, 0) rotate(0deg); }
+        15%       { transform: translate(0, 1px) rotate(2deg); }
+        22%       { transform: translate(-2px, 1px) rotate(2deg); }
+        35%       { transform: translate(3px, 1px) rotate(2deg); }
+        48%       { transform: translate(-2px, 1px) rotate(2deg); }
+        61%       { transform: translate(2px, 1px) rotate(2deg); }
+        78%       { transform: translate(0, 1px) rotate(2deg); }
+        90%       { transform: translate(0, 0) rotate(0deg); }
+        96%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      /* Shadow: follows body X, shrinks during detective */
+      @keyframes shadow-main {
+        0%, 3%    { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        15%       { transform: scale(0.9) translate(0, 0); opacity: 0.4; }
+        22%       { transform: scale(0.9) translate(-2px, 0); opacity: 0.4; }
+        35%       { transform: scale(0.9) translate(3px, 0); opacity: 0.4; }
+        48%       { transform: scale(0.9) translate(-2px, 0); opacity: 0.4; }
+        61%       { transform: scale(0.9) translate(2px, 0); opacity: 0.4; }
+        78%       { transform: scale(0.9) translate(0, 0); opacity: 0.4; }
+        90%       { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        96%, 100% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+      }
+
+      /* Left arm: normal → tucked behind → normal */
+      @keyframes arm-l {
+        0%, 5%    { transform: translate(0, 0) rotate(0deg); }
+        15%, 78%  { transform: translate(1px, -1px) rotate(15deg); }
+        90%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      /* Right arm: lifts briefly when glass appears/disappears */
+      @keyframes arm-r {
+        0%, 4%    { transform: translate(0, 0); }
+        7%, 10%   { transform: translate(0, -2px); }
+        13%, 80%  { transform: translate(0, 0); }
+        83%, 86%  { transform: translate(0, -2px); }
+        90%, 100% { transform: translate(0, 0); }
+      }
+
+      /* Magnifying glass: appears while arm is up, vanishes while arm is up */
+      @keyframes glass-vis {
+        0%, 8.9%  { opacity: 0; }
+        9%        { opacity: 1; }
+        83.9%     { opacity: 1; }
+        84%       { opacity: 0; }
+        100%      { opacity: 0; }
+      }
+
+      /* Left eye: normal → squint → normal */
+      @keyframes eye-squint {
+        0%, 10%   { transform: scaleY(1); }
+        15%, 78%  { transform: scaleY(0.5); }
+        86%, 100% { transform: scaleY(1); }
+      }
+
+      /* Idle legs: visible in idle, hidden in detective */
+      @keyframes legs-idle {
+        0%, 13.9% { opacity: 1; }
+        14%       { opacity: 0; }
+        85.9%     { opacity: 0; }
+        86%       { opacity: 1; }
+        100%      { opacity: 1; }
+      }
+
+      /* Sneak legs: hidden in idle, visible in detective */
+      @keyframes legs-sneak {
+        0%, 13.9% { opacity: 0; }
+        14%       { opacity: 1; }
+        85.9%     { opacity: 1; }
+        86%       { opacity: 0; }
+        100%      { opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <g class="shadow-main">
+    <rect x="3" y="15" width="9" height="1" fill="#000000"/>
+  </g>
+
+  <!-- Static Legs (idle phases) -->
+  <g class="legs-idle" fill="#DE886D">
+    <rect x="3" y="12" width="1" height="3"/>
+    <rect x="5" y="12" width="1" height="3"/>
+    <rect x="9" y="12" width="1" height="3"/>
+    <rect x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Body Group (main timeline: hunch + walk) -->
+  <g class="body-main">
+
+    <!-- Sneaking Legs (detective phase, inside body so they walk with it) -->
+    <g class="legs-sneak" fill="#DE886D" opacity="0">
+      <rect class="leg-a" x="3" y="13" width="1" height="2"/>
+      <rect class="leg-b" x="5" y="13" width="1" height="2"/>
+      <rect class="leg-a" x="9" y="13" width="1" height="2"/>
+      <rect class="leg-b" x="11" y="13" width="1" height="2"/>
+    </g>
+
+    <!-- Upper Body (breathing) -->
+    <g class="breathe">
+      <!-- Torso -->
+      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+      <!-- Left Arm -->
+      <g class="arm-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Eyes -->
+      <g class="blink" fill="#000000">
+        <!-- Left Eye (squints during detective phase) -->
+        <g class="eye-squint">
+          <rect x="4" y="8" width="1" height="2"/>
+        </g>
+        <!-- Right Eye -->
+        <rect x="10" y="8" width="1" height="2"/>
+      </g>
+
+      <!-- Right Arm + Magnifying Glass (on top of eyes in z-order) -->
+      <g class="arm-r">
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+
+        <!-- Magnifying Glass -->
+        <g class="glass-vis" opacity="0">
+          <g class="glass-wobble">
+            <g transform="translate(13.5, 9.5)">
+              <!-- Handle -->
+              <polygon points="0.5,1.5 1.5,0.5 -1,-2 -2,-1" fill="#795548"/>
+              <!-- Rim -->
+              <rect x="-6" y="-5" width="6" height="6" fill="#546E7A" rx="2"/>
+              <!-- Magnified Eye -->
+              <rect x="-4" y="-3.5" width="2" height="3" fill="#000000"/>
+              <!-- Lens -->
+              <rect x="-5.5" y="-4.5" width="5" height="5" fill="#E0F7FA" rx="1.5" opacity="0.6"/>
+              <!-- Glare -->
+              <rect x="-4.5" y="-3.5" width="1.5" height="1.5" fill="#FFFFFF" opacity="0.8"/>
+            </g>
+          </g>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,183 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ===== Independent sub-animations ===== */
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 4s infinite;
+      }
+
+      /* ===== Body rock: left-right sway + micro-dip ===== */
+      .body-rock {
+        transform-origin: 7.5px 15px;
+        animation: rock 1.2s infinite ease-in-out;
+      }
+
+      /* ===== Shadow ===== */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-rock 1.2s infinite ease-in-out;
+      }
+
+      /* ===== Arms: alternate catch/throw, synced with rock ===== */
+      .arm-juggle-l {
+        transform-origin: 1px 10px;
+        animation: arm-jl 1.2s infinite ease-in-out;
+      }
+      .arm-juggle-r {
+        transform-origin: 14px 10px;
+        animation: arm-jr 1.2s infinite ease-in-out;
+      }
+
+      /* ===== Eyes: track balls ===== */
+      .eye-track {
+        animation: eye-track 2.4s infinite ease-in-out;
+      }
+
+      /* ===== Juggling packets: parabolic arc ===== */
+      .packet {
+        animation: juggle 1.2s infinite;
+      }
+      .p1 { animation-delay: 0s; fill: #FF5252; }
+      .p2 { animation-delay: -0.4s; fill: #FFC107; }
+      .p3 { animation-delay: -0.8s; fill: #4CAF50; }
+
+      /* (no sweat — juggling is a steady state, not emergency) */
+
+      /* ===== Keyframes ===== */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+
+      /* Body: center → left-dip → center → right-dip → center */
+      @keyframes rock {
+        0%, 50%, 100% { transform: rotate(0deg) translateY(0); }
+        25% { transform: rotate(-3deg) translateY(0.3px); }
+        75% { transform: rotate(3deg) translateY(0.3px); }
+      }
+
+      /* Shadow: sway with body */
+      @keyframes shadow-rock {
+        0%, 50%, 100% { transform: scaleX(1); opacity: 0.5; }
+        25% { transform: scaleX(1.03) translateX(-0.3px); opacity: 0.52; }
+        75% { transform: scaleX(1.03) translateX(0.3px); opacity: 0.52; }
+      }
+
+      /* Left arm: up at 25% (catch left), down at 75% */
+      @keyframes arm-jl {
+        0%, 50%, 100% { transform: rotate(20deg); }
+        25% { transform: rotate(35deg); }
+        75% { transform: rotate(5deg); }
+      }
+
+      /* Right arm: down at 25%, up at 75% (catch right) */
+      @keyframes arm-jr {
+        0%, 50%, 100% { transform: rotate(-20deg); }
+        25% { transform: rotate(-5deg); }
+        75% { transform: rotate(-35deg); }
+      }
+
+      /* Eyes: track ball arc left-right */
+      @keyframes eye-track {
+        0%, 100% { transform: translate(-1px, -1px); }
+        15% { transform: translate(0, -1.5px); }
+        30% { transform: translate(1px, -1px); }
+        45% { transform: translate(1px, 0.5px); }
+        50% { transform: translate(1px, -1px); }
+        65% { transform: translate(0, -1.5px); }
+        80% { transform: translate(-1px, -1px); }
+        90% { transform: translate(-1px, 0.5px); }
+      }
+
+      /* Juggle: parabolic arc between hands, hang at top
+         Packet origin is x=-1 y=-1 (2x2 rect center ~0,0)
+         Left hand: x~1, y~10  → translate(2, 10)
+         Right hand: x~14, y~10 → translate(14, 10)
+         Arc peak: y ~ -1 (well above head) */
+      @keyframes juggle {
+        0%   { transform: translate(2px, 10px); }
+        8%   { transform: translate(4px, 4px); }
+        18%  { transform: translate(6px, 0px); }
+        30%  { transform: translate(8px, -1px); }
+        42%  { transform: translate(10px, 0px); }
+        50%  { transform: translate(14px, 10px); }
+        58%  { transform: translate(12px, 4px); }
+        68%  { transform: translate(10px, 0px); }
+        80%  { transform: translate(8px, -1px); }
+        92%  { transform: translate(4px, 4px); }
+        100% { transform: translate(2px, 10px); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
+
+  <!-- Juggling Packets -->
+  <g>
+    <!-- Red ball -->
+    <g class="packet p1">
+      <circle cx="0" cy="0" r="1.2" fill="#FF5252"/>
+      <circle cx="-0.35" cy="-0.35" r="0.45" fill="#FF8A80" opacity="0.7"/>
+      <circle cx="0.3" cy="0.4" r="0.6" fill="#D32F2F" opacity="0.3"/>
+    </g>
+    <!-- Yellow ball -->
+    <g class="packet p2">
+      <circle cx="0" cy="0" r="1.2" fill="#FFC107"/>
+      <circle cx="-0.35" cy="-0.35" r="0.45" fill="#FFE082" opacity="0.7"/>
+      <circle cx="0.3" cy="0.4" r="0.6" fill="#FFA000" opacity="0.3"/>
+    </g>
+    <!-- Green ball -->
+    <g class="packet p3">
+      <circle cx="0" cy="0" r="1.2" fill="#4CAF50"/>
+      <circle cx="-0.35" cy="-0.35" r="0.45" fill="#81C784" opacity="0.7"/>
+      <circle cx="0.3" cy="0.4" r="0.6" fill="#388E3C" opacity="0.3"/>
+    </g>
+  </g>
+
+  <!-- Static Legs -->
+  <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"/>
+  </g>
+
+  <!-- Upper Body -->
+  <g class="body-rock">
+    <g class="breathe">
+      <!-- Torso -->
+      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+      <!-- Left Arm -->
+      <g class="arm-juggle-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Right Arm -->
+      <g class="arm-juggle-r">
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Eyes -->
+      <g class="eye-track" fill="#000">
+        <g class="blink">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,248 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ===== Independent sub-animations ===== */
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 4s infinite;
+      }
+
+      /* ===== Main 10s story arc ===== */
+      .body-lean {
+        transform-origin: 7.5px 15px;
+        animation: body-lean 10s infinite ease-in-out;
+      }
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-anim 10s infinite ease-in-out;
+      }
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-right 10s infinite ease-in-out;
+      }
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-left 10s infinite ease-in-out;
+      }
+      .eyes-dir {
+        animation: eye-dir 10s infinite ease-in-out;
+      }
+
+      /* Dust particles */
+      .dust { opacity: 0; }
+      .dust-1 { animation: dust1 10s infinite; }
+      .dust-2 { animation: dust2 10s infinite; }
+      .dust-3 { animation: dust3 10s infinite; }
+
+      /* Sweat drops */
+      .sweat { opacity: 0; }
+      .sweat-1 { animation: sweat1 10s infinite; }
+      .sweat-2 { animation: sweat2 10s infinite; }
+
+      /* ===== Keyframes ===== */
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes blink {
+        0%, 10%, 100% { transform: scaleY(1); }
+        5% { transform: scaleY(0.1); }
+      }
+
+      /* Body: idle → lean → straighten → lean → return to idle */
+      @keyframes body-lean {
+        0%, 1%   { transform: translate(0, 0) rotate(0deg); }
+        5%, 38%  { transform: translate(1px, 0) rotate(6deg); }
+        43%, 57% { transform: translate(0, 0) rotate(2deg); }
+        62%, 85% { transform: translate(1px, 0) rotate(6deg); }
+        90%      { transform: translate(0.5px, 0) rotate(3deg); }
+        100%     { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes shadow-anim {
+        0%, 1%   { transform: scaleX(1); opacity: 0.5; }
+        5%, 38%  { transform: scaleX(1.08); opacity: 0.55; }
+        43%, 57% { transform: scaleX(1); opacity: 0.5; }
+        62%, 85% { transform: scaleX(1.08); opacity: 0.55; }
+        90%      { transform: scaleX(1.03); opacity: 0.52; }
+        100%     { transform: scaleX(1); opacity: 0.5; }
+      }
+
+      /* Right arm + broom: idle → 3 sweeps → relax → 3 sweeps → hold
+         Forward stroke (35 to -15) is faster than return (-15 to 35) */
+      @keyframes arm-right {
+        0%, 1%   { transform: rotate(0deg); }
+        4%       { transform: rotate(35deg); }
+        /* Phase A: stroke 1 */
+        7%       { transform: rotate(35deg); }
+        10%      { transform: rotate(-15deg); }
+        /* return */
+        15%      { transform: rotate(35deg); }
+        /* stroke 2 */
+        18%      { transform: rotate(-15deg); }
+        /* return */
+        23%      { transform: rotate(35deg); }
+        /* stroke 3 */
+        26%      { transform: rotate(-15deg); }
+        30%      { transform: rotate(10deg); }
+        /* Pause: arm relaxed */
+        36%, 57% { transform: rotate(0deg); }
+        /* Phase B: stroke 1 */
+        61%      { transform: rotate(35deg); }
+        64%      { transform: rotate(-15deg); }
+        /* stroke 2 */
+        69%      { transform: rotate(35deg); }
+        72%      { transform: rotate(-15deg); }
+        /* stroke 3 */
+        77%      { transform: rotate(35deg); }
+        80%      { transform: rotate(-15deg); }
+        85%      { transform: rotate(10deg); }
+        90%      { transform: rotate(5deg); }
+        100%     { transform: rotate(0deg); }
+      }
+
+      /* Left arm: idle → scratch head during pause → idle */
+      @keyframes arm-left {
+        0%, 41%  { transform: translate(0, 0) rotate(0deg); }
+        44%      { transform: translate(2px, -4px) rotate(35deg); }
+        46%      { transform: translate(2.5px, -5px) rotate(50deg); }
+        48%      { transform: translate(2px, -4px) rotate(35deg); }
+        50%      { transform: translate(2.5px, -5px) rotate(50deg); }
+        52%      { transform: translate(2px, -4px) rotate(35deg); }
+        55%, 100%{ transform: translate(0, 0) rotate(0deg); }
+      }
+
+      /* Eyes: ahead → look down → ahead (pause) → down → return to ahead */
+      @keyframes eye-dir {
+        0%, 2%   { transform: translate(0, 0); }
+        5%, 38%  { transform: translate(1px, 1px); }
+        43%, 57% { transform: translate(0, 0); }
+        62%, 85% { transform: translate(1px, 1px); }
+        90%      { transform: translate(0.5px, 0.5px); }
+        100%     { transform: translate(0, 0); }
+      }
+
+      /* Dust puffs at end of forward strokes */
+      @keyframes dust1 {
+        0%, 8%   { opacity: 0; transform: translate(17px, 15px) scale(0); }
+        10%      { opacity: 0.6; transform: translate(17px, 15px) scale(1); }
+        16%      { opacity: 0; transform: translate(20px, 13.5px) scale(0.3); }
+        17%, 62% { opacity: 0; }
+        64%      { opacity: 0.6; transform: translate(17px, 15px) scale(1); }
+        70%      { opacity: 0; transform: translate(20px, 13.5px) scale(0.3); }
+        71%, 100%{ opacity: 0; }
+      }
+      @keyframes dust2 {
+        0%, 16%  { opacity: 0; transform: translate(16px, 16px) scale(0); }
+        18%      { opacity: 0.5; transform: translate(16px, 16px) scale(1); }
+        24%      { opacity: 0; transform: translate(19px, 14.5px) scale(0.3); }
+        25%, 70% { opacity: 0; }
+        72%      { opacity: 0.5; transform: translate(16px, 16px) scale(1); }
+        78%      { opacity: 0; transform: translate(19px, 14.5px) scale(0.3); }
+        79%, 100%{ opacity: 0; }
+      }
+      @keyframes dust3 {
+        0%, 24%  { opacity: 0; transform: translate(18px, 15.5px) scale(0); }
+        26%      { opacity: 0.5; transform: translate(18px, 15.5px) scale(1); }
+        32%      { opacity: 0; transform: translate(21px, 14px) scale(0.3); }
+        33%, 78% { opacity: 0; }
+        80%      { opacity: 0.5; transform: translate(18px, 15.5px) scale(1); }
+        86%      { opacity: 0; transform: translate(21px, 14px) scale(0.3); }
+        87%, 100%{ opacity: 0; }
+      }
+
+      /* Sweat during Phase A sweeping */
+      @keyframes sweat1 {
+        0%, 8%   { opacity: 0; transform: translate(0, 0) scale(0); }
+        10%      { opacity: 1; transform: translate(0, 0) scale(1); }
+        20%      { opacity: 0; transform: translate(-5px, -5px) scale(0.5); }
+        21%, 100%{ opacity: 0; }
+      }
+      @keyframes sweat2 {
+        0%, 16%  { opacity: 0; transform: translate(0, 0) scale(0); }
+        18%      { opacity: 1; transform: translate(0, 0) scale(1); }
+        28%      { opacity: 0; transform: translate(-4px, -6px) scale(0.4); }
+        29%, 100%{ opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Mirrored: character faces left for visible broom -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+
+    <!-- Ground Shadow -->
+    <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
+
+    <!-- Dust particles (ground level, outside body group) -->
+    <rect class="dust dust-1" x="0" y="0" width="1.5" height="1.5" fill="#9E9E9E"/>
+    <rect class="dust dust-2" x="0" y="0" width="1" height="1" fill="#B0BEC5"/>
+    <rect class="dust dust-3" x="0" y="0" width="1.2" height="1.2" fill="#9E9E9E"/>
+
+    <!-- Static Legs -->
+    <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"/>
+    </g>
+
+    <!-- Upper Body -->
+    <g class="body-lean">
+
+      <!-- Sweat drops (inside body group, move with lean) -->
+      <g transform="translate(1, 5)">
+        <g class="sweat sweat-1" fill="#40C4FF">
+          <rect x="0" y="1" width="1.5" height="1.5"/>
+          <rect x="0.25" y="0" width="1" height="1"/>
+        </g>
+      </g>
+      <g transform="translate(-0.5, 7)">
+        <g class="sweat sweat-2" fill="#40C4FF">
+          <rect x="0" y="0.5" width="1" height="1"/>
+          <rect x="0.15" y="0" width="0.7" height="0.7"/>
+        </g>
+      </g>
+
+      <!-- Breathing -->
+      <g class="breathe">
+
+        <!-- Torso -->
+        <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+
+        <!-- Left Arm (scratch head during pause) -->
+        <g class="arm-l">
+          <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+        </g>
+
+        <!-- Right Arm + Broom (attached, sweeps together) -->
+        <g class="arm-r">
+          <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+          <!-- Broom Handle -->
+          <rect x="13.5" y="11" width="1" height="3.5" fill="#795548"/>
+          <!-- Broom Bristles -->
+          <rect x="12" y="14.5" width="4" height="1.5" fill="#FFC107"/>
+          <!-- Bristle texture (vertical lines, bottom up, faint, gap at edges) -->
+          <rect x="12.5" y="14.85" width="0.35" height="0.8" fill="#C99700" opacity="0.3"/>
+          <rect x="13.2" y="14.8"  width="0.3"  height="0.9" fill="#C99700" opacity="0.35"/>
+          <rect x="13.8" y="14.85" width="0.35" height="0.8" fill="#C99700" opacity="0.3"/>
+          <rect x="14.5" y="14.8"  width="0.3"  height="0.85" fill="#C99700" opacity="0.35"/>
+        </g>
+
+        <!-- Eyes -->
+        <g class="eyes-dir" fill="#000">
+          <g class="blink">
+            <rect x="4" y="8" width="1" height="2"/>
+            <rect x="10" y="8" width="1" height="2"/>
+          </g>
+        </g>
+
+      </g>
+    </g>
+
+  </g>
+</svg>