/* Built from app/public/assets/mascots.css by web/scripts/build-pages.mjs. Edit it there. */

/* Agent mascots (finish plan §8). The SVG comes from app/src/mascots.js:
   an ivy leaf body, a stem and pill eyes. Body and stem take the character's
   colour (currentColor). Each character's colour is set here, and
   the state is a class on the root <svg>: idle, working, waiting, done,
   failed. */

.mascot { display: inline-block; flex: none; overflow: visible; }
.mascot .m-fig { transform-box: view-box; transform-origin: 50% 85%; }
.mascot .m-eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.mascot .m-body { fill: currentColor; }
.mascot .m-stem { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.mascot .m-eye { fill: #1b1530; }
.mascot .m-eye-line { fill: none; stroke: #1b1530; stroke-width: 2.8; stroke-linecap: round; }

/* Each character's colour: bold, and from ivy's own range of greens and
   autumn reds and golds. Dark leaves get cream eyes. */
.mascot--scout { color: #ff8a3d; }
.mascot--sage { color: #8fae3a; }
.mascot--pip { color: #8fdc4a; }
.mascot--trellis { color: #14b89a; }
.mascot--courier { color: #f2545b; }
.mascot--weaver { color: #b8326b; }
.mascot--harvest { color: #ffb627; }
.mascot--echo { color: #23a36b; }
.mascot--atlas { color: #35c25a; }
.mascot--root { color: #a8693a; }
.mascot--lumen { color: #ffd43b; }
/* The SEO expert on Enterprise sites: a person, not one of the team. */
.mascot--expert { color: #6b7f8e; }
.mascot--weaver .m-eye, .mascot--echo .m-eye, .mascot--root .m-eye { fill: #fdf6df; }
.mascot--weaver .m-eye-line, .mascot--echo .m-eye-line, .mascot--root .m-eye-line { stroke: #fdf6df; }
.mascot--failed .m-eye { fill: #1b1530; }
.mascot--failed .m-eye-line { stroke: #1b1530; }
.mascot--failed { color: #b9bdb6; }

/* idle: a slow float and a blink */
.mascot--idle .m-fig { animation: m-float 5s ease-in-out infinite; }
.mascot--idle .m-eyes { animation: m-blink 4.5s infinite; }
@keyframes m-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.5px) rotate(2deg); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* working: bobbing and swaying on the stem, eyes glancing side to side */
.mascot--working .m-fig { animation: m-bob 1.1s ease-in-out infinite; }
.mascot--working .m-eyes { animation: m-glance 2.4s ease-in-out infinite; }
@keyframes m-bob { 0%, 100% { transform: translateY(0) rotate(-2deg) scale(1, 1); } 45% { transform: translateY(-2.5px) rotate(3deg) scale(.97, 1.03); } }
@keyframes m-glance { 0%, 20%, 100% { transform: translateX(0); } 35%, 55% { transform: translateX(2px); } 70%, 85% { transform: translateX(-2px); } }

/* waiting: eyes shut, breathing slowly */
.mascot--waiting .m-fig { animation: m-breathe 6s ease-in-out infinite; }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .97); } }

/* done: one hop with happy eyes */
.mascot--done .m-fig { animation: m-hop .7s cubic-bezier(.3, .7, .4, 1) 1; }
@keyframes m-hop { 0% { transform: translateY(0) scale(1); } 20% { transform: translateY(0) scale(1.06, .92); } 55% { transform: translateY(-5px) scale(.96, 1.05); } 100% { transform: translateY(0) scale(1); } }

/* failed: grey and wilted */
.mascot--failed .m-fig { transform: rotate(10deg) translateY(1px); }

/* Each character blinks on its own beat. */
.mascot--sage .m-eyes { animation-delay: -1.1s; }
.mascot--pip .m-eyes { animation-delay: -2.3s; }
.mascot--trellis .m-eyes { animation-delay: -3.4s; }
.mascot--courier .m-eyes { animation-delay: -.6s; }
.mascot--weaver .m-eyes { animation-delay: -2.9s; }
.mascot--harvest .m-eyes { animation-delay: -1.7s; }
.mascot--echo .m-eyes { animation-delay: -4s; }
.mascot--atlas .m-eyes { animation-delay: -.3s; }
.mascot--root .m-eyes { animation-delay: -2s; }
.mascot--lumen .m-eyes { animation-delay: -3.1s; }

@media (prefers-reduced-motion: reduce) {
  .mascot .m-fig, .mascot .m-eyes { animation: none; }
}