/* CSS transform/opacity motion: no sprite stepping or per-frame JS.
   A wave lasts ~1.5s, then rests; the full cycle is 5.6s. */
:root { --mascot-ease: cubic-bezier(0.77, 0, 0.175, 1); }
.mascot-motion { position: relative; flex-shrink: 0; }
.mascot-wave { display: block; }
.mascot-wave > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mascot-wave .mascot-paw { transform-origin: 44% 86%; }
.mascot-motion > img { transform-origin: 50% 80%; }
.mascot-motion::after { pointer-events: none; }
.mascot-motion[data-mood="thinking"]::after {
  content: "•••"; position: absolute; top: -8px; left: 50%;
  transform: translateX(-50%); color: var(--tint); font: 700 12px/1 var(--mono);
  letter-spacing: 2px;
}
.mascot-motion[data-mood="confused"]::after {
  content: "?"; position: absolute; top: -9px; right: 0;
  color: var(--tint); font: 700 12px/1 var(--mono);
}
@media (prefers-reduced-motion: no-preference) {
  .mascot-wave.is-visible > .mascot-paw { animation: mascot-wave 5.6s var(--mascot-ease) infinite; }
  .mascot-wave.is-visible > .mascot-body { animation: mascot-greet 5.6s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-mood="idle"] > img { animation: mascot-idle 6s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-mood="thinking"] > img { animation: mascot-think 2.4s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-mood="thinking"]::after { animation: mascot-dots 1.2s ease-in-out infinite; }
  .mascot-motion.is-visible[data-mood="working"] > img { animation: mascot-work 1.4s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-mood="happy"] > img,
  .mascot-motion.is-visible[data-mood="excited"] > img { animation: mascot-happy 4.8s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-mood="confused"] > img { animation: mascot-confused 6s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-mood="sleeping"] > img { animation: mascot-idle 4s var(--mascot-ease) infinite; }
}
/* Offscreen nodes and background tabs do no animation work. */
.mascot-paused .mascot-motion > img,
.mascot-paused .mascot-motion::after,
.mascot-paused .mascot-scene-props * { animation-play-state: paused !important; }
@keyframes mascot-wave {
  0%, 30%, 100% { transform: rotate(0deg); }
  7%, 19% { transform: rotate(-15deg); }
  13%, 25% { transform: rotate(6deg); }
}
@keyframes mascot-greet {
  0%, 30%, 100% { transform: rotate(0deg); }
  9%, 21% { transform: rotate(1deg); }
  15% { transform: rotate(-0.5deg); }
}
@keyframes mascot-idle {
  0%, 65%, 100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-1px) rotate(-2deg); }
}
@keyframes mascot-think {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-1px); }
}
@keyframes mascot-dots { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes mascot-work { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px) rotate(-2deg); } }
@keyframes mascot-happy {
  0%, 32%, 100% { transform: translateY(0) rotate(0deg); }
  8%, 23% { transform: translateY(-2px) rotate(-4deg); }
  16% { transform: translateY(0) rotate(3deg); }
}
@keyframes mascot-confused { 0%, 40%, 100% { transform: rotate(0); } 15%, 25% { transform: rotate(-6deg); } }

/* Waiting scenes: decorative props stay out of layout and the live region.
   The model icon sits 8px right of the avatar, so props overhang it by about 5px at most. */
.mascot-scene-props { position: absolute; inset: 0; pointer-events: none; }
.mascot-scene-props svg { display: block; overflow: visible; }
.scene-dot { position: absolute; top: -5px; width: 3px; height: 3px; border-radius: 1px; background: var(--tint); }
.scene-dot:nth-child(1) { left: 10px; }
.scene-dot:nth-child(2) { left: 16px; top: -8px; }
.scene-dot:nth-child(3) { left: 22px; top: -6px; }
.scene-laptop { position: absolute; inset: 0; width: 32px; height: 32px; transform-origin: 68% 88%; backface-visibility: hidden; }
.scene-screen-light { position: absolute; left: 22px; top: 21px; width: 2px; height: 2px; background: #fff7ee; opacity: .5; }
.scene-lens { position: absolute; width: 18px; height: 18px; right: -5px; bottom: 0; transform-origin: 85% 85%; }
.scene-note { position: absolute; width: 15px; height: 18px; right: -4px; bottom: 0; transform: rotate(8deg); }
.scene-pencil { position: absolute; width: 5px; height: 18px; right: 1px; bottom: 4px; transform: rotate(16deg); transform-origin: 50% 85%; }
.scene-bulb { position: absolute; width: 13px; height: 15px; top: -12px; left: 11px; }
.scene-twinkle { position: absolute; font-size: 10px; line-height: 1; color: var(--tint); }
.scene-twinkle-one { left: -4px; top: 2px; }
.scene-twinkle-two { right: -4px; top: -3px; font-size: 7px; }
@media (prefers-reduced-motion: no-preference) {
  .mascot-motion.is-visible[data-scene="ponder"] > img { animation: scene-ponder 2.8s var(--mascot-ease) infinite; }
  .is-visible .scene-dot { animation: scene-dot 1.5s ease-in-out infinite; }
  .is-visible .scene-dot:nth-child(2) { animation-delay: .18s; }
  .is-visible .scene-dot:nth-child(3) { animation-delay: .36s; }
  .mascot-motion.is-visible[data-scene="laptop"] > img { animation: scene-type 1.2s var(--mascot-ease) infinite; }
  .is-visible .scene-laptop { animation: scene-open-laptop 240ms var(--spring) both; }
  .is-visible .scene-screen-light { animation: scene-dot 1.4s ease-in-out infinite; }
  .mascot-motion.is-visible[data-streaming="true"] > img { animation-duration: .8s; }
  .mascot-motion.is-visible[data-scene="scout"] > img { animation: scene-look 3.8s var(--mascot-ease) infinite; }
  .is-visible .scene-lens { animation: scene-inspect 2.4s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-scene="notes"] > img { animation: scene-type 1.6s var(--mascot-ease) infinite; }
  .is-visible .scene-pencil { animation: scene-scribble 1.2s var(--mascot-ease) infinite; }
  .mascot-motion.is-visible[data-scene="idea"] > img { animation: scene-eureka 3.8s var(--mascot-ease) infinite; }
  .is-visible .scene-bulb { animation: scene-bulb 2.8s var(--mascot-ease) infinite; }
  .is-visible .scene-twinkle { animation: scene-twinkle 2s ease-in-out infinite; }
  .is-visible .scene-twinkle-two { animation-delay: .4s; }
  .mascot-motion.is-visible[data-scene="stretch"] > img { animation: scene-stretch 4s var(--mascot-ease) infinite; }
}
@keyframes scene-open-laptop {
  from { transform: perspective(80px) rotateX(78deg); opacity: .15; }
  to { transform: perspective(80px) rotateX(0deg); opacity: 1; }
}
@keyframes scene-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes scene-ponder { 0%, 100% { transform: rotate(-4deg); } 40% { transform: rotate(4deg) translateY(-1px); } 65% { transform: rotate(4deg); } }
@keyframes scene-type {
  0%, 45%, 100% { transform: translateY(0) rotate(0); }
  15%, 65% { transform: translateY(-1px) rotate(-2deg); }
  30%, 80% { transform: translateY(0) rotate(1deg); }
}
@keyframes scene-look { 0%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(-5deg); } 65%, 80% { transform: rotate(5deg); } }
@keyframes scene-inspect { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(-4px, -4px) rotate(12deg); } }
@keyframes scene-scribble { 0%, 100% { transform: rotate(16deg); } 25%, 70% { transform: translate(-2px, 1px) rotate(8deg); } 45%, 85% { transform: translate(1px, -1px) rotate(20deg); } }
@keyframes scene-eureka { 0%, 35%, 100% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-3px) rotate(-4deg); } 24% { transform: translateY(-1px) rotate(3deg); } }
@keyframes scene-bulb { 0%, 100% { transform: translateY(0) rotate(-5deg); opacity: .6; } 30%, 60% { transform: translateY(-2px) rotate(5deg); opacity: 1; } }
@keyframes scene-twinkle { 0%, 100% { opacity: .2; transform: scale(.75) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
@keyframes scene-stretch { 0%, 75%, 100% { transform: rotate(0) scale(1); } 20%, 35% { transform: rotate(-6deg) scaleY(1.06); } 50% { transform: rotate(5deg) scaleY(1.03); } }