lively-mascot 0.2.0

package/src/lively-mascot.css

@@ -0,0 +1,2501 @@
+/* ============================================================
+ * lively-mascot · Base Styles (shared across all characters)
+ *
+ * Zero dependencies, pure CSS. Visual language: solid fill + 2px
+ * ink outline + hard-edge offset shadow (sticker / neo-brutalist).
+ *
+ * Theme vars (set via JS inline style or override):
+ *   --lively-body    Body fill, default #48ff42
+ *   --lively-outline Outline / eyes / shadow ink, default #080808
+ *   --lively-accent  Blush accent, default #ff9fb6
+ *
+ * Structure (DOM):
+ *   .lively-mascot (root, cursor-follow class)
+ *     .lively-mascot__rig (JS applies tilt/translate via transform)
+ *       .lively-body          -> idle sway
+ *       .lively-face-wrap > svg > .lively-face -> blink
+ *     .lively__feet           -> step / happy kick / hopping tuck
+ * ============================================================ */
+
+/* --- Root --- */
+.lively-mascot {
+  --lively-body: #48ff42;
+  --lively-outline: #080808;
+  --lively-accent: #ff9fb6;
+  --lively-depth-transform: rotateX(0deg) rotateY(0deg);
+  --lively-gloss-x: 25%;
+  --lively-gloss-y: 18%;
+  position: relative;
+  display: inline-block;
+  width: 106px;
+  height: 106px;
+  container-type: inline-size;
+  cursor: pointer;
+  user-select: none;
+}
+
+/* 2D view keeps the original flat, sticker-like rendering. */
+.lively-mascot--2d {
+  perspective: none;
+}
+
+/* Lightweight depth treatment: the same SVG character gains a shallow
+   camera angle, layered parts, and directional shading without WebGL. */
+.lively-mascot--3d {
+  --lively-depth-transform: rotateX(2deg) rotateY(-2.8deg);
+  perspective: 680px;
+  perspective-origin: 50% 50%;
+}
+
+.lively-mascot--3d .lively-mascot__rig,
+.lively-mascot--3d .lively-mascot__gaze,
+.lively-mascot.lively-mascot--3d .lively-body,
+.lively-mascot--3d .lively-face-wrap {
+  transform-style: preserve-3d;
+}
+
+.lively-mascot--3d .lively-mascot__gaze {
+  transform-origin: 50% 58%;
+}
+
+.lively-mascot__gaze { transform: var(--lively-depth-transform); }
+
+.lively-mascot.lively-mascot--3d .lively-body {
+  box-shadow:
+    0 16px 24px rgba(15, 17, 18, .24),
+    0 4px 7px rgba(15, 17, 18, .16),
+    inset -12px -14px 22px rgba(10, 15, 20, .22),
+    inset 7px 7px 14px rgba(255,255,255,.21);
+  filter: saturate(1.03) contrast(1.02);
+  backface-visibility: hidden;
+}
+
+.lively-mascot--3d .lively-body::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    radial-gradient(ellipse at var(--lively-gloss-x) var(--lively-gloss-y), rgba(255,255,255,.34) 0%, rgba(255,255,255,.17) 16%, transparent 43%),
+    linear-gradient(145deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,0) 43%),
+    linear-gradient(325deg, rgba(10,15,20,.20) 0%, rgba(10,15,20,0) 46%);
+  opacity: .92;
+  pointer-events: none;
+  transform: translateZ(6px);
+  filter: blur(.65px);
+}
+
+.lively-mascot--3d .lively-body::after {
+  content: "";
+  position: absolute;
+  inset: 2px;
+  border-radius: inherit;
+  border: 1px solid rgba(255,255,255,.13);
+  box-shadow: inset -4px -5px 7px rgba(8,13,18,.10), inset 2px 2px 5px rgba(255,255,255,.08);
+  pointer-events: none;
+  transform: translateZ(2px);
+  opacity: .82;
+}
+
+.lively-mascot--3d .lively-face-wrap {
+  transform: translateZ(11px);
+  filter: drop-shadow(0 3px 3px rgba(0,0,0,.14));
+}
+.lively-mascot--3d .lively__leaf,
+.lively-mascot--3d .lively__ears,
+.lively-mascot--3d .lively__antenna {
+  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.18));
+}
+.lively-mascot--3d .lively__leaf svg,
+.lively-mascot--3d .lively__ears svg,
+.lively-mascot--3d .lively__antenna svg {
+  transform: translateZ(13px);
+  filter: drop-shadow(3px 5px 4px rgba(0,0,0,.19));
+}
+
+/* Solid accessories use their own depth planes so they do not read as flat decals. */
+.lively-mascot--3d .lively__tail {
+  transform-style: preserve-3d;
+  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.16));
+}
+.lively-mascot--3d .lively__tail svg { transform: translateZ(-3px); }
+.lively-mascot--3d .lively__feet {
+  transform: translateZ(5px);
+  filter: var(--lively-state-filter, brightness(1)) drop-shadow(0 5px 4px rgba(0,0,0,.20));
+}
+.lively-mascot--3d .lively__foot svg {
+  transform: translateZ(10px);
+  filter: drop-shadow(1px 3px 3px rgba(0,0,0,.20));
+}
+
+/* Shared foot lighting: a softbox reflection sits on the upper-left of
+   every foot shape, including rectangular robot feet. */
+.lively-mascot--3d .lively__foot::after {
+  content: "";
+  position: absolute;
+  left: 16%;
+  top: 13%;
+  width: 52%;
+  height: 30%;
+  border-radius: 50%;
+  background: radial-gradient(ellipse, rgba(255,255,255,.48) 0%, rgba(255,255,255,.16) 45%, transparent 76%);
+  filter: blur(.45px);
+  pointer-events: none;
+  z-index: 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .lively-mascot--3d .lively-body::before { transform: none; }
+}
+
+/* --- Static mode: no cursor-follow, no idle / loop animations ---
+   Used for thumbnail previews (e.g. the emotion gallery). The visible face is
+   still driven by the `is-emotion-XX` class; only motion is disabled. */
+.lively-mascot--static {
+  cursor: default;
+  pointer-events: none;
+}
+
+.lively-mascot--static * {
+  animation: none !important;
+}
+
+/* --- Loading ring overlay (28) — shared by all characters ---
+   A bold, clearly-visible spinner for the live mascot; hidden in static
+   thumbnails so the emotion gallery stays purely iconic. */
+.lively__loading-overlay {
+  display: none;
+}
+
+.lively-mascot.is-emotion-28 .lively__loading-overlay {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 50%;
+  height: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  border-radius: 50%;
+  border: 2.5px solid color-mix(in srgb, var(--lively-outline) 22%, transparent);
+  pointer-events: none;
+  z-index: 10;
+}
+
+.lively-mascot.is-emotion-28 .lively__loading-overlay::before {
+  content: "";
+  position: absolute;
+  inset: -5px;
+  box-sizing: border-box;
+  border: 4px solid transparent;
+  border-top-color: var(--lively-outline);
+  border-right-color: var(--lively-outline);
+  border-radius: inherit;
+  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--lively-outline) 35%, transparent));
+  animation: lively-loading-orbit 1s linear infinite;
+}
+
+/* Static thumbnails (emotion gallery) keep the same loading ring but frozen */
+.lively-mascot--static.is-emotion-28 .lively__loading-overlay {
+  display: block;
+  width: 44%;
+  height: 44%;
+  border-width: 2px;
+}
+
+.lively-mascot--static.is-emotion-28 .lively__loading-overlay::before {
+  animation: none;
+  inset: -4px;
+  border-width: 3px;
+  /* freeze the arc at about 2 o'clock so it still reads as "loading" */
+  transform: rotate(45deg);
+}
+
+/* Rig layer: outer posture layer (hop / refresh rotation) */
+.lively-mascot__rig {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+
+/* Gaze layer: JS applies cursor-follow tilt; wraps all parts so the whole
+   face leans/turns together with the body posture. */
+.lively-mascot__gaze {
+  position: absolute;
+  inset: 0;
+  will-change: transform;
+}
+
+/* ============================================================
+ * Body
+ * ============================================================ */
+.lively-body {
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--lively-outline);
+  border-radius: 50%;
+  background: var(--lively-body);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--lively-outline) 70%, transparent);
+  transform-origin: 50% 92%;
+  /* Default idle posture: body + nested face + ears sway together */
+  animation: lively-sway 3.6s ease-in-out infinite;
+}
+
+/* These characters read best when their head/body rests upright. They retain
+   a quiet idle lift, while their attached ears, leaf, and antenna keep their
+   own independent motion. */
+.lively-mascot--sprout .lively-body,
+.lively-mascot--cat .lively-body,
+.lively-mascot--robot .lively-body {
+  animation-name: lively-upright-sway;
+}
+
+/* Immersive mode keeps internal facial detail readable while removing the
+   sticker-like silhouette ink from the body and exposed outer accessories. */
+.lively-mascot.lively-mascot--outline-hidden .lively-body {
+  border-width: 0;
+}
+
+.lively-mascot.lively-mascot--2d.lively-mascot--outline-hidden .lively-body {
+  box-shadow: none;
+}
+
+/* With the ink geometry removed, the shared light pass fills the entire body
+   edge instead of forming a separate rim around the silhouette. */
+.lively-mascot.lively-mascot--3d.lively-mascot--outline-hidden .lively-body::before {
+  inset: 0;
+}
+
+.lively-mascot.lively-mascot--3d.lively-mascot--outline-hidden .lively-body::after {
+  display: none;
+}
+
+.lively-mascot--outline-hidden .lively-sprout__leaf,
+.lively-mascot--outline-hidden .lively__ear,
+.lively-mascot--outline-hidden .lively-cat__tail-outline,
+.lively-mascot--outline-hidden .lively-ghost__hem-stroke {
+  stroke-opacity: 0;
+}
+
+.lively-mascot.is-happy .lively-body {
+  animation: lively-squish 0.6s cubic-bezier(.3, 1.6, .4, 1);
+}
+
+/* ============================================================
+ * Face
+ * ============================================================ */
+.lively-face-wrap {
+  position: absolute;
+  inset: 4px;
+}
+
+.lively-face-accessory {
+  visibility: hidden;
+}
+
+.lively-face-accessory.is-active {
+  visibility: visible;
+}
+
+.lively-face-wrap svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  transform-origin: 50% 50%;
+  animation: lively-breathe 3.8s ease-in-out infinite;
+}
+
+.lively-face {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+/* --- Eyes --- */
+.lively-face__eye {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: transform 90ms ease-out;
+}
+
+.lively-face__eye.is-blinking {
+  transform: scaleY(0.08);
+}
+
+.lively-face__eye>ellipse {
+  fill: #fff;
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+}
+
+.lively-face__pupil {
+  fill: var(--lively-outline);
+}
+
+.lively-face__shine {
+  fill: #fff;
+}
+
+/* --- Blush --- */
+.lively-face__blush {
+  fill: var(--lively-accent);
+  fill-opacity: 0.75;
+}
+
+/* --- Mouth variants --- */
+.lively-face__mouth,
+.lively-face__happy {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.lively-face__happy-mouth {
+  fill: var(--lively-outline);
+}
+
+.lively-face__happy,
+.lively-face__happy-mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-happy .lively-face__eye>ellipse,
+.lively-mascot.is-happy .lively-face__pupil,
+.lively-mascot.is-happy .lively-face__shine,
+.lively-mascot.is-happy .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-happy .lively-face__happy,
+.lively-mascot.is-happy .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+/* --- Alt face elements: hidden by default --- */
+.lively-face__sad-mouth,
+.lively-face__open-mouth,
+.lively-face__flat-mouth,
+.lively-face__bored-mouth,
+.lively-face__sleep-eye,
+.lively-face__angry-brow,
+.lively-face__x-eye,
+.lively-face__heart-eye {
+  visibility: hidden;
+}
+
+.lively-face__sad-mouth,
+.lively-face__flat-mouth,
+.lively-face__bored-mouth {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.lively-face__open-mouth {
+  fill: var(--lively-outline);
+  stroke: var(--lively-outline);
+  stroke-width: 1.5;
+}
+
+.lively-face__sleep-eye {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.4;
+  stroke-linecap: round;
+}
+
+.lively-face__angry-brow {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.8;
+  stroke-linecap: round;
+}
+
+.lively-face__x-eye line {
+  fill: none;
+  stroke: var(--lively-outline);
+  stroke-width: 2.6;
+  stroke-linecap: round;
+}
+
+.lively-face__heart-eye {
+  fill: var(--lively-accent);
+  stroke: var(--lively-outline);
+  stroke-width: 1.2;
+}
+
+/* ============================================================
+ * Emotion Face Behaviors (40 emotions)
+ * ============================================================ */
+
+/* 00 Sleep */
+.lively-mascot.is-emotion-00 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-00 .lively-face__pupil,
+.lively-mascot.is-emotion-00 .lively-face__shine,
+.lively-mascot.is-emotion-00 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-00 .lively-face__sleep-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-00 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-00 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 01 Wake */
+.lively-mascot.is-emotion-01 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-01 .lively-face__open-mouth {
+  visibility: visible;
+  rx: 3;
+  ry: 4;
+}
+
+/* 02 Idle: default face */
+
+/* 03 Breathe: default face */
+
+/* 04 Ready */
+.lively-mascot.is-emotion-04 .lively-face__eye>ellipse {
+  ry: 13;
+}
+
+/* 05 Pause */
+.lively-mascot.is-emotion-05 .lively-face__eye>ellipse {
+  ry: 5;
+}
+
+.lively-mascot.is-emotion-05 .lively-face__pupil,
+.lively-mascot.is-emotion-05 .lively-face__shine {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-05 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-05 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 06 Refresh: normal face */
+
+/* 07 LowBattery */
+.lively-mascot.is-emotion-07 .lively-face__eye {
+  transform: translateY(2px) scaleY(0.8);
+}
+
+.lively-mascot.is-emotion-07 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-07 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-07 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 08 Offline */
+.lively-mascot.is-emotion-08 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-08 .lively-face__pupil,
+.lively-mascot.is-emotion-08 .lively-face__shine,
+.lively-mascot.is-emotion-08 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-08 .lively-face__x-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-08 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-08 .lively-face__blush {
+  fill-opacity: 0;
+}
+
+/* 09 Boot */
+.lively-mascot.is-emotion-09 .lively-face__eye>ellipse {
+  ry: 13;
+  rx: 11;
+}
+
+.lively-mascot.is-emotion-09 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-09 .lively-face__open-mouth {
+  visibility: visible;
+}
+
+/* 10 Happy */
+.lively-mascot.is-emotion-10 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-10 .lively-face__pupil,
+.lively-mascot.is-emotion-10 .lively-face__shine,
+.lively-mascot.is-emotion-10 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-10 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-10 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-10 .lively-face__blush {
+  fill-opacity: 1;
+}
+
+/* 11 Excited */
+.lively-mascot.is-emotion-11 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-11 .lively-face__pupil,
+.lively-mascot.is-emotion-11 .lively-face__shine,
+.lively-mascot.is-emotion-11 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-11 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-11 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-11 .lively-face__blush {
+  fill-opacity: 1;
+  rx: 9;
+}
+
+/* 12 Sad */
+.lively-mascot.is-emotion-12 .lively-face__eye {
+  transform: translateY(2px) scaleY(0.85);
+}
+
+.lively-mascot.is-emotion-12 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-12 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-12 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 13 Angry */
+.lively-mascot.is-emotion-13 .lively-face__eye>ellipse {
+  ry: 9;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__angry-brow {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-13 .lively-face__blush {
+  fill: #ff6b6b;
+  fill-opacity: 0.7;
+}
+
+/* 14 Surprised */
+.lively-mascot.is-emotion-14 .lively-face__eye>ellipse {
+  ry: 14;
+  rx: 12;
+}
+
+.lively-mascot.is-emotion-14 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-14 .lively-face__open-mouth {
+  visibility: visible;
+  rx: 6;
+  ry: 7;
+}
+
+.lively-mascot.is-emotion-14 .lively-face__blush {
+  fill-opacity: 0.9;
+}
+
+/* 15 Shy */
+.lively-mascot.is-emotion-15 .lively-face__eye {
+  transform: translateY(3px);
+}
+
+.lively-mascot.is-emotion-15 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-15 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-15 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-15 .lively-face__blush {
+  fill-opacity: 1;
+  rx: 9;
+  ry: 5;
+}
+
+/* 16 Love */
+.lively-mascot.is-emotion-16 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-16 .lively-face__pupil,
+.lively-mascot.is-emotion-16 .lively-face__shine,
+.lively-mascot.is-emotion-16 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-16 .lively-face__heart-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-16 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-16 .lively-face__blush {
+  fill-opacity: 1;
+  rx: 9;
+}
+
+/* 17 Confused */
+.lively-mascot.is-emotion-17 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-17 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-17 .lively-face__blush {
+  fill-opacity: 0.4;
+}
+
+/* 18 Cool */
+.lively-mascot.is-emotion-18 .lively-face__eye>ellipse {
+  ry: 6;
+}
+
+.lively-mascot.is-emotion-18 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-18 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-18 .lively-face__blush {
+  fill-opacity: 0.5;
+}
+
+/* 19 Smug */
+.lively-mascot.is-emotion-19 .lively-face__eye>ellipse {
+  ry: 7;
+}
+
+.lively-mascot.is-emotion-19 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-19 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-19 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+/* 20 Thinking */
+.lively-mascot.is-emotion-20 .lively-face__eye {
+  transform: translateY(-3px);
+}
+
+.lively-mascot.is-emotion-20 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-20 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 21 Listening */
+.lively-mascot.is-emotion-21 .lively-face__eye>ellipse {
+  ry: 13;
+}
+
+/* 22 Talking */
+.lively-mascot.is-emotion-22 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-22 .lively-face__open-mouth {
+  visibility: visible;
+  rx: 4;
+  ry: 5;
+}
+
+/* 23 Searching: default face (JS gaze handles eye direction) */
+
+/* 24 Reading */
+.lively-mascot.is-emotion-24 .lively-face__eye {
+  transform: translateY(3px);
+}
+
+.lively-mascot.is-emotion-24 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-24 .lively-face__happy {
+  visibility: visible;
+}
+
+/* 25 Writing */
+.lively-mascot.is-emotion-25 .lively-face__eye {
+  transform: translateY(2px) translateX(1px);
+}
+
+/* 26 Coding */
+.lively-mascot.is-emotion-26 .lively-face__eye>ellipse {
+  ry: 8;
+}
+
+.lively-mascot.is-emotion-26 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-26 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 27 Designing: default face */
+
+/* 28 Loading */
+.lively-mascot.is-emotion-28 .lively-face__eye {
+  animation: lively-loading-eye-drift 3s ease-in-out infinite;
+}
+
+.lively-mascot.is-emotion-28 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-28 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 29 Processing */
+.lively-mascot.is-emotion-29 .lively-face__eye>ellipse {
+  ry: 9;
+}
+
+.lively-mascot.is-emotion-29 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-29 .lively-face__flat-mouth {
+  visibility: visible;
+}
+
+/* 30 Success */
+.lively-mascot.is-emotion-30 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-30 .lively-face__pupil,
+.lively-mascot.is-emotion-30 .lively-face__shine,
+.lively-mascot.is-emotion-30 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-30 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-30 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-30 .lively-face__blush {
+  fill-opacity: 1;
+}
+
+/* 31 Error */
+.lively-mascot.is-emotion-31 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-31 .lively-face__pupil,
+.lively-mascot.is-emotion-31 .lively-face__shine,
+.lively-mascot.is-emotion-31 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-31 .lively-face__x-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-31 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-31 .lively-face__blush {
+  fill: #ff6b6b;
+  fill-opacity: 0.7;
+}
+
+/* 32 Grateful */
+.lively-mascot.is-emotion-32 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-32 .lively-face__pupil,
+.lively-mascot.is-emotion-32 .lively-face__shine,
+.lively-mascot.is-emotion-32 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-32 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-32 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-32 .lively-face__blush {
+  fill: #ffb37a;
+  fill-opacity: 0.85;
+}
+
+/* 33 Retrying */
+.lively-mascot.is-emotion-33 .lively-face__pupil {
+  rx: 3;
+  ry: 4;
+}
+
+.lively-mascot.is-emotion-33 .lively-face__mouth {
+  d: path("M44 63 Q50 63 56 63");
+}
+
+/* 34 Cancelled */
+.lively-mascot.is-emotion-34 .lively-face__pupil {
+  cy: 47;
+  ry: 3;
+}
+
+.lively-mascot.is-emotion-34 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-34 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-34 .lively-face__blush {
+  fill-opacity: 0.3;
+}
+
+/* 35 Crying */
+.lively-mascot.is-emotion-35 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-35 .lively-face__pupil,
+.lively-mascot.is-emotion-35 .lively-face__shine,
+.lively-mascot.is-emotion-35 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__cry-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__sad-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__tear {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__blush {
+  fill: #6ec7ff;
+  fill-opacity: 0.6;
+}
+
+/* 36 Bored */
+.lively-mascot.is-emotion-36 .lively-face__eye {
+  transform: translateY(4px) scaleY(.5);
+}
+
+.lively-mascot.is-emotion-36 .lively-face__pupil,
+.lively-mascot.is-emotion-36 .lively-face__shine {
+  transform: translateY(2px);
+}
+
+.lively-mascot.is-emotion-36 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-36 .lively-face__bored-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-36 .lively-face__blush {
+  fill-opacity: .36;
+}
+
+/* 37 Nervous */
+.lively-mascot.is-emotion-37 .lively-face__sweat {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-37 .lively-face__pupil {
+  animation: lively-nervous-eyes 0.4s ease-in-out infinite;
+}
+
+/* 38 Eureka */
+.lively-mascot.is-emotion-38 .lively-face__eye>ellipse,
+.lively-mascot.is-emotion-38 .lively-face__pupil,
+.lively-mascot.is-emotion-38 .lively-face__shine,
+.lively-mascot.is-emotion-38 .lively-face__mouth {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__star-eye {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__happy {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__happy-mouth {
+  visibility: visible;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__sparkle {
+  visibility: visible;
+}
+
+/* 39 Waiting */
+.lively-mascot.is-emotion-39 .lively-face__pupil {
+  cy: 47;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__mouth {
+  d: path("M44 64 Q50 64 56 64");
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots {
+  visibility: visible;
+}
+
+/* ============================================================
+ * SVG Element Base Styles
+ * ============================================================ */
+
+/* --- Tear drops --- */
+.lively-face__tear {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__tear--l {
+  animation: lively-tear-fall 0.8s ease-in infinite;
+}
+
+.lively-mascot.is-emotion-35 .lively-face__tear--r {
+  animation: lively-tear-fall 0.8s ease-in 0.3s infinite;
+}
+
+@keyframes lively-tear-fall {
+  0% {
+    transform: translate(var(--tx, 40px), 52px);
+    opacity: 0.9;
+  }
+
+  100% {
+    transform: translate(var(--tx, 40px), 72px);
+    opacity: 0;
+  }
+}
+
+/* --- Sweat drop --- */
+.lively-face__sweat {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-37 .lively-face__sweat {
+  animation: lively-sweat-drip 1.2s ease-in infinite;
+}
+
+@keyframes lively-sweat-drip {
+  0% {
+    transform: translate(82px, 30px);
+    opacity: 0.8;
+  }
+
+  100% {
+    transform: translate(82px, 48px);
+    opacity: 0;
+  }
+}
+
+/* --- Star eyes --- */
+.lively-face__star-eye {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__star-eye {
+  animation: lively-star-pulse 0.6s ease-in-out infinite;
+}
+
+@keyframes lively-star-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+/* --- Sparkles --- */
+.lively-face__sparkle {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__sparkle--1 {
+  animation: lively-sparkle-twinkle 0.8s ease-in-out infinite;
+}
+
+.lively-mascot.is-emotion-38 .lively-face__sparkle--2 {
+  animation: lively-sparkle-twinkle 0.8s ease-in-out 0.4s infinite;
+}
+
+@keyframes lively-sparkle-twinkle {
+
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* --- Cry eyes --- */
+.lively-face__cry-eye {
+  visibility: hidden;
+}
+
+/* --- Waiting dots --- */
+.lively-face__waiting-dots {
+  visibility: hidden;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots circle:nth-child(1) {
+  animation: lively-dot-bounce 1.2s ease-in-out infinite;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots circle:nth-child(2) {
+  animation: lively-dot-bounce 1.2s ease-in-out 0.2s infinite;
+}
+
+.lively-mascot.is-emotion-39 .lively-face__waiting-dots circle:nth-child(3) {
+  animation: lively-dot-bounce 1.2s ease-in-out 0.4s infinite;
+}
+
+@keyframes lively-dot-bounce {
+
+  0%,
+  60%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+
+/* ============================================================
+ * Feet
+ * ============================================================ */
+.lively__feet {
+  --lively-state-filter: brightness(1);
+  position: absolute;
+  bottom: -7cqw;
+  left: 0;
+  width: 100%;
+  filter: var(--lively-state-filter);
+}
+
+.lively__foot {
+  position: absolute;
+  bottom: 0;
+  width: 22cqw;
+  height: 16cqw;
+  transform-origin: 50% 0;
+  animation: lively-foot-tap 1.6s ease-in-out infinite;
+}
+
+.lively__foot svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* Default foot positions (characters override via their own CSS) */
+.lively__foot--l {
+  left: 18cqw;
+}
+
+.lively__foot--r {
+  left: 60cqw;
+  animation-delay: 0.8s;
+}
+
+.lively-foot__body {
+  fill: var(--lively-outline);
+  stroke: var(--lively-outline);
+  stroke-width: 1;
+  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.12));
+}
+
+.lively-foot__shine {
+  fill: #fff;
+  opacity: 0.85;
+}
+
+/* Happy foot kicks */
+.lively-mascot.is-happy .lively__foot--l {
+  animation: lively-foot-kick-l 0.6s cubic-bezier(.3, 1.5, .5, 1);
+}
+
+.lively-mascot.is-happy .lively__foot--r {
+  animation: lively-foot-kick-r 0.6s cubic-bezier(.3, 1.5, .5, 1);
+}
+
+/* Hopping: feet tuck */
+.lively-mascot.is-hopping .lively-mascot__rig {
+  animation: lively-hop 0.9s cubic-bezier(.3, .7, .4, 1);
+}
+
+.lively-mascot.is-hopping .lively__foot {
+  animation: lively-foot-tuck 0.9s ease-in-out;
+}
+
+/* ============================================================
+ * Reduced Motion
+ * ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+
+  .lively-body,
+  .lively__leaf,
+  .lively__ears,
+  .lively__antenna,
+  .lively__tail,
+  .lively-cat__whiskers,
+  .lively-cat__whisker,
+  .lively__foot,
+  .lively__ghost-hem,
+  .lively-face-wrap svg,
+  .lively__loading-overlay::before {
+    animation: none !important;
+  }
+}
+
+/* ============================================================
+ * Keyframes: Base
+ * ============================================================ */
+@keyframes lively-breathe {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.035);
+  }
+}
+
+@keyframes lively-squish {
+  0% {
+    transform: scale(1, 1);
+  }
+
+  30% {
+    transform: scale(1.12, 0.86);
+  }
+
+  60% {
+    transform: scale(0.94, 1.08);
+  }
+
+  100% {
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes lively-sway {
+
+  0%,
+  100% {
+    transform: rotate(6deg);
+  }
+
+  50% {
+    transform: rotate(10deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-upright-sway {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-hop {
+  0% {
+    transform: translateY(0);
+  }
+
+  18% {
+    transform: translateY(3px) scale(1.07, 0.88);
+  }
+
+  45% {
+    transform: translateY(-13px) scale(0.95, 1.07);
+  }
+
+  72% {
+    transform: translateY(0) scale(1.05, 0.93);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes lively-leaf-sway {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(20deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-leaf-spin {
+  0% {
+    transform: rotate(8deg);
+  }
+
+  100% {
+    transform: rotate(368deg);
+  }
+}
+
+@keyframes lively-foot-tap {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(-11deg) translateY(-2px);
+  }
+
+  60% {
+    transform: rotate(5deg) translateY(0);
+  }
+}
+
+@keyframes lively-foot-kick-l {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(-26deg) translateY(-5px);
+  }
+}
+
+@keyframes lively-foot-kick-r {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(26deg) translateY(-5px);
+  }
+}
+
+@keyframes lively-foot-tuck {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(0deg) translateY(-4px) scaleY(0.6);
+  }
+}
+
+/* ============================================================
+ * Keyframes: Emotion Body Animations
+ * ============================================================ */
+
+/* --- Lifecycle --- */
+@keyframes lively-wake {
+  0% {
+    transform: scale(0.9) rotate(-3deg);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: scale(1.05) rotate(2deg);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1) rotate(0);
+    opacity: 1;
+  }
+}
+
+@keyframes lively-deep-breathe {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.06);
+  }
+}
+
+@keyframes lively-ready {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+@keyframes lively-refresh {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lively-lowbatt {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes lively-boot {
+  0% {
+    transform: scale(0.3);
+    opacity: 0;
+  }
+
+  60% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* --- Reactions --- */
+@keyframes lively-happy-bounce {
+  0% {
+    transform: translateY(0) scale(1);
+  }
+
+  30% {
+    transform: translateY(-12px) scale(1.05, 0.95);
+  }
+
+  50% {
+    transform: translateY(-16px) scale(0.95, 1.05);
+  }
+
+  80% {
+    transform: translateY(2px) scale(1.02, 0.98);
+  }
+
+  100% {
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes lively-excited {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+
+  25% {
+    transform: translateY(-6px) rotate(-4deg);
+  }
+
+  75% {
+    transform: translateY(-6px) rotate(4deg);
+  }
+}
+
+@keyframes lively-sad {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+
+  50% {
+    transform: translateY(3px) rotate(-2deg);
+  }
+}
+
+@keyframes lively-bored {
+
+  0%,
+  100% {
+    transform: translateY(1px) rotate(-1deg) scale(1, .99);
+  }
+
+  50% {
+    transform: translateY(4px) rotate(-2.2deg) scale(1.012, .972);
+  }
+}
+
+@keyframes lively-surprise {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.15, 0.88);
+  }
+
+  60% {
+    transform: scale(0.92, 1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lively-love-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.08);
+  }
+}
+
+@keyframes lively-confused {
+
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  25% {
+    transform: rotate(-5deg);
+  }
+
+  75% {
+    transform: rotate(5deg);
+  }
+}
+
+@keyframes lively-smug {
+
+  0%,
+  100% {
+    transform: translateY(0) rotate(0);
+  }
+
+  50% {
+    transform: translateY(-2px) rotate(3deg);
+  }
+}
+
+@keyframes lively-shy {
+
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+
+  30% {
+    transform: translateX(3px) rotate(1deg);
+  }
+
+  70% {
+    transform: translateX(-2px) rotate(-0.5deg);
+  }
+}
+
+/* --- Work States --- */
+@keyframes lively-thinking {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  30% {
+    transform: translateY(-4px);
+  }
+
+  60% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-listening {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.04, 0.96);
+  }
+}
+
+@keyframes lively-talking {
+
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+
+  50% {
+    transform: scaleY(1.03);
+  }
+}
+
+@keyframes lively-searching {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-4px);
+  }
+
+  75% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes lively-reading {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(2px);
+  }
+}
+
+@keyframes lively-writing {
+
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+
+  25% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  75% {
+    transform: translateX(2px) rotate(1deg);
+  }
+}
+
+@keyframes lively-coding {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-designing {
+
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  33% {
+    transform: rotate(-3deg);
+  }
+
+  66% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes lively-loading {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lively-processing {
+
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes lively-success {
+  0% {
+    transform: scale(1);
+  }
+
+  30% {
+    transform: scale(1.12, 0.88);
+  }
+
+  60% {
+    transform: scale(0.95, 1.08);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* --- Loading keyframes --- */
+@keyframes lively-loading-eye-drift {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-2px);
+  }
+
+  75% {
+    transform: translateX(2px);
+  }
+}
+
+@keyframes lively-leaf-spin-slow {
+  0% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(188deg) scale(1.08);
+  }
+
+  100% {
+    transform: rotate(368deg) scale(1);
+  }
+}
+
+@keyframes lively-loading-orbit {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes lively-loading-bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+/* ============================================================
+ * Keyframes: Leaf Emotion Animations
+ * ============================================================ */
+@keyframes lively-leaf-sleep {
+
+  0%,
+  100% {
+    transform: rotate(8deg) scaleY(0.9);
+  }
+
+  50% {
+    transform: rotate(12deg) scaleY(0.85);
+  }
+}
+
+@keyframes lively-leaf-wake {
+  0% {
+    transform: rotate(5deg) scale(0.9);
+  }
+
+  50% {
+    transform: rotate(25deg) scale(1.1);
+  }
+
+  100% {
+    transform: rotate(10deg) scale(1);
+  }
+}
+
+@keyframes lively-leaf-breathe {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(16deg) scaleY(1.05);
+  }
+}
+
+@keyframes lively-leaf-ready {
+
+  0%,
+  100% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(18deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-leaf-pause {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+    opacity: 0.6;
+  }
+
+  50% {
+    transform: rotate(10deg);
+    opacity: 0.5;
+  }
+}
+
+@keyframes lively-leaf-refresh {
+  0% {
+    transform: rotate(8deg);
+  }
+
+  100% {
+    transform: rotate(368deg);
+  }
+}
+
+@keyframes lively-leaf-droop {
+
+  0%,
+  100% {
+    transform: rotate(5deg) translateY(2px) scaleY(0.85);
+  }
+
+  50% {
+    transform: rotate(3deg) translateY(4px) scaleY(0.8);
+  }
+}
+
+@keyframes lively-leaf-boot {
+  0% {
+    transform: scale(0.5) rotate(0);
+  }
+
+  60% {
+    transform: scale(1.15) rotate(15deg);
+  }
+
+  100% {
+    transform: scale(1) rotate(10deg);
+  }
+}
+
+@keyframes lively-leaf-spin-fast {
+  0% {
+    transform: rotate(8deg);
+  }
+
+  100% {
+    transform: rotate(368deg);
+  }
+}
+
+@keyframes lively-leaf-flap {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(28deg);
+  }
+
+  75% {
+    transform: rotate(-10deg);
+  }
+}
+
+@keyframes lively-leaf-angry {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(-5deg);
+  }
+
+  75% {
+    transform: rotate(20deg);
+  }
+}
+
+@keyframes lively-leaf-jump {
+  0% {
+    transform: rotate(8deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(20deg) translateY(-6px);
+  }
+
+  100% {
+    transform: rotate(8deg) translateY(0);
+  }
+}
+
+@keyframes lively-leaf-shy {
+
+  0%,
+  100% {
+    transform: rotate(12deg) scaleX(1);
+  }
+
+  50% {
+    transform: rotate(6deg) scaleX(-1);
+  }
+}
+
+@keyframes lively-leaf-love {
+
+  0%,
+  100% {
+    transform: rotate(10deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(15deg) scale(1.15);
+  }
+}
+
+@keyframes lively-leaf-confused {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(-8deg);
+  }
+
+  75% {
+    transform: rotate(22deg);
+  }
+}
+
+@keyframes lively-leaf-cool {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(14deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-leaf-smug {
+
+  0%,
+  100% {
+    transform: rotate(8deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(16deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-leaf-think {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(20deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-leaf-perk {
+
+  0%,
+  100% {
+    transform: rotate(8deg) scaleY(1);
+  }
+
+  50% {
+    transform: rotate(14deg) scaleY(1.1);
+  }
+}
+
+@keyframes lively-leaf-talk {
+
+  0%,
+  100% {
+    transform: rotate(10deg);
+  }
+
+  50% {
+    transform: rotate(18deg);
+  }
+}
+
+@keyframes lively-leaf-search {
+
+  0%,
+  100% {
+    transform: rotate(5deg) translateX(0);
+  }
+
+  25% {
+    transform: rotate(12deg) translateX(-3px);
+  }
+
+  75% {
+    transform: rotate(12deg) translateX(3px);
+  }
+}
+
+@keyframes lively-leaf-read {
+
+  0%,
+  100% {
+    transform: rotate(6deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(4deg) translateY(2px);
+  }
+}
+
+@keyframes lively-leaf-write {
+
+  0%,
+  100% {
+    transform: rotate(8deg) translateX(0);
+  }
+
+  25% {
+    transform: rotate(5deg) translateX(-2px);
+  }
+
+  75% {
+    transform: rotate(12deg) translateX(2px);
+  }
+}
+
+@keyframes lively-leaf-code {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(16deg);
+  }
+}
+
+@keyframes lively-leaf-design {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  33% {
+    transform: rotate(4deg);
+  }
+
+  66% {
+    transform: rotate(14deg);
+  }
+}
+
+@keyframes lively-leaf-pulse {
+
+  0%,
+  100% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(8deg) scale(1.1);
+  }
+}
+
+@keyframes lively-leaf-celebrate {
+  0% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  30% {
+    transform: rotate(25deg) scale(1.15);
+  }
+
+  60% {
+    transform: rotate(-5deg) scale(1.05);
+  }
+
+  100% {
+    transform: rotate(8deg) scale(1);
+  }
+}
+
+@keyframes lively-leaf-error {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+    opacity: 1;
+  }
+
+  50% {
+    transform: rotate(-3deg);
+    opacity: 0.5;
+  }
+}
+
+/* ============================================================
+ * Keyframes: Foot Emotion Animations
+ * ============================================================ */
+@keyframes lively-foot-rest {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(0deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-foot-wake {
+  0% {
+    transform: rotate(0deg) scaleY(0.6);
+  }
+
+  60% {
+    transform: rotate(0deg) scaleY(1.1);
+  }
+
+  100% {
+    transform: rotate(0deg) scaleY(1);
+  }
+}
+
+@keyframes lively-foot-ready {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(0deg) translateY(-2px);
+  }
+}
+
+@keyframes lively-foot-boot {
+  0% {
+    transform: rotate(0deg) scaleY(0.3);
+  }
+
+  60% {
+    transform: rotate(0deg) scaleY(1.1);
+  }
+
+  100% {
+    transform: rotate(0deg) scaleY(1);
+  }
+}
+
+@keyframes lively-foot-kick {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  40% {
+    transform: rotate(-30deg) translateY(-6px);
+  }
+}
+
+@keyframes lively-foot-jump {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0) scaleY(1);
+  }
+
+  30% {
+    transform: rotate(0deg) translateY(2px) scaleY(0.7);
+  }
+
+  50% {
+    transform: rotate(0deg) translateY(-8px) scaleY(1);
+  }
+}
+
+@keyframes lively-foot-drag {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(3deg) translateY(2px);
+  }
+}
+
+@keyframes lively-foot-stomp {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(0deg) translateY(-3px);
+  }
+
+  60% {
+    transform: rotate(0deg) translateY(2px);
+  }
+}
+
+@keyframes lively-foot-tap-slow {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  50% {
+    transform: rotate(-5deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-foot-tap-fast {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(-10deg) translateY(-2px);
+  }
+
+  60% {
+    transform: rotate(6deg) translateY(0);
+  }
+}
+
+@keyframes lively-foot-cross {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateX(0);
+  }
+
+  50% {
+    transform: rotate(0deg) translateX(4px);
+  }
+}
+
+@keyframes lively-foot-pose {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  30% {
+    transform: rotate(5deg) translateY(-2px);
+  }
+
+  70% {
+    transform: rotate(-3deg) translateY(-1px);
+  }
+}
+
+@keyframes lively-foot-pace {
+
+  0%,
+  100% {
+    transform: rotate(0deg) translateY(0);
+  }
+
+  25% {
+    transform: rotate(-6deg) translateY(-2px);
+  }
+
+  75% {
+    transform: rotate(6deg) translateY(-2px);
+  }
+}
+
+/* ============================================================
+ * Keyframes: Extended Emotions (35-39)
+ * ============================================================ */
+@keyframes lively-nervous {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-1.5px);
+  }
+
+  40% {
+    transform: translateX(1.5px);
+  }
+
+  60% {
+    transform: translateX(-1px);
+  }
+
+  80% {
+    transform: translateX(1px);
+  }
+}
+
+@keyframes lively-leaf-nervous {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  25% {
+    transform: rotate(2deg);
+  }
+
+  75% {
+    transform: rotate(14deg);
+  }
+}
+
+@keyframes lively-foot-nervous {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+@keyframes lively-nervous-eyes {
+
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-1.5px);
+  }
+
+  75% {
+    transform: translateX(1.5px);
+  }
+}
+
+@keyframes lively-eureka {
+  0% {
+    transform: scale(1);
+  }
+
+  20% {
+    transform: scale(1.12, 0.9);
+  }
+
+  40% {
+    transform: scale(0.95, 1.08);
+  }
+
+  60% {
+    transform: scale(1.04, 0.97);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lively-leaf-eureka {
+  0% {
+    transform: rotate(8deg) scale(1);
+  }
+
+  50% {
+    transform: rotate(35deg) scale(1.15);
+  }
+
+  100% {
+    transform: rotate(10deg) scale(1);
+  }
+}
+
+@keyframes lively-waiting {
+
+  0%,
+  100% {
+    transform: translateX(0) rotate(0);
+  }
+
+  30% {
+    transform: translateX(-2px) rotate(-1deg);
+  }
+
+  60% {
+    transform: translateX(2px) rotate(1deg);
+  }
+}
+
+@keyframes lively-leaf-waiting {
+
+  0%,
+  100% {
+    transform: rotate(8deg);
+  }
+
+  50% {
+    transform: rotate(14deg);
+  }
+}