/* =====================================================================
   More emotes and props for the landing mascot (switch Mascot:Motion,
   loaded after mascot-motion.css). wwwroot/js/mascot-life.js sets:
   - data-act: the emote or reaction (dance, sip, read, knock, duck...)
   - data-carry: a prop it holds while it walks (mug, book, phone, balloon)
   - data-face: raise, squint and wink on top of the motion layer's faces
   - --ml-tilt / --ml-fall: the phone's tilt (steam and the balloon hang
     against it) and the way it stumbles
   and the host gets data-caps while Caps Lock is on.
   The props are the brand's props/ files (AvatarRenderer.RenderPuppet,
   props: true), each a hidden .pp-prop-* group: in the waving arm (yoyo,
   balloon, knock), the resting arm (phone) or in front of everything with
   their own arm drawn in (mug, book, visor, umbrella), while the real arm
   hides. A prop grows out of the hand when it comes out and shrinks back
   when it goes away. Poses use the individual rotate/translate properties
   so the keyframes (transform) run on top; reduced motion keeps the poses.
   ===================================================================== */

/* ---- Props: hidden until an act or a carry shows them; they pop out of the hand and back ---- */
.mascot-walker .pp-prop { transform-box: view-box; scale: 0.4; transition: opacity 0.18s ease, scale 0.34s cubic-bezier(0.3, 1.5, 0.5, 1); }
.mascot-walker .pp-prop-mug { transform-origin: 194px 289px; }
.mascot-walker .pp-prop-book { transform-origin: 250px 312px; }
.mascot-walker .pp-prop-phone { transform-origin: 395px 258px; }
.mascot-walker .pp-prop-visor { transform-origin: 300px 228px; }
.mascot-walker .pp-prop-yoyo,
.mascot-walker .pp-prop-balloon,
.mascot-walker .pp-prop-knock { transform-origin: 106px 212px; }
.mascot-walker .pp-prop-umbrella { transform-origin: 174px 160px; }
.mascot-walker .pp-prop-plane { transform-origin: 106px 206px; }
.mascot-walker .pp-prop-notes { transform-origin: 340px 190px; }
.mascot-walker .pp-prop-sneeze { transform-origin: 250px 292px; }
.mascot-walker .pp-prop-bang,
.mascot-walker .pp-prop-ask { transform-origin: 350px 150px; }

.mascot-walker[data-act="sip"] .pp-prop-mug,
.mascot-walker[data-act="spill"] .pp-prop-mug,
.mascot-walker[data-carry="mug"] .pp-prop-mug,
.mascot-walker[data-act="read"] .pp-prop-book,
.mascot-walker[data-act="slam"] .pp-prop-book,
.mascot-walker[data-carry="book"] .pp-prop-book,
.mascot-walker[data-act="phone"] .pp-prop-phone,
.mascot-walker[data-act="selfie"] .pp-prop-phone,
.mascot-walker[data-carry="phone"] .pp-prop-phone,
.mascot-walker[data-act="lookout"] .pp-prop-visor,
.mascot-walker[data-act="yoyo"] .pp-prop-yoyo,
.mascot-walker[data-act="balloon"] .pp-prop-balloon,
.mascot-walker[data-act="pop"] .pp-prop-balloon,
.mascot-walker[data-carry="balloon"] .pp-prop-balloon,
.mascot-walker[data-act="umbrella"] .pp-prop-umbrella,
.mascot-walker[data-act="plane"] .pp-prop-plane,
.mascot-walker[data-act="hum"] .pp-prop-notes,
.mascot-walker[data-act="dance"] .pp-prop-notes,
.mascot-walker[data-act="sneeze"] .pp-prop-sneeze,
.mascot-walker[data-act="knock"] .pp-prop-knock,
.mascot-walker[data-act="knock"] .pp-prop-ask,
.mascot-walker[data-act="spill"] .pp-prop-bang,
.mascot-walker[data-act="pop"] .pp-prop-bang,
.mascot-walker[data-act="shaken"] .pp-prop-bang,
.mascot-walker[data-act="stumble"] .pp-prop-bang,
.mascot-walker[data-carry="tongs"] .pp-prop-tongs,
.mascot-walker[data-carry="bat"] .pp-prop-bat,
.mascot-walker[data-carry="jug"] .pp-prop-jug,
.mascot-walker[data-carry="spoon"] .pp-prop-spoon,
.mascot-walker[data-carry="putter"] .pp-prop-putter,
.mascot-walker[data-carry="candle"] .pp-prop-candle,
.mascot-walker[data-carry="rusk"] .pp-prop-rusk,
.mascot-walker[data-carry="latte"] .pp-prop-latte,
.mascot-walker[data-carry="redcup"] .pp-prop-redcup,
.mascot-walker[data-carry="trophy"] .pp-prop-trophy,
.mascot-walker[data-carry="rugbyball"] .pp-prop-rugbyball,
.mascot-walker[data-carry="binoculars"] .pp-prop-binoculars,
.mascot-walker[data-carry="headlamp"] .pp-prop-headlamp,
.mascot-walker[data-carry="candle-lamp"] .pp-prop-headlamp,
.mascot-walker[data-carry="candle-lamp"] .pp-prop-candle,
.mascot-walker[data-carry="vuvu"] .pp-prop-vuvu,
.mascot-walker[data-act="vuvu"] .pp-prop-vuvu,
.mascot-walker[data-carry="seedling"] .pp-prop-seedling,
.mascot-walker[data-carry="can"] .pp-prop-can,
.mascot-walker[data-carry="trowel"] .pp-prop-trowel,
.mascot-walker[data-carry="packet"] .pp-prop-packet,
.mascot-walker[data-act="play"] .pp-prop-gamepad,
.mascot-walker[data-carry="gamepad"] .pp-prop-gamepad,
.mascot-walker[data-act="chug"] .pp-prop-energy,
.mascot-walker[data-carry="energy"] .pp-prop-energy,
.mascot-walker[data-act="slice"] .pp-prop-pizza,
.mascot-walker[data-carry="pizza"] .pp-prop-pizza,
.mascot-walker[data-act="blow"] .pp-prop-cartridge,
.mascot-walker[data-carry="cartridge"] .pp-prop-cartridge,
.mascot-host[data-caps] .mascot-walker .pp-prop-bang { opacity: 1; scale: 1; }

/* Showtime's hand props: where each grows from, and the real arm hiding behind those that draw their own */
.mascot-walker .pp-prop-tongs,
.mascot-walker .pp-prop-bat,
.mascot-walker .pp-prop-jug,
.mascot-walker .pp-prop-spoon,
.mascot-walker .pp-prop-putter { transform-origin: 106px 212px; }
.mascot-walker .pp-prop-candle,
.mascot-walker .pp-prop-rusk { transform-origin: 395px 258px; }
.mascot-walker .pp-prop-latte,
.mascot-walker .pp-prop-redcup { transform-origin: 250px 312px; }
.mascot-walker .pp-prop-trophy { transform-origin: 250px 160px; }
.mascot-walker .pp-prop-rugbyball { transform-origin: 300px 296px; }
.mascot-walker .pp-prop-binoculars { transform-origin: 250px 250px; }
.mascot-walker .pp-prop-headlamp { transform-origin: 250px 206px; }
.mascot-walker .pp-prop-vuvu { transform-origin: 228px 292px; }
.mascot-walker[data-carry="latte"] .m-arms,
.mascot-walker[data-carry="redcup"] .m-arms,
.mascot-walker[data-carry="trophy"] .m-arms,
.mascot-walker[data-carry="binoculars"] .m-arms,
.mascot-walker[data-carry="rugbyball"] .pp-arm-r,
.mascot-walker[data-carry="vuvu"] .pp-arm-l,
.mascot-walker[data-act="vuvu"] .pp-arm-l { opacity: 0; }
/* ---- Bored: a vuvuzela blast (and the shows' sh-blow): a breath, then the horn blares ---- */
.mascot-walker .pp-vuvu-blast { transform-box: fill-box; transform-origin: 100% 50%; }
.mascot-walker.is-motion[data-act="vuvu"] .pp-float { transform-origin: 250px 362px; animation: em-vuvu-body 2.6s ease-in-out; }
.mascot-walker.is-motion[data-act="vuvu"] .pp-vuvu-blast,
.mascot-walker.is-motion[data-act="sh-blow"] .pp-vuvu-blast { animation: ma-vuvu-blast 1.3s ease-out infinite; }
.mascot-walker.is-motion[data-act="vuvu"] .pp-arm-r { animation: em-vuvu-arm 2.6s ease-in-out; }
.mascot-walker[data-act="vuvu"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="vuvu"] .pp-eyes-closed { opacity: 1; }
@keyframes ma-vuvu-blast { 0%, 20% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes em-vuvu-body {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    20% { transform: translateY(-4px) rotate(-3deg) scale(1.04, 1.04); }
    35% { transform: translateY(2px) rotate(4deg) scale(0.98, 1.01); }
    55% { transform: translateY(0) rotate(5deg) scale(0.97, 1.02); }
    75% { transform: translateY(1px) rotate(2deg) scale(1, 1); }
    88% { transform: translateX(-4px) rotate(-3deg) scale(1, 1); }
}
@keyframes em-vuvu-arm { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-20deg); } 40%, 75% { transform: rotate(30deg); } }
.mascot-walker .pp-flame,
.mascot-walker .pp-glow,
.mascot-walker .pp-lamp-glow,
.mascot-walker .pp-rusk-tip { transform-box: fill-box; transform-origin: 50% 100%; }
.mascot-walker .pp-glow,
.mascot-walker .pp-lamp-glow { transform-origin: center; }
.mascot-walker.is-motion .pp-flame { animation: ma-flicker 0.5s ease-in-out infinite alternate; }
.mascot-walker.is-motion .pp-glow,
.mascot-walker.is-motion .pp-lamp-glow { animation: ma-glow 1.6s ease-in-out infinite; }
/* The latte's art: a rosetta unless the show asks for another */
.mascot-walker .pp-art-heart,
.mascot-walker .pp-art-tulip { opacity: 0; }
.mascot-walker.sh-art-heart .pp-art-rosetta,
.mascot-walker.sh-art-tulip .pp-art-rosetta { opacity: 0; }
.mascot-walker.sh-art-heart .pp-art-heart,
.mascot-walker.sh-art-tulip .pp-art-tulip { opacity: 1; }
.mascot-walker.sh-rusk-broken .pp-rusk-tip { opacity: 0; }
/* The leaf's garden props (WSMConnect): a potted plant held up on the waving hand (a king protea unless the show
   asks for another), and the watering can, trowel and seed packet in the resting one, which water and sow */
.mascot-walker .pp-prop-seedling { transform-origin: 106px 212px; }
.mascot-walker .pp-prop-can,
.mascot-walker .pp-prop-trowel,
.mascot-walker .pp-prop-packet { transform-origin: 395px 258px; }
.mascot-walker .pp-bloom-sunflower,
.mascot-walker .pp-bloom-spekboom,
.mascot-walker.sh-bloom-sunflower .pp-bloom-protea,
.mascot-walker.sh-bloom-spekboom .pp-bloom-protea { opacity: 0; }
.mascot-walker.sh-bloom-sunflower .pp-bloom-sunflower,
.mascot-walker.sh-bloom-spekboom .pp-bloom-spekboom { opacity: 1; }
.mascot-walker .pp-can-drops,
.mascot-walker .pp-seeds { transform-box: fill-box; }
.mascot-walker.is-motion[data-act="sh-pour"] .pp-can-drops { animation: ma-drops 0.5s linear infinite; }
.mascot-walker.is-motion[data-act="sh-sow"] .pp-seeds { animation: ma-seeds 0.7s ease-in infinite; }
@keyframes ma-drops { 0% { opacity: 0; transform: translate(0, -4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, 14px); } }
@keyframes ma-seeds { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, 34px); } }
@keyframes ma-flicker { from { transform: scale(0.92, 1) rotate(-3deg); } to { transform: scale(1.06, 1.12) rotate(3deg); } }
@keyframes ma-glow { 0%, 100% { transform: scale(1); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.5; } }

/* The real arm hides behind a prop that draws its own */
.mascot-walker[data-act="sip"] .pp-arm-l,
.mascot-walker[data-act="spill"] .pp-arm-l,
.mascot-walker[data-carry="mug"] .pp-arm-l,
.mascot-walker[data-act="umbrella"] .pp-arm-l,
.mascot-walker[data-act="lookout"] .pp-arm-r,
.mascot-walker[data-act="read"] .m-arms,
.mascot-walker[data-act="slam"] .m-arms,
.mascot-walker[data-carry="book"] .m-arms { opacity: 0; }

/* Parts of props that move on their own */
.mascot-walker .pp-mug,
.mascot-walker .pp-book,
.mascot-walker .pp-book-open,
.mascot-walker .pp-page,
.mascot-walker .pp-phone,
.mascot-walker .pp-yoyo-string,
.mascot-walker .pp-balloon,
.mascot-walker .pp-umbrella,
.mascot-walker .pp-plane,
.mascot-walker .pp-splash,
.mascot-walker .pp-steam { transform-box: view-box; }
.mascot-walker .pp-mug { transform-origin: 194px 289px; }
.mascot-walker .pp-book { transform-origin: 250px 312px; }
.mascot-walker .pp-book-open,
.mascot-walker .pp-page { transform-origin: 250px 312px; }
.mascot-walker .pp-phone { transform-origin: 395px 258px; transition: rotate 0.45s cubic-bezier(0.34, 1.4, 0.55, 1); }
.mascot-walker .pp-yoyo-string { transform-origin: 106px 214px; }
.mascot-walker .pp-balloon { transform-origin: 106px 212px; rotate: calc(var(--ml-tilt, 0deg) * -1); transition: rotate 0.3s ease-out; }
.mascot-walker .pp-umbrella { transform-origin: 174px 160px; }
.mascot-walker .pp-plane { transform-origin: 106px 206px; }
.mascot-walker .pp-splash { transform-origin: 196px 262px; }
.mascot-walker .pp-steam { transform-origin: 214px 266px; rotate: calc(var(--ml-tilt, 0deg) * -1); transition: rotate 0.3s ease-out; }
.mascot-walker .pp-steam1,
.mascot-walker .pp-steam2,
.mascot-walker .pp-note,
.mascot-walker .pp-yoyo-disc,
.mascot-walker .pp-balloon-body,
.mascot-walker .pp-balloon-pop,
.mascot-walker .pp-phone-flash,
.mascot-walker .pp-drop,
.mascot-walker .pp-ripple1,
.mascot-walker .pp-ripple2,
.mascot-walker .pp-bang,
.mascot-walker .pp-ask,
.mascot-walker .pp-spray { transform-box: fill-box; transform-origin: center; }
.mascot-walker .pp-steam1,
.mascot-walker .pp-steam2 { transform-origin: 50% 100%; }
.mascot-walker .pp-spray { opacity: 0; transform-origin: 50% 0; }

/* Happy eyes for the cheerful ones */
.mascot-walker[data-act="dance"] .m-eyes,
.mascot-walker[data-act="hum"] .m-eyes,
.mascot-walker[data-act="balloon"] .m-eyes,
.mascot-walker[data-act="umbrella"] .m-eyes,
.mascot-walker[data-act="selfie"] .m-eyes,
.mascot-walker[data-act="twirl"] .m-eyes,
.mascot-walker[data-act="cheer"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="dance"] .m-eyes-happy,
.mascot-walker[data-act="hum"] .m-eyes-happy,
.mascot-walker[data-act="balloon"] .m-eyes-happy,
.mascot-walker[data-act="umbrella"] .m-eyes-happy,
.mascot-walker[data-act="selfie"] .m-eyes-happy,
.mascot-walker[data-act="twirl"] .m-eyes-happy,
.mascot-walker[data-act="cheer"] .m-eyes-happy { opacity: 1; }
.mascot-walker[data-act="selfie"] .m-blush,
.mascot-walker[data-act="cheer"] .m-blush,
.mascot-walker[data-act="dance"] .m-blush { opacity: 1 !important; }

/* Startled ones: o mouth, sweat, brows up */
.mascot-walker[data-act="spill"] .m-mouth,
.mascot-walker[data-act="slam"] .m-mouth,
.mascot-walker[data-act="pop"] .m-mouth,
.mascot-walker[data-act="duck"] .m-mouth,
.mascot-walker[data-act="shaken"] .m-mouth,
.mascot-walker[data-act="stumble"] .m-mouth,
.mascot-walker[data-act="backflip"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="spill"] .m-mouth-o,
.mascot-walker[data-act="slam"] .m-mouth-o,
.mascot-walker[data-act="pop"] .m-mouth-o,
.mascot-walker[data-act="duck"] .m-mouth-o,
.mascot-walker[data-act="shaken"] .m-mouth-o,
.mascot-walker[data-act="stumble"] .m-mouth-o,
.mascot-walker[data-act="backflip"] .m-mouth-o { opacity: 1; }
.mascot-walker[data-act="spill"] .m-sweat,
.mascot-walker[data-act="shaken"] .m-sweat,
.mascot-walker[data-act="stumble"] .m-sweat { opacity: 1; }
.mascot-walker[data-act="spill"] .m-brow-l,
.mascot-walker[data-act="spill"] .m-brow-r,
.mascot-walker[data-act="slam"] .m-brow-l,
.mascot-walker[data-act="slam"] .m-brow-r,
.mascot-walker[data-act="pop"] .m-brow-l,
.mascot-walker[data-act="pop"] .m-brow-r,
.mascot-walker[data-act="knock"] .m-brow-l,
.mascot-walker[data-act="knock"] .m-brow-r { transform: translateY(-5px); transition: transform 0.15s ease-out; }

/* ---- Bored: dance, arms pumping, to its own humming ---- */
.mascot-walker.is-motion[data-act="dance"] .pp-float { transform-origin: 250px 362px; animation: ma-dance 0.8s ease-in-out 4; }
.mascot-walker.is-motion[data-act="dance"] .pp-arm-l { animation: ma-pump-l 0.8s ease-in-out 4; }
.mascot-walker.is-motion[data-act="dance"] .pp-arm-r { animation: ma-pump-r 0.8s ease-in-out 4; }
.mascot-walker.is-motion[data-act="dance"] .pp-leg-l { animation: mo-step 0.8s ease-in-out 4; }
.mascot-walker.is-motion[data-act="dance"] .pp-leg-r { animation: mo-step 0.8s ease-in-out -0.4s 4; }
.mascot-walker.is-motion[data-act="dance"] .pp-hat { animation: mo-hat-walk 0.4s ease-in-out 8; }

/* ---- Bored: humming, swaying, notes rising ---- */
.mascot-walker.is-motion[data-act="hum"] .pp-float { transform-origin: 250px 362px; animation: ma-sway 1.5s ease-in-out 2; }
.mascot-walker[data-act="hum"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="hum"] .m-mouth-o { opacity: 1; }
.mascot-walker.is-motion[data-act="hum"] .pp-note,
.mascot-walker.is-motion[data-act="dance"] .pp-note { animation: ma-note 1.5s ease-out infinite; }
.mascot-walker.is-motion .pp-note2 { animation-delay: -0.5s !important; }
.mascot-walker.is-motion .pp-note3 { animation-delay: -1s !important; }

/* ---- Bored: shading its eyes, looking left then right ---- */
.mascot-walker[data-act="lookout"] .m-brow-r { opacity: 0; }
.mascot-walker.is-motion[data-act="lookout"] .m-gaze { animation: ma-scan 3s ease-in-out; }
.mascot-walker.is-motion[data-act="lookout"] .pp-float { transform-origin: 250px 362px; animation: ma-scan-body 3s ease-in-out; }

/* ---- Bored: a sneeze that builds, snaps and knocks the hat up ---- */
.mascot-walker.is-motion[data-act="sneeze"] .pp-float { transform-origin: 250px 362px; animation: ma-sneeze 1.9s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="sneeze"] .pp-hat { animation: ma-hat-pop 1.9s ease-out; }
.mascot-walker.is-motion[data-act="sneeze"] .m-eyes { animation: ma-open-mid 1.9s step-end; }
.mascot-walker.is-motion[data-act="sneeze"] .pp-eyes-closed { animation: ma-shut-mid 1.9s step-end; }
.mascot-walker.is-motion[data-act="sneeze"] .m-mouth { animation: ma-hide-first 1.9s step-end; }
.mascot-walker.is-motion[data-act="sneeze"] .m-mouth-o { animation: ma-show-first 1.9s step-end; }
.mascot-walker.is-motion[data-act="sneeze"] .pp-spray { animation: ma-spray 1.9s ease-out; }

/* ---- Bored: flipping a bean (My Brews) or seed (WSMConnect) like a coin ---- */
.mascot-walker[data-act="coin"] .pp-snack-wrap { opacity: 1; }
.mascot-walker.is-motion[data-act="coin"] .pp-snack { animation: ma-coin 1.1s cubic-bezier(0.3, 0, 0.4, 1) 2; }
.mascot-walker.is-motion[data-act="coin"] .pp-arm-l { animation: ma-flick 1.1s ease-out 2; }
.mascot-walker.is-motion[data-act="coin"] .m-gaze { animation: ma-look-up 1.1s ease-in-out 2; }

/* ---- Bored (likelier at lunch): popping the bean in its mouth and chewing ---- */
.mascot-walker[data-act="nibble"] .pp-snack-wrap { opacity: 1; transform-origin: 106px 178px; }
.mascot-walker.is-motion[data-act="nibble"] .pp-snack-wrap { animation: ma-gulp 2.6s ease-in-out forwards; }
.mascot-walker.is-motion[data-act="nibble"] .pp-arm-l { animation: ma-flick 2.6s ease-out; }
.mascot-walker.is-motion[data-act="nibble"] .m-mouth { animation: ma-chew 2.6s step-end; }
.mascot-walker.is-motion[data-act="nibble"] .m-mouth-o { animation: ma-chew-o 2.6s step-end; }
.mascot-walker.is-motion[data-act="nibble"] .m-eyes { animation: ma-hide-late 2.6s step-end; }
.mascot-walker.is-motion[data-act="nibble"] .m-eyes-happy { animation: ma-show-late 2.6s step-end; }

/* ---- Bored (likelier in the morning): a sip of coffee, eyes closed, then "ahh" ---- */
.mascot-walker.is-motion[data-act="sip"] .pp-mug { animation: ma-sip 3.4s ease-in-out; }
.mascot-walker.is-motion[data-act="sip"] .m-eyes { animation: ma-open-mid 3.4s step-end; }
.mascot-walker.is-motion[data-act="sip"] .pp-eyes-closed { animation: ma-shut-mid 3.4s step-end; }
.mascot-walker.is-motion[data-act="sip"] .m-blush { animation: ma-show-late 3.4s step-end; }
.mascot-walker.is-motion[data-act="sip"] .pp-steam1,
.mascot-walker.is-motion[data-carry="mug"] .pp-steam1 { animation: ma-steam 1.6s ease-out infinite; }
.mascot-walker.is-motion[data-act="sip"] .pp-steam2,
.mascot-walker.is-motion[data-carry="mug"] .pp-steam2 { animation: ma-steam 1.6s ease-out -0.8s infinite; }

/* ---- Tapped while sipping: it spills ---- */
.mascot-walker.is-motion[data-act="spill"] .pp-mug { animation: ma-spill 1.3s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="spill"] .pp-splash { animation: ma-splash 1.3s ease-out; }
.mascot-walker.is-motion[data-act="spill"] .pp-float,
.mascot-walker.is-motion[data-act="slam"] .pp-float,
.mascot-walker.is-motion[data-act="pop"] .pp-float { transform-origin: 250px 362px; animation: ma-jolt 0.9s cubic-bezier(0.3, 0, 0.3, 1); }

/* ---- Bored (likelier in the evening): reading, a page turns, then a peek over the top ---- */
.mascot-walker[data-act="read"] .m-gaze,
.mascot-walker[data-carry="book"] .m-gaze { transform: translate(0, 4px) !important; }
.mascot-walker.is-motion[data-act="read"] .m-gaze { animation: ma-read-gaze 4.4s ease-in-out; }
.mascot-walker.is-motion[data-act="read"] .pp-book { animation: ma-peek 4.4s ease-in-out; }
.mascot-walker.is-motion[data-act="read"] .pp-page { animation: ma-page 4.4s ease-in-out forwards; }

/* ---- Tapped while reading: it snaps the book shut ---- */
.mascot-walker[data-act="slam"] .pp-book { scale: 0.32 1; }
.mascot-walker[data-act="slam"] .pp-book-open { scale: 0.1 1; }
.mascot-walker.is-motion[data-act="slam"] .pp-book { scale: 1; animation: ma-shut-book 1.1s ease-out; }
.mascot-walker.is-motion[data-act="slam"] .pp-book-open { scale: 1; animation: ma-shut 1.1s ease-out; }

/* ---- Bored: scrolling its phone (held up, turned upright), or a selfie with a flash ---- */
.mascot-walker.is-motion[data-act="phone"] .pp-arm-r,
.mascot-walker.is-motion[data-carry="phone"] .pp-arm-r { animation: none; rotate: -38deg; }
.mascot-walker[data-act="phone"] .pp-phone,
.mascot-walker[data-carry="phone"] .pp-phone { rotate: 38deg; }
.mascot-walker[data-act="phone"] .m-gaze,
.mascot-walker[data-carry="phone"] .m-gaze { transform: translate(5px, -3px) !important; }
.mascot-walker.is-motion[data-act="phone"] .pp-phone-feed,
.mascot-walker.is-motion[data-carry="phone"] .pp-phone-feed { animation: ma-scroll 1.7s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="selfie"] .pp-arm-r { animation: none; rotate: -80deg; }
.mascot-walker[data-act="selfie"] .pp-phone { rotate: 80deg; }
.mascot-walker[data-act="selfie"] .m-gaze { transform: translate(4px, -4px) !important; }
.mascot-walker.is-motion[data-act="selfie"] .pp-float { transform-origin: 250px 362px; animation: ma-pose 2.4s ease-in-out; }
.mascot-walker.is-motion[data-act="selfie"] .pp-phone-flash { animation: ma-flash 2.4s ease-out; }

/* ---- Bored: folding a paper plane and throwing it away ---- */
.mascot-walker.is-motion[data-act="plane"] .pp-arm-l { animation: ma-throw 2.8s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="plane"] .pp-plane { animation: ma-fly 2.8s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
.mascot-walker.is-motion[data-act="plane"] .m-gaze { animation: ma-watch-plane 2.8s ease-in-out; }

/* ---- Bored: a yo-yo, down and up ---- */
.mascot-walker[data-act="yoyo"] .m-gaze { transform: translate(-4px, 3px) !important; }
.mascot-walker.is-motion[data-act="yoyo"] .pp-arm-l { animation: ma-yo-arm 1.06s ease-in-out 3; }
.mascot-walker.is-motion[data-act="yoyo"] .pp-yoyo-string { animation: ma-yo-string 1.06s ease-in-out 3; }
.mascot-walker.is-motion[data-act="yoyo"] .pp-yoyo-disc { animation: ma-yo-disc 1.06s ease-in-out 3; }

/* ---- Bored: a balloon lifts it a little; tapped, it pops ---- */
.mascot-walker.is-motion[data-act="balloon"] .pp-arm-l,
.mascot-walker.is-motion[data-act="pop"] .pp-arm-l,
.mascot-walker.is-motion[data-carry="balloon"] .pp-arm-l { animation: none; rotate: 18deg; }
.mascot-walker[data-act="balloon"] .m-gaze { transform: translate(-4px, -4px) !important; }
.mascot-walker.is-motion[data-act="balloon"] .pp-balloon,
.mascot-walker.is-motion[data-carry="balloon"] .pp-balloon { animation: ma-bob-balloon 2.2s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="balloon"] .pp-float { transform-origin: 250px 362px; animation: ma-float-up 3.8s ease-in-out; }
.mascot-walker.is-motion[data-act="balloon"] .pp-shadow { transform-box: fill-box; transform-origin: center; animation: ma-shadow-small 3.8s ease-in-out; }
.mascot-walker.is-motion[data-act="pop"] .pp-balloon-body { animation: ma-burst 1.1s ease-out forwards; }
.mascot-walker.is-motion[data-act="pop"] .pp-balloon-pop { animation: ma-pop-burst 1.1s ease-out; }
.mascot-walker.is-motion[data-act="pop"] .pp-balloon > path { animation: ma-fade-late 1.1s ease-out forwards; }
.mascot-walker[data-act="pop"] .pp-balloon-body { opacity: 0; }

/* ---- Bored (likelier at night): under an umbrella in the rain ---- */
.mascot-walker.is-motion[data-act="umbrella"] .pp-umbrella { animation: ma-twirl-umb 1.8s ease-in-out 2; }
.mascot-walker.is-motion[data-act="umbrella"] .pp-float { transform-origin: 250px 362px; animation: ma-sway 1.8s ease-in-out 2; }
.mascot-walker.is-motion[data-act="umbrella"] .pp-drop { animation: ma-rain 0.9s linear infinite; }
.mascot-walker.is-motion .pp-drop2 { animation-delay: -0.3s !important; }
.mascot-walker.is-motion .pp-drop3 { animation-delay: -0.6s !important; }
.mascot-walker.is-motion .pp-drop4 { animation-delay: -0.15s !important; }
.mascot-walker.is-motion .pp-drop5 { animation-delay: -0.45s !important; }

/* ---- Tricks (lively only): a backflip, a twirl ---- */
.mascot-walker.is-motion[data-act="backflip"] .pp-float { transform-origin: var(--pp-core, 250px 270px); animation: ma-backflip 1.4s cubic-bezier(0.4, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="backflip"] .pp-leg-l { animation: ma-tuck-l 1.4s ease-in-out; }
.mascot-walker.is-motion[data-act="backflip"] .pp-leg-r { animation: ma-tuck-r 1.4s ease-in-out; }
.mascot-walker.is-motion[data-act="backflip"] .pp-arm-l { animation: ma-reach-l 1.4s ease-in-out; }
.mascot-walker.is-motion[data-act="backflip"] .pp-arm-r { animation: ma-reach-r 1.4s ease-in-out; }
.mascot-walker.is-motion[data-act="backflip"] .pp-shadow { transform-box: fill-box; transform-origin: center; animation: ma-shadow-flip 1.4s ease-in-out; }
.mascot-walker.is-motion[data-act="twirl"] .pp-float { transform-origin: 250px 362px; animation: ma-twirl 1.2s ease-in-out; }
.mascot-walker.is-motion[data-act="twirl"] .pp-arm-l { animation: none; rotate: -16deg; }
.mascot-walker.is-motion[data-act="twirl"] .pp-arm-r { animation: none; rotate: 18deg; }

/* ---- Quiet for a while: it knocks on the glass ---- */
.mascot-walker[data-act="knock"] .m-gaze { transform: translate(0, 0) !important; }
.mascot-walker.is-motion[data-act="knock"] .pp-arm-l { animation: ma-knock 0.8s ease-in-out 3; }
.mascot-walker.is-motion[data-act="knock"] .pp-float { transform-origin: 250px 362px; animation: ma-close 2.4s ease-in-out; }
.mascot-walker.is-motion[data-act="knock"] .pp-ripple1,
.mascot-walker.is-motion[data-act="knock"] .pp-ripple2 { animation: ma-ripple 0.8s ease-out 3; }
.mascot-walker.is-motion[data-act="knock"] .pp-ripple2 { animation-delay: 0.1s; }
.mascot-walker.is-motion[data-act="knock"] .pp-ask { animation: ma-bang 1.2s ease-in-out 2; }

/* ---- A fast mouse right past it: it ducks, arms over its head ---- */
.mascot-walker.is-motion[data-act="duck"] .pp-float { transform-origin: 250px 362px; animation: ma-duck 0.9s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="duck"] .pp-arm-l { animation: none; rotate: 70deg; transition-duration: 0.15s; }
.mascot-walker.is-motion[data-act="duck"] .pp-arm-r { animation: none; rotate: -90deg; transition-duration: 0.15s; }
.mascot-walker[data-act="duck"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="duck"] .pp-eyes-closed { opacity: 1; }

/* ---- With the sign-in: arms up when you sign in (mood happy), a slump when it fails (mood oops) ---- */
.mascot-walker.is-motion[data-act="cheer"] .pp-arm-l { rotate: 60deg; animation: ma-cheer-l 0.45s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="cheer"] .pp-arm-r { rotate: -80deg; animation: ma-cheer-r 0.45s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="slump"] .pp-float { translate: 0 7px; }
.mascot-walker.is-motion[data-act="slump"] .pp-arm-l { animation: none; rotate: -28deg; }
.mascot-walker.is-motion[data-act="slump"] .pp-arm-r { animation: none; rotate: 30deg; }
.mascot-walker.is-motion[data-act="slump"] .pp-hat { animation: none; translate: 0 3px; rotate: -6deg; }
.mascot-walker[data-act="slump"] .m-gaze { transform: translate(0, 3px) !important; }

/* ---- Phone shaken: rattled (dizzy eyes, flailing); tilted too far: it stumbles that way ---- */
.mascot-walker.is-motion[data-act="shaken"] .pp-float { transform-origin: 250px 362px; animation: ma-rattle 0.14s linear 7; }
.mascot-walker.is-motion[data-act="shaken"] .pp-hat { animation: mo-hat-lag 0.5s ease-out 2; }
.mascot-walker[data-act="shaken"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="shaken"] .pp-eyes-dizzy { opacity: 1; }
.mascot-walker.is-motion[data-act="shaken"] .pp-spin { animation: ml-spin 0.6s linear infinite; }
.mascot-walker.is-motion[data-act="shaken"] .pp-arm-l,
.mascot-walker.is-motion[data-act="stumble"] .pp-arm-l { animation: ma-flail-l 0.22s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="shaken"] .pp-arm-r,
.mascot-walker.is-motion[data-act="stumble"] .pp-arm-r { animation: ma-flail-r 0.22s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="stumble"] .pp-float { transform-origin: 250px 362px; animation: ma-stumble 1.3s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="stumble"] .pp-hat { animation: mo-hat-lag 0.8s ease-out; }

/* ---- Caps Lock on in the password field: the "!" bobs ---- */
.mascot-host[data-caps] .mascot-walker.is-motion .pp-bang,
.mascot-walker.is-motion[data-act="shaken"] .pp-bang,
.mascot-walker.is-motion[data-act="stumble"] .pp-bang { animation: ma-bang 1.2s ease-in-out infinite; }

/* ---- Faces on their own clock: a raised brow, a squint, a wink ---- */
.mascot-walker[data-face="raise"] .m-brow-l { transform: translateY(-6px) rotate(-8deg); }
.mascot-walker[data-face="squint"] .m-eyes { transform: scaleY(0.55); }
.mascot-walker[data-face="squint"] .m-brow-l,
.mascot-walker[data-face="squint"] .m-brow-r { transform: translateY(3px); }
.mascot-walker[data-face="wink"] .m-eyes { clip-path: inset(0 50% 0 0); }
.mascot-walker[data-face="wink"] .pp-eyes-closed { opacity: 1; clip-path: inset(0 0 0 50%); }
.mascot-walker[data-face="wink"] .m-blush { opacity: 1 !important; }

/* ---- The speech bubble ("Hi!", "Caps Lock is on", "Still there?"), and its line for screen readers ---- */
.mascot-say {
    position: absolute;
    left: 50%;
    top: 8%;
    z-index: 4;
    padding: 0.3rem 0.7rem;
    border-radius: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    color: #1a1a1a;
    background: #ffffff;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.7);
    transform-origin: 50% 100%;
    transition: opacity 0.18s ease, transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.mascot-say::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
.mascot-say.is-on { opacity: 1; transform: translate(-50%, -100%) scale(1); }
/* While it speaks it comes in front of the orbit's chips and their feed moments (gsap-auth.css, z-index 5) */
.mascot-walker.is-saying { z-index: 6; }
.mascot-say:empty { display: none; }
.mascot-say-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- iPhone: the button that asks to read tilt and shake ---- */
.mascot-tilt {
    position: absolute;
    left: 50%;
    bottom: -0.35rem;
    z-index: 4;
    gap: 0.35rem;
    transform: translateX(-50%);
    white-space: nowrap;
}
.mascot-tilt[hidden] { display: none !important; }

@keyframes ma-dance {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-7px, -8px) rotate(-6deg); }
    50% { transform: translate(0, 2px) rotate(0deg); }
    75% { transform: translate(7px, -8px) rotate(6deg); }
}
@keyframes ma-pump-l { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(48deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-20deg); } }
@keyframes ma-pump-r { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(20deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(-60deg); } }
@keyframes ma-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes ma-note { 0% { transform: translate(-4px, 12px) scale(0.6) rotate(-10deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(10px, -34px) scale(1) rotate(8deg); opacity: 0; } }
@keyframes ma-scan { 0%, 100% { transform: translate(0, -1px); } 20%, 40% { transform: translate(-5px, -2px); } 60%, 80% { transform: translate(5px, -2px); } }
@keyframes ma-scan-body { 0%, 100% { transform: rotate(0deg); } 20%, 40% { transform: rotate(-3deg); } 60%, 80% { transform: rotate(3deg); } }
@keyframes ma-sneeze {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    15% { transform: translateY(-1px) rotate(-2deg) scale(0.99, 1.02); }
    30% { transform: translateY(-3px) rotate(-4deg) scale(0.97, 1.05); }
    44% { transform: translateY(-5px) rotate(-6deg) scale(0.96, 1.07); }
    52% { transform: translateY(4px) rotate(6deg) scale(1.09, 0.9); }
    62% { transform: translateY(1px) rotate(2deg) scale(1.02, 0.98); }
    78% { transform: translateY(0) rotate(-1deg) scale(1, 1); }
}
@keyframes ma-hat-pop { 0%, 48%, 100% { transform: none; } 54% { transform: translateY(-14px) rotate(-6deg); } 66% { transform: translateY(2px) rotate(2deg); } 80% { transform: translateY(-2px); } }
@keyframes ma-spray { 0%, 50% { opacity: 0; transform: scale(0.4); } 56% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1.25) translateY(6px); } 100% { opacity: 0; transform: scale(1.4) translateY(10px); } }
@keyframes ma-open-mid { 0% { opacity: 1; } 23% { opacity: 0; } 71%, 100% { opacity: 1; } }
@keyframes ma-shut-mid { 0% { opacity: 0; } 23% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes ma-hide-first { 0% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes ma-show-first { 0% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes ma-hide-late { 0% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes ma-show-late { 0% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes ma-coin {
    0%, 100% { transform: translateY(0) scaleX(1); }
    12% { transform: translateY(-20px) scaleX(-1); }
    25% { transform: translateY(-62px) scaleX(1); }
    38% { transform: translateY(-92px) scaleX(-1); }
    50% { transform: translateY(-100px) scaleX(1); }
    62% { transform: translateY(-88px) scaleX(-1); }
    75% { transform: translateY(-56px) scaleX(1); }
    88% { transform: translateY(-16px) scaleX(-1); }
}
@keyframes ma-flick { 0%, 100% { transform: rotate(0deg); } 8% { transform: rotate(-10deg); } 16% { transform: rotate(14deg); } 34% { transform: rotate(0deg); } 90% { transform: rotate(-6deg); } }
@keyframes ma-look-up { 0%, 100% { transform: translate(-3px, -2px); } 50% { transform: translate(-4px, -5px); } }
@keyframes ma-gulp {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    14% { transform: translate(0, -8px) scale(1); }
    40% { transform: translate(72px, -62px) scale(0.9); }
    58% { transform: translate(144px, 96px) scale(0.6); opacity: 1; }
    60%, 100% { transform: translate(144px, 96px) scale(0.4); opacity: 0; }
}
@keyframes ma-chew { 0% { opacity: 0; } 60% { opacity: 1; } 68% { opacity: 0; } 76% { opacity: 1; } 84% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes ma-chew-o { 0% { opacity: 1; } 60% { opacity: 0; } 68% { opacity: 1; } 76% { opacity: 0; } 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes ma-sip { 0%, 12%, 100% { transform: translate(0, 0) rotate(0deg); } 30%, 62% { transform: translate(6px, -8px) rotate(-22deg); } 74% { transform: translate(2px, -2px) rotate(-4deg); } }
@keyframes ma-steam { 0% { transform: translateY(6px) scaleY(0.6); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-10px) scaleY(1.1); opacity: 0; } }
@keyframes ma-spill { 0% { transform: translate(0, 0) rotate(-10deg); } 25% { transform: translate(-4px, 4px) rotate(48deg); } 60% { transform: translate(-2px, 2px) rotate(40deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes ma-splash { 0%, 20% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-26px, 30px); } }
@keyframes ma-jolt { 0%, 100% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(-14px) scale(0.96, 1.05); } 40% { transform: translateY(0) scale(1.05, 0.95); } 60% { transform: translateY(0) scale(1, 1); } }
@keyframes ma-read-gaze { 0%, 100% { transform: translate(0, 4px); } 20% { transform: translate(-3px, 4px); } 40% { transform: translate(3px, 4px); } 64% { transform: translate(0, 4px); } 72%, 92% { transform: translate(0, -1px); } }
@keyframes ma-peek { 0%, 62%, 100% { transform: translateY(0); } 72%, 90% { transform: translateY(-24px); } }
@keyframes ma-page { 0%, 34% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes ma-shut-book { 0% { transform: translateY(0) scaleX(1); } 18%, 80% { transform: translateY(-6px) scaleX(0.32); } 100% { transform: translateY(0) scaleX(1); } }
@keyframes ma-shut { 0% { transform: scaleX(1); } 18%, 80% { transform: scaleX(0.1); } 100% { transform: scaleX(1); } }
@keyframes ma-scroll { 0%, 20% { transform: translateY(0); } 45%, 60% { transform: translateY(-17px); } 85%, 100% { transform: translateY(-34px); } }
@keyframes ma-pose { 0%, 100% { transform: rotate(0deg) translateY(0); } 20%, 85% { transform: rotate(4deg) translateY(-2px); } }
@keyframes ma-flash { 0%, 52% { opacity: 0; transform: scale(0.5); } 56% { opacity: 1; transform: scale(1.1); } 75%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes ma-throw { 0%, 100% { transform: rotate(0deg); } 18%, 30% { transform: rotate(32deg); } 38% { transform: rotate(-30deg); } 55% { transform: rotate(-12deg); } }
@keyframes ma-fly {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
    18%, 30% { transform: translate(25px, -33px) rotate(20deg) scale(1); }
    38% { transform: translate(-10px, -30px) rotate(-6deg) scale(1); opacity: 1; }
    70% { transform: translate(-80px, -110px) rotate(-18deg) scale(0.8); opacity: 1; }
    85%, 100% { transform: translate(-100px, -150px) rotate(-24deg) scale(0.6); opacity: 0; }
}
@keyframes ma-watch-plane { 0%, 30% { transform: translate(-3px, -3px); } 45%, 100% { transform: translate(-5px, -5px); } }
@keyframes ma-yo-arm { 0%, 100% { transform: rotate(4deg); } 40% { transform: rotate(-6deg); } }
@keyframes ma-yo-string { 0%, 100% { transform: scaleY(0.12); } 45%, 55% { transform: scaleY(1); } }
@keyframes ma-yo-disc { 0%, 100% { transform: translateY(-66px) rotate(0deg); } 45%, 55% { transform: translateY(0) rotate(540deg); } }
@keyframes ma-bob-balloon { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-3px); } }
@keyframes ma-float-up { 0%, 100% { transform: translateY(0); } 30%, 70% { transform: translateY(-10px); } }
@keyframes ma-shadow-small { 0%, 100% { transform: scale(1); opacity: 1; } 30%, 70% { transform: scale(0.8); opacity: 0.7; } }
@keyframes ma-burst { 0% { transform: scale(1); opacity: 1; } 12% { transform: scale(1.25); opacity: 1; } 16%, 100% { transform: scale(1.4); opacity: 0; } }
@keyframes ma-pop-burst { 0%, 12% { opacity: 0; transform: scale(0.6); } 16% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes ma-fade-late { 0%, 16% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ma-twirl-umb { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes ma-rain { 0% { transform: translate(0, -14px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-6px, 44px); opacity: 0; } }
@keyframes ma-backflip {
    0% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    14% { transform: translateY(6px) rotate(0deg) scale(1.08, 0.9); }
    30% { transform: translateY(-60px) rotate(-120deg) scale(0.97, 1.03); }
    45% { transform: translateY(-84px) rotate(-220deg) scale(1, 1); }
    62% { transform: translateY(-30px) rotate(-340deg) scale(1, 1); }
    72% { transform: translateY(4px) rotate(-360deg) scale(1.1, 0.88); }
    86%, 100% { transform: translateY(0) rotate(-360deg) scale(1, 1); }
}
@keyframes ma-tuck-l { 0%, 20%, 70%, 100% { transform: rotate(0deg); } 32%, 58% { transform: rotate(-35deg); } }
@keyframes ma-tuck-r { 0%, 20%, 70%, 100% { transform: rotate(0deg); } 32%, 58% { transform: rotate(35deg); } }
@keyframes ma-reach-l { 0%, 14%, 100% { transform: rotate(0deg); } 24%, 62% { transform: rotate(60deg); } }
@keyframes ma-reach-r { 0%, 14%, 100% { transform: rotate(0deg); } 24%, 62% { transform: rotate(-80deg); } }
@keyframes ma-shadow-flip { 0%, 14%, 72%, 100% { transform: scale(1); opacity: 1; } 30%, 62% { transform: scale(0.6); opacity: 0.4; } 45% { transform: scale(0.5); opacity: 0.3; } }
@keyframes ma-twirl {
    0% { transform: translateY(0) scale(1, 1); }
    20% { transform: translateY(-8px) scale(-0.1, 1.02); }
    40% { transform: translateY(-12px) scale(-1, 1.04); }
    60% { transform: translateY(-8px) scale(0.1, 1.02); }
    78% { transform: translateY(0) scale(1.06, 0.94); }
    90% { transform: translateY(0) scale(0.98, 1.02); }
    100% { transform: translateY(0) scale(1, 1); }
}
@keyframes ma-knock { 0%, 30%, 60%, 100% { transform: rotate(-6deg); } 15%, 45% { transform: rotate(10deg); } }
@keyframes ma-close { 0%, 100% { transform: scale(1); } 15%, 85% { transform: scale(1.04); } }
@keyframes ma-ripple { 0% { transform: scale(0.4); opacity: 0; } 20% { opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes ma-duck { 0%, 100% { transform: translateY(0) scale(1, 1); } 20%, 60% { transform: translateY(20px) scale(1.1, 0.86); } }
@keyframes ma-cheer-l { from { transform: rotate(-8deg); } to { transform: rotate(12deg); } }
@keyframes ma-cheer-r { from { transform: rotate(8deg); } to { transform: rotate(-12deg); } }
@keyframes ma-rattle { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-6px) rotate(-5deg); } 75% { transform: translateX(6px) rotate(5deg); } }
@keyframes ma-flail-l { from { transform: rotate(-12deg); } to { transform: rotate(30deg); } }
@keyframes ma-flail-r { from { transform: rotate(12deg); } to { transform: rotate(-30deg); } }
@keyframes ma-stumble {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(calc(14px * var(--ml-fall, 1))) rotate(calc(16deg * var(--ml-fall, 1))); }
    45% { transform: translateX(calc(8px * var(--ml-fall, 1))) rotate(calc(9deg * var(--ml-fall, 1))); }
    65% { transform: translateX(calc(-3px * var(--ml-fall, 1))) rotate(calc(-4deg * var(--ml-fall, 1))); }
    82% { transform: translateX(0) rotate(calc(1deg * var(--ml-fall, 1))); }
}
@keyframes ma-bang { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.12) rotate(6deg); } }

/* ---- CrossLobby's Pixel: gamer acts with its own props (only Pixel draws them, so only Pixel plays them) ----
   play: mashes a gamepad held out in both its own arms; chug: an energy drink in the resting hand;
   slice: a slice of pizza; blow: blows the dust out of a game cartridge in the waving hand */
.mascot-walker .pp-prop-gamepad { transform-origin: 250px 312px; }
.mascot-walker .pp-prop-energy,
.mascot-walker .pp-prop-pizza { transform-origin: 395px 258px; }
.mascot-walker .pp-prop-cartridge { transform-origin: 106px 212px; }
.mascot-walker[data-act="play"] .m-arms,
.mascot-walker[data-carry="gamepad"] .m-arms { opacity: 0; }
.mascot-walker[data-act="play"] .m-gaze { transform: translate(0, 4px) !important; }
.mascot-walker.is-motion[data-act="play"] .pp-gamepad { transform-box: view-box; transform-origin: 250px 310px; animation: ma-mash 0.22s steps(2) 14; }
.mascot-walker.is-motion[data-act="play"] .pp-float { transform-origin: 250px 362px; animation: ma-lean-in 3.6s ease-in-out; }
.mascot-walker[data-act="chug"] .m-mouth,
.mascot-walker[data-act="slice"] .m-mouth,
.mascot-walker[data-act="blow"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="chug"] .m-mouth-o,
.mascot-walker[data-act="slice"] .m-mouth-o,
.mascot-walker[data-act="blow"] .m-mouth-o { opacity: 1; }
.mascot-walker.is-motion[data-act="chug"] .pp-arm-r { animation: ma-chug 3s ease-in-out; }
.mascot-walker.is-motion[data-act="slice"] .pp-arm-r { animation: ma-chug 2.8s ease-in-out; }
.mascot-walker.is-motion[data-act="blow"] .pp-cartridge { transform-box: view-box; transform-origin: 106px 212px; animation: ma-blow 0.65s ease-in-out 4; }
@keyframes ma-mash { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(1.5px, 1px) rotate(1.2deg); } }
@keyframes ma-lean-in { 0%, 100% { transform: rotate(0deg); } 20%, 80% { transform: rotate(3deg) translateY(2px); } 50% { transform: rotate(-2deg) translateY(2px); } }
@keyframes ma-chug { 0%, 100% { transform: rotate(0deg); } 25%, 70% { transform: rotate(-58deg); } 45% { transform: rotate(-64deg); } }
@keyframes ma-blow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px) rotate(-6deg); } }

/* Reduced motion (mascot-life.css drops every animation): props show at once, the poses still change */
@media (prefers-reduced-motion: reduce) {
    .mascot-walker .pp-prop { scale: 1; }
    .mascot-walker[data-act="sneeze"] .pp-spray { opacity: 1; }
}