/* ra-demo-characters.css — the guide-character presentation layer, extracted 2026-08-11 from
   teaching-demo-56.html (the flagship money demo, and the pitch demo).

   WHY ONLY THIS SLICE. The six money demos measure 87-89% similar by character, but only 32 of the
   flagship's 233 CSS rules match EXACTLY across five or more of them — their styling is per-band bespoke,
   not a shared stylesheet. Wholesale-linking the flagship CSS would also import `html,body{overflow:hidden;
   height:100%}`, a full-screen app shell that would break the generated math/econ pages, which scroll.
   So this file carries the one subsystem that IS the quality gap and IS safely portable: how a guide
   character is presented and animated. 15 rules.

   The hand-built money demos are NOT modified. This is for the generated math and econ pages, so all three
   tracks present their guide the same way. */
.character img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.char-penelope {
  width: 120px;
  height: 120px;
  bottom: 50px;
}
.char-small {
  width: 90px;
  height: 90px;
  bottom: 30px;
}
.char-talking {
  animation: char-talk 0.4s ease-in-out infinite alternate;
}
.char-celebrating {
  animation: char-celebrate 0.5s var(--bounce) infinite alternate;
}
.char-encouraging {
  animation: char-encourage 1s ease-in-out infinite alternate;
}
.char-pointing {
  transform: scaleX(-1);
  animation: char-point 2s ease-in-out infinite;
}
.char-offscreen-right { right: -200px !important; opacity: 0; }
.char-penelope { width: 95px; height: 95px; }
.char-small { width: 70px; height: 70px; }
.char-penelope { width: 85px; height: 85px; bottom: 25px; }
@keyframes char-talk {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-5px) scale(1.03); }
}
@keyframes char-celebrate {
  0% { transform: translateY(0) rotate(-3deg); }
  100% { transform: translateY(-25px) rotate(3deg); }
}
@keyframes char-encourage {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-8deg) translateY(-4px); }
}
@keyframes char-point {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
  50% { transform: scaleX(-1) translateY(-6px) rotate(-3deg); }
}