/*
 * Desk's help bot (desk-bot.js): colors and motion, ported from modelriver/desk
 * src/styles.css. Set --bot-ink and --bot-paper on a parent to recolor it.
 */
.bot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  --bot-ink-c: var(--bot-ink, #0a0a0a);
  --bot-paper-c: var(--bot-paper, #ffffff);
}
.bot-ink { fill: var(--bot-ink-c); }
.bot-paper { fill: var(--bot-paper-c); }
.bot-ink-stroke { stroke: var(--bot-ink-c); }
.bot-paper-stroke { stroke: var(--bot-paper-c); }

/* Everything moves around its own box. */
.bot * { transform-box: fill-box; transform-origin: center; }

/* Five moods stacked in one spot; the active one fades in. */
.bot-stage { position: relative; display: block; aspect-ratio: 148 / 134; }
.bot-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bot-layer.is-active { opacity: 1; transform: scale(1); }

.bot-live .bot-bob { animation: bot-bob 2.6s ease-in-out infinite; }
.bot-live .bot-shadow { animation: bot-shadow 2.6s ease-in-out infinite; }
.bot-live .bot-blink { animation: bot-blink 4.2s infinite; }
.bot-live .bot-blink-late { animation-delay: 2.1s; }
.bot-live .bot-look { animation: bot-look 7s ease-in-out infinite; }
.bot-antenna { transform-origin: 50% 100%; }
.bot-live .bot-antenna { animation: bot-ant 2.6s ease-in-out infinite; }
.bot-live.bot-thinking .bot-antenna { animation-duration: 0.9s; }
.bot-live.bot-happy .bot-antenna { animation-duration: 1.2s; }
.bot-arm { transform-origin: 50% 10%; }
.bot-live.bot-idle .bot-arm { animation: bot-arm 5s ease-in-out infinite; }
.bot-live.bot-happy .bot-arm { animation: bot-arm 1.4s ease-in-out infinite; }
.bot-live .bot-jump { animation: bot-jump 1.2s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.bot-live .bot-shadow-jump { animation: bot-shadow-jump 1.2s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.bot-tilt { transform-origin: 50% 100%; }
.bot-live .bot-tilt { animation: bot-tilt 3.4s ease-in-out infinite; }
.bot-live .bot-dot { animation: bot-dot 1.2s ease-in-out infinite; }
.bot-live .bot-d2 { animation-delay: 0.15s; }
.bot-live .bot-d3 { animation-delay: 0.3s; }
.bot-live .bot-pulse { animation: bot-pulse 1.2s ease-in-out infinite; }
.bot-breathe { transform-origin: 50% 100%; }
.bot-live .bot-breathe { animation: bot-breathe 4s ease-in-out infinite; }
.bot-z { opacity: 0; }
.bot-live .bot-z { animation: bot-z 3s ease-out infinite; }
.bot-live .bot-z2 { animation-delay: 1s; }
.bot-live .bot-z3 { animation-delay: 2s; }
.bot-wave-l, .bot-wave-r { opacity: 0; }
.bot-live .bot-wave-l { animation: bot-wave-l 1.6s ease-out infinite; }
.bot-live .bot-wave-r { animation: bot-wave-r 1.6s ease-out infinite; }
.bot-live .bot-late { animation-delay: 0.5s; }

/* A still pose, for images and when the bot shouldn't move. */
.bot-still .bot-live *, .bot-still .bot-layer { animation: none !important; transition: none !important; }
.bot-still .bot-z:first-child,
.bot-still .bot-wave-l:not(.bot-late),
.bot-still .bot-wave-r:not(.bot-late) { opacity: 1; }

@keyframes bot-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes bot-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.9); } }
@keyframes bot-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.1); } }
@keyframes bot-look {
  0%, 30% { transform: translate(0, 0); }
  35%, 50% { transform: translate(-4px, 0); }
  55%, 70% { transform: translate(4px, -2px); }
  75%, 100% { transform: translate(0, 0); }
}
@keyframes bot-ant { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes bot-arm {
  0%, 60%, 100% { transform: rotate(0); }
  66% { transform: rotate(-150deg); }
  72% { transform: rotate(-115deg); }
  78% { transform: rotate(-150deg); }
  84% { transform: rotate(-115deg); }
  92% { transform: rotate(0); }
}
@keyframes bot-jump { 0%, 55%, 100% { transform: translateY(0); } 28% { transform: translateY(-10px); } }
@keyframes bot-shadow-jump { 0%, 55%, 100% { transform: scaleX(1); } 28% { transform: scaleX(0.7); } }
@keyframes bot-tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } }
@keyframes bot-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes bot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes bot-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 0.97); } }
@keyframes bot-z {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(8px, -18px); }
}
@keyframes bot-wave-l {
  0% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-7px); }
}
@keyframes bot-wave-r {
  0% { opacity: 0; transform: translateX(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
  .bot-live * { animation: none !important; }
  .bot-layer { transition: none; }
  .bot-live .bot-z:first-child,
  .bot-live .bot-wave-l:not(.bot-late),
  .bot-live .bot-wave-r:not(.bot-late) { opacity: 1; }
}