/* =====================================================================
   Mascot puppet (AvatarRenderer.RenderPuppet): today's idle motion on
   the avatar layers. Limb pivots come from the brand's rig as custom
   properties on the svg. Moods (watch, shy, peek, happy, oops) are the
   .mascot-host rules in gsap-auth.css, which target the same m-* parts.
   Only transform and opacity animate.
   ===================================================================== */

.mascot-puppet { overflow: visible; cursor: pointer; user-select: none; -webkit-user-select: none; }

.mascot-puppet .pp-float { transform-origin: 250px 340px; animation: pp-float 4.4s ease-in-out infinite; }
.mascot-puppet .pp-shadow { transform-origin: 250px 390px; animation: pp-shadow 4.4s ease-in-out infinite; }
/* Face files are drawn in the cup's coordinates (the leaf's are refitted), so the eyes blink about y 248 */
.mascot-puppet .m-eyes { transform-origin: 250px 248px; animation: pp-blink 4.6s infinite; }
.mascot-puppet .pp-arm-l { transform-origin: var(--pp-shoulder-l); animation: pp-wave 9s ease-in-out 1s infinite; }
.mascot-puppet .pp-arm-r { transform-origin: var(--pp-shoulder-r); animation: pp-idle-arm 7s ease-in-out infinite; }
.mascot-puppet .pp-leg-l { transform-origin: var(--pp-hip-l); }
.mascot-puppet .pp-leg-r { transform-origin: var(--pp-hip-r); }
.mascot-puppet .pp-blush-off { opacity: 0; }

.mascot-puppet:hover .pp-float { animation: pp-hover 1.4s ease-in-out infinite; }
.mascot-puppet:hover .pp-arm-l { animation: pp-wave-fast 0.55s ease-in-out infinite; }
.mascot-puppet:active .pp-float { transform: scale(1.05, 0.95) translateY(3px); animation: none; }

/* Landing mascots follow the site theme as today's mascot does (gsap-auth.css theme hooks).
   A hook the theme doesn't set falls back to the look's own colour. */
.mascot-puppet.pp-themed {
    --av-sleeve: var(--mascot-sleeve);
    --av-sleeve-shade: var(--mascot-sleeve-shade);
    --av-trim: var(--mascot-trim);
    --av-shoe: var(--mascot-shoe);
    --av-leaf: var(--mascot-leaf);
    --av-leaf-shade: var(--mascot-stem);
    /* CrossLobby's Pixel: its grips take the sleeve hook, its screen the glow hook (crosslobby-theme.css) */
    --av-grip: var(--mascot-sleeve);
    --av-grip-shade: var(--mascot-sleeve-shade);
    --av-glow: var(--mascot-glow);
}

/* Premium art (Premium Mascot Plan phase B): the rim light takes the theme's accent where the page sets one */
.mascot-puppet.pp-premium { --pp-rim: var(--mascot-trim, #ffd28a); }

@keyframes pp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pp-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.85); opacity: 0.6; } }
@keyframes pp-blink { 0%, 88%, 93%, 97%, 100% { transform: scaleY(1); } 90%, 95% { transform: scaleY(0.08); } }
@keyframes pp-wave { 0%, 22%, 100% { transform: rotate(0deg); } 4% { transform: rotate(-28deg); } 9% { transform: rotate(14deg); } 14% { transform: rotate(-20deg); } 18% { transform: rotate(6deg); } }
@keyframes pp-idle-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(4deg); } }
@keyframes pp-hover { 0%, 100% { transform: translateY(-6px) scale(1.02); } 50% { transform: translateY(-12px) scale(1.02); } }
@keyframes pp-wave-fast { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(34deg); } }

@media (prefers-reduced-motion: reduce) {
    .mascot-puppet .pp-float,
    .mascot-puppet .pp-shadow,
    .mascot-puppet .pp-arm-l,
    .mascot-puppet .pp-arm-r { animation: none; }
}