eklavya 1.86.0 → 1.87.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/dashboard.html +56 -8
- package/dist/assets/mascot/expressions/celebrate-body.svg +24 -8
- package/dist/assets/mascot/expressions/celebrate-face.svg +24 -8
- package/dist/assets/mascot/expressions/confused-body.svg +24 -8
- package/dist/assets/mascot/expressions/confused-face.svg +24 -8
- package/dist/assets/mascot/expressions/cool-body.svg +85 -0
- package/dist/assets/mascot/expressions/cool-face.svg +59 -0
- package/dist/assets/mascot/expressions/curious-body.svg +24 -8
- package/dist/assets/mascot/expressions/curious-face.svg +24 -8
- package/dist/assets/mascot/expressions/determined-body.svg +85 -0
- package/dist/assets/mascot/expressions/determined-face.svg +59 -0
- package/dist/assets/mascot/expressions/excited-body.svg +24 -8
- package/dist/assets/mascot/expressions/excited-face.svg +24 -8
- package/dist/assets/mascot/expressions/focused-body.svg +24 -8
- package/dist/assets/mascot/expressions/focused-face.svg +24 -8
- package/dist/assets/mascot/expressions/happy-body.svg +24 -8
- package/dist/assets/mascot/expressions/happy-face.svg +24 -8
- package/dist/assets/mascot/expressions/hopeful-body.svg +85 -0
- package/dist/assets/mascot/expressions/hopeful-face.svg +59 -0
- package/dist/assets/mascot/expressions/idea-body.svg +85 -0
- package/dist/assets/mascot/expressions/idea-face.svg +59 -0
- package/dist/assets/mascot/expressions/laugh-body.svg +85 -0
- package/dist/assets/mascot/expressions/laugh-face.svg +59 -0
- package/dist/assets/mascot/expressions/love-body.svg +85 -0
- package/dist/assets/mascot/expressions/love-face.svg +59 -0
- package/dist/assets/mascot/expressions/nervous-body.svg +85 -0
- package/dist/assets/mascot/expressions/nervous-face.svg +59 -0
- package/dist/assets/mascot/expressions/neutral-body.svg +24 -8
- package/dist/assets/mascot/expressions/neutral-face.svg +24 -8
- package/dist/assets/mascot/expressions/proud-body.svg +85 -0
- package/dist/assets/mascot/expressions/proud-face.svg +59 -0
- package/dist/assets/mascot/expressions/relieved-body.svg +85 -0
- package/dist/assets/mascot/expressions/relieved-face.svg +59 -0
- package/dist/assets/mascot/expressions/sad-body.svg +24 -8
- package/dist/assets/mascot/expressions/sad-face.svg +24 -8
- package/dist/assets/mascot/expressions/shy-body.svg +85 -0
- package/dist/assets/mascot/expressions/shy-face.svg +59 -0
- package/dist/assets/mascot/expressions/sleepy-body.svg +24 -8
- package/dist/assets/mascot/expressions/sleepy-face.svg +24 -8
- package/dist/assets/mascot/expressions/starstruck-body.svg +85 -0
- package/dist/assets/mascot/expressions/starstruck-face.svg +59 -0
- package/dist/assets/mascot/expressions/surprised-body.svg +24 -8
- package/dist/assets/mascot/expressions/surprised-face.svg +24 -8
- package/dist/assets/mascot/expressions/thinking-body.svg +24 -8
- package/dist/assets/mascot/expressions/thinking-face.svg +24 -8
- package/dist/assets/mascot/expressions/wink-body.svg +24 -8
- package/dist/assets/mascot/expressions/wink-face.svg +24 -8
- package/dist/assets/mascot/expressions/worried-body.svg +24 -8
- package/dist/assets/mascot/expressions/worried-face.svg +24 -8
- package/dist/assets/mascot/loading.svg +59 -36
- package/dist/assets/mascot/mascot.css +24 -8
- package/dist/assets/mascot/mascot.js +64 -7
- package/dist/assets/mascot.html +15 -11
- package/dist/plugin/.claude-plugin/plugin.json +1 -1
- package/package.json +1 -1
|
@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
|
|
|
18
18
|
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
19
|
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
20
|
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
-
.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
22
|
-
.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
23
|
-
.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
24
|
-
.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
25
|
-
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
26
|
-
@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} }
|
|
27
|
-
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
28
|
-
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
29
21
|
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
30
22
|
.ek-companion--hero { margin-bottom:16px; }
|
|
31
23
|
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
32
24
|
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
33
25
|
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
34
50
|
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
35
51
|
|
|
36
52
|
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
|
|
|
18
18
|
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
19
|
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
20
|
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
-
.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
22
|
-
.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
23
|
-
.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
24
|
-
.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
25
|
-
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
26
|
-
@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} }
|
|
27
|
-
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
28
|
-
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
29
21
|
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
30
22
|
.ek-companion--hero { margin-bottom:16px; }
|
|
31
23
|
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
32
24
|
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
33
25
|
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
34
50
|
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
35
51
|
|
|
36
52
|
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 200" width="200" height="200" class="ek-mascot" data-expression="proud" data-variant="body" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
|
|
2
|
+
Archer Cloak artwork keeps its approved identity across both grounds.
|
|
3
|
+
UI chrome continues to use the surface, text and accent roles below. */
|
|
4
|
+
--mascot-coral: #ef9875;
|
|
5
|
+
--mascot-coral-dark: #c96d51;
|
|
6
|
+
--mascot-highlight: #ffc8a6;
|
|
7
|
+
--mascot-cloak: #0E6E66;
|
|
8
|
+
--mascot-cloak-dark: #07403C;
|
|
9
|
+
--mascot-thread: #C4EDE4;
|
|
10
|
+
--mascot-ink: #302c2a;
|
|
11
|
+
--mascot-metal: #5b7c73;
|
|
12
|
+
--mascot-wood: #bc9569;
|
|
13
|
+
--mascot-wood-dark: #74583f;
|
|
14
|
+
--mascot-string: #EAE7E1;
|
|
15
|
+
--mascot-shadow: #26262a;
|
|
16
|
+
/* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
|
|
17
|
+
eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
|
|
18
|
+
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
|
+
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
|
+
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
+
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
22
|
+
.ek-companion--hero { margin-bottom:16px; }
|
|
23
|
+
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
24
|
+
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
25
|
+
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
50
|
+
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
51
|
+
|
|
52
|
+
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
53
|
+
.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
|
|
54
|
+
.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
|
|
55
|
+
</style><title>Eklavya, proud</title><path d="m144 26 2-5 2 5 5 2-5 2-2 5-2-5-5-2Z" fill="var(--mascot-thread)"/><g class="ek-mascot__character">
|
|
56
|
+
<ellipse cx="94" cy="185" rx="49" ry="5" fill="var(--mascot-shadow)"/>
|
|
57
|
+
<path d="M51 124Q29 137 34 168l23-8 17-27m59-9q26 8 21 39l-24-7-17-22" fill="var(--mascot-cloak-dark)"/>
|
|
58
|
+
<path d="M65 157v23q0 8 16 6l4-28m21 0 1 23q2 8 17 4v-29" fill="var(--mascot-coral)"/>
|
|
59
|
+
<path d="M58 122q35-16 72 0l8 46q-19 9-42 1-23 7-43-1Z" fill="var(--mascot-cloak)"/>
|
|
60
|
+
<path d="M96 127v40m-31-22q29 9 64 0" fill="none" stroke="var(--mascot-cloak-dark)" stroke-width="3"/>
|
|
61
|
+
<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"/>
|
|
62
|
+
<path d="M57 114l37 10m42-10-39 10" fill="none" stroke="var(--mascot-thread)" stroke-width="2"/>
|
|
63
|
+
<path d="M54 148h80v11H54Z" fill="var(--mascot-ink)"/>
|
|
64
|
+
<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)"/>
|
|
65
|
+
<g class="ek-mascot__head">
|
|
66
|
+
<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"/>
|
|
67
|
+
<path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
|
|
68
|
+
<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="M64 74q5-7 10 0m36 0q5-7 10 0"/><path d="M80 87q12 11 24 0"/><path d="M62 56q7-4 14 0m32 0q7-4 14 0" fill="none"/></g>
|
|
69
|
+
</g>
|
|
70
|
+
<circle cx="96" cy="125" r="7" fill="var(--mascot-metal)"/><circle cx="94" cy="123" r="2" fill="var(--mascot-thread)"/>
|
|
71
|
+
<g class="ek-mascot__bow" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
72
|
+
<path d="M157 78q36 47 0 94" stroke="var(--mascot-wood-dark)" stroke-width="8"/>
|
|
73
|
+
<path d="M158 78q32 47 0 94" stroke="var(--mascot-wood)" stroke-width="4"/>
|
|
74
|
+
<path class="ek-mascot__string" d="M157 78l-88 50 88 44" stroke="var(--mascot-string)" stroke-width="1.8"/>
|
|
75
|
+
</g>
|
|
76
|
+
<path d="M130 127l16-8q10-1 13 5 2 8-6 11l-15 4" fill="var(--mascot-cloak)"/>
|
|
77
|
+
<rect x="147" y="117" width="15" height="18" rx="7" fill="var(--mascot-coral)"/>
|
|
78
|
+
<g class="ek-mascot__arrow" stroke-linecap="round" stroke-linejoin="round">
|
|
79
|
+
<path d="M69 128h114" stroke="var(--mascot-wood-dark)" stroke-width="3"/>
|
|
80
|
+
<path d="M179 120l13 8-13 8Z" fill="var(--mascot-thread)" stroke="var(--mascot-wood)" stroke-width="1.5"/>
|
|
81
|
+
<path d="M71 128l-9-9 10 1 8 8-8 8-10 1Z" fill="var(--mascot-thread)"/>
|
|
82
|
+
</g>
|
|
83
|
+
<path d="M58 128q-11-6-14 5-2 9 8 13l17-8" fill="var(--mascot-cloak)"/>
|
|
84
|
+
<rect x="62" y="121" width="18" height="16" rx="7" fill="var(--mascot-coral)"/>
|
|
85
|
+
</g></svg>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 12 126 128" width="200" height="200" class="ek-mascot" data-expression="proud" data-variant="face" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
|
|
2
|
+
Archer Cloak artwork keeps its approved identity across both grounds.
|
|
3
|
+
UI chrome continues to use the surface, text and accent roles below. */
|
|
4
|
+
--mascot-coral: #ef9875;
|
|
5
|
+
--mascot-coral-dark: #c96d51;
|
|
6
|
+
--mascot-highlight: #ffc8a6;
|
|
7
|
+
--mascot-cloak: #0E6E66;
|
|
8
|
+
--mascot-cloak-dark: #07403C;
|
|
9
|
+
--mascot-thread: #C4EDE4;
|
|
10
|
+
--mascot-ink: #302c2a;
|
|
11
|
+
--mascot-metal: #5b7c73;
|
|
12
|
+
--mascot-wood: #bc9569;
|
|
13
|
+
--mascot-wood-dark: #74583f;
|
|
14
|
+
--mascot-string: #EAE7E1;
|
|
15
|
+
--mascot-shadow: #26262a;
|
|
16
|
+
/* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
|
|
17
|
+
eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
|
|
18
|
+
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
|
+
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
|
+
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
+
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
22
|
+
.ek-companion--hero { margin-bottom:16px; }
|
|
23
|
+
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
24
|
+
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
25
|
+
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
50
|
+
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
51
|
+
|
|
52
|
+
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
53
|
+
.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
|
|
54
|
+
.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
|
|
55
|
+
</style><title>Eklavya, proud</title><path d="m144 26 2-5 2 5 5 2-5 2-2 5-2-5-5-2Z" fill="var(--mascot-thread)"/><path d="M48 109q44-19 88 0l-8 30-33-15-31 15Z" fill="var(--mascot-cloak)"/><g class="ek-mascot__head">
|
|
56
|
+
<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"/>
|
|
57
|
+
<path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
|
|
58
|
+
<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="M64 74q5-7 10 0m36 0q5-7 10 0"/><path d="M80 87q12 11 24 0"/><path d="M62 56q7-4 14 0m32 0q7-4 14 0" fill="none"/></g>
|
|
59
|
+
</g><circle cx="95" cy="126" r="6" fill="var(--mascot-metal)"/></svg>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 200" width="200" height="200" class="ek-mascot" data-expression="relieved" data-variant="body" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
|
|
2
|
+
Archer Cloak artwork keeps its approved identity across both grounds.
|
|
3
|
+
UI chrome continues to use the surface, text and accent roles below. */
|
|
4
|
+
--mascot-coral: #ef9875;
|
|
5
|
+
--mascot-coral-dark: #c96d51;
|
|
6
|
+
--mascot-highlight: #ffc8a6;
|
|
7
|
+
--mascot-cloak: #0E6E66;
|
|
8
|
+
--mascot-cloak-dark: #07403C;
|
|
9
|
+
--mascot-thread: #C4EDE4;
|
|
10
|
+
--mascot-ink: #302c2a;
|
|
11
|
+
--mascot-metal: #5b7c73;
|
|
12
|
+
--mascot-wood: #bc9569;
|
|
13
|
+
--mascot-wood-dark: #74583f;
|
|
14
|
+
--mascot-string: #EAE7E1;
|
|
15
|
+
--mascot-shadow: #26262a;
|
|
16
|
+
/* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
|
|
17
|
+
eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
|
|
18
|
+
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
|
+
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
|
+
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
+
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
22
|
+
.ek-companion--hero { margin-bottom:16px; }
|
|
23
|
+
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
24
|
+
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
25
|
+
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
50
|
+
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
51
|
+
|
|
52
|
+
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
53
|
+
.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
|
|
54
|
+
.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
|
|
55
|
+
</style><title>Eklavya, relieved</title><g class="ek-mascot__character">
|
|
56
|
+
<ellipse cx="94" cy="185" rx="49" ry="5" fill="var(--mascot-shadow)"/>
|
|
57
|
+
<path d="M51 124Q29 137 34 168l23-8 17-27m59-9q26 8 21 39l-24-7-17-22" fill="var(--mascot-cloak-dark)"/>
|
|
58
|
+
<path d="M65 157v23q0 8 16 6l4-28m21 0 1 23q2 8 17 4v-29" fill="var(--mascot-coral)"/>
|
|
59
|
+
<path d="M58 122q35-16 72 0l8 46q-19 9-42 1-23 7-43-1Z" fill="var(--mascot-cloak)"/>
|
|
60
|
+
<path d="M96 127v40m-31-22q29 9 64 0" fill="none" stroke="var(--mascot-cloak-dark)" stroke-width="3"/>
|
|
61
|
+
<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"/>
|
|
62
|
+
<path d="M57 114l37 10m42-10-39 10" fill="none" stroke="var(--mascot-thread)" stroke-width="2"/>
|
|
63
|
+
<path d="M54 148h80v11H54Z" fill="var(--mascot-ink)"/>
|
|
64
|
+
<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)"/>
|
|
65
|
+
<g class="ek-mascot__head">
|
|
66
|
+
<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"/>
|
|
67
|
+
<path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
|
|
68
|
+
<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="M64 74q5-7 10 0m36 0q5-7 10 0"/><path d="M83 88q9 10 18 0"/><path d="M134 50q-5 7-5 10a5 5 0 0 0 10 0q0-3-5-10Z" fill="var(--mascot-thread)" stroke-width="1.5"/></g>
|
|
69
|
+
</g>
|
|
70
|
+
<circle cx="96" cy="125" r="7" fill="var(--mascot-metal)"/><circle cx="94" cy="123" r="2" fill="var(--mascot-thread)"/>
|
|
71
|
+
<g class="ek-mascot__bow" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
72
|
+
<path d="M157 78q36 47 0 94" stroke="var(--mascot-wood-dark)" stroke-width="8"/>
|
|
73
|
+
<path d="M158 78q32 47 0 94" stroke="var(--mascot-wood)" stroke-width="4"/>
|
|
74
|
+
<path class="ek-mascot__string" d="M157 78l-88 50 88 44" stroke="var(--mascot-string)" stroke-width="1.8"/>
|
|
75
|
+
</g>
|
|
76
|
+
<path d="M130 127l16-8q10-1 13 5 2 8-6 11l-15 4" fill="var(--mascot-cloak)"/>
|
|
77
|
+
<rect x="147" y="117" width="15" height="18" rx="7" fill="var(--mascot-coral)"/>
|
|
78
|
+
<g class="ek-mascot__arrow" stroke-linecap="round" stroke-linejoin="round">
|
|
79
|
+
<path d="M69 128h114" stroke="var(--mascot-wood-dark)" stroke-width="3"/>
|
|
80
|
+
<path d="M179 120l13 8-13 8Z" fill="var(--mascot-thread)" stroke="var(--mascot-wood)" stroke-width="1.5"/>
|
|
81
|
+
<path d="M71 128l-9-9 10 1 8 8-8 8-10 1Z" fill="var(--mascot-thread)"/>
|
|
82
|
+
</g>
|
|
83
|
+
<path d="M58 128q-11-6-14 5-2 9 8 13l17-8" fill="var(--mascot-cloak)"/>
|
|
84
|
+
<rect x="62" y="121" width="18" height="16" rx="7" fill="var(--mascot-coral)"/>
|
|
85
|
+
</g></svg>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 12 126 128" width="200" height="200" class="ek-mascot" data-expression="relieved" data-variant="face" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
|
|
2
|
+
Archer Cloak artwork keeps its approved identity across both grounds.
|
|
3
|
+
UI chrome continues to use the surface, text and accent roles below. */
|
|
4
|
+
--mascot-coral: #ef9875;
|
|
5
|
+
--mascot-coral-dark: #c96d51;
|
|
6
|
+
--mascot-highlight: #ffc8a6;
|
|
7
|
+
--mascot-cloak: #0E6E66;
|
|
8
|
+
--mascot-cloak-dark: #07403C;
|
|
9
|
+
--mascot-thread: #C4EDE4;
|
|
10
|
+
--mascot-ink: #302c2a;
|
|
11
|
+
--mascot-metal: #5b7c73;
|
|
12
|
+
--mascot-wood: #bc9569;
|
|
13
|
+
--mascot-wood-dark: #74583f;
|
|
14
|
+
--mascot-string: #EAE7E1;
|
|
15
|
+
--mascot-shadow: #26262a;
|
|
16
|
+
/* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
|
|
17
|
+
eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
|
|
18
|
+
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
|
+
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
|
+
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
+
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
22
|
+
.ek-companion--hero { margin-bottom:16px; }
|
|
23
|
+
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
24
|
+
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
25
|
+
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
50
|
+
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
51
|
+
|
|
52
|
+
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
53
|
+
.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
|
|
54
|
+
.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
|
|
55
|
+
</style><title>Eklavya, relieved</title><path d="M48 109q44-19 88 0l-8 30-33-15-31 15Z" fill="var(--mascot-cloak)"/><g class="ek-mascot__head">
|
|
56
|
+
<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"/>
|
|
57
|
+
<path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
|
|
58
|
+
<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="M64 74q5-7 10 0m36 0q5-7 10 0"/><path d="M83 88q9 10 18 0"/><path d="M134 50q-5 7-5 10a5 5 0 0 0 10 0q0-3-5-10Z" fill="var(--mascot-thread)" stroke-width="1.5"/></g>
|
|
59
|
+
</g><circle cx="95" cy="126" r="6" fill="var(--mascot-metal)"/></svg>
|
|
@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
|
|
|
18
18
|
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
19
|
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
20
|
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
-
.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
22
|
-
.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
23
|
-
.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
24
|
-
.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
25
|
-
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
26
|
-
@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} }
|
|
27
|
-
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
28
|
-
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
29
21
|
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
30
22
|
.ek-companion--hero { margin-bottom:16px; }
|
|
31
23
|
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
32
24
|
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
33
25
|
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
34
50
|
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
35
51
|
|
|
36
52
|
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
@@ -18,19 +18,35 @@ eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line
|
|
|
18
18
|
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
19
|
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
20
|
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
-
.ek-mascot--loading .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
22
|
-
.ek-mascot--loading .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
23
|
-
.ek-mascot--loading .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
24
|
-
.ek-mascot--loading .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
25
|
-
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
26
|
-
@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} }
|
|
27
|
-
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
28
|
-
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
29
21
|
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
30
22
|
.ek-companion--hero { margin-bottom:16px; }
|
|
31
23
|
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
32
24
|
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
33
25
|
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
34
50
|
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
35
51
|
|
|
36
52
|
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 200" width="200" height="200" class="ek-mascot" data-expression="shy" data-variant="body" role="img"><style>:root {/* ---------- MASCOT IDENTITY ----------
|
|
2
|
+
Archer Cloak artwork keeps its approved identity across both grounds.
|
|
3
|
+
UI chrome continues to use the surface, text and accent roles below. */
|
|
4
|
+
--mascot-coral: #ef9875;
|
|
5
|
+
--mascot-coral-dark: #c96d51;
|
|
6
|
+
--mascot-highlight: #ffc8a6;
|
|
7
|
+
--mascot-cloak: #0E6E66;
|
|
8
|
+
--mascot-cloak-dark: #07403C;
|
|
9
|
+
--mascot-thread: #C4EDE4;
|
|
10
|
+
--mascot-ink: #302c2a;
|
|
11
|
+
--mascot-metal: #5b7c73;
|
|
12
|
+
--mascot-wood: #bc9569;
|
|
13
|
+
--mascot-wood-dark: #74583f;
|
|
14
|
+
--mascot-string: #EAE7E1;
|
|
15
|
+
--mascot-shadow: #26262a;
|
|
16
|
+
/* ---------- END MASCOT IDENTITY ---------- */}/* Identity colours and UI surfaces use Eklavya's semantic tokens. */
|
|
17
|
+
eklavya-mascot { display:inline-flex; flex-shrink:0; vertical-align:middle; line-height:0; }
|
|
18
|
+
.ek-mascot { display:block; overflow:visible; flex-shrink:0; }
|
|
19
|
+
.ek-mascot[data-variant="face"] { overflow:hidden; }
|
|
20
|
+
.ek-mascot__face path:not([fill]) { fill:none; }
|
|
21
|
+
.ek-companion { display:flex;align-items:center;gap:12px;color:var(--dim);font:13px/1.5 var(--font-body); }
|
|
22
|
+
.ek-companion--hero { margin-bottom:16px; }
|
|
23
|
+
.ek-companion--hero b { display:block;color:var(--ink);font-weight:600; }
|
|
24
|
+
.ek-mascot-message { display:flex;align-items:center;gap:16px;padding:16px 0; }
|
|
25
|
+
.ek-mascot-message p {margin:0}
|
|
26
|
+
/* Secondary loader: draws and releases an arrow over 2.8 s. */
|
|
27
|
+
.ek-mascot--draw .ek-mascot__character { animation:ek-breathe 2.8s ease-in-out infinite; transform-origin:95px 185px; }
|
|
28
|
+
.ek-mascot--draw .ek-mascot__arrow { animation:ek-release 2.8s cubic-bezier(.3,0,.3,1) infinite; }
|
|
29
|
+
.ek-mascot--draw .ek-mascot__string { animation:ek-draw 2.8s ease-in-out infinite; transform-origin:157px 125px; }
|
|
30
|
+
.ek-mascot--draw .ek-mascot__ripple { animation:ek-hit 2.8s ease-out infinite; transform-origin:196px 128px; opacity:0; }
|
|
31
|
+
@keyframes ek-breathe { 0%,100% {transform:translateY(0)} 35%,55% {transform:translateY(-3px) rotate(-1deg)} }
|
|
32
|
+
@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} }
|
|
33
|
+
@keyframes ek-draw { 0%,100% {transform:scaleX(1)} 40%,52% {transform:scaleX(1.11)} 60% {transform:scaleX(.08)} 68% {transform:scaleX(1)} }
|
|
34
|
+
@keyframes ek-hit { 0%,60%,100% {opacity:0;transform:scale(.4)} 68% {opacity:.8;transform:scale(.7)} 88% {opacity:0;transform:scale(1.7)} }
|
|
35
|
+
/* 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. */
|
|
36
|
+
.ek-mascot--loading .ek-mascot__walker { animation:ek-sway 1.2s ease-in-out infinite; transform-origin:95px 185px; }
|
|
37
|
+
.ek-mascot--loading .ek-mascot__torso { animation:ek-bob .6s ease-in-out infinite; }
|
|
38
|
+
.ek-mascot--loading .ek-mascot__leg, .ek-mascot--loading .ek-mascot__hand { animation:ek-step 1.2s ease-in-out infinite; }
|
|
39
|
+
.ek-mascot--loading .ek-mascot__leg--r, .ek-mascot--loading .ek-mascot__hand--arrow { animation-delay:-.6s; }
|
|
40
|
+
.ek-mascot--loading .ek-mascot__shadow { animation:ek-shadow .6s ease-in-out infinite; transform-origin:95px 186px; }
|
|
41
|
+
.ek-mascot--loading .ek-mascot__rung { animation:ek-recede 1.2s cubic-bezier(.15,.6,.4,1) infinite; transform-origin:95px 162px; }
|
|
42
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(3) { animation-delay:-.3s; }
|
|
43
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(4) { animation-delay:-.6s; }
|
|
44
|
+
.ek-mascot--loading .ek-mascot__rung:nth-child(5) { animation-delay:-.9s; }
|
|
45
|
+
@keyframes ek-sway { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(1.5deg)} }
|
|
46
|
+
@keyframes ek-bob { 0%,100% {transform:translateY(1px)} 50% {transform:translateY(-3px)} }
|
|
47
|
+
@keyframes ek-step { 0%,50%,100% {transform:translateY(0)} 25% {transform:translateY(-6px)} }
|
|
48
|
+
@keyframes ek-shadow { 0%,100% {transform:scaleX(1)} 50% {transform:scaleX(.92)} }
|
|
49
|
+
@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} }
|
|
50
|
+
@media (prefers-reduced-motion:reduce) { .ek-mascot * {animation:none !important;transition:none !important} }
|
|
51
|
+
|
|
52
|
+
.ek-companion--rail { padding:12px 20px; text-decoration:none; }
|
|
53
|
+
.ek-mascot-message > :last-child { min-width:0; overflow-wrap:break-word; }
|
|
54
|
+
.ek-mascot-status { display:inline-flex; align-items:center; gap:6px; }
|
|
55
|
+
</style><title>Eklavya, shy</title><g class="ek-mascot__character">
|
|
56
|
+
<ellipse cx="94" cy="185" rx="49" ry="5" fill="var(--mascot-shadow)"/>
|
|
57
|
+
<path d="M51 124Q29 137 34 168l23-8 17-27m59-9q26 8 21 39l-24-7-17-22" fill="var(--mascot-cloak-dark)"/>
|
|
58
|
+
<path d="M65 157v23q0 8 16 6l4-28m21 0 1 23q2 8 17 4v-29" fill="var(--mascot-coral)"/>
|
|
59
|
+
<path d="M58 122q35-16 72 0l8 46q-19 9-42 1-23 7-43-1Z" fill="var(--mascot-cloak)"/>
|
|
60
|
+
<path d="M96 127v40m-31-22q29 9 64 0" fill="none" stroke="var(--mascot-cloak-dark)" stroke-width="3"/>
|
|
61
|
+
<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"/>
|
|
62
|
+
<path d="M57 114l37 10m42-10-39 10" fill="none" stroke="var(--mascot-thread)" stroke-width="2"/>
|
|
63
|
+
<path d="M54 148h80v11H54Z" fill="var(--mascot-ink)"/>
|
|
64
|
+
<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)"/>
|
|
65
|
+
<g class="ek-mascot__head">
|
|
66
|
+
<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"/>
|
|
67
|
+
<path d="M48 45h18V32h18V21h19" fill="none" stroke="var(--mascot-highlight)" stroke-width="3" stroke-linejoin="round"/>
|
|
68
|
+
<g class="ek-mascot__face" fill="var(--mascot-ink)" stroke="var(--mascot-ink)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><rect x="62" y="68" width="10" height="17" rx="5"/><rect x="108" y="68" width="10" height="17" rx="5"/><path d="M86 93q3-2 6 0t6 0"/><g fill="var(--mascot-coral-dark)" stroke="none" opacity=".55"><ellipse cx="60" cy="91" rx="7" ry="4"/><ellipse cx="124" cy="91" rx="7" ry="4"/></g></g>
|
|
69
|
+
</g>
|
|
70
|
+
<circle cx="96" cy="125" r="7" fill="var(--mascot-metal)"/><circle cx="94" cy="123" r="2" fill="var(--mascot-thread)"/>
|
|
71
|
+
<g class="ek-mascot__bow" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
72
|
+
<path d="M157 78q36 47 0 94" stroke="var(--mascot-wood-dark)" stroke-width="8"/>
|
|
73
|
+
<path d="M158 78q32 47 0 94" stroke="var(--mascot-wood)" stroke-width="4"/>
|
|
74
|
+
<path class="ek-mascot__string" d="M157 78l-88 50 88 44" stroke="var(--mascot-string)" stroke-width="1.8"/>
|
|
75
|
+
</g>
|
|
76
|
+
<path d="M130 127l16-8q10-1 13 5 2 8-6 11l-15 4" fill="var(--mascot-cloak)"/>
|
|
77
|
+
<rect x="147" y="117" width="15" height="18" rx="7" fill="var(--mascot-coral)"/>
|
|
78
|
+
<g class="ek-mascot__arrow" stroke-linecap="round" stroke-linejoin="round">
|
|
79
|
+
<path d="M69 128h114" stroke="var(--mascot-wood-dark)" stroke-width="3"/>
|
|
80
|
+
<path d="M179 120l13 8-13 8Z" fill="var(--mascot-thread)" stroke="var(--mascot-wood)" stroke-width="1.5"/>
|
|
81
|
+
<path d="M71 128l-9-9 10 1 8 8-8 8-10 1Z" fill="var(--mascot-thread)"/>
|
|
82
|
+
</g>
|
|
83
|
+
<path d="M58 128q-11-6-14 5-2 9 8 13l17-8" fill="var(--mascot-cloak)"/>
|
|
84
|
+
<rect x="62" y="121" width="18" height="16" rx="7" fill="var(--mascot-coral)"/>
|
|
85
|
+
</g></svg>
|