/* ===== Mèo Mây ===== */
.may { width: 100%; height: 100%; overflow: visible; display: block; }
.may * { transform-box: view-box; }
.may .prop, .may .mood-fx, .may .eyes-happy, .may .eyes-sleep, .may .mouth-open { display: none; }

.may .root   { transform-origin: 160px 320px; animation: may-bob 3.2s ease-in-out infinite; }
.may .tail   { transform-origin: 206px 292px; animation: may-tail 2.6s ease-in-out infinite; }
.may .head   { transform-origin: 160px 210px; transition: transform .35s ease; }
.may .ear-l  { transform-origin: 112px 100px; }
.may .ear-r  { transform-origin: 208px 100px; }
.may .arm-l  { transform-origin: 126px 238px; transition: transform .35s ease; }
.may .arm-r  { transform-origin: 194px 238px; transition: transform .35s ease; }
.may .eyes-open .eye { transform-origin: 160px 146px; animation: may-blink 4.6s infinite; }

@keyframes may-bob   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
@keyframes may-tail  { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(8deg) } }
@keyframes may-blink { 0%,92%,100% { transform: scaleY(1) } 95% { transform: scaleY(.08) } }

/* ---- Nói ---- */
.may[data-talk="1"] .mouth-w { display: none; }
.may[data-talk="1"] .mouth-open { display: inline; transform-origin: 160px 172px; animation: may-talk .26s ease-in-out infinite alternate; }
@keyframes may-talk { from { transform: scaleY(.35) } to { transform: scaleY(1.05) } }

/* ---- Vui ---- */
.may[data-mood="happy"] .eyes-open { display: none; }
.may[data-mood="happy"] .eyes-happy { display: inline; }
.may[data-mood="happy"] .mouth-w { display: none; }
.may[data-mood="happy"] .mouth-open { display: inline; }
.may[data-mood="happy"] .happy-fx { display: inline; }
.may[data-mood="happy"] .root { animation: may-jump .7s cubic-bezier(.3,.7,.4,1) infinite; }
.may[data-mood="happy"] .arm-l { transform: rotate(150deg); animation: may-wave-l .7s ease-in-out infinite alternate; }
.may[data-mood="happy"] .arm-r { transform: rotate(-150deg); animation: may-wave-r .7s ease-in-out infinite alternate; }
.may[data-mood="happy"] .spark { transform-box: fill-box; transform-origin: center; animation: may-twinkle .9s ease-in-out infinite alternate; }
.may[data-mood="happy"] .spark:nth-child(2) { animation-delay: .3s }
.may[data-mood="happy"] .spark:nth-child(3) { animation-delay: .5s }
@keyframes may-jump { 0%,100% { transform: translateY(0) scale(1,1) } 15% { transform: translateY(0) scale(1.05,.94) } 50% { transform: translateY(-26px) scale(.97,1.03) } }
@keyframes may-wave-l { from { transform: rotate(135deg) } to { transform: rotate(165deg) } }
@keyframes may-wave-r { from { transform: rotate(-135deg) } to { transform: rotate(-165deg) } }
@keyframes may-twinkle { from { transform: scale(.6) rotate(0); opacity: .6 } to { transform: scale(1.15) rotate(20deg); opacity: 1 } }

/* ---- Lắng nghe ---- */
.may[data-mood="listen"] .head { transform: rotate(7deg); }
.may[data-mood="listen"] .ear-r { animation: may-ear 1s ease-in-out infinite; }
.may[data-mood="listen"] .listen-fx { display: inline; animation: may-pulse 1s ease-in-out infinite; }
@keyframes may-ear { 0%,70%,100% { transform: rotate(0) } 80% { transform: rotate(10deg) } 90% { transform: rotate(-4deg) } }
@keyframes may-pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* ---- Suy nghĩ ---- */
.may[data-mood="think"] .head { transform: rotate(-8deg); }
.may[data-mood="think"] .think-fx { display: inline; }
.may[data-mood="think"] .think-fx circle { animation: may-pulse 1.2s ease-in-out infinite; }
.may[data-mood="think"] .think-fx circle:nth-child(2) { animation-delay: .2s }
.may[data-mood="think"] .think-fx circle:nth-child(3) { animation-delay: .4s }
.may[data-mood="think"] .arm-r { transform: rotate(165deg); }

/* ================= ĐỘNG TÁC ================= */
.may[data-act="brush"] .prop-brush,
.may[data-act="eat"]   .prop-eat,
.may[data-act="sleep"] .prop-sleep,
.may[data-act="bath"]  .prop-bath,
.may[data-act="dress"] .prop-dress,
.may[data-act="bag"]   .prop-bag,
.may[data-act="shoes"] .prop-shoes,
.may[data-act="potty"] .prop-potty,
.may[data-act="wash"]  .prop-wash,
.may[data-act="cream"] .prop-cream,
.may[data-act="play"]  .prop-play,
.may[data-act="read"]  .prop-read { display: inline; }

/* Đánh răng: tay phải đưa bàn chải lên miệng, chải qua lại */
.may[data-act="brush"]:not([data-mood="happy"]) .arm-r { animation: may-brush .32s ease-in-out infinite alternate; }
.may[data-act="brush"] .foam circle { transform-box: fill-box; transform-origin: center; animation: may-pop 1.1s ease-in-out infinite; }
.may[data-act="brush"] .foam circle:nth-child(2) { animation-delay: .35s }
.may[data-act="brush"] .foam circle:nth-child(3) { animation-delay: .7s }
@keyframes may-brush { from { transform: rotate(160deg) } to { transform: rotate(176deg) } }
@keyframes may-pop { 0% { transform: scale(.3); opacity: 0 } 40% { opacity: 1 } 100% { transform: translateY(-14px) scale(1.1); opacity: 0 } }

/* Ăn: múc cơm đưa lên miệng */
.may[data-act="eat"]:not([data-mood="happy"]) .arm-r { animation: may-spoon 1.6s ease-in-out infinite; }
.may[data-act="eat"] .steam { animation: may-pulse 1.8s ease-in-out infinite; }
@keyframes may-spoon { 0%,15%,100% { transform: rotate(28deg) } 50%,62% { transform: rotate(166deg) } }

/* Ngủ */
.may[data-act="sleep"] .eyes-open, .may[data-act="sleep"] .eyes-happy { display: none !important; }
.may[data-act="sleep"] .eyes-sleep { display: inline; }
.may[data-act="sleep"] .ear, .may[data-act="sleep"] .bow { display: none; }
.may[data-act="sleep"] .root { animation: may-breathe 3.6s ease-in-out infinite; }
.may[data-act="sleep"] .head { transform: rotate(-5deg); }
.may[data-act="sleep"] .zzz text { animation: may-float 3s ease-in-out infinite; }
.may[data-act="sleep"] .zzz text:nth-child(2) { animation-delay: .6s }
.may[data-act="sleep"] .zzz text:nth-child(3) { animation-delay: 1.2s }
@keyframes may-breathe { 0%,100% { transform: scale(1,1) } 50% { transform: scale(1.02,.985) } }
@keyframes may-float { 0% { opacity: 0; transform: translateY(10px) } 30%,70% { opacity: 1 } 100% { opacity: 0; transform: translateY(-14px) } }

/* Tắm */
.may[data-act="bath"] .bubbles circle { transform-box: fill-box; transform-origin: center; animation: may-rise 2.4s ease-in infinite; }
.may[data-act="bath"] .bubbles circle:nth-child(2n) { animation-delay: .8s }
.may[data-act="bath"] .bubbles circle:nth-child(3n) { animation-delay: 1.5s }
.may[data-act="bath"]:not([data-mood="happy"]) .arm-l { animation: may-scrub-l .45s ease-in-out infinite alternate; }
.may[data-act="bath"]:not([data-mood="happy"]) .arm-r { animation: may-scrub-r .45s ease-in-out infinite alternate; }
@keyframes may-rise { 0% { transform: translateY(8px) scale(.6); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(-36px) scale(1.1); opacity: 0 } }
@keyframes may-scrub-l { from { transform: rotate(-20deg) } to { transform: rotate(-40deg) } }
@keyframes may-scrub-r { from { transform: rotate(20deg) } to { transform: rotate(40deg) } }

/* Rửa tay: hai tay xoa vào nhau */
.may[data-act="wash"]:not([data-mood="happy"]) .arm-l { animation: may-rub-l .3s ease-in-out infinite alternate; }
.may[data-act="wash"]:not([data-mood="happy"]) .arm-r { animation: may-rub-r .3s ease-in-out infinite alternate; }
.may[data-act="wash"] .bubbles circle { transform-box: fill-box; transform-origin: center; animation: may-rise 1.8s ease-in infinite; }
.may[data-act="wash"] .bubbles circle:nth-child(2) { animation-delay: .5s }
.may[data-act="wash"] .bubbles circle:nth-child(3) { animation-delay: 1s }
@keyframes may-rub-l { from { transform: rotate(-50deg) } to { transform: rotate(-62deg) } }
@keyframes may-rub-r { from { transform: rotate(62deg) } to { transform: rotate(50deg) } }

/* Thay đồ: tay áo cùng màu áo, lắc lư khoe áo */
.may[data-act="dress"] .arm .fur { stroke: #FFC2DA; }
.may[data-act="dress"]:not([data-mood="happy"]) .root { animation: may-sway 1.4s ease-in-out infinite; }
@keyframes may-sway { 0%,100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }

/* Ba lô: tay nắm quai */
.may[data-act="bag"]:not([data-mood="happy"]) .arm-l { transform: rotate(-12deg); }
.may[data-act="bag"]:not([data-mood="happy"]) .arm-r { transform: rotate(12deg); }
.may[data-act="bag"]:not([data-mood="happy"]) .root { animation: may-march .6s ease-in-out infinite alternate; }
@keyframes may-march { from { transform: translateY(0) rotate(-2deg) } to { transform: translateY(-4px) rotate(2deg) } }

/* Dép: nhún nhảy */
.may[data-act="shoes"]:not([data-mood="happy"]) .root { animation: may-march .45s ease-in-out infinite alternate; }

/* Vệ sinh */
.may[data-act="potty"]:not([data-mood="happy"]) .arm-l { animation: may-wave-small 1s ease-in-out infinite alternate; }
@keyframes may-wave-small { from { transform: rotate(100deg) } to { transform: rotate(130deg) } }

/* Bôi thuốc: tay trái giơ ra, tay phải cầm tuýp chấm nhẹ */
.may[data-act="cream"]:not([data-mood="happy"]) .arm-l { transform: rotate(-38deg); }
.may[data-act="cream"]:not([data-mood="happy"]) .arm-r { animation: may-dab .7s ease-in-out infinite alternate; }
.may[data-act="cream"] .hearts path { transform-box: fill-box; transform-origin: center; animation: may-twinkle 1s ease-in-out infinite alternate; }
.may[data-act="cream"] .hearts path:nth-child(2) { animation-delay: .4s }
@keyframes may-dab { from { transform: rotate(36deg) } to { transform: rotate(54deg) } }

/* Chơi */
.may[data-act="play"] .yarn circle, .may[data-act="play"] .yarn path:not(:first-child) { transform-origin: 274px 320px; animation: may-ball .5s cubic-bezier(.5,0,.5,1) infinite alternate; }
.may[data-act="play"]:not([data-mood="happy"]) .arm-r { animation: may-paw .5s ease-in-out infinite alternate; }
@keyframes may-ball { from { transform: translateY(0) scale(1.06,.94) } to { transform: translateY(-22px) } }
@keyframes may-paw { from { transform: rotate(-20deg) } to { transform: rotate(-50deg) } }

/* Đọc sách */
.may[data-act="read"]:not([data-mood="happy"]) .arm-l { transform: rotate(-8deg); }
.may[data-act="read"]:not([data-mood="happy"]) .arm-r { transform: rotate(8deg); }
.may[data-act="read"] .head { transform: rotate(4deg) translateY(4px); }

@media (prefers-reduced-motion: reduce) {
  .may *, .may .root { animation-duration: 0s !important; animation-iteration-count: 1 !important; }
}