eklavya 1.86.0 → 1.87.0

package/dist/assets/dashboard.html

@@ -1295,7 +1295,7 @@
     <p class="page__eyebrow crumb inner" id="crumb" aria-label="Workflow and scope"></p>
     <div class="inner stack" id="view" aria-busy="true">
       <!-- The same markup `loader()` writes; the script has not run yet. -->
-      <div class="loader loader--page" role="status" aria-live="polite"><eklavya-mascot state="loading" variant="loading" size="96"></eklavya-mascot><span>Loading your history…</span></div>
+      <div class="loader loader--page" role="status" aria-live="polite"><eklavya-mascot state="loading" variant="loading" size="96"></eklavya-mascot><span></span></div>
     </div>
     <span class="sr" id="fb-live" role="status" aria-live="polite"></span>
     <footer class="foot inner">
@@ -2304,13 +2304,61 @@ const chart = (id, fn) => {
 let GEN = 0;
 
 /**
- * The one loading state: the companion drawing and releasing its arrow, and what is being waited
- * for. `page: true` is the full-height version the first paint uses. Every
- * placeholder a `slot()` starts with is one of these, so a wait looks
- * the same wherever it happens. `label` is plain text; it is escaped here.
+ * What a loader says while it waits: one of Claude Code's spinner verbs, instead of "Loading…".
+ * "Clauding" is left out because it is Anthropic's product name. Present tense, one word,
+ * nothing that sounds like an error.
+ */
+const LOADER_VERBS = [
+  'Accomplishing', 'Actioning', 'Actualizing', 'Architecting', 'Baking', 'Beaming', "Beboppin'",
+  'Befuddling', 'Billowing', 'Blanching', 'Bloviating', 'Boogieing', 'Boondoggling', 'Booping',
+  'Bootstrapping', 'Brewing', 'Bunning', 'Burrowing', 'Calculating', 'Canoodling', 'Caramelizing',
+  'Cascading', 'Catapulting', 'Cerebrating', 'Channeling', 'Channelling', 'Choreographing',
+  'Churning', 'Coalescing', 'Cogitating', 'Combobulating', 'Composing', 'Computing', 'Concocting',
+  'Considering', 'Contemplating', 'Cooking', 'Crafting', 'Creating', 'Crunching', 'Crystallizing',
+  'Cultivating', 'Deciphering', 'Deliberating', 'Determining', 'Dilly-dallying',
+  'Discombobulating', 'Doing', 'Doodling', 'Drizzling', 'Ebbing', 'Effecting', 'Elucidating',
+  'Embellishing', 'Enchanting', 'Envisioning', 'Evaporating', 'Fermenting', 'Fiddle-faddling',
+  'Finagling', 'Flambéing', 'Flibbertigibbeting', 'Flowing', 'Flummoxing', 'Fluttering', 'Forging',
+  'Forming', 'Frolicking', 'Frosting', 'Gallivanting', 'Galloping', 'Garnishing', 'Generating',
+  'Gesticulating', 'Germinating', 'Gitifying', 'Grooving', 'Gusting', 'Harmonizing', 'Hashing',
+  'Hatching', 'Herding', 'Honking', 'Hullaballooing', 'Hyperspacing', 'Ideating', 'Imagining',
+  'Improvising', 'Incubating', 'Inferring', 'Infusing', 'Ionizing', 'Jitterbugging', 'Julienning',
+  'Kneading', 'Leavening', 'Levitating', 'Lollygagging', 'Manifesting', 'Marinating', 'Meandering',
+  'Metamorphosing', 'Misting', 'Moonwalking', 'Moseying', 'Mulling', 'Mustering', 'Musing',
+  'Nebulizing', 'Nesting', 'Newspapering', 'Noodling', 'Nucleating', 'Orbiting', 'Orchestrating',
+  'Osmosing', 'Perambulating', 'Percolating', 'Perusing', 'Philosophising', 'Photosynthesizing',
+  'Pollinating', 'Pondering', 'Pontificating', 'Pouncing', 'Precipitating', 'Prestidigitating',
+  'Processing', 'Proofing', 'Propagating', 'Puttering', 'Puzzling', 'Quantumizing',
+  'Razzle-dazzling', 'Razzmatazzing', 'Recombobulating', 'Reticulating', 'Roosting', 'Ruminating',
+  'Sautéing', 'Scampering', 'Schlepping', 'Scurrying', 'Seasoning', 'Shenaniganing', 'Shimmying',
+  'Simmering', 'Skedaddling', 'Sketching', 'Slithering', 'Smooshing', 'Sock-hopping', 'Spelunking',
+  'Spinning', 'Sprouting', 'Stewing', 'Sublimating', 'Swirling', 'Swooping', 'Symbioting',
+  'Synthesizing', 'Tempering', 'Thinking', 'Thundering', 'Tinkering', 'Tomfoolering',
+  'Topsy-turvying', 'Transfiguring', 'Transmuting', 'Twisting', 'Undulating', 'Unfurling',
+  'Unravelling', 'Vibing', 'Waddling', 'Wandering', 'Warping', 'Whatchamacalliting',
+  'Whirlpooling', 'Whirring', 'Whisking', 'Wibbling', 'Working', 'Wrangling', 'Zesting',
+  'Zigzagging',
+];
+const randomVerb = () => LOADER_VERBS[Math.floor(Math.random() * LOADER_VERBS.length)] + '…';
+// Random for every wait, never fixed to a screen: the choices are dropped on each navigation.
+// Within one wait the verb holds, because a redraw writes the same markup and must not replace
+// a loader that is still waiting, and words changing under the reader read as progress steps.
+const loaderVerbs = new Map();
+function loaderVerb(label) {
+  if (!loaderVerbs.has(label)) loaderVerbs.set(label, randomVerb());
+  return loaderVerbs.get(label);
+}
+// The first paint's loader is in the markup, before this script; give it its verb now.
+document.querySelector('#view > .loader > span')?.replaceChildren(randomVerb());
+
+/**
+ * The one loading state: the companion walking toward the reader and a random verb, the only
+ * thing it says, to screen readers too. `label` names the wait and is never shown: it keeps that
+ * wait's verb through redraws. `page: true` is the full-height version the first paint uses. Every
+ * placeholder a `slot()` starts with is one of these, so a wait looks the same wherever it happens.
  */
 function loader(label, { page = false } = {}) {
-  return `<div class="loader${page ? ' loader--page' : ''}" role="status" aria-live="polite"><eklavya-mascot state="loading" variant="loading" size="${page ? 96 : 56}"></eklavya-mascot><span>${esc(label)}</span></div>`;
+  return `<div class="loader${page ? ' loader--page' : ''}" role="status" aria-live="polite"><eklavya-mascot state="loading" variant="loading" size="${page ? 96 : 56}"></eklavya-mascot><span>${loaderVerb(label)}</span></div>`;
 }
 
 /* ---------- the response cache ----------
@@ -2428,7 +2476,7 @@ const slotDone = (el) => { el.removeAttribute('aria-busy'); el.removeAttribute('
 const holdsContent = (el) => !el.hasAttribute('data-failed') && !el.querySelector(':scope > .slot__wait');
 
 /**
- * `opts`: `label` (what the loader says), `cls` (a class for the target), `region` (the target is
+ * `opts`: `label` (names the wait, so its loader keeps one verb), `cls` (a class for the target), `region` (the target is
  * a `data-region`, so a redraw replaces its contents alone). `draw` is a pure function of the
  * response, and must not change it: a cached body is drawn again. It may queue its own charts and slots.
  */
@@ -6781,7 +6829,7 @@ $('view').addEventListener('change', (e) => {
   }
 });
 
-addEventListener('hashchange', () => { if (INV) { closePicker(false); syncFromUrl(); } });
+addEventListener('hashchange', () => { loaderVerbs.clear(); if (INV) { closePicker(false); syncFromUrl(); } });
 
 let resizeTimer = 0;
 addEventListener('resize', () => {

package/dist/assets/mascot/expressions/celebrate-body.svg

@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
 .ek-mascot { display:block; overflow:visible; flex-shrink:0; }
 .ek-mascot[data-variant="face"] { overflow:hidden; }
 .ek-mascot__face path:not([fill]) { fill:none; }
-.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
-.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
-.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
-.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
-@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
-@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
-@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
-@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
 .ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
 .ek-companion--hero { margin-bottom:16px; }
 .ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
 .ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
 .ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
 @media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
 
 .ek-companion--rail { padding:12px 20px; text-decoration:none; }

package/dist/assets/mascot/expressions/celebrate-face.svg

@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
 .ek-mascot { display:block; overflow:visible; flex-shrink:0; }
 .ek-mascot[data-variant="face"] { overflow:hidden; }
 .ek-mascot__face path:not([fill]) { fill:none; }
-.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
-.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
-.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
-.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
-@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
-@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
-@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
-@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
 .ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
 .ek-companion--hero { margin-bottom:16px; }
 .ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
 .ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
 .ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
 @media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
 
 .ek-companion--rail { padding:12px 20px; text-decoration:none; }

package/dist/assets/mascot/expressions/confused-body.svg

@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
 .ek-mascot { display:block; overflow:visible; flex-shrink:0; }
 .ek-mascot[data-variant="face"] { overflow:hidden; }
 .ek-mascot__face path:not([fill]) { fill:none; }
-.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
-.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
-.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
-.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
-@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
-@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
-@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
-@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
 .ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
 .ek-companion--hero { margin-bottom:16px; }
 .ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
 .ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
 .ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
 @media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
 
 .ek-companion--rail { padding:12px 20px; text-decoration:none; }

package/dist/assets/mascot/expressions/confused-face.svg

@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
 .ek-mascot { display:block; overflow:visible; flex-shrink:0; }
 .ek-mascot[data-variant="face"] { overflow:hidden; }
 .ek-mascot__face path:not([fill]) { fill:none; }
-.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
-.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
-.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
-.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
-@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
-@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
-@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
-@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
 .ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
 .ek-companion--hero { margin-bottom:16px; }
 .ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
 .ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
 .ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
 @media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
 
 .ek-companion--rail { padding:12px 20px; text-decoration:none; }

package/dist/assets/mascot/expressions/cool-body.svg

@@ -0,0 +1,85 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 200" width="200" height="200" class="ek-mascot" data-expression="cool" data-variant="body" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
+     Archer Cloak artwork keeps its approved identity across both grounds.
+     UI chrome continues to use the surface, text and accent roles below. */
+  --mascot-coral: #ef9875;
+  --mascot-coral-dark: #c96d51;
+  --mascot-highlight: #ffc8a6;
+  --mascot-cloak: #0E6E66;
+  --mascot-cloak-dark: #07403C;
+  --mascot-thread: #C4EDE4;
+  --mascot-ink: #302c2a;
+  --mascot-metal: #5b7c73;
+  --mascot-wood: #bc9569;
+  --mascot-wood-dark: #74583f;
+  --mascot-string: #EAE7E1;
+  --mascot-shadow: #26262a;
+  /* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
+eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
+.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
+.ek-mascot[data-variant="face"] { overflow:hidden; }
+.ek-mascot__face path:not([fill]) { fill:none; }
+.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
+.ek-companion--hero { margin-bottom:16px; }
+.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
+.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
+.ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
+@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
+
+.ek-companion--rail { padding:12px 20px; text-decoration:none; }
+.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
+.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
+</style><title>Eklavya, cool and confident</title><g class="ek-mascot__character">
+      <ellipse cx="94" cy="185" rx="49" ry="5" fill="var(--mascot-shadow)"/>
+      <path d="M51 124Q29 137 34 168l23-8 17-27m59-9q26 8 21 39l-24-7-17-22" fill="var(--mascot-cloak-dark)"/>
+      <path d="M65 157v23q0 8 16 6l4-28m21 0 1 23q2 8 17 4v-29" fill="var(--mascot-coral)"/>
+      <path d="M58 122q35-16 72 0l8 46q-19 9-42 1-23 7-43-1Z" fill="var(--mascot-cloak)"/>
+      <path d="M96 127v40m-31-22q29 9 64 0" fill="none" stroke="var(--mascot-cloak-dark)" stroke-width="3"/>
+      <path d="M52 109q42-22 86 0l-9 29-32-14-32 14Z" fill="var(--mascot-cloak)" stroke="var(--mascot-cloak-dark)" stroke-width="3" stroke-linejoin="round"/>
+      <path d="M57 114l37 10m42-10-39 10" fill="none" stroke="var(--mascot-thread)" stroke-width="2"/>
+      <path d="M54 148h80v11H54Z" fill="var(--mascot-ink)"/>
+      <rect x="87" y="146" width="17" height="15" rx="3" fill="var(--mascot-metal)"/><rect x="92" y="150" width="7" height="7" rx="1" fill="var(--mascot-ink)"/>
+      <g class="ek-mascot__head">
+        <path d="M46 43h18V29h19V18h23v12h20v14h17v19h8v29h-8v16q0 12-16 15H62q-18-3-18-17V91h-9V63h11Z" fill="var(--mascot-coral)" stroke="var(--mascot-coral-dark)" stroke-width="2" stroke-linejoin="round"/>
+        <path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
+        <g class="ek-mascot__face" fill="var(--mascot-ink)" stroke="var(--mascot-ink)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M60 65h19v7q0 9-9 9h-1q-9 0-9-9Zm46 0h19v7q0 9-9 9h-1q-9 0-9-9Z" fill="var(--mascot-ink)"/><path d="M56 66h72M86 92q9 3 15-4"/></g>
+      </g>
+      <circle cx="96" cy="125" r="7" fill="var(--mascot-metal)"/><circle cx="94" cy="123" r="2" fill="var(--mascot-thread)"/>
+      <g class="ek-mascot__bow" fill="none" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M157 78q36 47 0 94" stroke="var(--mascot-wood-dark)" stroke-width="8"/>
+        <path d="M158 78q32 47 0 94" stroke="var(--mascot-wood)" stroke-width="4"/>
+        <path class="ek-mascot__string" d="M157 78l-88 50 88 44" stroke="var(--mascot-string)" stroke-width="1.8"/>
+      </g>
+      <path d="M130 127l16-8q10-1 13 5 2 8-6 11l-15 4" fill="var(--mascot-cloak)"/>
+      <rect x="147" y="117" width="15" height="18" rx="7" fill="var(--mascot-coral)"/>
+      <g class="ek-mascot__arrow" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M69 128h114" stroke="var(--mascot-wood-dark)" stroke-width="3"/>
+        <path d="M179 120l13 8-13 8Z" fill="var(--mascot-thread)" stroke="var(--mascot-wood)" stroke-width="1.5"/>
+        <path d="M71 128l-9-9 10 1 8 8-8 8-10 1Z" fill="var(--mascot-thread)"/>
+      </g>
+      <path d="M58 128q-11-6-14 5-2 9 8 13l17-8" fill="var(--mascot-cloak)"/>
+      <rect x="62" y="121" width="18" height="16" rx="7" fill="var(--mascot-coral)"/>
+    </g></svg>

package/dist/assets/mascot/expressions/cool-face.svg

@@ -0,0 +1,59 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 12 126 128" width="200" height="200" class="ek-mascot" data-expression="cool" data-variant="face" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
+     Archer Cloak artwork keeps its approved identity across both grounds.
+     UI chrome continues to use the surface, text and accent roles below. */
+  --mascot-coral: #ef9875;
+  --mascot-coral-dark: #c96d51;
+  --mascot-highlight: #ffc8a6;
+  --mascot-cloak: #0E6E66;
+  --mascot-cloak-dark: #07403C;
+  --mascot-thread: #C4EDE4;
+  --mascot-ink: #302c2a;
+  --mascot-metal: #5b7c73;
+  --mascot-wood: #bc9569;
+  --mascot-wood-dark: #74583f;
+  --mascot-string: #EAE7E1;
+  --mascot-shadow: #26262a;
+  /* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
+eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
+.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
+.ek-mascot[data-variant="face"] { overflow:hidden; }
+.ek-mascot__face path:not([fill]) { fill:none; }
+.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
+.ek-companion--hero { margin-bottom:16px; }
+.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
+.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
+.ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
+@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
+
+.ek-companion--rail { padding:12px 20px; text-decoration:none; }
+.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
+.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
+</style><title>Eklavya, cool and confident</title><path d="M48 109q44-19 88 0l-8 30-33-15-31 15Z" fill="var(--mascot-cloak)"/><g class="ek-mascot__head">
+        <path d="M46 43h18V29h19V18h23v12h20v14h17v19h8v29h-8v16q0 12-16 15H62q-18-3-18-17V91h-9V63h11Z" fill="var(--mascot-coral)" stroke="var(--mascot-coral-dark)" stroke-width="2" stroke-linejoin="round"/>
+        <path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
+        <g class="ek-mascot__face" fill="var(--mascot-ink)" stroke="var(--mascot-ink)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M60 65h19v7q0 9-9 9h-1q-9 0-9-9Zm46 0h19v7q0 9-9 9h-1q-9 0-9-9Z" fill="var(--mascot-ink)"/><path d="M56 66h72M86 92q9 3 15-4"/></g>
+      </g><circle cx="95" cy="126" r="6" fill="var(--mascot-metal)"/></svg>

package/dist/assets/mascot/expressions/curious-body.svg

@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
 .ek-mascot { display:block; overflow:visible; flex-shrink:0; }
 .ek-mascot[data-variant="face"] { overflow:hidden; }
 .ek-mascot__face path:not([fill]) { fill:none; }
-.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
-.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
-.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
-.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
-@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
-@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
-@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
-@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
 .ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
 .ek-companion--hero { margin-bottom:16px; }
 .ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
 .ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
 .ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
 @media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
 
 .ek-companion--rail { padding:12px 20px; text-decoration:none; }

package/dist/assets/mascot/expressions/curious-face.svg

@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
 .ek-mascot { display:block; overflow:visible; flex-shrink:0; }
 .ek-mascot[data-variant="face"] { overflow:hidden; }
 .ek-mascot__face path:not([fill]) { fill:none; }
-.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
-.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
-.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
-.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
-@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
-@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
-@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
-@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
 .ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
 .ek-companion--hero { margin-bottom:16px; }
 .ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
 .ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
 .ek-mascot-message p {margin:0}
+/* Secondary loader: draws and releases an arrow over 2.8 s. */
+.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
+.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
+.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
+@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
+@keyframes ek-release { 0%,12% {transform:translateX(0);opacity:1} 40%,52% {transform:translateX(-10px);opacity:1} 68% {transform:translateX(22px);opacity:0} 69%,85% {transform:translateX(0);opacity:0} 100% {transform:translateX(0);opacity:1} }
+@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
+@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
+/* Loader: walking toward the viewer, a 1.2 s stride (two steps). Ground rungs recede on an ease-out, as perspective slows them near the horizon. */
+.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
+.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
+.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
+.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
+.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
+@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
+@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
+@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
+@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
+@keyframes ek-recede { 0% {transform:translateY(56px) scaleX(1);opacity:0} 10% {opacity:1} 85% {opacity:1} 100% {transform:translateY(0) scaleX(.4);opacity:0} }
 @media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
 
 .ek-companion--rail { padding:12px 20px; text-decoration:none; }