/* Hoạt ảnh pet chibi SVG (đi cùng shared/pets.js). Điều khiển bằng lớp trên phần tử bọc (.pet-box). */
:root { --ear: #ffc2d1; --cheek: #ffb0c4; --shirt: #9cc3ff; }
.pet-box { position: relative; display: inline-block; line-height: 0; }
.pet-box svg { width: 100%; height: auto; }

/* ---------- bộ phận SVG ---------- */
/* Chỉ các phần có hoạt ảnh mới lấy gốc xoay theo khung của chính nó; phần có sẵn transform="rotate(...)" giữ hệ toạ độ SVG */
.pet :is(.anim, .head, .tail, .eye, .ear-l, .ear-r, .arm-l, .arm-r, .wing-l, .wing-r, .cape, .egg-g, .new-acc, .aura, .sparkle, .think) { transform-box: fill-box; }
.anim { transform-origin: 50% 100%; animation: bob 2.6s ease-in-out infinite; }
.head { transform-origin: 50% 95%; }
.tail { transform-origin: 0% 100%; animation: wag 1.8s ease-in-out infinite; }
.eye { transform-origin: 50% 50%; animation: blink 4.6s infinite; }
.ear-l { transform-origin: 80% 100%; animation: twitchL 6s infinite; }
.ear-r { transform-origin: 20% 100%; animation: twitchR 6s 1.3s infinite; }
.arm-l { transform-origin: 70% 10%; }
.arm-r { transform-origin: 30% 10%; }
.wing-l { transform-origin: 100% 60%; animation: flapL 1.3s ease-in-out infinite; }
.wing-r { transform-origin: 0% 60%; animation: flapR 1.3s ease-in-out infinite; }
.cape { transform-origin: 50% 0%; animation: sway 2.6s ease-in-out infinite; }
.egg-g { transform-origin: 50% 100%; animation: wobble 2.2s ease-in-out infinite; }
.aura { transform-origin: 50% 50%; animation: pulse 2.6s ease-in-out infinite; }
.sparkle { transform-origin: 50% 50%; animation: twinkle 1.8s ease-in-out infinite; }
.eye-closed, .eye-happy, .mouth-open, .brow-sad, .mouth-sad, .think { opacity: 0; }

@keyframes bob { 50% { transform: translateY(-4px) scale(1.01, .99); } }
@keyframes wag { 50% { transform: rotate(12deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.08); } }
@keyframes twitchL { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-9deg); } 94% { transform: rotate(3deg); } }
@keyframes twitchR { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(9deg); } 94% { transform: rotate(-3deg); } }
@keyframes flapL { 50% { transform: rotate(-12deg); } }
@keyframes flapR { 50% { transform: rotate(12deg); } }
@keyframes sway { 50% { transform: skewX(3deg) scaleX(1.03); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .7; } }
@keyframes twinkle { 0%, 100% { transform: scale(.25) rotate(0deg); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; }
  70% { transform: scale(.8) rotate(70deg); opacity: .9; } }
@keyframes wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-3deg); } }

/* Ăn: há miệng nhai, gật gù, hai tay đưa lên */
.s-eat .mouth-open { animation: chomp .32s steps(1) 5; }
.s-eat .mouth { animation: chompHide .32s steps(1) 5; }
.s-eat .head { animation: nod .32s ease-in-out 5; }
.s-eat .arm-l { animation: holdL 1.6s ease-in-out; }
.s-eat .arm-r { animation: holdR 1.6s ease-in-out; }
@keyframes chomp { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes chompHide { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes nod { 50% { transform: rotate(-3deg) translateY(2px); } }
@keyframes holdL { 20%, 80% { transform: rotate(-35deg); } }
@keyframes holdR { 20%, 80% { transform: rotate(35deg); } }

/* Chơi: nhảy, giơ hai tay, mắt cười ^^ */
.s-play .anim { animation: jump .7s cubic-bezier(.3,.7,.4,1) 2; }
.s-play .eye { opacity: 0; animation: none; }
.s-play .eye-happy { opacity: 1; }
.s-play .mouth { opacity: 0; }
.s-play .mouth-open { opacity: 1; }
.s-play .tail { animation-duration: .4s; }
.s-play .arm-l { animation: raiseL .35s ease-in-out 4; }
.s-play .arm-r { animation: raiseR .35s ease-in-out 4; }
.s-play .cape { animation: flutter .35s ease-in-out 4; }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.08, .9); }
  45% { transform: translateY(-30px) scale(.96, 1.05); } 85% { transform: translateY(0) scale(1.06, .94); } }
@keyframes raiseL { 50% { transform: rotate(75deg); } }
@keyframes raiseR { 50% { transform: rotate(-75deg); } }
@keyframes flutter { 50% { transform: skewX(-8deg) scaleY(.92); } }

/* Ngủ */
.s-sleep .eye { opacity: 0; animation: none; }
.s-sleep .eye-closed { opacity: 1; }
.s-sleep .anim { animation: breathe 3s ease-in-out infinite; }
.s-sleep .head { animation: doze 3s ease-in-out infinite; }
.s-sleep .tail, .s-sleep .wing-l, .s-sleep .wing-r, .s-sleep .ear-l, .s-sleep .ear-r { animation: none; }
@keyframes breathe { 50% { transform: scale(1.02, .97); } }
@keyframes doze { 50% { transform: rotate(4deg) translateY(2px); } }

/* Lên sao: loé sáng, phụ kiện mới rơi xuống */
.s-evolve .anim { animation: evolve 1s ease-out; }
@keyframes evolve { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(.85); filter: brightness(2.2) saturate(0); }
  70% { transform: scale(1.1); filter: brightness(1.2); } 100% { transform: scale(1); filter: brightness(1); } }
.new-acc { transform-origin: 50% 50%; animation: drop .7s .5s cubic-bezier(.3,1.6,.5,1) backwards; }
@keyframes drop { from { transform: translateY(-60px) scale(1.4); opacity: 0; } }

.fx { position: absolute; pointer-events: none; font-size: 26px; left: 50%; top: 50%; }
.fx.food { animation: food .9s ease-in forwards; }
@keyframes food { from { transform: translate(90px, 40px) scale(1.2); } to { transform: translate(-12px, -10px) scale(.3); opacity: 0; } }
.fx.float { animation: floatUp 1.4s ease-out forwards; }
@keyframes floatUp { from { transform: translate(var(--x), 0) scale(.6); opacity: 1; } to { transform: translate(var(--x), -120px) scale(1.2); opacity: 0; } }
.fx.confetti { width: 8px; height: 12px; top: -10px; border-radius: 2px; animation: fall 1.6s ease-in forwards; }
@keyframes fall { to { transform: translate(var(--x), 380px) rotate(720deg); opacity: .2; } }

/* Đói, buồn: lông mày chau, miệng mếu, cúi đầu, tai cụp, nhún chậm */
.s-sad .brow-sad, .s-sad .mouth-sad { opacity: 1; }
.s-sad .mouth { opacity: 0; }
.s-sad .anim { animation-duration: 4.5s; }
.s-sad .head { transform: rotate(-4deg) translateY(3px); }
.s-sad .ear-l { animation: none; transform: rotate(-12deg); }
.s-sad .ear-r { animation: none; transform: rotate(12deg); }
.s-sad .tail { animation: none; }

/* Chờ cô duyệt: bong bóng suy nghĩ, nghiêng đầu ngẫm nghĩ */
.think { transform-origin: 0% 100%; }
.s-think .think { opacity: 1; animation: thinkPop 2.4s ease-in-out infinite; }
.s-think .head { animation: ponder 3.2s ease-in-out infinite; }
@keyframes thinkPop { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.04); } }
@keyframes ponder { 50% { transform: rotate(5deg); } }

@media (prefers-reduced-motion: reduce) { .pet *, .fx { animation: none !important; } }