clawd-desktop 1.0.0

package/assets/svg/clawd-idle-living.svg

@@ -0,0 +1,196 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 16-Second Master Sequence for Idle Actions */
+      .action-body {
+        transform-origin: 7.5px 13px; /* Pivot at the base of the torso */
+        animation: action-body 16s infinite ease-in-out;
+      }
+      
+      /* Continuous Subtle Breathing (Syncs exactly 5 times per 16s loop) */
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      /* Shadow shrinking and shifting matching actions */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-action 16s infinite ease-in-out;
+      }
+
+      /* Left Arm (Scratching and Yawn Stretching) */
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-idle 16s infinite ease-in-out;
+      }
+
+      /* Right Arm (Yawn Stretching) */
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r-idle 16s infinite ease-in-out;
+      }
+
+      /* Eye Tracking (Looking around) */
+      .eyes-look {
+        animation: eye-track 16s infinite ease-in-out;
+      }
+
+      /* Occasional Blinks and shutting during Yawn */
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 16s infinite linear;
+      }
+
+      /* Yawn Mouth Appearance */
+      .yawn-mouth {
+        transform-origin: 7.5px 11px;
+        animation: yawn-mouth-anim 16s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* Tiny tear that appears during the big yawn */
+      .yawn-tear {
+        animation: tear-fall 16s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes action-body {
+        0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scale(1, 1) translate(0, 0); }
+        /* Look Right Tilt */
+        12%, 22% { transform: scale(1, 1) translate(1px, 0); }
+        /* Look Left Tilt */
+        42%, 50% { transform: scale(1, 1) translate(-1px, 0); }
+        /* Scratching Lean */
+        30%, 36% { transform: scale(1, 1) translate(0.5px, 0); } 
+        /* Deep Yawn Stretch */
+        60% { transform: scale(0.95, 1.05) translate(0px, -1px); } /* Stretch up */
+        65% { transform: scale(0.9, 1.1) translate(0px, -2px); }   /* Peak stretch */
+        72% { transform: scale(1.05, 0.95) translate(0px, 1px); }  /* Heavy sigh / squash down */
+        76% { transform: scale(1, 1) translate(0px, 0px); }        /* Recover */
+      }
+
+      @keyframes shadow-action {
+        0%, 8%, 26%, 38%, 55%, 80%, 100% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
+        42%, 50% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
+        30%, 36% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
+        60% { transform: scaleX(0.95) translate(0, 0); opacity: 0.45; }
+        65% { transform: scaleX(0.9) translate(0, 0); opacity: 0.4; }
+        72% { transform: scaleX(1.05) translate(0, 0); opacity: 0.55; }
+        76% { transform: scaleX(1) translate(0, 0); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%, 10%, 25%, 38%, 52%, 58%, 80%, 100% { transform: translate(0px, 0px); }
+        12%, 22% { transform: translate(3px, 0px); } /* Look Right */
+        42%, 50% { transform: translate(-3px, 0px); } /* Look Left */
+        60%, 75% { transform: translate(0px, -1px); } /* Look slightly up during yawn */
+      }
+
+      @keyframes eye-blink {
+        0%, 3%, 7%, 18%, 22%, 43%, 47%, 56%, 83%, 87%, 100% { transform: scaleY(1); }
+        5%, 20%, 45%, 85% { transform: scaleY(0.1); } /* Quick Blinks */
+        /* Yawn Closed Eyes */
+        60% { transform: scaleY(1); }
+        62%, 72% { transform: scaleY(0.1); } /* Eyes completely shut */
+        75% { transform: scaleY(1); }
+      }
+
+      @keyframes arm-l-idle {
+        0%, 28% { transform: translate(0, 0) rotate(0deg); }
+        
+        /* Occasional Scratching Sequence (Left Arm) */
+        30% { transform: translate(1px, -3px) rotate(15deg); }
+        31% { transform: translate(1.5px, -4px) rotate(35deg); } /* Up */
+        32% { transform: translate(0.5px, -2.5px) rotate(0deg); } /* Down */
+        33% { transform: translate(1.5px, -4px) rotate(35deg); }
+        34% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        35% { transform: translate(1.5px, -4px) rotate(35deg); }
+        36% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        
+        38%, 58% { transform: translate(0, 0) rotate(0deg); }
+        
+        /* Yawn Stretch */
+        62% { transform: translate(-1px, -2px) rotate(45deg); }
+        65% { transform: translate(-2px, -3px) rotate(80deg); } /* Full outward stretch */
+        72% { transform: translate(0px, 1px) rotate(-15deg); } /* Relax down */
+        76%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes arm-r-idle {
+        0%, 58% { transform: translate(0, 0) rotate(0deg); }
+        /* Yawn Stretch */
+        62% { transform: translate(1px, -2px) rotate(-45deg); }
+        65% { transform: translate(2px, -3px) rotate(-80deg); } /* Full outward stretch */
+        72% { transform: translate(0px, 1px) rotate(15deg); } /* Relax down */
+        76%, 100% { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      @keyframes yawn-mouth-anim {
+        0%, 58%, 76%, 100% { opacity: 0; transform: scale(0.1); }
+        60% { opacity: 1; transform: scale(0.5, 0.2); }
+        65% { opacity: 1; transform: scale(1.1, 1.4); } /* Wide Open */
+        72% { opacity: 1; transform: scale(0.6, 0.4); } /* Shrinking */
+        75% { opacity: 0; transform: scale(0.1); }
+      }
+
+      @keyframes tear-fall {
+        0%, 64%, 80%, 100% { opacity: 0; transform: translateY(0); }
+        66% { opacity: 1; transform: translateY(0); } /* Appears at corner of eye */
+        72% { opacity: 1; transform: translateY(2.5px); } /* Slides down cheek */
+        75% { opacity: 0; transform: translateY(3px); } /* Fades out */
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Static Character Legs (extended up to stay connected during yawn stretch) -->
+  <g id="legs" fill="#DE886D">
+    <rect id="outer-left-leg" x="3" y="12" width="1" height="3"/>
+    <rect id="inner-left-leg" x="5" y="12" width="1" height="3"/>
+    <rect id="inner-right-leg" x="9" y="12" width="1" height="3"/>
+    <rect id="outer-right-leg" x="11" y="12" width="1" height="3"/>
+  </g>
+
+  <!-- Animated Upper Body (Combines occasional actions + continuous breathing) -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      
+      <!-- Arms -->
+      <g class="arm-l">
+        <rect id="left-arm" x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <g class="arm-r">
+        <rect id="right-arm" x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+
+      <!-- Yawning Mouth (Hidden usually) -->
+      <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
+
+      <!-- Eyes Group -->
+      <g class="eyes-look" fill="#000000">
+        <g class="eyes-blink">
+          <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>
+
+      <!-- Yawn Tear Drop (A tiny detail for the big stretch) -->
+      <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
+      
+    </g>
+  </g>
+</svg>

package/assets/svg/clawd-idle-look.svg

@@ -0,0 +1,115 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 10-Second Idle Loop — Looking Around + Scratching (no yawn) */
+      .action-body {
+        transform-origin: 7.5px 13px;
+        animation: action-body 10s infinite ease-in-out;
+      }
+
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-action 10s infinite ease-in-out;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-idle 10s infinite ease-in-out;
+      }
+
+      .eyes-look {
+        animation: eye-track 10s infinite ease-in-out;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink 10s infinite linear;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      @keyframes action-body {
+        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scale(1,1) translate(0,0); }
+        /* Look Right */
+        12%, 22% { transform: scale(1,1) translate(1px, 0); }
+        /* Look Left */
+        48%, 57% { transform: scale(1,1) translate(-1px, 0); }
+        /* Scratch Lean */
+        33%, 38% { transform: scale(1,1) translate(0.5px, 0); }
+      }
+
+      @keyframes shadow-action {
+        0%, 8%, 25%, 30%, 40%, 45%, 60%, 100% { transform: scaleX(1) translate(0,0); opacity: 0.5; }
+        12%, 22% { transform: scaleX(1) translate(1px, 0); opacity: 0.5; }
+        48%, 57% { transform: scaleX(1) translate(-1px, 0); opacity: 0.5; }
+        33%, 38% { transform: scaleX(1) translate(0.5px, 0); opacity: 0.5; }
+      }
+
+      @keyframes eye-track {
+        0%, 10%, 25%, 43%, 60%, 100% { transform: translate(0, 0); }
+        12%, 22% { transform: translate(3px, 0); }  /* Look Right */
+        48%, 57% { transform: translate(-3px, 0); }  /* Look Left */
+      }
+
+      @keyframes eye-blink {
+        0%, 3%, 7%, 18%, 22%, 47%, 51%, 78%, 82%, 100% { transform: scaleY(1); }
+        5%, 20%, 49%, 80% { transform: scaleY(0.1); }
+      }
+
+      @keyframes arm-l-idle {
+        0%, 30% { transform: translate(0,0) rotate(0deg); }
+        /* Scratching Sequence */
+        33% { transform: translate(1px, -3px) rotate(15deg); }
+        34% { transform: translate(1.5px, -4px) rotate(35deg); }
+        35% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        36% { transform: translate(1.5px, -4px) rotate(35deg); }
+        37% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        38% { transform: translate(1.5px, -4px) rotate(35deg); }
+        39% { transform: translate(0.5px, -2.5px) rotate(0deg); }
+        42%, 100% { transform: translate(0,0) rotate(0deg); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Static Legs -->
+  <g id="legs" 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>
+
+  <!-- Animated Upper Body -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      <!-- Left Arm (scratches) -->
+      <g class="arm-l">
+        <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <!-- Right Arm (static) -->
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      <!-- Eyes -->
+      <g class="eyes-look" fill="#000000">
+        <g class="eyes-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/svg/clawd-idle-reading.svg

@@ -0,0 +1,201 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ═══ 14s story: arm sway → grab book → read (with thought bits) → book slides away ═══ */
+
+      /* ── Independent ── */
+
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      .blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 5s infinite;
+      }
+      @keyframes blink {
+        0%, 6%, 100% { transform: scaleY(1); }
+        3% { transform: scaleY(0.1); }
+      }
+
+      .shadow {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-breathe 3.2s infinite ease-in-out;
+      }
+      @keyframes shadow-breathe {
+        0%, 100% { transform: scaleX(1); opacity: 0.5; }
+        50% { transform: scaleX(1.03); opacity: 0.47; }
+      }
+
+      /* ── Main 14s ── */
+
+      /* Body: nod twice during reading */
+      .body-nod {
+        animation: body-nod 14s infinite ease-in-out;
+      }
+      @keyframes body-nod {
+        0%, 36%, 44%, 54%, 62%, 100% { transform: translateY(0); }
+        40% { transform: translateY(0.4px); }
+        58% { transform: translateY(0.4px); }
+      }
+
+      /* Left arm: BIG casual sway → reach → hold → follow book → return */
+      .arm-l {
+        transform-origin: 2px 10px;
+        animation: arm-l-anim 14s infinite ease-in-out;
+      }
+      @keyframes arm-l-anim {
+        /* sway (big, visible fidgeting) */
+        0%        { transform: translate(0, 0) rotate(0deg); }
+        2.5%      { transform: translate(-0.5px, 0) rotate(25deg); }
+        5%        { transform: translate(0.3px, 0) rotate(-20deg); }
+        7.5%      { transform: translate(-0.5px, 0) rotate(22deg); }
+        10%       { transform: translate(0, 0) rotate(0deg); }
+        /* reach out left to grab book */
+        18%       { transform: translate(-1px, -1px) rotate(15deg); }
+        /* bring to chest (hand visible at book left edge) */
+        26%       { transform: translate(2px, 0) rotate(-5deg); }
+        /* hold during reading */
+        76%       { transform: translate(2px, 0) rotate(-5deg); }
+        /* follow book sliding down */
+        84%       { transform: translate(1px, 2px) rotate(0deg); }
+        /* return to normal */
+        92%       { transform: translate(0, 0) rotate(0deg); }
+        100%      { transform: translate(0, 0) rotate(0deg); }
+      }
+
+      /* Right arm: nudge inward during reading */
+      .arm-r {
+        animation: arm-r-anim 14s infinite ease-in-out;
+      }
+      @keyframes arm-r-anim {
+        0%, 22%   { transform: translate(0, 0); }
+        28%, 76%  { transform: translate(-1px, 0); }
+        84%, 100% { transform: translate(0, 0); }
+      }
+
+      /* Book: appear in hand → widen to chest → slide down → gone */
+      .book {
+        opacity: 0;
+        transform-origin: 7px 11.5px;
+        animation: book-anim 14s infinite ease-in-out;
+      }
+      @keyframes book-anim {
+        0%, 12%   { opacity: 0; transform: translate(-5px, -2px) scaleX(0.5); }
+        18%       { opacity: 1; transform: translate(-5px, -2px) scaleX(0.5); }
+        26%       { opacity: 1; transform: translate(0, 0) scaleX(1); }
+        76%       { opacity: 1; transform: translate(0, 0) scaleX(1); }
+        84%       { opacity: 0; transform: translate(0, 4px) scaleX(0.8); }
+        100%      { opacity: 0; transform: translate(0, 4px) scaleX(0.8); }
+      }
+
+      /* Eyes: normal → slow gaze down → drift → normal */
+      .eyes-read {
+        animation: eyes-read 14s infinite ease-in-out;
+      }
+      @keyframes eyes-read {
+        0%, 22%   { transform: translate(0, 0); }
+        30%       { transform: translate(0, 0.5px); }
+        46%       { transform: translate(-0.3px, 0.5px); }
+        60%       { transform: translate(0.3px, 0.5px); }
+        70%       { transform: translate(0, 0.5px); }
+        80%, 100% { transform: translate(0, 0); }
+      }
+
+      /* ── Thought particles (visible only during reading) ── */
+      .reading-fx {
+        animation: reading-fx-vis 14s infinite;
+      }
+      @keyframes reading-fx-vis {
+        0%, 27%   { opacity: 0; }
+        32%, 75%  { opacity: 1; }
+        78%, 100% { opacity: 0; }
+      }
+
+      .thought-bit {
+        opacity: 0;
+        animation: float-thought 2.5s infinite linear;
+      }
+      .t1 { animation-delay: 0s; }
+      .t2 { animation-delay: -0.7s; }
+      .t3 { animation-delay: -1.4s; }
+      .t4 { animation-delay: -2.1s; }
+
+      @keyframes float-thought {
+        0%   { transform: translateY(0); opacity: 0; }
+        10%  { opacity: 0.6; }
+        100% { transform: translateY(-12px); opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground shadow -->
+  <rect class="shadow" x="3" y="15" width="9" height="1" fill="#000"/>
+
+  <!-- Thought particles (behind body, float up during reading) -->
+  <g class="reading-fx">
+    <rect class="thought-bit t1" x="2"  y="4" width="2" height="2" fill="#40C4FF"/>
+    <rect class="thought-bit t2" x="8"  y="3" width="1.5" height="1.5" fill="#B388FF"/>
+    <rect class="thought-bit t3" x="12" y="5" width="2" height="2" fill="#40C4FF"/>
+    <rect class="thought-bit t4" x="5"  y="3" width="1.5" height="1.5" fill="#69F0AE"/>
+  </g>
+
+  <!-- Nod wrapper -->
+  <g class="body-nod">
+
+    <!-- ── Body layer ── -->
+    <g class="breathe">
+      <!-- Legs (idle style) -->
+      <g fill="#DE886D">
+        <rect x="3" y="11" width="1" height="4"/>
+        <rect x="5" y="11" width="1" height="4"/>
+        <rect x="9" y="11" width="1" height="4"/>
+        <rect x="11" y="11" width="1" height="4"/>
+      </g>
+      <!-- Torso -->
+      <rect x="2" y="6" width="11" height="7" fill="#DE886D"/>
+      <!-- Eyes -->
+      <g class="eyes-read">
+        <g class="blink" fill="#000">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+    </g>
+
+    <!-- ── Book layer (on top of body, chest level) ── -->
+    <g class="breathe">
+      <g class="book">
+        <!-- Back cover (blue) -->
+        <rect x="3" y="10" width="8" height="4" fill="#4A90D9"/>
+        <!-- Spine -->
+        <rect x="7" y="10" width="1" height="4" fill="#2E6AB0"/>
+        <!-- Page edges (top) -->
+        <rect x="4" y="9.5" width="6" height="0.5" fill="#FFFDE7"/>
+        <!-- Page edges (right side) -->
+        <rect x="10.5" y="10.5" width="0.5" height="3" fill="#FFFDE7"/>
+        <!-- Title plate -->
+        <rect x="4.5" y="10.5" width="5" height="1.5" fill="#E3F2FD" opacity="0.5"/>
+        <!-- Title text blocks -->
+        <rect x="5" y="10.8" width="3" height="0.5" fill="#2E6AB0"/>
+        <rect x="5.5" y="11.5" width="2" height="0.3" fill="#2E6AB0" opacity="0.6"/>
+        <!-- Small deco block -->
+        <rect x="6" y="12.5" width="2" height="0.5" fill="#E3F2FD" opacity="0.4"/>
+      </g>
+    </g>
+
+    <!-- ── Arms layer (on top of book) ── -->
+    <g class="breathe">
+      <g fill="#DE886D">
+        <g class="arm-l"><rect x="0" y="9" width="2" height="2"/></g>
+        <g class="arm-r"><rect x="13" y="9" width="2" height="2"/></g>
+      </g>
+    </g>
+
+  </g>
+</svg>

package/assets/svg/clawd-idle-yawn.svg

@@ -0,0 +1,158 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* 5-Second Yawn — One-shot, ends in squashed/eyes-closed pose */
+      .action-body {
+        transform-origin: 7.5px 13px;
+        animation: action-body-yawn 3.8s ease-in-out forwards;
+      }
+
+      .breathe-anim {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-yawn 3.8s ease-in-out forwards;
+      }
+
+      .arm-l {
+        transform-origin: 1px 10px;
+        animation: arm-l-yawn 3.8s ease-in-out forwards;
+      }
+
+      .arm-r {
+        transform-origin: 14px 10px;
+        animation: arm-r-yawn 3.8s ease-in-out forwards;
+      }
+
+      .eyes-look {
+        animation: eye-track-yawn 3.8s ease-in-out forwards;
+      }
+
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: eye-blink-yawn 3.8s linear forwards;
+      }
+
+      .yawn-mouth {
+        transform-origin: 7.5px 11px;
+        animation: yawn-mouth-anim 3.8s ease-in-out forwards;
+        opacity: 0;
+      }
+
+      .yawn-tear {
+        animation: tear-fall 3.8s ease-in-out forwards;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+
+      /* Body: neutral → stretch up → peak → squash down (hold from 78%) */
+      @keyframes action-body-yawn {
+        0%, 12% { transform: scale(1, 1) translate(0, 0); }
+        32% { transform: scale(0.95, 1.05) translate(0, -1px); }
+        50% { transform: scale(0.9, 1.1) translate(0, -2px); }
+        78%, 100% { transform: scale(1.05, 0.95) translate(0, 1px); }
+      }
+
+      @keyframes shadow-yawn {
+        0%, 12% { transform: scaleX(1); opacity: 0.5; }
+        32% { transform: scaleX(0.95); opacity: 0.45; }
+        50% { transform: scaleX(0.9); opacity: 0.4; }
+        78%, 100% { transform: scaleX(1.05); opacity: 0.55; }
+      }
+
+      /* Eyes look slightly up during stretch, then neutral */
+      @keyframes eye-track-yawn {
+        0%, 18% { transform: translate(0, 0); }
+        32%, 68% { transform: translate(0, -1px); }
+        82%, 100% { transform: translate(0, 0); }
+      }
+
+      /* Blink once, then eyes shut for the yawn and stay shut */
+      @keyframes eye-blink-yawn {
+        0%, 18% { transform: scaleY(1); }
+        24% { transform: scaleY(0.1); }
+        30% { transform: scaleY(1); }
+        42%, 100% { transform: scaleY(0.1); }
+      }
+
+      /* Both arms stretch outward during yawn, then relax down */
+      @keyframes arm-l-yawn {
+        0%, 12% { transform: translate(0, 0) rotate(0deg); }
+        38% { transform: translate(-1px, -2px) rotate(45deg); }
+        50% { transform: translate(-2px, -3px) rotate(80deg); }
+        78%, 100% { transform: translate(0, 1px) rotate(-15deg); }
+      }
+
+      @keyframes arm-r-yawn {
+        0%, 12% { transform: translate(0, 0) rotate(0deg); }
+        38% { transform: translate(1px, -2px) rotate(-45deg); }
+        50% { transform: translate(2px, -3px) rotate(-80deg); }
+        78%, 100% { transform: translate(0, 1px) rotate(15deg); }
+      }
+
+      /* Mouth opens wide then closes */
+      @keyframes yawn-mouth-anim {
+        0%, 18% { opacity: 0; transform: scale(0.1); }
+        32% { opacity: 1; transform: scale(0.5, 0.2); }
+        50% { opacity: 1; transform: scale(1.1, 1.4); }
+        68% { opacity: 1; transform: scale(0.6, 0.4); }
+        80%, 100% { opacity: 0; transform: scale(0.1); }
+      }
+
+      /* Tiny tear slides down during peak yawn */
+      @keyframes tear-fall {
+        0%, 45% { opacity: 0; transform: translateY(0); }
+        50% { opacity: 1; transform: translateY(0); }
+        68% { opacity: 1; transform: translateY(2.5px); }
+        80%, 100% { opacity: 0; transform: translateY(3px); }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Static Legs -->
+  <g id="legs" 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>
+
+  <!-- Animated Upper Body -->
+  <g class="action-body">
+    <g class="breathe-anim">
+      <!-- Torso -->
+      <rect id="torso" 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>
+      <!-- Right Arm -->
+      <g class="arm-r">
+        <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+      </g>
+      <!-- Yawning Mouth (hidden initially) -->
+      <rect class="yawn-mouth" x="6" y="10" width="3" height="2" fill="#000000"/>
+      <!-- Eyes -->
+      <g class="eyes-look" fill="#000000">
+        <g class="eyes-blink">
+          <rect x="4" y="8" width="1" height="2"/>
+          <rect x="10" y="8" width="1" height="2"/>
+        </g>
+      </g>
+      <!-- Tear -->
+      <rect class="yawn-tear" x="3.5" y="10" width="1" height="1" fill="#40C4FF"/>
+    </g>
+  </g>
+</svg>