/* =====================================================================
   The mascot's pet (Premium Mascot Plan phase E, switch Mascot:Pet):
   AvatarRenderer.RenderPet draws Bean or Sprout from the brand's
   pet/pet file; wwwroot/js/mascot-pet.js moves .mascot-pet along the
   mascot's floor and sets its classes (is-walking, is-running, is-left,
   is-held, is-hiding, is-paused) and its pose in data-act. The tail and
   head pivots come from the rig (--pt-tail, --pt-head). The mascot's
   side of each duet (feed, pat) is at the end.
   ===================================================================== */

.mascot-pet {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    outline: none;
    cursor: pointer;
    opacity: 0;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
.mascot-pet.is-ready { opacity: 1; transition: opacity 0.4s ease; }
@media (max-width: 640px) { .mascot-pet { width: 52px; height: 52px; } }
.mascot-pet:focus-visible { box-shadow: 0 0 0 3px oklch(var(--a) / 0.85); }
.mascot-pet.is-held { cursor: grabbing; }
/* Hiding during sign-in: behind the mascot */
.mascot-pet.is-hiding { z-index: 1; }

.pt-flip { width: 100%; height: 100%; transform-origin: 50% 90%; transition: transform 0.26s cubic-bezier(0.6, 0, 0.25, 1); }
.mascot-pet.is-left .pt-flip { transform: scaleX(-1); }
.pt-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Idle: breathing, a lazy tail, blinks on an odd period */
.mascot-pet .pt-body { transform-origin: 58px 106px; animation: pt-breathe 2.7s ease-in-out infinite; transition: translate 0.35s cubic-bezier(0.3, 1.3, 0.5, 1), rotate 0.35s ease; }
.mascot-pet .pt-shadow { transform-origin: 58px 108px; transition: transform 0.2s ease; }
.mascot-pet .pt-tail { transform-origin: var(--pt-tail); animation: pt-wag 1.7s ease-in-out infinite; }
.mascot-pet .pt-head { transform-origin: var(--pt-head); transition: rotate 0.3s ease, translate 0.3s ease; }
.mascot-pet .pt-ear { transform-box: fill-box; transform-origin: 70% 10%; }
.mascot-pet .pt-eyes { transform-box: fill-box; transform-origin: center; animation: pt-blink 3.9s infinite; }
.mascot-pet .pt-eyes-happy,
.mascot-pet .pt-eyes-closed,
.mascot-pet .pt-tongue,
.mascot-pet .pt-hearts,
.mascot-pet .pt-zzz,
.mascot-pet .pt-bang,
.mascot-pet .pt-spiral { transition: opacity 0.15s ease; }
.mascot-pet .pt-heart,
.mascot-pet .pt-z,
.mascot-pet .pt-spiral { transform-box: fill-box; transform-origin: center; }

/* ---- Trotting and running: legs in pairs, a bounce, the ears and tail flying ---- */
.mascot-pet.is-walking .pt-body { animation: pt-trot 0.3s ease-in-out infinite; }
.mascot-pet.is-walking .pt-legs-a { animation: pt-step 0.3s ease-in-out infinite; }
.mascot-pet.is-walking .pt-legs-b { animation: pt-step 0.3s ease-in-out -0.15s infinite; }
.mascot-pet.is-walking .pt-tail { animation: pt-wag 0.3s ease-in-out infinite; }
.mascot-pet.is-walking .pt-ear { animation: pt-ear 0.3s ease-in-out infinite; }
.mascot-pet.is-running .pt-body { animation: pt-gallop 0.22s ease-in-out infinite; rotate: 4deg; }
.mascot-pet.is-running .pt-legs-a { animation: pt-step 0.22s ease-in-out infinite; }
.mascot-pet.is-running .pt-legs-b { animation: pt-step 0.22s ease-in-out -0.11s infinite; }

/* ---- Poses ---- */
.mascot-pet[data-act="sit"] .pt-body { translate: 0 3px; }
.mascot-pet[data-act="sit"] .pt-head { rotate: -4deg; }
.mascot-pet[data-act="sit"] .pt-legs-b { translate: -3px -3px; }

.mascot-pet[data-act="happy"] .pt-body,
.mascot-pet[data-act="catch"] .pt-body { animation: pt-hop 0.7s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-pet[data-act="catch"] .pt-body { animation-duration: 0.45s; }
.mascot-pet[data-act="happy"] .pt-tail,
.mascot-pet[data-act="petted"] .pt-tail,
.mascot-pet[data-act="chew"] .pt-tail { animation: pt-wag 0.22s ease-in-out infinite; }
.mascot-pet[data-act="happy"] .pt-eyes,
.mascot-pet[data-act="petted"] .pt-eyes,
.mascot-pet[data-act="chew"] .pt-eyes,
.mascot-pet[data-act="catch"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="happy"] .pt-eyes-happy,
.mascot-pet[data-act="petted"] .pt-eyes-happy,
.mascot-pet[data-act="chew"] .pt-eyes-happy,
.mascot-pet[data-act="catch"] .pt-eyes-happy { opacity: 1; }
.mascot-pet[data-act="happy"] .pt-tongue,
.mascot-pet[data-act="catch"] .pt-tongue,
.mascot-pet[data-act="beg"] .pt-tongue,
.mascot-pet[data-act="bark"] .pt-tongue { opacity: 1; }

.mascot-pet[data-act="petted"] .pt-body { animation: pt-wiggle 0.9s ease-in-out infinite; }
.mascot-pet[data-act="petted"] .pt-head { rotate: 8deg; }
.mascot-pet[data-act="petted"] .pt-hearts,
.mascot-pet[data-act="chew"] .pt-hearts { opacity: 1; }
.mascot-pet[data-act="petted"] .pt-heart,
.mascot-pet[data-act="chew"] .pt-heart { animation: pt-heart 1.3s ease-out infinite; }
.mascot-pet[data-act="petted"] .pt-heart2,
.mascot-pet[data-act="chew"] .pt-heart2 { animation-delay: -0.6s; }

.mascot-pet[data-act="chew"] .pt-head { animation: pt-chew 0.26s ease-in-out infinite; }

.mascot-pet[data-act="beg"] .pt-body { rotate: -16deg; translate: -2px 0; }
.mascot-pet[data-act="beg"] .pt-legs-a { translate: 6px -10px; }
.mascot-pet[data-act="beg"] .pt-tail { animation: pt-wag 0.25s ease-in-out infinite; }

.mascot-pet[data-act="bark"] .pt-bang { opacity: 1; }
.mascot-pet[data-act="bark"] .pt-head { animation: pt-bark 0.3s ease-out 2; }

.mascot-pet[data-act="sniff"] .pt-head { animation: pt-sniff 0.42s ease-in-out infinite; rotate: 16deg; translate: 2px 5px; }
.mascot-pet[data-act="sniff"] .pt-tail { animation: pt-wag 0.5s ease-in-out infinite; }

.mascot-pet[data-act="scratch"] .pt-legs-b { animation: pt-scratch 0.12s linear infinite; }
.mascot-pet[data-act="scratch"] .pt-head { rotate: -12deg; }
.mascot-pet[data-act="scratch"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="scratch"] .pt-eyes-happy { opacity: 1; }

.mascot-pet[data-act="sleep"] .pt-body { translate: 0 9px; animation: pt-snore 3.2s ease-in-out infinite; }
.mascot-pet[data-act="sleep"] .pt-legs-a,
.mascot-pet[data-act="sleep"] .pt-legs-b { opacity: 0; }
.mascot-pet[data-act="sleep"] .pt-tail { animation: none; rotate: 30deg; }
.mascot-pet[data-act="sleep"] .pt-head { rotate: 10deg; translate: -2px 4px; }
.mascot-pet[data-act="sleep"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="sleep"] .pt-eyes-closed,
.mascot-pet[data-act="sleep"] .pt-zzz { opacity: 1; }
.mascot-pet[data-act="sleep"] .pt-z { animation: pt-z 2.6s ease-out infinite; }

.mascot-pet[data-act="dizzy"] .pt-body { animation: pt-dizzy 0.8s ease-in-out 2; }
.mascot-pet[data-act="dizzy"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="dizzy"] .pt-eyes-closed,
.mascot-pet[data-act="dizzy"] .pt-spiral { opacity: 1; }
.mascot-pet[data-act="dizzy"] .pt-spiral { animation: pt-spin 0.6s linear infinite; }

.mascot-pet[data-act="trip"] .pt-body { animation: pt-tumble 0.9s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-pet[data-act="trip"] .pt-eyes,
.mascot-pet[data-act="shake"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="trip"] .pt-eyes-closed,
.mascot-pet[data-act="shake"] .pt-eyes-closed { opacity: 1; }
.mascot-pet[data-act="shake"] .pt-body { animation: pt-shake 0.6s ease-in-out; }

.mascot-pet[data-act="held"] .pt-legs-a { animation: pt-paddle 0.24s ease-in-out infinite alternate; }
.mascot-pet[data-act="held"] .pt-legs-b { animation: pt-paddle 0.24s ease-in-out -0.12s infinite alternate; }
.mascot-pet[data-act="held"] .pt-bang { opacity: 1; }
.mascot-pet[data-act="held"] .pt-shadow { opacity: 0; }
.mascot-pet[data-act="land"] .pt-body { animation: pt-land 0.3s ease-out; }

.mascot-pet[data-act="hide"] .pt-body { translate: 0 4px; }
.mascot-pet[data-act="hide"] .pt-head { rotate: -10deg; }
.mascot-pet[data-act="hide"] .pt-tail { animation: none; }

.mascot-pet.is-paused * { animation-play-state: paused !important; }

/* The snack in the feeding duet */
.pt-snack { position: absolute; left: 0; top: 0; z-index: 4; width: 14px; height: 14px; pointer-events: none; }
.pt-snack svg { display: block; width: 100%; height: 100%; }

/* ---- The mascot's side of the duets ---- */
.mascot-walker.is-motion[data-act="feed"] .pp-arm-r { animation: pt-mascot-toss 1.3s ease-in-out; rotate: 38deg; }
.mascot-walker.is-motion[data-act="feed"] .pp-float { transform-origin: 250px 362px; rotate: 5deg; }
.mascot-walker.is-motion[data-act="feed"] .m-gaze { transform: translate(3px, 4px) !important; }
.mascot-walker.is-motion[data-act="pat"] .pp-arm-r { animation: pt-mascot-pat 0.42s ease-in-out infinite; rotate: 42deg; }
.mascot-walker.is-motion[data-act="pat"] .pp-float { transform-origin: 250px 362px; rotate: 7deg; }
.mascot-walker.is-motion[data-act="pat"] .m-gaze { transform: translate(3px, 4px) !important; }
.mascot-walker.is-motion[data-act="pat"] .m-eyes { opacity: 0; }
.mascot-walker.is-motion[data-act="pat"] .m-eyes-happy { opacity: 1; }
/* High five (the mitten up), tug-of-war (leaning back, arm out to the towel), a frisbee throw */
.mascot-walker.is-motion[data-act="highfive"] .pp-arm-r { animation: none; rotate: -82deg; transition-duration: 0.2s; }
.mascot-walker.is-motion[data-act="highfive"] .m-eyes { opacity: 0; }
.mascot-walker.is-motion[data-act="highfive"] .m-eyes-happy { opacity: 1; }
.mascot-walker.is-motion[data-act="tug"] .pp-arm-r { animation: pt-mascot-tug 0.5s ease-in-out infinite alternate; rotate: 26deg; }
.mascot-walker.is-motion[data-act="tug"] .pp-arm-l { animation: none; rotate: -20deg; }
.mascot-walker.is-motion[data-act="tug"] .pp-float { transform-origin: 250px 362px; animation: pt-mascot-lean 0.5s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="throw"] .pp-arm-r { animation: pt-mascot-throw 0.7s cubic-bezier(0.3, 0, 0.3, 1); }

/* ---- Its kit: shown by data-kit (a list), drawn into its own svg ---- */
.mascot-pet .pt-kit > g { transition: opacity 0.2s ease; }
.mascot-pet[data-kit~="makarapa"] .pt-kit-makarapa,
.mascot-pet[data-kit~="scarf"] .pt-kit-scarf,
.mascot-pet[data-kit~="shades"] .pt-kit-shades,
.mascot-pet[data-kit~="rusk"] .pt-kit-rusk,
.mascot-pet[data-kit~="frisbee"] .pt-kit-frisbee,
.mascot-pet[data-kit~="whistle"] .pt-kit-whistle,
.mascot-pet[data-kit~="card"] .pt-kit-card,
.mascot-pet[data-kit~="score"] .pt-kit-score,
.mascot-pet[data-kit~="lowscore"] .pt-kit-lowscore,
.mascot-pet[data-kit~="vuvu"] .pt-kit-vuvu,
.mascot-pet[data-kit~="medal"] .pt-kit-medal,
.mascot-pet[data-kit~="helmet"] .pt-kit-helmet,
.mascot-pet[data-kit~="wors"] .pt-kit-wors,
.mascot-pet[data-kit~="can"] .pt-kit-can,
.mascot-pet[data-kit~="flower"] .pt-kit-flower,
.mascot-pet[data-kit~="sprig"] .pt-kit-sprig,
.mascot-pet[data-act="dig"] .pt-kit-dirt { opacity: 1; }
/* Shades cover the eyes, so no blink shows through */
.mascot-pet[data-kit~="shades"] .pt-eyes,
.mascot-pet[data-kit~="shades"] .pt-eyes-happy { opacity: 0 !important; }
.mascot-pet .pt-clod { transform-box: fill-box; transform-origin: center; }

/* ---- Its own things: chasing its tail, digging, lying in the sun, standing up, howling ---- */
.mascot-pet[data-act="spin"] .pt-body { transform-origin: 58px 82px; animation: pt-spin 0.5s linear 3; }
.mascot-pet[data-act="spin"] .pt-eyes,
.mascot-pet[data-act="lie"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="spin"] .pt-eyes-happy { opacity: 1; }
.mascot-pet[data-act="dig"] .pt-body { rotate: 14deg; translate: 2px 3px; }
.mascot-pet[data-act="dig"] .pt-legs-a { animation: pt-scratch 0.16s ease-in-out infinite; }
.mascot-pet[data-act="dig"] .pt-tail { animation: pt-wag 0.3s ease-in-out infinite; }
.mascot-pet[data-act="dig"] .pt-clod { animation: pt-clod 0.48s ease-out infinite; }
.mascot-pet[data-act="dig"] .pt-clod2 { animation-delay: -0.16s; }
.mascot-pet[data-act="dig"] .pt-clod3 { animation-delay: -0.32s; }
.mascot-pet[data-act="lie"] .pt-body { translate: 0 12px; scale: 1.08 0.82; animation: pt-snore 3s ease-in-out infinite; }
.mascot-pet[data-act="lie"] .pt-legs-a,
.mascot-pet[data-act="lie"] .pt-legs-b { opacity: 0; }
.mascot-pet[data-act="lie"] .pt-eyes-closed { opacity: 1; }
.mascot-pet[data-act="stand"] .pt-body { rotate: -26deg; translate: -4px -4px; }
.mascot-pet[data-act="stand"] .pt-legs-a { translate: 8px -12px; }
.mascot-pet[data-act="stand"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="stand"] .pt-eyes-happy,
.mascot-pet[data-act="stand"] .pt-tongue { opacity: 1; }
.mascot-pet[data-act="howl"] .pt-head { rotate: -28deg; animation: pt-bark 0.4s ease-in-out infinite; }
.mascot-pet[data-act="howl"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="howl"] .pt-eyes-closed,
.mascot-pet[data-act="howl"] .pt-tongue { opacity: 1; }
/* In the shows: cheering, judging (sitting up very straight), diving to save, shuffling, pulling the towel */
.mascot-pet[data-act="cheer"] .pt-body { animation: pt-hop 0.6s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.mascot-pet[data-act="cheer"] .pt-tail { animation: pt-wag 0.2s ease-in-out infinite; }
.mascot-pet[data-act="cheer"] .pt-eyes,
.mascot-pet[data-act="shuffle"] .pt-eyes { opacity: 0; }
.mascot-pet[data-act="cheer"] .pt-eyes-happy,
.mascot-pet[data-act="cheer"] .pt-tongue,
.mascot-pet[data-act="shuffle"] .pt-eyes-happy { opacity: 1; }
.mascot-pet[data-act="judge"] .pt-body { rotate: -12deg; translate: 0 2px; }
.mascot-pet[data-act="judge"] .pt-head { rotate: -8deg; }
.mascot-pet[data-act="keeper"] .pt-body { transform-origin: 58px 100px; animation: pt-dive 0.7s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
.mascot-pet[data-act="shuffle"] .pt-body { animation: pt-shuffle 0.6s ease-in-out infinite; }
.mascot-pet[data-act="tug"] .pt-body { rotate: -12deg; translate: -3px 2px; animation: pt-wiggle 0.5s ease-in-out infinite alternate; }
.mascot-pet[data-act="tug"] .pt-legs-a { translate: 5px 0; }
.mascot-pet[data-act="tug"] .pt-tail { animation: pt-wag 0.18s ease-in-out infinite; }

/* The duets' things: the towel, the frisbee, the sunbird it chases */
.pt-towel { position: absolute; z-index: 3; pointer-events: none; }
.pt-towel svg { display: block; width: 100%; height: 100%; animation: pt-wiggle 0.5s ease-in-out infinite alternate; }
.pt-frisbee { position: absolute; left: 0; top: 0; z-index: 4; width: 24px; height: 10px; pointer-events: none; }
.pt-frisbee svg { display: block; width: 100%; height: 100%; }
.pt-sunbird { position: absolute; z-index: 4; width: 34px; height: 21px; pointer-events: none; animation: pt-bird 2.2s ease-in-out forwards; }
.pt-sunbird.is-left { scale: -1 1; }
.pt-sunbird svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pt-sunbird .pt-wing { transform-box: fill-box; transform-origin: 90% 80%; animation: pt-flap 0.12s linear infinite alternate; }

@keyframes pt-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.02, 0.98); } }
@keyframes pt-wag { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes pt-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(0.1); } }
@keyframes pt-trot { 0%, 100% { transform: translateY(0) scale(1.03, 0.97); } 50% { transform: translateY(-4px) scale(0.98, 1.02); } }
@keyframes pt-gallop { 0%, 100% { transform: translateY(0) rotate(-3deg) scale(1.05, 0.95); } 50% { transform: translateY(-8px) rotate(3deg) scale(0.97, 1.03); } }
@keyframes pt-step { 0%, 100% { transform: translateX(-3px); } 50% { transform: translate(3px, -3px); } }
@keyframes pt-ear { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
@keyframes pt-hop {
    0%, 100% { transform: none; }
    15% { transform: translateY(2px) scale(1.1, 0.88); }
    45% { transform: translateY(-22px) scale(0.92, 1.1); }
    70% { transform: translateY(0) scale(1.08, 0.92); }
    85% { transform: scale(0.98, 1.02); }
}
@keyframes pt-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes pt-heart { 0% { transform: translateY(6px) scale(0.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-22px) scale(1); opacity: 0; } }
@keyframes pt-chew { 0%, 100% { transform: none; } 50% { transform: translateY(1.5px) rotate(2deg); } }
@keyframes pt-bark { 0%, 100% { transform: none; } 40% { transform: translateY(-3px) rotate(-8deg); } }
@keyframes pt-sniff { 0%, 100% { transform: none; } 50% { transform: translate(1px, 1px); } }
@keyframes pt-scratch { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -6px); } }
@keyframes pt-snore { 0%, 100% { transform: scale(1.04, 0.9); } 50% { transform: scale(1.07, 0.88); } }
@keyframes pt-z { 0% { transform: translate(-4px, 8px) scale(0.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(8px, -22px) scale(1.1); opacity: 0; } }
@keyframes pt-dizzy { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes pt-spin { to { transform: rotate(360deg); } }
@keyframes pt-tumble {
    0% { transform: none; }
    20% { transform: translateY(-6px) rotate(-30deg); }
    70% { transform: translate(18px, -4px) rotate(330deg); }
    100% { transform: translateX(18px) rotate(360deg); }
}
@keyframes pt-shake { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: rotate(-9deg); } 30%, 60%, 90% { transform: rotate(9deg); } }
@keyframes pt-paddle { from { transform: translateY(-2px) rotate(-12deg); } to { transform: translateY(1px) rotate(12deg); } }
@keyframes pt-land { 0% { transform: scale(1.2, 0.78); } 60% { transform: scale(0.95, 1.06); } 100% { transform: none; } }
@keyframes pt-mascot-toss { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(16deg); } 42% { transform: rotate(-24deg); } 60% { transform: rotate(-6deg); } }
@keyframes pt-mascot-pat { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }
@keyframes pt-mascot-tug { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes pt-mascot-lean { from { transform: rotate(-5deg); } to { transform: rotate(-9deg) translateX(-3px); } }
@keyframes pt-mascot-throw { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(40deg); } 55% { transform: rotate(-70deg); } 75% { transform: rotate(-40deg); } }
@keyframes pt-clod { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-16px, -14px); opacity: 0; } }
@keyframes pt-dive { 0% { transform: none; } 40% { transform: translate(14px, -16px) rotate(50deg); } 100% { transform: translate(22px, 6px) rotate(80deg); } }
@keyframes pt-shuffle { 0%, 100% { transform: translateX(-4px) rotate(-4deg); } 50% { transform: translate(4px, -3px) rotate(4deg); } }
@keyframes pt-bird { 0% { transform: translate(0, 10px); opacity: 0; } 15% { opacity: 1; } 50% { transform: translate(90px, -14px); } 85% { opacity: 1; } 100% { transform: translate(200px, -40px); opacity: 0; } }
@keyframes pt-flap { from { transform: rotate(-30deg); } to { transform: rotate(25deg); } }

@media (prefers-reduced-motion: reduce) {
    .mascot-pet,
    .mascot-pet *,
    .pt-flip { animation: none !important; transition: none !important; }
    .mascot-pet[data-act="happy"] .pt-body,
    .mascot-pet[data-act="catch"] .pt-body { translate: 0 -8px; }
}