/* =====================================================================
   Natural motion (Premium Mascot Plan phase A, switch Mascot:Motion):
   the layer over mascot-life.css that makes the living mascot move like
   something alive. wwwroot/js/mascot-life.js adds .is-motion to the
   walker and drives --ml-lean (the lean while walking, dangling or
   thrown), .is-blink (blinks at uneven times), .is-turning (look, then
   turn), .is-running (sports) and data-face (the face channel).

   - Every act winds up first (a squash), overshoots, then settles.
   - The hat trails the body (follow-through) and sways while idle.
   - Breathing and floating run at periods that never line up, so the
     idle never looks like a loop.
   - Only transform, the individual transform properties and opacity
     animate. Reduced motion: poses still change, nothing moves.
   ===================================================================== */

/* Lean and the turn: the lean is in screen space (outside the mirror), the turn squashes through the middle */
.mascot-walker.is-motion .mascot-flip {
    transform-origin: 50% 72%;
    rotate: var(--ml-lean, 0deg);
    transition: transform 0.3s cubic-bezier(0.6, 0, 0.25, 1), rotate 0.2s ease-out;
}

/* Idle: a slow float with breathing on its own period, the hat swaying a beat behind */
.is-motion .pp-float { animation: pp-float 5.3s ease-in-out infinite, mo-breathe 3.7s ease-in-out infinite; }
.is-motion .pp-hat { transform-origin: var(--pp-hat-base, 250px 186px); animation: mo-hat-idle 6.1s ease-in-out -1.3s infinite; }
.is-motion .pp-shadow { animation: pp-shadow 5.3s ease-in-out infinite; }

/* Blinks come from the script at uneven times */
.is-motion .m-eyes { animation: none; transition: transform 0.07s ease-in; }
.mascot-walker.is-blink .m-eyes { transform: scaleY(0.08); }

/* Eyes dart (saccades) instead of sliding */
.mascot-host .is-motion .m-gaze { transition: transform 0.11s cubic-bezier(0.2, 0.9, 0.25, 1); }

/* Poses settle with a little overshoot, like a spring */
.mascot-walker.is-motion .pp-float,
.mascot-walker.is-motion .pp-leg-l,
.mascot-walker.is-motion .pp-leg-r,
.mascot-walker.is-motion .pp-arm-l,
.mascot-walker.is-motion .pp-arm-r { transition: rotate 0.55s cubic-bezier(0.34, 1.4, 0.55, 1), translate 0.5s cubic-bezier(0.3, 1.25, 0.5, 1); }

/* ---- Walking: a squash on every foot plant, rising between steps; the hat bobs late ---- */
.mascot-walker.is-motion.is-walking .pp-float { transform-origin: 250px 362px; animation: mo-walk 0.5s ease-in-out infinite; }
.mascot-walker.is-motion.is-walking .pp-hat { animation: mo-hat-walk 0.5s ease-in-out -0.12s infinite; }
.mascot-walker.is-motion.is-walking .pp-leg-l { animation: mo-step 1s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.mascot-walker.is-motion.is-walking .pp-leg-r { animation: mo-step 1s cubic-bezier(0.45, 0, 0.55, 1) -0.5s infinite; }
.mascot-walker.is-motion.is-walking .pp-arm-l { animation: mo-swing 1s cubic-bezier(0.45, 0, 0.55, 1) -0.45s infinite; }
.mascot-walker.is-motion.is-walking .pp-arm-r { animation: mo-swing 1s cubic-bezier(0.45, 0, 0.55, 1) 0.05s infinite; }

/* ---- Running (sports): longer strides, arms pumping, a bigger bounce ---- */
.mascot-walker.is-motion.is-running .pp-float { animation: mo-run 0.26s ease-in-out infinite; }
.mascot-walker.is-motion.is-running .pp-leg-l { animation: mo-run-step 0.52s ease-in-out infinite; }
.mascot-walker.is-motion.is-running .pp-leg-r { animation: mo-run-step 0.52s ease-in-out -0.26s infinite; }
.mascot-walker.is-motion.is-running .pp-arm-l { animation: mo-pump 0.52s ease-in-out -0.26s infinite; }
.mascot-walker.is-motion.is-running .pp-arm-r { animation: mo-pump 0.52s ease-in-out infinite; }
.mascot-walker.is-motion.is-running .pp-hat { animation: mo-hat-walk 0.26s ease-in-out -0.06s infinite; }

/* ---- Turning: a quick hop that hides the mirror ---- */
.mascot-walker.is-motion.is-turning .pp-float { transform-origin: 250px 362px; animation: mo-turn 0.34s ease-out; }

/* ---- Tap: wind up, hop, overshoot, settle; the hat lands late; the shadow shrinks while it's up ---- */
.mascot-walker.is-motion[data-act="giggle"] .pp-float { transform-origin: 250px 362px; animation: mo-giggle 0.82s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="giggle"] .pp-hat,
.mascot-walker.is-motion[data-act="land"] .pp-hat { animation: mo-hat-lag 0.82s ease-out; }
.mascot-walker.is-motion[data-act="giggle"] .pp-shadow { animation: mo-shadow-hop 0.82s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="giggle"] .pp-arm-l { animation: mo-arm-flap 0.82s ease-out; }
.mascot-walker.is-motion[data-act="giggle"] .pp-arm-r { animation: mo-arm-flap-r 0.82s ease-out; }

/* ---- Landing: a deep squash, a stretch past rest, then settled ---- */
.mascot-walker.is-motion[data-act="land"] .pp-float { transform-origin: 250px 362px; animation: mo-land 0.56s cubic-bezier(0.2, 0.8, 0.3, 1); }

/* ---- Hello: the wave winds down like a pendulum instead of stopping dead ---- */
.mascot-walker.is-motion[data-act="wave"] .pp-arm-l { animation: mo-wave 1.4s ease-out; }

/* ---- Waking and stretching: sink first, then reach ---- */
.mascot-walker.is-motion[data-act="stretch"] .pp-float,
.mascot-walker.is-motion[data-act="wake"] .pp-float { transform-origin: 250px 362px; animation: mo-stretch 1.8s cubic-bezier(0.4, 0, 0.3, 1); }

/* ---- Petting: leans into the hand ---- */
.mascot-walker.is-motion[data-act="pet"] .pp-float { transform-origin: 250px 362px; animation: mo-purr 1.3s ease-in-out infinite; }

/* ---- The face channel (data-face): brows work on every face; the mouths come with the premium art ---- */
.mascot-walker[data-face] .m-brow-l,
.mascot-walker[data-face] .m-brow-r { transition: transform 0.18s ease-out; }
.mascot-walker[data-face="effort"] .m-brow-l,
.mascot-walker[data-face="focus"] .m-brow-l { transform: translateY(3px) rotate(16deg); }
.mascot-walker[data-face="effort"] .m-brow-r,
.mascot-walker[data-face="focus"] .m-brow-r { transform: translateY(3px) rotate(-16deg); }
.mascot-walker[data-face="sad"] .m-brow-l { transform: translateY(-2px) rotate(-14deg); }
.mascot-walker[data-face="sad"] .m-brow-r { transform: translateY(-2px) rotate(14deg); }
.mascot-walker[data-face="cheer"] .m-brow-l,
.mascot-walker[data-face="cheer"] .m-brow-r,
.mascot-walker[data-face="shout"] .m-brow-l,
.mascot-walker[data-face="shout"] .m-brow-r { transform: translateY(-5px); }
.mascot-walker[data-face="cheer"] .m-eyes,
.mascot-walker[data-face="wince"] .m-eyes { opacity: 0; }
.mascot-walker[data-face="cheer"] .m-eyes-happy { opacity: 1; }
.mascot-walker[data-face="wince"] .pp-eyes-closed { opacity: 1; }
.mascot-walker[data-face="effort"] .m-mouth:has(~ .pp-mouth-grit),
.mascot-walker[data-face="cheer"] .m-mouth:has(~ .pp-mouth-shout),
.mascot-walker[data-face="shout"] .m-mouth:has(~ .pp-mouth-shout) { opacity: 0; }
.mascot-walker[data-face="effort"] .pp-mouth-grit,
.mascot-walker[data-face="cheer"] .pp-mouth-shout,
.mascot-walker[data-face="shout"] .pp-mouth-shout { opacity: 1; }
.mascot-walker[data-face="wince"] .m-mouth,
.mascot-walker[data-face="sad"] .m-mouth { opacity: 0; }
.mascot-walker[data-face="wince"] .m-mouth-o,
.mascot-walker[data-face="sad"] .m-mouth-o { opacity: 1; }
.mascot-walker[data-face="cheer"] .m-blush,
.mascot-walker[data-face="effort"] .m-blush { opacity: 1 !important; }
.mascot-walker .pp-mouth-shout,
.mascot-walker .pp-mouth-grit { transition: opacity 0.12s ease; }

/* ---- Dust at its feet (turns, landings, sports) ---- */
.mo-dust { position: absolute; z-index: 1; width: 0; height: 0; pointer-events: none; }
.mo-dust i {
    position: absolute;
    left: -7px;
    top: -7px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.15) 70%, transparent);
    opacity: 0;
    animation: mo-dust 0.65s ease-out forwards;
}
.mo-dust i:nth-child(1) { --dx: -26px; --dy: -8px; }
.mo-dust i:nth-child(2) { --dx: 0px; --dy: -14px; animation-delay: 0.04s; }
.mo-dust i:nth-child(3) { --dx: 26px; --dy: -8px; }

@keyframes mo-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 0.992 1.014; } }
@keyframes mo-hat-idle { 0%, 100% { transform: rotate(-0.8deg); } 50% { transform: rotate(1deg) translateY(-0.6px); } }
@keyframes mo-walk {
    0%, 100% { transform: translateY(0) scale(1.025, 0.975); }
    20% { transform: translateY(-2px) scale(0.995, 1.01); }
    50% { transform: translateY(-6px) scale(0.985, 1.02); }
    80% { transform: translateY(-2px) scale(1, 1); }
}
@keyframes mo-hat-walk { 0%, 100% { transform: translateY(1.5px) rotate(-1.2deg); } 50% { transform: translateY(-1px) rotate(1.2deg); } }
@keyframes mo-step { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } }
@keyframes mo-swing { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
@keyframes mo-run { 0%, 100% { transform: translateY(0) scale(1.04, 0.96); } 50% { transform: translateY(-11px) scale(0.97, 1.04); } }
@keyframes mo-run-step { 0%, 100% { transform: rotate(38deg); } 50% { transform: rotate(-34deg); } }
@keyframes mo-pump { 0%, 100% { transform: rotate(28deg); } 50% { transform: rotate(-30deg); } }
@keyframes mo-turn {
    0%, 100% { transform: none; }
    35% { transform: translateY(-7px) scale(0.95, 1.05); }
    75% { transform: translateY(0) scale(1.05, 0.95); }
}
@keyframes mo-giggle {
    0%, 100% { transform: none; }
    14% { transform: translateY(3px) scale(1.09, 0.89); }
    36% { transform: translateY(-28px) scale(0.93, 1.09) rotate(-4deg); }
    56% { transform: translateY(0) scale(1.07, 0.93) rotate(2deg); }
    70% { transform: translateY(-6px) scale(0.98, 1.03) rotate(-1deg); }
    85% { transform: translateY(0) scale(1.015, 0.985); }
}
@keyframes mo-hat-lag {
    0%, 14%, 100% { transform: none; }
    32% { transform: translateY(6px) scaleY(0.96); }
    52% { transform: translateY(-5px) rotate(-3deg); }
    68% { transform: translateY(2px) rotate(1.5deg); }
    84% { transform: translateY(-0.8px); }
}
@keyframes mo-shadow-hop {
    0%, 100% { transform: scale(1); opacity: 1; }
    14% { transform: scale(1.1, 1); opacity: 1; }
    36% { transform: scale(0.62); opacity: 0.45; }
    56% { transform: scale(1.08, 1); opacity: 1; }
    70% { transform: scale(0.9); opacity: 0.85; }
}
@keyframes mo-arm-flap { 0%, 100% { transform: none; } 14% { transform: rotate(-14deg); } 36% { transform: rotate(32deg); } 60% { transform: rotate(-6deg); } }
@keyframes mo-arm-flap-r { 0%, 100% { transform: none; } 14% { transform: rotate(14deg); } 36% { transform: rotate(-30deg); } 60% { transform: rotate(6deg); } }
@keyframes mo-land {
    0% { transform: scale(1.2, 0.78); }
    30% { transform: scale(0.94, 1.07) translateY(-4px); }
    55% { transform: scale(1.04, 0.97); }
    78% { transform: scale(0.99, 1.01); }
    100% { transform: none; }
}
@keyframes mo-wave {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-30deg); }
    24% { transform: rotate(24deg); }
    38% { transform: rotate(-22deg); }
    52% { transform: rotate(16deg); }
    66% { transform: rotate(-10deg); }
    80% { transform: rotate(5deg); }
    90% { transform: rotate(-2deg); }
}
@keyframes mo-stretch {
    0%, 100% { transform: none; }
    18% { transform: scale(1.05, 0.94); }
    48%, 70% { transform: scale(0.96, 1.08); }
    86% { transform: scale(1.02, 0.98); }
}
@keyframes mo-purr { 0%, 100% { transform: rotate(-2.5deg) scale(1.01, 0.99); } 50% { transform: rotate(2.5deg) translateY(-3px) scale(0.99, 1.01); } }
@keyframes mo-dust {
    0% { opacity: 0.6; transform: translate(0, 0) scale(0.4); }
    100% { opacity: 0; transform: translate(calc(var(--dx) * var(--mo-dust, 1)), var(--dy)) scale(calc(1.5 * var(--mo-dust, 1))); }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-walker.is-motion .mascot-flip { rotate: none; transition: none; }
    .mo-dust { display: none; }
}