/* =====================================================================
   Living mascot (Living Mascot Plan step 2, switch Mascot:Life): the
   landing puppet wanders, gets bored, sleeps and reacts to taps, drags
   and petting. wwwroot/js/mascot-life.js moves .mascot-walker and sets
   its classes (is-walking, is-held, is-falling, is-left) and data-act.
   Poses use the individual rotate/translate properties so the keyframe
   animations (transform) can run on top of them; reduced motion keeps
   the poses and drops every animation. Sign-in moods (gsap-auth.css)
   win because the script clears data-act while one is showing.
   ===================================================================== */

.mascot-walker {
    position: relative;
    z-index: 2;
    display: block;
    border-radius: 9999px;
    outline: none;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}
.hero-animated .hero-mascot > .mascot-walker svg.mascot-svg { display: block; width: 230px; height: 230px; }
@media (max-width: 640px) {
    .hero-animated .hero-mascot > .mascot-walker svg.mascot-svg { width: 185px; height: 185px; }
}
.mascot-flip { transition: transform 0.18s ease; }
.mascot-walker.is-left .mascot-flip { transform: scaleX(-1); }
.mascot-walker.is-held { cursor: grabbing; }
.mascot-walker:focus-visible { box-shadow: 0 0 0 3px oklch(var(--a) / 0.85); }

/* "Play with me" when focused by keyboard */
.mascot-hint {
    position: absolute;
    left: 50%;
    top: 4px;
    z-index: 3;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    color: oklch(var(--ac));
    background: oklch(var(--a));
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity 0.2s ease;
}
.mascot-walker:focus-visible .mascot-hint { opacity: 1; }

/* Smooth pose changes (sitting down, lifting arms) */
.mascot-walker .pp-float,
.mascot-walker .pp-leg-l,
.mascot-walker .pp-leg-r,
.mascot-walker .pp-arm-l,
.mascot-walker .pp-arm-r { transition: rotate 0.45s ease, translate 0.45s ease; }

/* Parts shown by acts */
.mascot-walker .pp-spin,
.mascot-walker .pp-heart,
.mascot-walker .pp-z,
.mascot-walker .pp-snack,
.mascot-walker .pp-mouth-yawn { transform-box: fill-box; transform-origin: center; }
.mascot-walker .pp-eyes-closed,
.mascot-walker .pp-eyes-dizzy,
.mascot-walker .pp-mouth-yawn,
.mascot-walker .pp-zzz,
.mascot-walker .pp-hearts,
.mascot-walker .pp-snack-wrap,
.mascot-walker .pp-watch-wrap { transition: opacity 0.2s ease; }

/* ---- Walking: legs ±18° out of step at 2 steps a second, 3 px bob, arms against the legs ---- */
.mascot-walker.is-walking .pp-float { animation: ml-bob 0.5s ease-in-out infinite; }
.mascot-walker.is-walking .pp-leg-l { animation: ml-step 1s ease-in-out infinite; }
.mascot-walker.is-walking .pp-leg-r { animation: ml-step 1s ease-in-out -0.5s infinite; }
.mascot-walker.is-walking .pp-arm-l { animation: ml-swing 1s ease-in-out -0.5s infinite; }
.mascot-walker.is-walking .pp-arm-r { animation: ml-swing 1s ease-in-out infinite; }

/* ---- Picked up (drag): legs dangle and kick, arms up, o mouth ---- */
.mascot-walker.is-held .pp-float,
.mascot-walker.is-falling .pp-float { animation: none; }
.mascot-walker.is-held .pp-shadow,
.mascot-walker.is-falling .pp-shadow { animation: none; opacity: 0; }
.mascot-walker.is-held .pp-leg-l { animation: ml-kick 0.32s ease-in-out infinite alternate; }
.mascot-walker.is-held .pp-leg-r { animation: ml-kick 0.32s ease-in-out -0.16s infinite alternate; }
.mascot-walker.is-held .pp-arm-l,
.mascot-walker.is-falling .pp-arm-l { animation: none; rotate: 40deg; }
.mascot-walker.is-held .pp-arm-r,
.mascot-walker.is-falling .pp-arm-r { animation: none; rotate: -55deg; }
.mascot-walker.is-held .m-mouth,
.mascot-walker.is-falling .m-mouth { opacity: 0; }
.mascot-walker.is-held .m-mouth-o,
.mascot-walker.is-falling .m-mouth-o { opacity: 1; }

/* ---- Landing: a squash from the feet ---- */
.mascot-walker[data-act="land"] .pp-float { transform-origin: 250px 362px; animation: ml-squash 0.38s ease-out; }

/* ---- Tap: giggle and hop ---- */
.mascot-walker[data-act="giggle"] .pp-float { animation: ml-giggle 0.7s ease-out; }
.mascot-walker[data-act="giggle"] .m-eyes,
.mascot-walker[data-act="pet"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="giggle"] .m-eyes-happy,
.mascot-walker[data-act="pet"] .m-eyes-happy { opacity: 1; }
.mascot-walker[data-act="giggle"] .m-blush,
.mascot-walker[data-act="pet"] .m-blush { opacity: 1 !important; }

/* ---- Hello and goodbye (the feed companion) ---- */
.mascot-walker[data-act="wave"] .pp-arm-l { animation: pp-wave-fast 0.45s ease-in-out 3; }
.mascot-walker[data-act="wave"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="wave"] .m-eyes-happy { opacity: 1; }

/* ---- Three quick taps: dizzy ---- */
.mascot-walker[data-act="dizzy"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="dizzy"] .pp-eyes-dizzy { opacity: 1; }
.mascot-walker[data-act="dizzy"] .pp-spin { animation: ml-spin 0.7s linear infinite; }
.mascot-walker[data-act="dizzy"] .pp-float { animation: ml-wobble 0.5s ease-in-out infinite; }
.mascot-walker[data-act="dizzy"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="dizzy"] .m-mouth-o { opacity: 1; }

/* ---- Hold: petting (eyes close happily, blush, hearts) ---- */
.mascot-walker[data-act="pet"] .pp-float { animation: ml-purr 1.2s ease-in-out infinite; }
.mascot-walker[data-act="pet"] .pp-hearts { opacity: 1; }
.mascot-walker[data-act="pet"] .pp-heart { animation: ml-heart 1.6s ease-out infinite; }
.mascot-walker[data-act="pet"] .pp-heart2 { animation-delay: -0.55s; }
.mascot-walker[data-act="pet"] .pp-heart3 { animation-delay: -1.1s; }

/* ---- Bored: yawn ---- */
.mascot-walker[data-act="yawn"] .m-eyes,
.mascot-walker[data-act="yawn"] .m-mouth,
.mascot-walker[data-act="stretch"] .m-eyes,
.mascot-walker[data-act="wake"] .m-eyes,
.mascot-walker[data-act="wake"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="yawn"] .pp-eyes-closed,
.mascot-walker[data-act="stretch"] .pp-eyes-closed,
.mascot-walker[data-act="wake"] .pp-eyes-closed,
.mascot-walker[data-act="yawn"] .pp-mouth-yawn,
.mascot-walker[data-act="wake"] .pp-mouth-yawn { opacity: 1; }
.mascot-walker[data-act="yawn"] .pp-mouth-yawn,
.mascot-walker[data-act="wake"] .pp-mouth-yawn { animation: ml-yawn 2.4s ease-in-out; }
.mascot-walker[data-act="yawn"] .pp-arm-l { animation: none; rotate: 22deg; }
.mascot-walker[data-act="yawn"] .pp-arm-r { animation: none; rotate: -30deg; }

/* ---- Bored: foot tap, eyes to the side ---- */
.mascot-walker[data-act="foottap"] .pp-leg-r { animation: ml-tap 0.42s ease-in-out infinite; }
.mascot-walker[data-act="foottap"] .m-gaze { transform: translate(-4px, 1px) !important; }
.mascot-walker[data-act="foottap"] .pp-arm-l { animation: none; rotate: -18deg; }

/* ---- Bored: juggling a bean (My Brews) or a seed (WSMConnect) ---- */
.mascot-walker[data-act="juggle"] .pp-snack-wrap { opacity: 1; }
.mascot-walker[data-act="juggle"] .pp-snack { animation: ml-toss 0.9s ease-in-out infinite; }
.mascot-walker[data-act="juggle"] .pp-arm-l { animation: ml-catch 0.9s ease-in-out infinite; }
.mascot-walker[data-act="juggle"] .m-gaze { transform: translate(-3px, -4px) !important; }

/* ---- Bored: checking a tiny watch ---- */
.mascot-walker[data-act="watch"] .pp-watch-wrap { opacity: 1; }
.mascot-walker[data-act="watch"] .pp-arm-r { animation: none; rotate: -62deg; }
.mascot-walker[data-act="watch"] .m-gaze { transform: translate(4px, -3px) !important; }
.mascot-walker[data-act="watch"] .m-brow-l,
.mascot-walker[data-act="watch"] .m-brow-r { transform: translateY(-4px); }

/* ---- Morning stretch, and waking up (stretch with a yawn) ---- */
.mascot-walker[data-act="stretch"] .pp-arm-l,
.mascot-walker[data-act="wake"] .pp-arm-l { animation: none; rotate: 55deg; }
.mascot-walker[data-act="stretch"] .pp-arm-r,
.mascot-walker[data-act="wake"] .pp-arm-r { animation: none; rotate: -75deg; }
.mascot-walker[data-act="stretch"] .pp-float,
.mascot-walker[data-act="wake"] .pp-float { animation: ml-stretch 1.8s ease-in-out; }

/* ---- Sleep: sits with legs splayed, eyes closed, Zzz rising, slow breathing ---- */
.mascot-walker[data-act="sleep"] .pp-float { translate: 0 var(--pp-sit, 20px); animation: ml-breathe 3.2s ease-in-out infinite; }
.mascot-walker[data-act="sleep"] .pp-leg-l { rotate: 62deg; }
.mascot-walker[data-act="sleep"] .pp-leg-r { rotate: -62deg; }
.mascot-walker[data-act="sleep"] .pp-arm-l { animation: none; rotate: -48deg; }
.mascot-walker[data-act="sleep"] .pp-arm-r { animation: none; rotate: 18deg; }
.mascot-walker[data-act="sleep"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="sleep"] .pp-eyes-closed,
.mascot-walker[data-act="sleep"] .pp-zzz { opacity: 1; }
.mascot-walker[data-act="sleep"] .pp-z { animation: ml-z 2.7s ease-out infinite; }
.mascot-walker[data-act="sleep"] .pp-z2 { animation-delay: -0.9s; }
.mascot-walker[data-act="sleep"] .pp-z3 { animation-delay: -1.8s; }

/* Paused (off-screen, tab hidden, dialog open) or asleep for good after 10 minutes untouched */
.mascot-walker.is-paused *,
.mascot-walker.is-frozen * { animation-play-state: paused !important; }

@keyframes ml-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ml-step { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(-18deg); } }
@keyframes ml-swing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes ml-kick { from { transform: rotate(-24deg); } to { transform: rotate(18deg); } }
@keyframes ml-squash { 0% { transform: scale(1.14, 0.84); } 55% { transform: scale(0.96, 1.05); } 100% { transform: scale(1); } }
@keyframes ml-giggle { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-22px) rotate(-4deg); } 55% { transform: translateY(0) rotate(3deg); } 75% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes ml-spin { to { transform: rotate(360deg); } }
@keyframes ml-wobble { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes ml-purr { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-3px); } }
@keyframes ml-heart { 0% { transform: translateY(10px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-46px) scale(1); opacity: 0; } }
@keyframes ml-yawn { 0%, 100% { transform: scaleY(0.4); } 35%, 70% { transform: scaleY(1.1); } }
@keyframes ml-tap { 0%, 60%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-14deg); } }
@keyframes ml-toss { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-78px) rotate(200deg); } }
@keyframes ml-catch { 0%, 100% { transform: rotate(-8deg); } 15% { transform: rotate(6deg); } 50% { transform: rotate(0deg); } }
@keyframes ml-stretch { 0%, 100% { transform: scale(1); } 45%, 70% { transform: scale(0.97, 1.06); } }
@keyframes ml-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, 0.985); } }
@keyframes ml-z { 0% { transform: translate(-6px, 14px) scale(0.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(12px, -40px) scale(1.1); opacity: 0; } }

/* Reduced motion: it never walks, bobs or flies; poses still change in place */
@media (prefers-reduced-motion: reduce) {
    .mascot-walker,
    .mascot-walker *,
    .mascot-flip { animation: none !important; transition: none !important; }
    .mascot-walker[data-act="wave"] .pp-arm-l { rotate: 30deg; }
}

/* Admin-only debug panel that forces each state */
.mascot-debug {
    position: fixed;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 60;
    max-width: 18rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    color: oklch(var(--bc));
    background: oklch(var(--b1) / 0.95);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.mascot-debug summary { cursor: pointer; font-weight: 700; }
.mascot-debug-grid { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }