/* the robot's bubble speaks in the homepage's fonts */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=Funnel+Display:wght@600&display=swap");
/* SnapStaq's helper robot (js/robot.js), bottom right of the public pages: bobs, eyes light up, does tricks, can be dragged */
.bot-pal { position: fixed; right: 22px; bottom: 20px; z-index: 2147483646; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: grab;
  touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: scale .2s cubic-bezier(.34, 1.56, .64, 1); }
.bot-pal:hover { scale: 1.08; } .bot-pal.held { cursor: grabbing; scale: 1.12; }
.bot-pal:focus-visible { outline: 2px solid #4E6349; outline-offset: 4px; border-radius: 50%; }
@media (max-width: 600px) { .bot-pal { width: 40px; height: 40px; right: 10px; bottom: 12px; } } /* small on phones, so it never sits over what you're reading */
.bot-body { position: relative; display: block; height: 100%; aspect-ratio: 121 / 128; margin: 0 auto; pointer-events: none; transform-origin: 50% 85%; animation: bot-bob 3.2s ease-in-out infinite; }
.bot-body img { display: block; width: 100%; height: 100%; }
/* the eyes, drawn over the picture's own eyes: they glow brighter when it talks, is pointed at, or performs */
.bot-eye { position: absolute; left: 25.7%; top: 30.5%; width: 11.4%; height: 15.4%; border-radius: 30%; background: #B9FFD0; mix-blend-mode: screen;
  box-shadow: 0 0 6px 2px rgba(120, 255, 170, .9), 0 0 14px 4px rgba(90, 230, 140, .55); opacity: 0; transition: opacity .25s ease; }
.bot-eye--r { left: 53.8%; width: 11.9%; }
.bot-body.lit .bot-eye { opacity: .95; animation: bot-eyes 1.1s ease-in-out infinite; }
@keyframes bot-eyes { 50% { opacity: .55; } }
@keyframes bot-bob { 50% { translate: 0 -3px; } }
/* the tricks */
.bot-body.do-flip { animation: bot-flip 1.5s cubic-bezier(.3, .7, .3, 1); }
@keyframes bot-flip { 0% { transform: none; } 18% { transform: translateY(4px) scale(1.08, .88); } 45% { transform: translateY(-46px) rotate(180deg); }
  72% { transform: translateY(-8px) rotate(360deg); } 84% { transform: translateY(2px) scale(1.1, .9) rotate(360deg); } 100% { transform: rotate(360deg); } }
.bot-body.do-bounce { animation: bot-bounce 1.5s ease-in-out; }
@keyframes bot-bounce { 0%, 100% { transform: none; } 10%, 43%, 76% { transform: translateY(2px) scale(1.12, .86); }
  25%, 58% { transform: translateY(-24px) scale(.94, 1.08); } 90% { transform: translateY(-8px); } }
.bot-body.do-dance { animation: bot-dance 1.6s ease-in-out; }
@keyframes bot-dance { 0%, 100% { transform: none; } 12% { transform: translateX(-5px) rotate(-14deg); } 25% { transform: translateY(-6px) rotate(0); }
  37% { transform: translateX(5px) rotate(14deg); } 50% { transform: translateY(-6px) rotate(0); } 62% { transform: translateX(-5px) rotate(-14deg); }
  75% { transform: translateY(-6px) rotate(0); } 87% { transform: translateX(5px) rotate(14deg); } }
.bot-body.do-spin { animation: bot-spin 1.4s cubic-bezier(.5, 0, .3, 1); }
@keyframes bot-spin { 0% { transform: none; } 25% { transform: translateY(-10px) scaleX(-1); } 50% { transform: translateY(-14px) scaleX(1); } 75% { transform: translateY(-10px) scaleX(-1); } 100% { transform: none; } }
.bot-body.do-magic { animation: bot-magic 1.6s ease-in-out; }
@keyframes bot-magic { 0% { transform: none; opacity: 1; } 30% { transform: scale(1.15) rotate(-8deg); opacity: 1; } 42% { transform: scale(0) rotate(160deg); opacity: 0; }
  62% { transform: scale(0); opacity: 0; } 80% { transform: scale(1.18) rotate(-6deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
.bot-puff { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.bot-puff i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #9CF5B8; box-shadow: 0 0 6px #6FE39A;
  animation: bot-puff 1.1s ease-out .55s both; }
.bot-puff i:nth-child(even) { width: 4px; height: 4px; margin: -2px; background: #FFFFFF; }
@keyframes bot-puff { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-40px) scale(1); } }

/* its speech bubble: comes out of its mouth to the left (to the right when the robot sits on the left half), the tail
   pointing at its mouth; cream like its shell, a bold first line, the second written out as it speaks */
.bot-say { position: fixed; z-index: 2147483645; display: grid; gap: 3px; width: max-content; max-width: min(270px, calc(100vw - 100px)); padding: 12px 16px 13px;
  border-radius: 18px; background: #FBFAF6; color: #1B2118; box-shadow: inset 0 0 0 1.5px rgba(78, 99, 73, .28), 0 14px 30px -16px rgba(0, 0, 0, .5);
  cursor: pointer; opacity: 0; pointer-events: none; transform: translateX(14px) scale(.4); transform-origin: 100% var(--tail-y, 50%);
  transition: opacity .2s ease, transform .5s cubic-bezier(.34, 1.7, .5, 1); }
.bot-say--right { transform: translateX(-14px) scale(.4); transform-origin: 0 var(--tail-y, 50%); }
.bot-say.on { opacity: 1; pointer-events: auto; transform: none; }
.bot-say-head { font: 600 15px/1.2 "Funnel Display", "General Sans", system-ui, sans-serif; letter-spacing: -.01em; }
.bot-say-line { font: 400 13px/1.35 "Geist", "General Sans", system-ui, sans-serif; color: #4A5446; text-wrap: balance; }
.bot-say-line .w { white-space: nowrap; }
.bot-say-line i { font-style: normal; opacity: 0; }
.bot-say.on .bot-say-line i { opacity: 1; transition: opacity .06s calc(.3s + var(--i) * 30ms); }   /* written out letter by letter */
/* the tail: a point from the bubble's side toward its mouth */
.bot-say-tail { position: absolute; top: var(--tail-y, 50%); right: -10px; width: 12px; height: 16px; margin-top: -8px; background: #FBFAF6;
  clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(1.5px 0 0 rgba(78, 99, 73, .28)); }
.bot-say--right .bot-say-tail { right: auto; left: -10px; clip-path: polygon(100% 0, 0 50%, 100% 100%); filter: drop-shadow(-1.5px 0 0 rgba(78, 99, 73, .28)); }
[dir="rtl"] .bot-say { direction: ltr; }   /* the robot speaks English: on a right-to-left page its words still run left to right */
@media (max-width: 600px) { .bot-say { max-width: min(190px, calc(100vw - 84px)); padding: 9px 12px 10px; gap: 2px; border-radius: 15px; } .bot-say-head { font-size: 13.5px; } .bot-say-line { font-size: 12px; } }
/* dizzy: it wobbles round and round, slower and slower, eyes flickering */
.bot-body.do-dizzy { animation: bot-dizzy 2.1s cubic-bezier(.3, .6, .4, 1); }
.bot-body.do-dizzy .bot-eye { animation: bot-eyes .18s steps(2) infinite; }
@keyframes bot-dizzy { 0% { transform: none; } 12% { transform: rotate(-26deg) translateX(-4px); } 26% { transform: rotate(22deg) translateX(4px); } 40% { transform: rotate(-17deg) translateX(-3px); }
  54% { transform: rotate(12deg) translateX(2px); } 68% { transform: rotate(-7deg); } 82% { transform: rotate(4deg) translateY(2px) scale(1.04, .94); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .bot-body { animation: none !important; } .bot-say.on .bot-say-line i { transition: none; } }