/* =====================================================================
   Showtime (switch Mascot:Shows, loaded after mascot-acts.css): the long
   shows wwwroot/js/mascot-shows.js stages around the landing mascot.
   - .sh-el: set pieces and things (a goal, a braai, the ball, boerewors,
     guests). The script moves them with transform; their own parts
     animate here (.is-hit, .is-lit, .is-rolling, .is-flying...).
   - .sh-fx: short effects (confetti, smoke, steam, sparks); .sh-shout: big
     words ("GOAL!", "SIUUU!"); .sh-night: the lights going out.
   - The mascot's poses for the shows are data-act values starting sh-.
     Like the other acts they use rotate/translate for the pose and
     transform keyframes for the motion; reduced motion keeps the pose.
   ===================================================================== */

/* ---- Set pieces and things ---- */
.sh-el {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transition: opacity 0.3s ease;
    animation: sh-in 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.sh-el.is-front { z-index: 3; }
.sh-el > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sh-el.is-flip > svg { transform: scaleX(-1); }
.sh-el.is-gone { opacity: 0; }
.sh-el svg * { transform-box: fill-box; }

.sh-goal.is-hit .sh-net { transform-origin: 30% 50%; animation: sh-net 0.55s ease-out; }
.sh-posts.is-hit,
.sh-banner.is-hit { animation: sh-wobble 0.5s ease-out; }
.sh-banner.is-hit .sh-tape { transform-origin: 50% 50%; animation: sh-tape 0.6s ease-out forwards; }
.sh-stumps.is-hit .sh-bails { transform-origin: 50% 100%; animation: sh-bails 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards; }
.sh-stumps.is-hit > svg { transform-origin: 50% 100%; animation: sh-stumps 0.5s ease-out; }
.sh-hoop.is-hit .sh-hoopnet { transform-origin: 50% 0; animation: sh-swish 0.5s ease-out; }
.sh-grill.is-lit .sh-coals,
.sh-fire.is-lit .sh-flames { transform-origin: 50% 100%; animation: sh-flame 0.45s ease-in-out infinite alternate; }
.sh-grill.is-lit .sh-coals { animation-duration: 1.2s; }
.sh-potjie .sh-stew { animation: sh-bubble 0.9s ease-in-out infinite alternate; }
.is-rolling .sh-wheel { transform-origin: center; animation: sh-spin 0.45s linear infinite; }
.sh-taxi.is-rolling > svg { animation: sh-rumble 0.18s linear infinite alternate; }
.sh-hills.is-moving .sh-hillstrip { transform-box: view-box; animation: sh-hills 3.2s linear infinite; }
.sh-wave .sh-foam { transform-origin: center; animation: sh-foam 0.7s ease-in-out infinite alternate; }
.sh-wave > svg { transform-origin: 50% 100%; animation: sh-swell 1.4s ease-in-out infinite alternate; }
.sh-flag .sh-flagcloth { transform-origin: 0 50%; animation: sh-flag 1.2s ease-in-out infinite alternate; }
.sh-roaster.is-on .sh-gear { transform-origin: center; animation: sh-spin 0.9s linear infinite; }
.sh-roaster.is-on .sh-gear2 { animation-direction: reverse; }
.sh-roaster.is-on .sh-dial { transform-origin: 0 100%; animation: sh-dial 0.6s ease-in-out infinite alternate; }
.sh-roaster.is-on > svg { animation: sh-rumble 0.12s linear infinite alternate; }
.sh-switch .sh-toggle { transition: transform 0.15s ease; }
.sh-switch.is-off .sh-toggle { transform: translateY(9px); }
.sh-shadow.is-flapping .sh-shadowwing { transform-origin: 50% 80%; animation: sh-flapy 0.32s ease-in-out infinite alternate; }
/* Guests and cameos */
.sh-hadeda.is-flying .sh-wing { transform-origin: 20% 100%; animation: sh-flap 0.18s ease-in-out infinite alternate; }
.sh-hadeda.is-calling .sh-beak { transform-origin: 0 0; animation: sh-call 0.26s ease-in-out infinite alternate; }
.sh-hadeda.is-calling > svg { transform-origin: 50% 100%; animation: sh-bob 0.26s ease-in-out infinite alternate; }
.sh-baboon.is-sneaking > svg { transform-origin: 50% 100%; animation: sh-sneak 0.6s ease-in-out infinite alternate; }
.sh-baboon.is-running .sh-legs { animation: sh-gallop 0.16s linear infinite alternate; }
.sh-baboon .sh-tail { transform-origin: 90% 90%; animation: sh-tail 0.8s ease-in-out infinite alternate; }
.sh-penguin.is-waddling > svg { transform-origin: 50% 100%; animation: sh-waddle 0.36s ease-in-out infinite alternate; }
.sh-penguin .sh-flipper { transform-origin: 50% 0; animation: sh-flipper 0.36s ease-in-out infinite alternate; }
.sh-tin.is-walking > svg { transform-origin: 50% 100%; animation: sh-waddle 0.3s ease-in-out infinite alternate; }
.sh-tin .sh-tinarm { transform-origin: 0 100%; animation: sh-tail 0.7s ease-in-out infinite alternate; }
.sh-gremlin.is-giggling > svg { transform-origin: 50% 100%; animation: sh-bob 0.22s ease-in-out infinite alternate; }
.sh-gremlin .sh-glow { animation: sh-glow 0.8s ease-in-out infinite alternate; }
.sh-el.is-far { opacity: 0.7; }
.sh-el.is-far > svg { transform-origin: 50% 100%; animation: sh-bob 0.5s ease-in-out infinite alternate; }
/* The leaf's garden (WSMConnect): a protea grows seed > sprout > tall bud > bloom (no class: in bloom, for the still
   scene); a spekboom cutting takes root; daisies sway and close without sun; storm clouds rain; the mole-rat pops up */
.sh-protea .sh-plant { transform-origin: 50% 100%; transition: transform 1.1s cubic-bezier(0.3, 1.3, 0.5, 1); }
.sh-protea .sh-bloomhead { transform-origin: 50% 70%; transition: transform 0.9s cubic-bezier(0.3, 1.6, 0.5, 1); }
.sh-protea.is-seed .sh-plant { transform: scale(0.3, 0.08); }
.sh-protea.is-sprout .sh-plant { transform: scale(0.6, 0.32); }
.sh-protea.is-seed .sh-bloomhead,
.sh-protea.is-sprout .sh-bloomhead,
.sh-protea.is-tall .sh-bloomhead { transform: scale(0.18); }
.sh-protea > svg,
.sh-daisy > svg { transform-origin: 50% 100%; animation: sh-breeze 2.4s ease-in-out infinite alternate; }
.sh-daisy.is-late > svg { animation-delay: -1.2s; }
.sh-daisy .sh-petals { transform-origin: 50% 50%; transition: transform 0.6s ease; }
.sh-daisy.is-closed .sh-petals { transform: scale(0.3, 0.85); }
.sh-spekboom > svg { transform-origin: 50% 100%; transition: scale 1.2s cubic-bezier(0.3, 1.4, 0.5, 1); }
.sh-spekboom.is-cutting > svg { scale: 0.4; }
.sh-cloud > svg { animation: sh-bob 1.6s ease-in-out infinite alternate; }
.sh-cloud .sh-rain { opacity: 0; transition: opacity 0.3s ease; }
.sh-cloud.is-raining .sh-rain { opacity: 1; animation: sh-rainfall 0.45s linear infinite; }
.sh-rainbow > svg { transform-origin: 50% 100%; animation: sh-rainbow 1.4s ease-out both; }
.sh-sun .sh-rays { transform-origin: center; animation: sh-spin 8s linear infinite; }
.sh-molerat .sh-mole { transform-origin: 50% 100%; animation: sh-popup 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.sh-molerat .sh-whisk { transform-origin: center; animation: sh-jiggle 0.25s ease-in-out infinite alternate; }
.sh-molerat .sh-loot { opacity: 0; }
.sh-molerat.has-loot .sh-loot { opacity: 1; }
.sh-pot.is-hit > svg { animation: sh-wobble 0.5s ease-out; }

/* ---- Effects ---- */
.sh-fx { position: absolute; left: 0; top: 0; z-index: 4; width: 0; height: 0; pointer-events: none; }
.sh-fx > svg { position: absolute; display: block; overflow: visible; }
.sh-fx i {
    position: absolute;
    left: -3px;
    top: -5px;
    width: 6px;
    height: 10px;
    border-radius: 2px;
    background: var(--c);
    animation: sh-burst 1.2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
.sh-fx-sparks i { width: 5px; height: 5px; border-radius: 50%; animation-duration: 0.6s; }
.sh-fx-splash i,
.sh-fx-coffeesplash i { width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: sh-drop 0.8s ease-out forwards; }
.sh-fx-smoke b,
.sh-fx-dust b,
.sh-fx-pollen b {
    position: absolute;
    left: -11px;
    top: -11px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(225, 225, 232, 0.55);
    animation: sh-smoke 1.6s ease-out forwards;
}
.sh-fx-smoke b:nth-child(2) { left: -4px; animation-delay: 0.15s; }
.sh-fx-smoke b:nth-child(3) { left: -16px; animation-delay: 0.3s; }
.sh-fx-dust b { background: rgba(196, 164, 120, 0.55); width: 16px; height: 16px; animation: sh-dust 0.8s ease-out forwards; }
.sh-fx-dust b:nth-child(1) { --dx: -22px; }
.sh-fx-dust b:nth-child(2) { --dx: 0px; animation-delay: 0.05s; }
.sh-fx-dust b:nth-child(3) { --dx: 22px; }
.sh-fx-pollen b { background: rgba(255, 214, 64, 0.6); width: 12px; height: 12px; animation: sh-dust 1s ease-out forwards; }
.sh-fx-pollen b:nth-child(1) { --dx: -18px; }
.sh-fx-pollen b:nth-child(2) { --dx: 4px; animation-delay: 0.08s; }
.sh-fx-pollen b:nth-child(3) { --dx: 24px; animation-delay: 0.16s; }
.sh-fx-rain > svg { left: -40px; top: -30px; width: 80px; height: 60px; animation: sh-rainfx 0.8s linear forwards; }
.sh-fx-bolt > svg { left: -15px; top: 0; width: 30px; height: 70px; animation: sh-bolt 0.6s linear forwards; }
.sh-fx-flash b {
    position: absolute;
    left: -320px;
    top: -320px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 60%);
    opacity: 0;
    animation: sh-flash 0.6s ease-out forwards;
}
.sh-fx-steam > svg { left: -15px; top: -40px; width: 30px; height: 40px; animation: sh-steam 1.4s ease-out forwards; }
.sh-fx-notes > svg { left: -14px; top: -28px; width: 28px; height: 28px; animation: sh-note 1.5s ease-out forwards; }
.sh-fx-vuvu > svg { left: -30px; top: -20px; width: 60px; height: 40px; animation: sh-vuvu 0.6s ease-out forwards; }
.sh-fx-fire > svg { left: -4px; top: -15px; width: 60px; height: 30px; transform-origin: 0 50%; animation: sh-breath 0.9s ease-out forwards; }
.sh-fx-sparkle > svg { left: -18px; top: -18px; width: 36px; height: 36px; animation: sh-sparkle 0.9s ease-out forwards; }
.sh-fx-boom > svg { left: -30px; top: -30px; width: 60px; height: 60px; animation: sh-boom 0.7s ease-out forwards; }
.sh-fx-legend span {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
    color: #1a1a1a;
    background: linear-gradient(90deg, #ffd23f, #ff9f1a);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -100%);
    animation: sh-legend 1.7s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}

/* ---- Big words ---- */
.sh-shout {
    position: absolute;
    z-index: 5;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    color: #ffffff;
    -webkit-text-stroke: 1.5px #1a1a1a;
    paint-order: stroke fill;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -100%);
    animation: sh-shout 1.4s cubic-bezier(0.3, 1.5, 0.5, 1) forwards;
}
.sh-shout.is-big { font-size: 1.7rem; color: #ffd23f; }
@media (max-width: 640px) {
    .sh-shout { font-size: 0.95rem; }
    .sh-shout.is-big { font-size: 1.35rem; }
}

/* ---- The lights go out (load-shedding): the room darkens around the mascot, never over the login card ---- */
.sh-night {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 1100px;
    height: 1100px;
    margin: -550px 0 0 -550px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(6, 8, 20, 0.86) 0, rgba(6, 8, 20, 0.8) 24%, rgba(6, 8, 20, 0) 50%);
    opacity: 0;
    transition: opacity 0.45s ease;
}
.sh-night.is-on { opacity: 1; }
/* Storm clouds over the sun: greyer and lighter than a power cut */
.sh-night.is-storm { background: radial-gradient(circle, rgba(34, 44, 64, 0.5) 0, rgba(34, 44, 64, 0.42) 26%, rgba(34, 44, 64, 0) 52%); }
@media (max-width: 640px) { .sh-night { width: 720px; height: 720px; margin: -360px 0 0 -360px; } }

/* =====================================================================
   The mascot's show poses (data-act="sh-...")
   ===================================================================== */
.mascot-walker[data-act^="sh-"] .pp-float { transform-origin: 250px 362px; }

/* Soccer: keepy-uppies, a header, the rainbow flick, the kick */
.mascot-walker.is-motion[data-act="sh-keepy"] .pp-leg-r { animation: sh-kick-up 0.46s ease-out; }
.mascot-walker.is-motion[data-act="sh-keepy-l"] .pp-leg-l { animation: sh-kick-up 0.46s ease-out; }
.mascot-walker.is-motion[data-act="sh-keepy"] .pp-arm-l,
.mascot-walker.is-motion[data-act="sh-keepy-l"] .pp-arm-l { animation: none; rotate: -24deg; }
.mascot-walker.is-motion[data-act="sh-keepy"] .pp-arm-r,
.mascot-walker.is-motion[data-act="sh-keepy-l"] .pp-arm-r { animation: none; rotate: -16deg; }
.mascot-walker[data-act^="sh-keepy"] .m-gaze { transform: translate(3px, 4px) !important; }
.mascot-walker.is-motion[data-act="sh-header"] .pp-float { animation: sh-header 0.9s ease-out; }
.mascot-walker[data-act="sh-header"] .m-gaze { transform: translate(2px, -5px) !important; }
.mascot-walker.is-motion[data-act="sh-flick"] .pp-leg-r { animation: sh-flick 0.76s ease-out; }
.mascot-walker.is-motion[data-act="sh-flick"] .pp-float { animation: sh-hop 0.76s ease-out; }
.mascot-walker.is-motion[data-act="sh-kick"] .pp-leg-r { animation: sh-kick 0.56s cubic-bezier(0.4, 0, 0.2, 1); }
.mascot-walker.is-motion[data-act="sh-kick"] .pp-arm-l { animation: none; rotate: 34deg; }
.mascot-walker.is-motion[data-act="sh-kick"] .pp-arm-r { animation: none; rotate: 22deg; }
.mascot-walker.is-motion[data-act="sh-kick"] .pp-float { animation: sh-lean 0.56s ease-out; }

/* Rugby: catch, throw, sidesteps, the dive over the line */
.mascot-walker.is-motion[data-act="sh-catch"] .pp-arm-r { animation: none; rotate: -30deg; }
.mascot-walker.is-motion[data-act="sh-catch"] .pp-arm-l { animation: none; rotate: 40deg; }
.mascot-walker.is-motion[data-act="sh-throw"] .pp-arm-l { animation: sh-throw-l 0.7s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="sh-throw"] .pp-arm-r { animation: sh-throw-r 0.7s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="sh-throw"] .pp-float { animation: sh-hop 0.7s ease-out; }
.mascot-walker.is-motion[data-act="sh-jink"] .pp-float { animation: sh-jink 0.38s ease-out; }
.mascot-walker.is-motion[data-act="sh-jink-r"] .pp-float { animation: sh-jink-r 0.38s ease-out; }
.mascot-walker.is-motion[data-act="sh-dive"] .pp-float { transform-origin: 250px 330px; animation: sh-dive 1.1s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
.mascot-walker.is-motion[data-act="sh-dive"] .pp-arm-r { animation: none; rotate: -70deg; }
.mascot-walker.is-motion[data-act="sh-dive"] .pp-leg-l,
.mascot-walker.is-motion[data-act="sh-dive"] .pp-leg-r { animation: none; rotate: 30deg; }

/* Celebrations */
.mascot-walker.is-motion[data-act="sh-siuu"] .pp-float { animation: sh-siuu 1.4s cubic-bezier(0.3, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="sh-siuu"] .pp-arm-l { animation: sh-siuu-l 1.4s ease-out; }
.mascot-walker.is-motion[data-act="sh-siuu"] .pp-arm-r { animation: sh-siuu-r 1.4s ease-out; }
.mascot-walker.is-motion[data-act="sh-siuu"] .pp-leg-l { animation: sh-siuu-leg-l 1.4s ease-out; }
.mascot-walker.is-motion[data-act="sh-siuu"] .pp-leg-r { animation: sh-siuu-leg-r 1.4s ease-out; }
.mascot-walker.is-motion[data-act="sh-shuffle"] .pp-float { animation: sh-shuffle 0.65s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-shuffle"] .pp-arm-l { animation: ma-pump-l 0.65s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-shuffle"] .pp-arm-r { animation: ma-pump-r 0.65s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-shuffle"] .pp-leg-l { animation: mo-step 0.65s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-shuffle"] .pp-leg-r { animation: mo-step 0.65s ease-in-out -0.32s infinite; }
.mascot-walker.is-motion[data-act="sh-kneeslide"] .pp-float { animation: sh-kneeslide 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.mascot-walker.is-motion[data-act="sh-kneeslide"] .pp-arm-l,
.mascot-walker.is-motion[data-act="sh-trophy-arms"] .pp-arm-l,
.mascot-walker.is-motion[data-act="sh-hold-up"] .pp-arm-l { animation: none; rotate: 72deg; }
.mascot-walker.is-motion[data-act="sh-kneeslide"] .pp-arm-r,
.mascot-walker.is-motion[data-act="sh-trophy-arms"] .pp-arm-r,
.mascot-walker.is-motion[data-act="sh-hold-up"] .pp-arm-r { animation: none; rotate: -98deg; }
.mascot-walker.is-motion[data-act="sh-kneeslide"] .pp-leg-l { animation: none; rotate: 60deg; }
.mascot-walker.is-motion[data-act="sh-kneeslide"] .pp-leg-r { animation: none; rotate: -60deg; }
.mascot-walker.is-motion[data-act="sh-trophy"] .pp-float,
.mascot-walker.is-motion[data-act="sh-trophy-arms"] .pp-float,
.mascot-walker.is-motion[data-act="sh-present"] .pp-float,
.mascot-walker.is-motion[data-act="sh-huddle"] .pp-float { animation: sh-bounce 0.5s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-flex"] .pp-arm-l { animation: sh-flex-l 0.5s ease-in-out infinite alternate; rotate: 52deg; }
.mascot-walker.is-motion[data-act="sh-flex"] .pp-arm-r { animation: sh-flex-r 0.5s ease-in-out infinite alternate; rotate: -74deg; }
.mascot-walker.is-motion[data-act="sh-flex"] .pp-float { translate: 0 6px; }
.mascot-walker.is-motion[data-act="sh-huddle"] .pp-arm-r { animation: none; rotate: 18deg; }
.mascot-walker.is-motion[data-act="sh-sprint"] .pp-arm-l { animation: none; rotate: -14deg; }
.mascot-walker.is-motion[data-act="sh-sprint"] .pp-arm-r { animation: none; rotate: 12deg; }
.mascot-walker.is-motion[data-act="sh-blow"] .pp-float { animation: sh-blow 0.5s ease-in-out infinite alternate; }

/* Cricket: ready, the drive, the 360° scoop, bowling */
.mascot-walker.is-motion[data-act="sh-bat-ready"] .pp-arm-l { animation: none; rotate: -34deg; }
.mascot-walker.is-motion[data-act="sh-bat-ready"] .pp-float { translate: 0 6px; }
.mascot-walker.is-motion[data-act="sh-swing"] .pp-arm-l { animation: sh-swing 0.7s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
.mascot-walker.is-motion[data-act="sh-swing"] .pp-float { animation: sh-twist 0.7s ease-out; }
.mascot-walker.is-motion[data-act="sh-scoop"] .pp-arm-l { animation: sh-swing 0.7s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
.mascot-walker.is-motion[data-act="sh-scoop"] .pp-float { animation: ma-twirl 0.7s ease-in-out; }
.mascot-walker.is-motion[data-act="sh-bowl"] .pp-arm-r { animation: sh-windmill 0.8s cubic-bezier(0.4, 0, 0.3, 1); }
.mascot-walker.is-motion[data-act="sh-bowl"] .pp-float { animation: sh-lean 0.8s ease-out; }

/* Netball: the shot */
.mascot-walker.is-motion[data-act="sh-shoot"] .pp-arm-l { animation: sh-shoot-l 0.8s ease-out; rotate: 72deg; }
.mascot-walker.is-motion[data-act="sh-shoot"] .pp-arm-r { animation: sh-shoot-r 0.8s ease-out; rotate: -98deg; }
.mascot-walker.is-motion[data-act="sh-shoot"] .pp-float { animation: sh-hop 0.8s ease-out; }
.mascot-walker[data-act="sh-shoot"] .m-gaze,
.mascot-walker[data-act="sh-hold-up"] .m-gaze { transform: translate(3px, -5px) !important; }

/* Surfing, running, cycling, golf */
.mascot-walker.is-motion[data-act="sh-surf"] .pp-float { translate: 0 12px; animation: sh-balance 0.9s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="sh-surf"] .pp-arm-l { animation: sh-arm-wave 0.9s ease-in-out infinite alternate; rotate: -8deg; }
.mascot-walker.is-motion[data-act="sh-surf"] .pp-arm-r { animation: sh-arm-wave 0.9s ease-in-out -0.45s infinite alternate; rotate: 8deg; }
.mascot-walker.is-motion[data-act="sh-surf"] .pp-leg-l { animation: none; rotate: 18deg; }
.mascot-walker.is-motion[data-act="sh-surf"] .pp-leg-r { animation: none; rotate: -18deg; }
.mascot-walker.is-motion[data-act="sh-jog"] .pp-float,
.mascot-walker.is-motion[data-act="sh-jog-sip"] .pp-float { animation: mo-run 0.42s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-jog"] .pp-leg-l,
.mascot-walker.is-motion[data-act="sh-jog-sip"] .pp-leg-l { animation: mo-run-step 0.84s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-jog"] .pp-leg-r,
.mascot-walker.is-motion[data-act="sh-jog-sip"] .pp-leg-r { animation: mo-run-step 0.84s ease-in-out -0.42s infinite; }
.mascot-walker.is-motion[data-act="sh-jog"] .pp-arm-l,
.mascot-walker.is-motion[data-act="sh-jog-sip"] .pp-arm-l { animation: mo-pump 0.84s ease-in-out -0.42s infinite; }
.mascot-walker.is-motion[data-act="sh-jog"] .pp-arm-r { animation: mo-pump 0.84s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-jog-sip"] .pp-arm-r { animation: none; rotate: -72deg; }
.mascot-walker.is-motion[data-act="sh-pedal"] .pp-float { translate: 0 10px; rotate: 6deg; animation: sh-bounce 0.3s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-pedal"] .pp-leg-l { animation: ml-step 0.5s linear infinite; }
.mascot-walker.is-motion[data-act="sh-pedal"] .pp-leg-r { animation: ml-step 0.5s linear -0.25s infinite; }
.mascot-walker.is-motion[data-act="sh-pedal"] .pp-arm-r { animation: none; rotate: 24deg; }
.mascot-walker.is-motion[data-act="sh-pedal"] .pp-arm-l { animation: none; rotate: -40deg; }
.mascot-walker.is-motion[data-act="sh-bunnyhop"] .pp-float { animation: sh-bunnyhop 0.6s ease-out; }
.mascot-walker.is-motion[data-act="sh-bunnyhop"] .pp-leg-l { animation: none; rotate: 40deg; }
.mascot-walker.is-motion[data-act="sh-bunnyhop"] .pp-leg-r { animation: none; rotate: -40deg; }
.mascot-walker.is-motion[data-act="sh-putt-ready"] .pp-arm-l,
.mascot-walker.is-motion[data-act="sh-putt"] .pp-arm-l { animation: none; rotate: -95deg; }
.mascot-walker.is-motion[data-act="sh-putt"] .pp-arm-l { animation: sh-putt 0.9s ease-in-out; }
.mascot-walker.is-motion[data-act="sh-putt-ready"] .pp-float,
.mascot-walker.is-motion[data-act="sh-putt"] .pp-float { rotate: 6deg; }
.mascot-walker[data-act="sh-putt-ready"] .m-gaze,
.mascot-walker[data-act="sh-putt"] .m-gaze { transform: translate(4px, 5px) !important; }

/* The braai and the potjie: flipping, fanning smoke, stirring, tasting, too hot */
.mascot-walker.is-motion[data-act="sh-flip"] .pp-arm-l { animation: sh-flip 0.7s ease-in-out; }
.mascot-walker[data-act="sh-flip"] .m-gaze,
.mascot-walker[data-act="sh-stir"] .m-gaze { transform: translate(4px, 4px) !important; }
.mascot-walker.is-motion[data-act="sh-fan"] .pp-arm-r { animation: sh-fan 0.18s ease-in-out infinite alternate; rotate: -50deg; }
.mascot-walker.is-motion[data-act="sh-fan"] .pp-float { rotate: -5deg; }
.mascot-walker[data-act="sh-fan"] .m-eyes,
.mascot-walker[data-act="sh-ears"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="sh-fan"] .pp-eyes-closed,
.mascot-walker[data-act="sh-ears"] .pp-eyes-closed { opacity: 1; }
.mascot-walker.is-motion[data-act="sh-stir"] .pp-arm-l { animation: sh-stir 0.8s ease-in-out infinite; rotate: -58deg; }
.mascot-walker.is-motion[data-act="sh-taste"] .pp-arm-l { animation: none; rotate: 40deg; }
.mascot-walker[data-act="sh-taste"] .m-mouth,
.mascot-walker[data-act="sh-hot"] .m-mouth { opacity: 0; }
.mascot-walker[data-act="sh-taste"] .m-mouth-o,
.mascot-walker[data-act="sh-hot"] .m-mouth-o { opacity: 1; }
.mascot-walker.is-motion[data-act="sh-hot"] .pp-float { animation: sh-hot 0.3s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-hot"] .pp-arm-r { animation: sh-fan 0.14s ease-in-out infinite alternate; rotate: -70deg; }
.mascot-walker[data-act="sh-hot"] .m-sweat { opacity: 1; }
.mascot-walker[data-act="sh-hot"] .m-blush { opacity: 1 !important; }

/* Coffee: steaming milk, presenting the cup, cranking the roaster, pointing, the rusk dunk and the fishing out */
.mascot-walker.is-motion[data-act="sh-steam"] .pp-arm-l { animation: sh-jiggle 0.16s ease-in-out infinite alternate; rotate: -12deg; }
.mascot-walker[data-act="sh-steam"] .m-gaze { transform: translate(-4px, 2px) !important; }
.mascot-walker[data-act="sh-present"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="sh-present"] .m-eyes-happy { opacity: 1; }
.mascot-walker[data-act="sh-present"] .m-blush { opacity: 1 !important; }
.mascot-walker.is-motion[data-act="sh-crank"] .pp-arm-r { animation: sh-crank 0.6s linear infinite; }
.mascot-walker.is-motion[data-act="sh-crank"] .pp-float { animation: sh-lean-loop 0.6s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="sh-point"] .pp-arm-r { animation: sh-point 0.6s ease-in-out infinite alternate; rotate: -22deg; }
.mascot-walker.is-motion[data-act="sh-point"] .pp-float { animation: sh-tilt 1.2s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="sh-dunk"] .pp-arm-r { animation: sh-dunk 1.3s ease-in-out forwards; }
.mascot-walker.is-motion[data-act="sh-fish"] .pp-arm-r { animation: sh-jiggle 0.2s ease-in-out infinite alternate; rotate: 58deg; }
.mascot-walker[data-act="sh-dunk"] .m-gaze,
.mascot-walker[data-act="sh-fish"] .m-gaze { transform: translate(4px, 5px) !important; }

/* Dances: the Jerusalema line steps, the pouncing cat, gwara gwara, the water wave, pantsula footwork, gumboots */
.mascot-walker.is-motion[data-act="sh-jerusalema"] .pp-float { animation: sh-linestep 1.2s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-jerusalema"] .pp-arm-l { animation: sh-arm-swing 0.6s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="sh-jerusalema"] .pp-arm-r { animation: sh-arm-swing 0.6s ease-in-out -0.3s infinite alternate; }
.mascot-walker.is-motion[data-act="sh-jerusalema"] .pp-leg-l { animation: mo-step 0.6s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-jerusalema"] .pp-leg-r { animation: mo-step 0.6s ease-in-out -0.3s infinite; }
.mascot-walker.is-motion[data-act="sh-cat"] .pp-float { animation: sh-pounce 1s cubic-bezier(0.3, 0, 0.3, 1) infinite; }
.mascot-walker.is-motion[data-act="sh-cat"] .pp-arm-r { animation: none; rotate: 32deg; }
.mascot-walker.is-motion[data-act="sh-cat"] .pp-arm-l { animation: none; rotate: -36deg; }
.mascot-walker.is-motion[data-act="sh-gwara"] .pp-leg-r { animation: sh-gwara-leg 0.9s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-gwara"] .pp-float { animation: sh-sway 0.9s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-gwara"] .pp-arm-l { animation: sh-arm-swing 0.9s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-gwara"] .pp-arm-r { animation: sh-arm-swing 0.9s ease-in-out -0.45s infinite; }
.mascot-walker.is-motion[data-act="sh-water"] .pp-float { animation: sh-body-wave 0.8s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-water"] .pp-arm-l { animation: sh-arm-wave 0.8s ease-in-out infinite alternate; rotate: 52deg; }
.mascot-walker.is-motion[data-act="sh-water"] .pp-arm-r { animation: sh-arm-wave 0.8s ease-in-out -0.4s infinite alternate; rotate: -70deg; }
.mascot-walker.is-motion[data-act="sh-pantsula"] .pp-leg-l { animation: sh-kick-up 0.3s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-pantsula"] .pp-leg-r { animation: sh-kick-up 0.3s ease-in-out -0.15s infinite; }
.mascot-walker.is-motion[data-act="sh-pantsula"] .pp-float { animation: sh-bounce 0.3s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-pantsula"] .pp-arm-l { animation: ma-pump-l 0.6s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-pantsula"] .pp-arm-r { animation: ma-pump-r 0.6s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-gumboot"] .pp-float { animation: sh-stomp 0.45s ease-in infinite; }
.mascot-walker.is-motion[data-act="sh-gumboot"] .pp-leg-l { animation: sh-kick-up 0.9s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-gumboot"] .pp-leg-r { animation: sh-kick-up 0.9s ease-in-out -0.45s infinite; }
.mascot-walker.is-motion[data-act="sh-gumboot"] .pp-arm-l { animation: sh-slap-l 0.45s ease-in infinite; }
.mascot-walker.is-motion[data-act="sh-gumboot"] .pp-arm-r { animation: sh-slap-r 0.45s ease-in infinite; }
.mascot-walker[data-act="sh-jerusalema"] .m-eyes,
.mascot-walker[data-act="sh-gwara"] .m-eyes,
.mascot-walker[data-act="sh-water"] .m-eyes,
.mascot-walker[data-act="sh-gumboot"] .m-eyes,
.mascot-walker[data-act="sh-shuffle"] .m-eyes,
.mascot-walker[data-act="sh-trophy"] .m-eyes,
.mascot-walker[data-act="sh-trophy-arms"] .m-eyes,
.mascot-walker[data-act="sh-huddle"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="sh-jerusalema"] .m-eyes-happy,
.mascot-walker[data-act="sh-gwara"] .m-eyes-happy,
.mascot-walker[data-act="sh-water"] .m-eyes-happy,
.mascot-walker[data-act="sh-gumboot"] .m-eyes-happy,
.mascot-walker[data-act="sh-shuffle"] .m-eyes-happy,
.mascot-walker[data-act="sh-trophy"] .m-eyes-happy,
.mascot-walker[data-act="sh-trophy-arms"] .m-eyes-happy,
.mascot-walker[data-act="sh-huddle"] .m-eyes-happy { opacity: 1; }

/* Openers and closers: the bow to the audience; the taxi hand sign (a finger up for town) */
.mascot-walker.is-motion[data-act="sh-bow"] .pp-float { transform-origin: 250px 362px; animation: sh-bow 1.7s ease-in-out; }
.mascot-walker.is-motion[data-act="sh-bow"] .pp-arm-l { animation: none; rotate: -40deg; }
.mascot-walker.is-motion[data-act="sh-bow"] .pp-arm-r { animation: none; rotate: 50deg; }
.mascot-walker[data-act="sh-bow"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="sh-bow"] .m-eyes-happy { opacity: 1; }
.mascot-walker.is-motion[data-act="sh-signal"] .pp-arm-r { animation: sh-jiggle 0.5s ease-in-out infinite alternate; rotate: -104deg; }
.mascot-walker[data-act="sh-signal"] .m-gaze { transform: translate(-4px, -1px) !important; }

/* The cameos: waddling with the penguin, scanning for animals, shadow puppets, ears covered, shooing */
.mascot-walker.is-motion[data-act="sh-waddle"] .pp-float { animation: sh-waddle 0.36s ease-in-out infinite alternate; }
.mascot-walker.is-motion[data-act="sh-waddle"] .pp-arm-l { animation: none; rotate: -42deg; }
.mascot-walker.is-motion[data-act="sh-waddle"] .pp-arm-r { animation: none; rotate: 42deg; }
.mascot-walker.is-motion[data-act="sh-scan"] .pp-float { animation: ma-scan-body 3s ease-in-out infinite; }
.mascot-walker.is-motion[data-act="sh-puppet"] .pp-arm-l { animation: sh-arm-wave 0.4s ease-in-out infinite alternate; rotate: 48deg; }
.mascot-walker.is-motion[data-act="sh-puppet"] .pp-arm-r { animation: none; rotate: -30deg; }
.mascot-walker.is-motion[data-act="sh-ears"] .pp-arm-l { animation: none; rotate: 62deg; transition-duration: 0.15s; }
.mascot-walker.is-motion[data-act="sh-ears"] .pp-arm-r { animation: none; rotate: -80deg; transition-duration: 0.15s; }
.mascot-walker.is-motion[data-act="sh-ears"] .pp-float { animation: sh-shiver 0.12s linear infinite alternate; }
.mascot-walker.is-motion[data-act="sh-shoo"] .pp-arm-r { animation: sh-fan 0.2s ease-in-out infinite alternate; rotate: -40deg; }
.mascot-walker.is-motion[data-act="sh-shoo"] .pp-float { rotate: 6deg; }

/* The garden (WSMConnect): digging with the trowel, pouring the can, sowing from the packet (all in the resting hand,
   in front), and leaning in to smell the flower */
.mascot-walker.is-motion[data-act="sh-dig"] .pp-arm-r { animation: sh-dig 0.45s ease-in-out infinite; rotate: 48deg; }
.mascot-walker.is-motion[data-act="sh-dig"] .pp-float { rotate: 6deg; }
.mascot-walker.is-motion[data-act="sh-pour"] .pp-arm-r { animation: sh-pour 1.2s ease-in-out infinite alternate; rotate: 8deg; }
.mascot-walker.is-motion[data-act="sh-sow"] .pp-arm-r { animation: sh-jiggle 0.16s ease-in-out infinite alternate; rotate: 26deg; }
.mascot-walker[data-act="sh-dig"] .m-gaze,
.mascot-walker[data-act="sh-pour"] .m-gaze,
.mascot-walker[data-act="sh-sow"] .m-gaze { transform: translate(4px, 5px) !important; }
.mascot-walker.is-motion[data-act="sh-sniff"] .pp-float { animation: sh-sniff 1.6s ease-in-out; }
.mascot-walker[data-act="sh-sniff"] .m-eyes { opacity: 0; }
.mascot-walker[data-act="sh-sniff"] .pp-eyes-closed { opacity: 1; }
.mascot-walker[data-act="sh-sniff"] .m-blush { opacity: 1 !important; }

@keyframes sh-in { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes sh-net { 0%, 100% { transform: none; } 30% { transform: scale(1.12, 1.04) translateX(4px); } 60% { transform: scale(0.96, 1); } }
@keyframes sh-wobble { 0%, 100% { translate: 0 0; } 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -1px 0; } }
@keyframes sh-tape { 0% { transform: none; } 100% { transform: scaleX(0.1) translateY(14px); opacity: 0; } }
@keyframes sh-bails { 0% { transform: none; } 100% { transform: translate(18px, -40px) rotate(220deg); opacity: 0; } }
@keyframes sh-stumps { 0%, 100% { transform: none; } 30% { transform: rotate(10deg); } 60% { transform: rotate(-4deg); } }
@keyframes sh-swish { 0%, 100% { transform: none; } 40% { transform: scaleY(1.3) skewX(6deg); } }
@keyframes sh-flame { from { transform: scale(0.92, 0.95); } to { transform: scale(1.06, 1.1); } }
@keyframes sh-bubble { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes sh-spin { to { transform: rotate(360deg); } }
/* Keyframes on a set piece's own svg use the separate translate/rotate/scale properties, so its mirror (.is-flip) holds */
@keyframes sh-rumble { from { translate: 0 0; } to { translate: 0 -1.5px; } }
@keyframes sh-hills { from { transform: translateX(0); } to { transform: translateX(-400px); } }
@keyframes sh-foam { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes sh-swell { from { scale: 1 1; } to { scale: 1 1.06; } }
@keyframes sh-flag { from { transform: scaleX(1); } to { transform: scaleX(0.82) skewY(4deg); } }
@keyframes sh-dial { from { transform: rotate(-20deg); } to { transform: rotate(30deg); } }
@keyframes sh-flapy { from { transform: scaleY(1); } to { transform: scaleY(-0.6); } }
@keyframes sh-flap { from { transform: rotate(-35deg); } to { transform: rotate(25deg); } }
@keyframes sh-call { from { transform: rotate(0deg); } to { transform: rotate(-18deg); } }
@keyframes sh-bob { from { translate: 0 0; } to { translate: 0 -3px; } }
@keyframes sh-sneak { from { translate: 0 0; rotate: -2deg; } to { translate: 0 1px; rotate: 2deg; } }
@keyframes sh-gallop { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes sh-tail { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes sh-waddle { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes sh-flipper { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes sh-glow { from { opacity: 0.7; } to { opacity: 1; } }
@keyframes sh-burst { 0% { transform: rotate(var(--a)) translateY(0) scale(0.6); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-72px) rotate(260deg) scale(1); opacity: 0; } }
@keyframes sh-drop { 0% { transform: rotate(var(--a)) translateY(0); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(-34px) translateX(6px); opacity: 0; } }
@keyframes sh-smoke { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(8px, -56px) scale(1.8); opacity: 0; } }
@keyframes sh-dust { 0% { transform: translate(0, 0) scale(0.4); opacity: 0.7; } 100% { transform: translate(var(--dx), -10px) scale(1.5); opacity: 0; } }
@keyframes sh-steam { 0% { transform: translateY(8px) scaleY(0.6); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-14px) scaleY(1.1); opacity: 0; } }
@keyframes sh-note { 0% { transform: translate(-4px, 10px) scale(0.5) rotate(-10deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(10px, -36px) scale(1) rotate(10deg); opacity: 0; } }
@keyframes sh-vuvu { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes sh-breath { 0% { transform: scaleX(0.2); opacity: 1; } 60% { transform: scaleX(1.2); opacity: 1; } 100% { transform: scaleX(1.4); opacity: 0; } }
@keyframes sh-sparkle { 0% { transform: scale(0.2) rotate(0deg); opacity: 0; } 40% { transform: scale(1.1) rotate(45deg); opacity: 1; } 100% { transform: scale(0.6) rotate(90deg); opacity: 0; } }
@keyframes sh-boom { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes sh-legend { 0% { transform: translate(-50%, -60%) scale(0.5); opacity: 0; } 15% { transform: translate(-50%, -100%) scale(1.1); opacity: 1; } 80% { transform: translate(-50%, -110%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -130%) scale(1); opacity: 0; } }
@keyframes sh-shout { 0% { transform: translate(-50%, -60%) scale(0.4); opacity: 0; } 18% { transform: translate(-50%, -100%) scale(1.15); opacity: 1; } 75% { transform: translate(-50%, -120%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -150%) scale(0.95); opacity: 0; } }

@keyframes sh-kick-up { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(-52deg); } }
@keyframes sh-header { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(4px) rotate(0deg); } 55% { transform: translateY(-16px) rotate(-7deg); } 75% { transform: translateY(0) rotate(2deg); } }
@keyframes sh-flick { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(55deg); } 55% { transform: rotate(-30deg); } }
@keyframes sh-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 20% { transform: translateY(3px) scale(1.05, 0.94); } 50% { transform: translateY(-14px) scale(0.97, 1.04); } }
@keyframes sh-kick { 0% { transform: rotate(0deg); } 35% { transform: rotate(32deg); } 60% { transform: rotate(-62deg); } 100% { transform: rotate(0deg); } }
@keyframes sh-lean { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-6deg); } 60% { transform: rotate(7deg); } }
@keyframes sh-throw-l { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(70deg); } 60% { transform: rotate(20deg); } }
@keyframes sh-throw-r { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-95deg); } 60% { transform: rotate(-40deg); } }
@keyframes sh-jink { 0%, 100% { transform: translateX(0) rotate(0deg); } 40% { transform: translateX(-12px) rotate(-12deg); } }
@keyframes sh-jink-r { 0%, 100% { transform: translateX(0) rotate(0deg); } 40% { transform: translateX(12px) rotate(12deg); } }
@keyframes sh-dive {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -26px) rotate(30deg); }
    55% { transform: translate(40px, 0) rotate(72deg); }
    65% { transform: translate(46px, 6px) rotate(80deg); }
    100% { transform: translate(52px, 4px) rotate(78deg); }
}
@keyframes sh-siuu {
    0% { transform: translateY(0) scale(1, 1); }
    15% { transform: translateY(5px) scale(1.08, 0.9); }
    32% { transform: translateY(-64px) scale(0.2, 1.06); }
    44% { transform: translateY(-70px) scale(-1, 1.04); }
    56% { transform: translateY(-40px) scale(0.2, 1.02); }
    66% { transform: translateY(6px) scale(1.12, 0.86); }
    80%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes sh-siuu-l { 0%, 15% { transform: rotate(0deg); } 35% { transform: rotate(60deg); } 66%, 100% { transform: rotate(-38deg); } }
@keyframes sh-siuu-r { 0%, 15% { transform: rotate(0deg); } 35% { transform: rotate(-80deg); } 66%, 100% { transform: rotate(40deg); } }
@keyframes sh-siuu-leg-l { 0%, 60% { transform: rotate(0deg); } 66%, 100% { transform: rotate(16deg); } }
@keyframes sh-siuu-leg-r { 0%, 60% { transform: rotate(0deg); } 66%, 100% { transform: rotate(-16deg); } }
@keyframes sh-shuffle { 0%, 100% { transform: translate(-8px, 0) rotate(-3deg); } 50% { transform: translate(8px, -5px) rotate(3deg); } }
@keyframes sh-kneeslide { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(10px, 26px) rotate(-8deg); } 100% { transform: translate(60px, 26px) rotate(-12deg); } }
@keyframes sh-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sh-flex-l { from { transform: rotate(0deg); } to { transform: rotate(10deg); } }
@keyframes sh-flex-r { from { transform: rotate(0deg); } to { transform: rotate(-10deg); } }
@keyframes sh-blow { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(-6deg) translateY(-3px); } }
@keyframes sh-swing { 0% { transform: rotate(-30deg); } 45% { transform: rotate(80deg); } 100% { transform: rotate(60deg); } }
@keyframes sh-twist { 0%, 100% { transform: rotate(0deg); } 45% { transform: rotate(8deg); } }
@keyframes sh-windmill { 0% { transform: rotate(0deg); } 70% { transform: rotate(-330deg); } 100% { transform: rotate(-360deg); } }
@keyframes sh-shoot-l { 0% { transform: rotate(-10deg); } 40% { transform: rotate(0deg); } 70%, 100% { transform: rotate(20deg); } }
@keyframes sh-shoot-r { 0% { transform: rotate(10deg); } 40% { transform: rotate(0deg); } 70%, 100% { transform: rotate(-20deg); } }
@keyframes sh-balance { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes sh-arm-wave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes sh-bunnyhop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-36px) rotate(-6deg); } }
@keyframes sh-putt { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-12deg); } 65% { transform: rotate(14deg); } }
@keyframes sh-flip { 0%, 100% { transform: rotate(0deg); } 35% { transform: rotate(-46deg); } 60% { transform: rotate(14deg); } }
@keyframes sh-fan { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes sh-stir { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(3px, 2px) rotate(-8deg); } 50% { transform: translate(0, 4px) rotate(0deg); } 75% { transform: translate(-3px, 2px) rotate(8deg); } }
@keyframes sh-hot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sh-jiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes sh-crank { 0% { transform: rotate(0deg); } 25% { transform: rotate(-30deg) translateY(-4px); } 50% { transform: rotate(0deg) translateY(-6px); } 75% { transform: rotate(28deg) translateY(-2px); } 100% { transform: rotate(0deg); } }
@keyframes sh-lean-loop { from { transform: rotate(-2deg); } to { transform: rotate(4deg); } }
@keyframes sh-point { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
@keyframes sh-tilt { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes sh-dunk { 0%, 100% { transform: rotate(0deg); } 35%, 70% { transform: rotate(60deg); } 55% { transform: rotate(66deg); } }
@keyframes sh-linestep {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -5px) rotate(4deg); }
    50% { transform: translate(0, 0) rotate(0deg); }
    75% { transform: translate(-10px, -5px) rotate(-4deg); }
}
@keyframes sh-arm-swing { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes sh-pounce {
    0%, 100% { transform: translate(0, 0) scale(1, 1) rotate(0deg); }
    35% { transform: translate(0, 12px) scale(1.06, 0.9) rotate(0deg); }
    55% { transform: translate(14px, -10px) scale(0.96, 1.05) rotate(7deg); }
    75% { transform: translate(6px, 4px) scale(1.03, 0.96) rotate(2deg); }
}
@keyframes sh-gwara-leg { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-48deg); } 70% { transform: rotate(-20deg); } }
@keyframes sh-sway { 0%, 100% { transform: rotate(-5deg) translateX(-4px); } 50% { transform: rotate(5deg) translateX(4px); } }
@keyframes sh-body-wave { 0%, 100% { transform: rotate(0deg) translateY(0) scale(1, 1); } 25% { transform: rotate(5deg) translateY(-4px) scale(0.98, 1.03); } 50% { transform: rotate(0deg) translateY(2px) scale(1.03, 0.97); } 75% { transform: rotate(-5deg) translateY(-4px) scale(0.98, 1.03); } }
@keyframes sh-stomp { 0%, 100% { transform: translateY(0) scale(1, 1); } 60% { transform: translateY(-8px) scale(0.98, 1.03); } 85% { transform: translateY(3px) scale(1.06, 0.93); } }
@keyframes sh-slap-l { 0%, 100% { transform: rotate(0deg); } 80% { transform: rotate(-48deg); } }
@keyframes sh-slap-r { 0%, 100% { transform: rotate(0deg); } 80% { transform: rotate(48deg); } }
@keyframes sh-shiver { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px); } }
@keyframes sh-bow { 0%, 100% { transform: rotate(0deg) translateY(0); } 35%, 70% { transform: rotate(14deg) translateY(6px); } }
@keyframes sh-dig { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(16deg); } }
@keyframes sh-pour { from { transform: rotate(-4deg); } to { transform: rotate(14deg); } }
@keyframes sh-sniff { 0%, 100% { transform: rotate(0deg) translateY(0); } 30%, 75% { transform: rotate(7deg) translateY(3px) scale(1.02, 0.99); } }
@keyframes sh-breeze { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes sh-rainfall { from { transform: translateY(-6px); } to { transform: translateY(10px); } }
@keyframes sh-rainbow { from { scale: 0.3 0; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes sh-popup { 0% { transform: scale(0.6, 0.12); } 70% { transform: scale(1.04, 1.08); } 100% { transform: scale(1, 1); } }
@keyframes sh-rainfx { 0% { transform: translateY(-14px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes sh-bolt { 0%, 25% { opacity: 1; } 30%, 40% { opacity: 0; } 45%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sh-flash { 0% { opacity: 0; } 10% { opacity: 1; } 30% { opacity: 0.15; } 45% { opacity: 0.9; } 100% { opacity: 0; } }

/* ---- Pixel's arcade shows (CrossLobby) ---- */
.sh-chest.is-hit,
.sh-boss.is-hit { animation: sh-wobble 0.5s ease-out; }
.sh-chest .sh-lid { transform-origin: 10% 100%; transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.sh-chest.is-open .sh-lid { transform: rotate(-38deg) translateY(-4px); }
.sh-chest.is-gold .sh-lid path:first-child { fill: #fbbf24; }
.sh-chest.is-gold .sh-loot-glow { opacity: 1; transform-origin: 50% 100%; animation: sh-flame 0.4s ease-in-out infinite alternate; }
.sh-boss .sh-boss { transform-origin: 50% 100%; animation: sh-boss 0.9s steps(2) infinite; }
.sh-boss.is-down .sh-boss { animation: none; opacity: 0.6; }
.sh-glitchling .sh-glitch { animation: sh-glitch 0.18s steps(2) infinite; }
.sh-monitor .sh-screen rect { transform-origin: 50% 100%; animation: sh-eq 0.5s ease-in-out infinite alternate; }
.sh-monitor .sh-screen rect:nth-child(2) { animation-delay: -0.15s; }
.sh-monitor .sh-screen rect:nth-child(3) { animation-delay: -0.3s; }
/* The glitch reaches Pixel's own screen: its face jitters and splits */
.mascot-walker.is-glitching .pp-face { animation: sh-glitch 0.16s steps(2) infinite; }
@keyframes sh-boss { 0% { transform: scale(1, 1); } 100% { transform: scale(1.04, 0.96); } }
@keyframes sh-glitch { 0% { transform: translate(0, 0); filter: none; } 50% { transform: translate(3px, -1px); filter: hue-rotate(90deg); } 100% { transform: translate(-2px, 1px); } }
@keyframes sh-eq { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }

/* Reduced motion: still scenes only (the script never stages a moving show); nothing here moves */
@media (prefers-reduced-motion: reduce) {
    .mascot-walker.is-glitching .pp-face { animation: none !important; }
    .sh-el,
    .sh-el *,
    .sh-fx,
    .sh-fx *,
    .sh-shout,
    .sh-night { animation: none !important; transition: none !important; }
    .sh-fx i,
    .sh-fx b { display: none; }
}