/* Ditto, the mascot (ui/mascot.js): a sheet of paper with ink-drop eyes. Colours follow the character sheet:
   paper white, lavender shade, plum ink. */
.mascot {
  --m-ink: #2a2440;
  --m-ink-2: #5b5378;
  --m-shade: #ddd6ee;
  --m-blush: #f2a7b8;
  --m-line: #3a3352;
  display: inline-block;
  flex: none;
  width: var(--m-size, 96px);
  height: var(--m-size, 96px);
  line-height: 0;
  user-select: none;
  pointer-events: none;
}
.mascot svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mascot .m-edge {
  stroke: var(--m-line);
  stroke-width: 1.7;
  stroke-linejoin: round;
}
.mascot .m-crease {
  fill: none;
  stroke: var(--m-shade);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.9;
}
.mascot .m-line {
  fill: none;
  stroke: var(--m-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mascot .m-thin { stroke-width: 1.8; }
.mascot .m-soft { stroke: var(--m-ink-2); stroke-width: 1.8; opacity: 0.55; }
.mascot .m-blush path {
  stroke: var(--m-blush);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.mascot .m-shadow { fill: rgba(60, 46, 110, 0.14); }
.mascot .m-spark { fill: var(--m-ink); opacity: 0.85; }
.mascot .m-zz text,
.mascot .m-dots circle {
  fill: var(--m-ink-2);
  font: 700 12px/1 var(--font-display, system-ui), system-ui, sans-serif;
}

html[data-theme="dark"] .mascot,
:root:not([data-theme="light"]) .mascot.m-auto-dark {
  --m-shade: #c9c0e2;
  --m-line: #1c1830;
}
html[data-theme="dark"] .mascot .m-shadow { fill: rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .mascot .m-spark,
html[data-theme="dark"] .mascot .m-zz text,
html[data-theme="dark"] .mascot .m-dots circle,
html[data-theme="dark"] .mascot .m-soft { fill: #e7e1fb; stroke: #e7e1fb; }
html[data-theme="dark"] .mascot .m-burst .m-line { stroke: #e7e1fb; }

/* ---- motion: a gentle float, blinks, and a little life per mood ---- */
.mascot .m-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: m-bob 3.6s ease-in-out infinite; }
.mascot .m-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: m-shadow 3.6s ease-in-out infinite; }
.mascot .m-eye { transform-box: fill-box; transform-origin: 50% 60%; animation: m-blink 5.2s infinite; }
.mascot .m-eye + .m-eye { animation-delay: 0.04s; }
.mascot[data-mood="sleep"] .m-bob { animation: m-breathe 4.2s ease-in-out infinite; }
.mascot[data-mood="sleep"] .m-zz text { animation: m-zz 3s ease-in-out infinite; }
.mascot[data-mood="sleep"] .m-zz text + text { animation-delay: 0.6s; }
.mascot[data-mood="excited"] .m-bob { animation: m-hop 0.9s cubic-bezier(.3,.6,.4,1) infinite; }
.mascot[data-mood="think"] .m-body { transform-box: fill-box; transform-origin: 50% 100%; animation: m-sway 4s ease-in-out infinite; }
.mascot[data-mood="think"] .m-dots circle { animation: m-dot 1.5s ease-in-out infinite; }
.mascot[data-mood="think"] .m-dots circle:nth-child(2) { animation-delay: 0.2s; }
.mascot[data-mood="think"] .m-dots circle:nth-child(3) { animation-delay: 0.4s; }
.mascot[data-mood="work"] .m-body { transform-box: view-box; transform-origin: 60px 70px; animation: m-twirl 2.4s cubic-bezier(.5,0,.3,1) infinite; }
.mascot[data-mood="work"] .m-swirl { transform-box: view-box; transform-origin: 60px 104px; animation: m-swirl 2.4s linear infinite; }
.mascot[data-mood="happy"] .m-spark,
.mascot[data-mood="wink"] .m-spark,
.mascot[data-mood="work"] .m-spark { transform-box: fill-box; transform-origin: 50% 50%; animation: m-twinkle 1.8s ease-in-out infinite; }
.mascot[data-mood="sad"] .m-bob { animation: m-breathe 5s ease-in-out infinite; }

@keyframes m-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes m-shadow { 0%, 100% { transform: scaleX(1); opacity: 1 } 50% { transform: scaleX(0.86); opacity: 0.7 } }
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1) } 95.5% { transform: scaleY(0.1) } }
@keyframes m-breathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.03, 0.97) } }
@keyframes m-zz { 0% { opacity: 0; transform: translateY(4px) } 30%, 70% { opacity: 1 } 100% { opacity: 0; transform: translateY(-6px) } }
@keyframes m-hop { 0%, 100% { transform: translateY(0) scale(1.03, 0.97) } 40% { transform: translateY(-9px) scale(0.98, 1.02) } }
@keyframes m-sway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@keyframes m-dot { 0%, 100% { opacity: 0.3 } 50% { opacity: 1 } }
@keyframes m-twirl { 0% { transform: rotate(0) translateY(0) } 45% { transform: rotate(-8deg) translateY(-5px) } 70% { transform: rotate(6deg) translateY(-2px) } 100% { transform: rotate(0) translateY(0) } }
@keyframes m-swirl { to { transform: rotate(360deg) } }
@keyframes m-twinkle { 0%, 100% { transform: scale(0.6); opacity: 0.4 } 50% { transform: scale(1); opacity: 1 } }

html[data-motion="reduced"] .mascot * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .mascot * { animation: none !important; }
}

/* ---- where it lives ---- */
.empty .mascot,
.mascot.m-empty { margin: 0 auto 6px; }

/* sitting on the top edge of Home's writing box */
.hm-ask { position: relative; }
.ha-buddy {
  position: absolute;
  top: calc(var(--m-size) * -0.86);
  right: 46px;
  z-index: 1;
}
.ha-buddy .m-shadow { display: none; }
.ha-buddy .m-bob { animation-duration: 4.4s; }
@media (max-width: 760px) {
  .ha-buddy { --m-size: 50px !important; right: 24px; }
  /* (room above the box, so Ditto sits under the greeting rather than on it) */
  .hm-ask { margin-top: 30px; }
}

/* the empty places */
.app-empty .mascot { margin-bottom: 2px; }

/* the Ask Ditto bar: while it works, Ditto twirls where the nib was */
.dr-lead .dr-buddy { display: none; }
.dr-console.busy .dr-lead .dr-buddy { display: inline-block; }
.dr-console.busy .dr-lead > svg { display: none; }
.dr-lead .dr-buddy svg { width: 100%; height: 100%; }
.dr-console.busy .dr-lead { overflow: visible; transform: none; }
.dr-buddy .m-shadow, .dr-buddy .m-swirl { display: none; }

/* Write on a photo: the "Writing…" pill */
.ph-buddy { margin: -6px 2px -4px -6px; }
.ph-buddy .m-shadow, .ph-buddy .m-swirl { display: none; }

/* sign in / create account: Ditto above the title */
.auth-buddy { display: block; margin: 0 0 6px -6px; }
.auth-buddy .m-shadow { opacity: 0.6; }
/* the moment a hand is ready */
.learn-buddy { display: block; margin: 0 auto 4px; }