/* ==========================================================================
   PraisePanda v2 — logo animation states
   Keyframes are copied verbatim from design/praisepanda-v2.html (same names).
   Mood is driven by ONE class on the wrapper (or the <svg> itself):
     .panda-mood-idle     — gentle bob + blinking eyes + twinkling star nose
     .panda-mood-happy    — squash-and-stretch hop, joyful (5★ received)
     .panda-mood-alert    — concerned tilt, coral star nose (1★ needs reply)
     .panda-mood-loading  — marigold star orbits the dimmed head (syncing)
   Use PandaMood.set(el, mood) from panda-moods.js instead of setting these
   classes by hand. Honors prefers-reduced-motion.
   ========================================================================== */

/* ---------- Idle: bob + blink + starpop ---------- */
.panda-mood-idle svg, svg.panda-mood-idle{
  animation:bob 4.5s ease-in-out infinite}
.panda-mood-idle .pp-eyes{
  transform-box:fill-box;transform-origin:center;
  animation:blink 4.4s ease-in-out infinite}
.panda-mood-idle .pp-nose{
  transform-box:fill-box;transform-origin:center;
  animation:starpop 3.4s ease-in-out infinite}

/* ---------- Happy (5★): squash-and-stretch hop ---------- */
.panda-mood-happy svg, svg.panda-mood-happy{
  transform-origin:50% 90%;
  animation:happy .95s ease-in-out infinite}
.panda-mood-happy .pp-nose{
  transform-box:fill-box;transform-origin:center;
  animation:starpop 1.2s ease-in-out infinite}
.panda-mood-happy .pp-cheek{opacity:.5}

/* ---------- Alert (1★): concerned tilt, coral star nose ---------- */
.panda-mood-alert svg, svg.panda-mood-alert{
  transform-origin:50% 85%;
  animation:alertt 1.4s ease-in-out infinite}
.panda-mood-alert .pp-eyes{animation:none}
.panda-mood-alert .pp-nose{fill:#FF5A36}

/* ---------- Loading: orbiting star, dimmed head ---------- */
.pp-orbit{display:none;transform-box:view-box;transform-origin:60px 68px}
.panda-mood-loading .pp-orbit{display:block;
  animation:spin 1.8s linear infinite}
.panda-mood-loading .pp-face{opacity:.35}

/* ---------- v2 keyframes (names unchanged) ---------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
@keyframes starpop{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.22) rotate(12deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-8px) rotate(var(--rot,0deg))}}
@keyframes happy{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(-14px) scale(.97,1.04)}55%{transform:translateY(0) scale(1.04,.94)}72%{transform:translateY(-6px) scale(1,1)}}
@keyframes alertt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Decorative helpers from v2 (hero sparkles, floating proof cards) */
.tw{transform-box:fill-box;transform-origin:center;animation:twinkle 2.6s ease-in-out infinite}
.tw2{transform-box:fill-box;transform-origin:center;animation:twinkle 3.4s ease-in-out infinite;animation-delay:1.1s}
.floaty{animation:floaty 5s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .panda-mood-idle svg, svg.panda-mood-idle,
  .panda-mood-idle .pp-eyes, .panda-mood-idle .pp-nose,
  .panda-mood-happy svg, svg.panda-mood-happy,
  .panda-mood-happy .pp-nose,
  .panda-mood-alert svg, svg.panda-mood-alert,
  .panda-mood-loading .pp-orbit,
  .tw,.tw2,.floaty{animation:none}
  .panda-mood-loading .pp-orbit{display:none}
  .panda-mood-loading .pp-face{opacity:1}
}