/* Mèo face: draws the look written by js/face.js as attributes on the SVG root
   (data-state, data-emotion, data-eyes, data-lids, data-iris, data-brows, data-mouth, data-ears,
   data-paws, data-body, data-fx). Variant tables live in js/emotions.js (PARTS).
   Animated groups pivot at their local origin (see art/meo-cat.svg), so only transforms are set here. */

/* Breathing animates the root <svg> box: browsers composite that on the GPU instead of repainting the art. */
.meo-cat {
  display: block;
  overflow: hidden;
  transform-origin: 50% 100%;
  will-change: transform;
  animation: meo-breathe 4.2s ease-in-out infinite;
}
.meo-cat g { transform-origin: 0 0; }

/* ---------- variants hidden by default ---------- */
.meo-cat .v-open,
.meo-cat .v-happy,
.meo-cat .v-closed,
.meo-cat .v-squint,
.meo-cat .v-heart,
.meo-cat .v-cry,
.meo-cat .mouth > g,
.meo-cat .fx,
.meo-cat .blush-lines {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* ---------- eyes ---------- */
.meo-cat[data-eyes="hidden"] .eye { opacity: 0; }
.meo-cat[data-eyes="open"] .v-open,
.meo-cat[data-eyes="wink"] .eye.side-l .v-open,
.meo-cat[data-eyes="silly"] .eye.side-l .v-open,
.meo-cat[data-eyes="happy"] .v-happy,
.meo-cat[data-eyes="wink"] .eye.side-r .v-happy,
.meo-cat[data-eyes="closed"] .v-closed,
.meo-cat[data-eyes="squint"] .v-squint,
.meo-cat[data-eyes="silly"] .eye.side-r .v-squint,
.meo-cat[data-eyes="heart"] .v-heart,
.meo-cat[data-eyes="cry"] .v-cry {
  opacity: 1;
}

.meo-cat .lid,
.meo-cat .eye-size,
.meo-cat .iris-size,
.meo-cat .pupil {
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.meo-cat[data-lids="wide"] .eye-size { transform: scale(1.09); }
.meo-cat[data-lids="sultry"] .lid { transform: translateY(26px) rotate(2deg); }
.meo-cat[data-lids="half"] .lid { transform: translateY(40px); }
.meo-cat[data-lids="drowsy"] .lid { transform: translateY(64px); }
.meo-cat[data-lids="smug"] .lid { transform: translateY(48px) rotate(4deg); }
.meo-cat[data-lids="angry"] .lid { transform: translateY(32px) rotate(19deg); }
.meo-cat[data-lids="sad"] .lid { transform: translateY(28px) rotate(-17deg); }
.meo-cat[data-lids="roll"] .lid { transform: translateY(46px); }

.meo-cat[data-iris="small"] .iris-size { transform: scale(0.8); }
.meo-cat[data-iris="tiny"] .iris-size { transform: scale(0.42); }
.meo-cat[data-iris="big"] .pupil { transform: scale(1.25); }
.meo-cat[data-iris="glossy"] .pupil { transform: scale(1.16); }
.meo-cat .glint-extra { transition: opacity 0.3s ease; }
.meo-cat[data-iris="glossy"] .glint-extra { opacity: 1; }

.meo-cat.is-blinking .blinker { animation: meo-blink 0.18s ease-in-out 1; }
/* Slow blink: the cat's "I like you" (js/face.js slowBlink()). */
.meo-cat.is-slow-blinking .blinker { animation: meo-blink-slow 1.3s ease-in-out 1; }
.meo-cat[data-eyes="heart"] .heart-beat { animation: meo-beat 0.55s ease-in-out infinite alternate; }

/* ---------- brows ---------- */
.meo-cat .brow-pose { transition: transform 0.35s ease, opacity 0.3s ease; }
.meo-cat[data-brows="raised"] .brow-pose { transform: translateY(-18px); }
.meo-cat[data-brows="angry"] .brow-pose { transform: translate(6px, 18px) rotate(20deg); }
.meo-cat[data-brows="sad"] .brow-pose { transform: translateY(-4px) rotate(-18deg); }
.meo-cat[data-brows="one-up"] .side-r > .brow-pose { transform: translateY(-22px) rotate(-8deg); }
.meo-cat[data-brows="focus"] .brow-pose { transform: translateY(8px) rotate(9deg); }
.meo-cat[data-brows="hidden"] .brow-pose { opacity: 0; }

/* ---------- mouth ---------- */
.meo-cat[data-mouth="smile"] .m-smile,
.meo-cat[data-mouth="grin"] .m-grin,
.meo-cat[data-mouth="laugh"] .m-laugh,
.meo-cat[data-mouth="frown"] .m-frown,
.meo-cat[data-mouth="wail"] .m-wail,
.meo-cat[data-mouth="hiss"] .m-hiss,
.meo-cat[data-mouth="o"] .m-o,
.meo-cat[data-mouth="scream"] .m-scream,
.meo-cat[data-mouth="kiss"] .m-kiss,
.meo-cat[data-mouth="smirk"] .m-smirk,
.meo-cat[data-mouth="tongue"] .m-tongue,
.meo-cat[data-mouth="lick"] .m-lick,
.meo-cat[data-mouth="wavy"] .m-wavy,
.meo-cat[data-mouth="flat"] .m-flat,
.meo-cat[data-mouth="yawn"] .m-yawn,
.meo-cat[data-mouth="talk"] .m-talk {
  opacity: 1;
}
.meo-cat[data-mouth="talk"] .jaw { animation: meo-talk 1.05s linear infinite; }
.meo-cat[data-mouth="yawn"] .m-yawn { animation: meo-yawn 3.2s ease-in-out infinite; }

/* ---------- ears (the bow shares the right ear pose) ---------- */
.meo-cat .ear-pose { transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.35, 1.25); }
.meo-cat[data-ears="perk"] .ear-pose { transform: rotate(7deg) scale(1.05); }
.meo-cat[data-ears="back"] .ear-pose { transform: rotate(-30deg) scale(0.95, 0.9); }
.meo-cat[data-ears="droop"] .ear-pose { transform: rotate(-24deg) translateY(10px); }
.meo-cat[data-ears="relaxed"] .ear-pose { transform: rotate(-9deg); }
.meo-cat[data-ears="tilt"] .side-l > .ear-pose { transform: rotate(-17deg); }
.meo-cat[data-ears="tilt"] .side-r > .ear-pose { transform: rotate(8deg) scale(1.04); }
.meo-cat.twitch-l .side-l .ear-twitch { animation: meo-twitch 0.45s ease-in-out 1; }
.meo-cat.twitch-r .side-r .ear-twitch { animation: meo-twitch 0.45s ease-in-out 1; }

/* ---------- arms: shoulder (paw-pose) and elbow (forearm) angles ----------
   Two 150-unit segments; angles from inverse kinematics so the paw lands on its target (art is 1000x1500,
   shoulders at 336,860 / 664,860; side-r is mirrored, so one rule drives both arms).
   Rest: paws folded in front of the waist. */
.meo-cat .paw-pose,
.meo-cat .forearm { transition: transform 0.55s cubic-bezier(0.3, 0.75, 0.3, 1.1); }
.meo-cat .paw-pose { transform: rotate(-2deg); }
.meo-cat .forearm { transform: rotate(-55.8deg); }
/* Both paws on the cheeks, elbows out. */
.meo-cat[data-paws="cheeks"] .paw-pose { transform: rotate(122.9deg); }
.meo-cat[data-paws="cheeks"] .forearm { transform: rotate(81.5deg); }
/* Right paw under the chin: arm across the chest, forearm upright. */
.meo-cat[data-paws="chin"] .side-r > .paw-pose { transform: rotate(-66.2deg); }
.meo-cat[data-paws="chin"] .side-r .forearm { transform: rotate(-121.9deg); }
/* Wave: right arm up beside the head; paw-swing rocks the forearm around the elbow. */
.meo-cat.is-waving .side-r > .paw-pose { transform: rotate(114.5deg); }
.meo-cat.is-waving .side-r .forearm { transform: rotate(51.8deg); }
.meo-cat.is-waving .side-r .paw-swing { animation: meo-wave 0.42s ease-in-out 0.45s 6 alternate; }

/* ---------- body and head motion ---------- */
.meo-cat[data-body="sleep"] { animation: meo-breathe-deep 6s ease-in-out infinite; }
.meo-cat[data-body="doze"] { animation-duration: 5.4s; }
.meo-cat .tail { animation: meo-tail 3.6s ease-in-out infinite alternate; }
.meo-cat[data-body="sway"] .tail,
.meo-cat[data-body="bob"] .tail,
.meo-cat[data-body="wiggle"] .tail { animation-duration: 1.5s; }
.meo-cat[data-body="sleep"] .tail,
.meo-cat[data-body="doze"] .tail { animation-duration: 7s; }
.meo-cat .tag { animation: meo-tag 2.6s ease-in-out infinite alternate; }
.meo-cat[data-body="bounce"] .tag,
.meo-cat[data-body="laugh"] .tag { animation-duration: 0.5s; }

.meo-cat .head-motion { transition: transform 0.5s ease; }
.meo-cat[data-body="tilt-l"] .head-motion { transform: rotate(-5deg); }
.meo-cat[data-body="tilt-r"] .head-motion { transform: rotate(5deg); }
.meo-cat[data-body="chin-up"] .head-motion { transform: translateY(-8px) rotate(-3deg); }
.meo-cat[data-body="droop"] .head-motion { transform: translateY(14px) rotate(2deg); }
.meo-cat[data-body="sleep"] .head-motion {
  transform: translateY(12px) rotate(-4deg);
  animation: meo-sleep-head 6s ease-in-out infinite; /* in step with meo-breathe-deep: the head rises on each breath */
}
.meo-cat[data-body="sway"] .head-motion { animation: meo-sway 2.6s ease-in-out infinite alternate; }
.meo-cat[data-body="rock"] .head-motion { animation: meo-rock 0.5s ease-in-out infinite alternate; }
.meo-cat[data-body="shy"] .head-motion { animation: meo-shy 2.2s ease-in-out infinite alternate; }
.meo-cat[data-body="grace"] .head-motion { animation: meo-grace 7s ease-in-out infinite; }
.meo-cat[data-body="nod"] .head-motion { animation: meo-nod 3.2s ease-in-out infinite; }
.meo-cat[data-body="doze"] .head-motion { animation: meo-doze 5.4s ease-in-out infinite; }
.meo-cat[data-body="wiggle"] .head-motion { animation: meo-wiggle 0.6s ease-in-out infinite alternate; }
.meo-cat[data-body="bob"] .head-motion { animation: meo-bob 0.8s ease-in-out infinite alternate; }

.meo-cat[data-body="bounce"] .cat-motion { animation: meo-bounce 0.5s ease-in-out infinite alternate; }
.meo-cat[data-body="laugh"] .cat-motion { animation: meo-bounce-big 0.28s ease-in-out infinite alternate; }
.meo-cat[data-body="tremble"] .cat-motion { animation: meo-tremble 0.12s linear infinite alternate; }
.meo-cat[data-body="sob"] .cat-motion { animation: meo-sob 0.45s ease-in-out infinite alternate; }
.meo-cat[data-body="jump"] .cat-motion {
  animation: meo-jump 0.7s cubic-bezier(0.2, 0.8, 0.3, 1) 1, meo-tremble 0.1s linear 0.7s infinite alternate;
}
.meo-cat[data-body="hop"] .cat-motion { animation: meo-hop 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) 1; }

/* Yawn while asleep (js/face.js yawn()): head back, ears back, the small "o" mouth opens wide and closes. */
.meo-cat.is-yawning .head-motion {
  animation: none;
  transform: translateY(-6px) rotate(-7deg);
  transition-duration: 0.9s;
}
.meo-cat.is-yawning .ear-pose { transform: rotate(-20deg) scale(0.96); }
.meo-cat.is-yawning .mouth > g { opacity: 0; }
.meo-cat.is-yawning .mouth > g.m-yawn {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: meo-yawn-wide 3.4s ease-in-out 1;
}

/* ---------- cheeks ---------- */
.meo-cat .blush { opacity: 0.55; transition: opacity 0.4s ease; }
.meo-cat[data-state="sleep"] .blush { opacity: 0.35; }
.meo-cat[data-fx~="blush-strong"] .blush,
.meo-cat[data-fx~="blush-red"] .blush { opacity: 1; }
.meo-cat[data-fx~="blush-none"] .blush { opacity: 0; }
.meo-cat[data-fx~="blush-red"] { --meo-blush: #FF5A5A; }
.meo-cat[data-fx~="blush-lines"] .blush-lines { opacity: 1; }

/* ---------- effects ---------- */
.meo-cat[data-fx~="tear"] .fx-tear,
.meo-cat[data-fx~="tears"] .fx-tears,
.meo-cat[data-fx~="joy-tears"] .fx-joy-tears,
.meo-cat[data-fx~="sweat"] .fx-sweat,
.meo-cat[data-fx~="anger"] .fx-anger,
.meo-cat[data-fx~="gloom"] .fx-gloom,
.meo-cat[data-fx~="question"] .fx-question,
.meo-cat[data-fx~="exclaim"] .fx-exclaim,
.meo-cat[data-fx~="hearts"] .fx-hearts,
.meo-cat[data-fx~="kiss-heart"] .fx-kiss-heart,
.meo-cat[data-fx~="sparkles"] .fx-sparkles,
.meo-cat[data-fx~="shades"] .fx-shades,
.meo-cat[data-fx~="drool"] .fx-drool,
.meo-cat[data-fx~="fish"] .fx-fish,
.meo-cat[data-fx~="zzz"] .fx-zzz,
.meo-cat[data-fx~="zzz-small"] .fx-zzz-small,
.meo-cat[data-fx~="dots"] .fx-dots,
.meo-cat[data-fx~="ripples"] .fx-ripples {
  opacity: 1;
}
/* Effect animations run only while the effect is visible. */
.meo-cat[data-fx~="tear"] .fx-tear .drop-slide,
.meo-cat[data-fx~="sweat"] .fx-sweat .drop-slide { animation: meo-drop-slide 2.6s ease-in infinite; }
.meo-cat[data-fx~="tears"] .drop-fall { animation: meo-drop-fall 0.9s linear infinite; }
.meo-cat[data-fx~="tears"] .drop-fall.d2 { animation-delay: -0.45s; }
.meo-cat[data-fx~="joy-tears"] .joy-fly { animation: meo-joy-fly 0.9s ease-out infinite; }
.meo-cat[data-fx~="anger"] .pulse { animation: meo-pulse 0.5s ease-in-out infinite alternate; }
.meo-cat[data-fx~="question"] .fx-question .bob,
.meo-cat[data-fx~="fish"] .fx-fish .bob { animation: meo-mark-bob 1.4s ease-in-out infinite alternate; }
.meo-cat[data-fx~="exclaim"] .pop { animation: meo-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1; }
.meo-cat[data-fx~="hearts"] .float { animation: meo-float 3s ease-in-out infinite; }
.meo-cat[data-fx~="hearts"] .float.f2 { animation-delay: -1s; }
.meo-cat[data-fx~="hearts"] .float.f3 { animation-delay: -2s; }
.meo-cat[data-fx~="kiss-heart"] .kiss-fly { animation: meo-kiss-fly 2.2s ease-out infinite; }
.meo-cat[data-fx~="sparkles"] .twinkle,
.meo-cat[data-fx~="shades"] .glint-star { animation: meo-twinkle 1.6s ease-in-out infinite; }
.meo-cat[data-fx~="sparkles"] .twinkle.t2 { animation-delay: -0.55s; }
.meo-cat[data-fx~="sparkles"] .twinkle.t3 { animation-delay: -1.1s; }
.meo-cat[data-fx~="drool"] .drool-drip { animation: meo-drool 1.6s ease-in-out infinite alternate; }
.meo-cat[data-fx~="zzz"] .z,
.meo-cat[data-fx~="zzz-small"] .z { animation: meo-z 3.3s ease-in-out infinite; }
.meo-cat[data-fx~="zzz"] .z.z2 { animation-delay: -1.1s; }
.meo-cat[data-fx~="zzz"] .z.z3 { animation-delay: -2.2s; }
.meo-cat[data-fx~="dots"] .dot { animation: meo-dot 1.1s ease-in-out infinite; }
.meo-cat[data-fx~="dots"] .dot.d2 { animation-delay: 0.18s; }
.meo-cat[data-fx~="dots"] .dot.d3 { animation-delay: 0.36s; }
.meo-cat[data-fx~="ripples"] .rip { animation: meo-ripple 1.5s ease-out infinite; }
.meo-cat[data-fx~="ripples"] .rip.r2 { animation-delay: -0.5s; }
.meo-cat[data-fx~="ripples"] .rip.r3 { animation-delay: -1s; }

/* ---------- keyframes ---------- */
@keyframes meo-blink { 0%, 100% { transform: scaleY(1); } 45%, 55% { transform: scaleY(0.07); } }
@keyframes meo-blink-slow { 0%, 100% { transform: scaleY(1); } 35%, 62% { transform: scaleY(0.07); } }
@keyframes meo-grace {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: translateY(3px) rotate(2.5deg); }
}
@keyframes meo-beat { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes meo-talk {
  0% { transform: scaleY(0.35); }
  12% { transform: scaleY(1); }
  24% { transform: scaleY(0.5); }
  38% { transform: scaleY(0.92); }
  50% { transform: scaleY(0.3); }
  63% { transform: scaleY(0.8); }
  76% { transform: scaleY(0.45); }
  88% { transform: scaleY(0.95); }
  100% { transform: scaleY(0.35); }
}
@keyframes meo-yawn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes meo-twitch {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-11deg); }
  60% { transform: rotate(5deg); }
}
@keyframes meo-wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes meo-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.014); } }
@keyframes meo-breathe-deep { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.016, 1.04); } }
@keyframes meo-sleep-head {
  0%, 100% { transform: translateY(12px) rotate(-4deg); }
  50% { transform: translateY(5px) rotate(-2.5deg); }
}
@keyframes meo-yawn-wide {
  0% { transform: scale(0.6, 0.5); }
  30%, 70% { transform: scale(1.35, 1.75); }
  100% { transform: scale(0.6, 0.5); }
}
@keyframes meo-tail { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
@keyframes meo-tag { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes meo-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes meo-rock { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes meo-shy {
  from { transform: translateY(6px) rotate(5deg); }
  to { transform: translateY(12px) rotate(9deg); }
}
@keyframes meo-nod {
  0%, 100% { transform: translateY(0) rotate(0); }
  60% { transform: translateY(12px) rotate(3deg); }
  72% { transform: translateY(16px) rotate(4deg); }
  80% { transform: translateY(2px) rotate(0); }
}
@keyframes meo-doze {
  0%, 100% { transform: translateY(0) rotate(0); }
  70% { transform: translateY(22px) rotate(5deg); }
  76% { transform: translateY(-4px) rotate(-1deg); }
  84% { transform: translateY(0) rotate(0); }
}
@keyframes meo-wiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes meo-bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@keyframes meo-bounce { from { transform: translateY(0); } to { transform: translateY(-9px); } }
@keyframes meo-bounce-big { from { transform: translateY(0); } to { transform: translateY(-15px); } }
@keyframes meo-tremble { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes meo-sob { from { transform: translateY(0); } to { transform: translateY(7px); } }
@keyframes meo-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-60px); }
  62% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}
@keyframes meo-hop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-34px); }
  70% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}
@keyframes meo-drop-slide {
  0% { transform: translateY(-6px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(36px); opacity: 0; }
}
@keyframes meo-drop-fall {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(220px); opacity: 0; }
}
@keyframes meo-joy-fly {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(-96px, 46px) scale(1.1); opacity: 0; }
}
@keyframes meo-pulse { from { transform: scale(0.86); } to { transform: scale(1.12); } }
@keyframes meo-mark-bob {
  from { transform: translateY(-6px) rotate(-7deg); }
  to { transform: translateY(6px) rotate(7deg); }
}
@keyframes meo-pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes meo-float {
  0% { transform: translateY(14px) scale(0.75); opacity: 0; }
  20%, 75% { opacity: 1; }
  100% { transform: translateY(-46px) scale(1.05); opacity: 0; }
}
@keyframes meo-kiss-fly {
  0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(170px, -200px) scale(1.4); opacity: 0; }
}
@keyframes meo-twinkle {
  0%, 100% { transform: scale(0.45) rotate(0deg); opacity: 0.25; }
  50% { transform: scale(1) rotate(25deg); opacity: 1; }
}
@keyframes meo-drool { from { transform: scaleY(0.6); } to { transform: scaleY(1.35); } }
@keyframes meo-z {
  0% { transform: translate(0, 12px); opacity: 0; }
  25%, 70% { opacity: 1; }
  100% { transform: translate(22px, -40px); opacity: 0; }
}
@keyframes meo-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-13px); } }
@keyframes meo-ripple {
  0% { transform: scale(0.7); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: scale(1.18); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .meo-cat .cat-motion,
  .meo-cat .head-motion,
  .meo-cat .tail,
  .meo-cat .tag {
    animation: none !important;
  }
}