/* ============================================================
   Trailhead — Mascot motion
   Namespaced m-* so it never collides with theme.css.
   Load after theme.css. Toggle the classes on svg.mascot with
   mascot.js. No class = the static, normal pose. Nothing
   animates on its own unless you ask for it.
   ============================================================ */

.mascot{overflow:visible;transform-box:fill-box;transform-origin:bottom center}

/* Part hooks — keep every transform local to the part it animates. */
.mascot .m-eye,.mascot .m-head,.mascot .m-sprout,.mascot .m-glow,.mascot .m-tail,
.mascot .m-ear,.mascot .m-wing,.mascot .m-scarf,.mascot .m-cap,.mascot .m-spot,
.mascot .m-compass,.mascot .m-antenna,.mascot .m-tuft,.mascot .m-crest,.mascot .m-acorn,
.mascot .m-spout,.mascot .m-note,.mascot .m-pupil,.mascot .m-spark{
  transform-box:fill-box;transform-origin:center
}
.mascot .m-arm{transform-box:fill-box;transform-origin:top center}
.mascot .m-lean,.mascot .m-figure{transform-box:fill-box;transform-origin:bottom center}
.mascot .m-spark{display:none}

/* ---- Universal moves (whole character) ---- */
.mascot.is-pop .m-figure{animation:m-pop .35s cubic-bezier(.34,1.5,.64,1)}
.mascot.is-hop .m-figure{animation:m-hop .52s cubic-bezier(.34,1.4,.64,1)}
.mascot.is-wiggle .m-figure{animation:m-wiggle .5s ease}
.mascot.is-shake .m-figure{animation:m-shake .4s ease}
.mascot.is-cheer .m-figure{animation:m-cheer 2.6s ease}
.mascot.is-idle .m-figure{animation:m-idle 2.4s ease-in-out infinite}

/* ---- Eyes + idle look/lean (all inside the figure, so they never trail) ---- */
.mascot.is-blink .m-eye{animation:m-blink .18s ease}
.mascot.is-idle .m-eye{animation:m-blink-loop 6.5s ease-in-out infinite}
.mascot.is-idle .m-pupil{animation:m-look 24s ease-in-out infinite}
.mascot.is-idle .m-lean{animation:m-lean 24s ease-in-out infinite}

/* ---- Cheer: arms up + restrained flecks ---- */
.mascot.is-cheer .m-arm-l{animation:m-arm-l 2.6s ease}
.mascot.is-cheer .m-arm-r{animation:m-arm-r 2.6s ease}
.mascot.is-cheer .m-spark{display:block;animation:m-spark 1.1s ease .15s 2}

/* ---- Signatures (one per mascot, selected by data-sig) ---- */
.mascot.is-signature[data-sig="sprout-sway"] .m-sprout{animation:m-sway .6s ease}
.mascot.is-signature[data-sig="flicker"] .m-glow{animation:m-glow .7s ease}
.mascot.is-signature[data-sig="headbutt"] .m-figure{animation:m-headbutt .6s ease}
.mascot.is-signature[data-sig="twitch"] .m-tuft{animation:m-twitch .55s ease}
.mascot.is-signature[data-sig="wag"] .m-tail{animation:m-wag .6s ease}
.mascot.is-signature[data-sig="bear-bounce"] .m-figure{animation:m-bounce .55s ease}
.mascot.is-signature[data-sig="flap"] .m-wing{animation:m-flap .5s ease}
.mascot.is-signature[data-sig="flap"] .m-note{animation:m-float .7s ease}
.mascot.is-signature[data-sig="nod"] .m-head{animation:m-nod .7s ease}
.mascot.is-signature[data-sig="spin"] .m-compass{animation:m-spin .8s ease}
.mascot.is-signature[data-sig="float"] .m-figure{animation:m-float .9s ease}
.mascot.is-signature[data-sig="ear-flop"] .m-ear{animation:m-flop .6s ease}
.mascot.is-signature[data-sig="bristle"] .m-spike{animation:m-bristle .6s ease}
.mascot.is-signature[data-sig="tail-flick"] .m-tail{animation:m-flick .6s ease}
.mascot.is-signature[data-sig="tail-flick"] .m-acorn{animation:m-bounce .6s ease}
.mascot.is-signature[data-sig="waddle"] .m-figure{animation:m-waddle .7s ease}
.mascot.is-signature[data-sig="spout"] .m-spout{animation:m-spout .7s ease}
.mascot.is-signature[data-sig="flutter"] .m-wing{animation:m-flap .32s ease 2}
.mascot.is-signature[data-sig="flutter"] .m-figure{animation:m-hover 1s ease}
.mascot.is-signature[data-sig="leap"] .m-figure{animation:m-leap .7s cubic-bezier(.34,1.4,.64,1)}
.mascot.is-signature[data-sig="curl"] .m-tail{animation:m-curl .6s ease}
.mascot.is-signature[data-sig="cap-bounce"] .m-cap{animation:m-bounce .5s ease}
.mascot.is-signature[data-sig="pulse"] .m-glow{animation:m-pulse .8s ease}
.mascot.is-signature[data-sig="pulse"] .m-wing{animation:m-flap .45s ease 2}

/* ---- Keyframes ---- */
@keyframes m-pop{0%{transform:scale(.86);opacity:.4}100%{transform:scale(1);opacity:1}}
@keyframes m-hop{0%,100%{transform:translateY(0) scaleY(1)}18%{transform:translateY(2px) scaleY(.92)}55%{transform:translateY(-14px) scaleY(1.04)}82%{transform:translateY(0) scaleY(.96)}}
@keyframes m-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}65%{transform:rotate(3deg)}}
@keyframes m-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes m-cheer{0%{transform:translateY(0)}18%{transform:translateY(-16px) scaleY(1.03)}38%{transform:translateY(0)}58%{transform:translateY(-9px)}78%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes m-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes m-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
@keyframes m-blink-loop{0%,91%,95%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}}
@keyframes m-look{0%,30%{transform:translate(0,0)}35%{transform:translate(2px,0)}40%,80%{transform:translate(0,0)}85%{transform:translate(-2px,0)}90%,100%{transform:translate(0,0)}}
@keyframes m-lean{0%,30%{transform:rotate(0)}35%{transform:rotate(.5deg)}40%,80%{transform:rotate(0)}85%{transform:rotate(-.5deg)}90%,100%{transform:rotate(0)}}
@keyframes m-spark{0%{opacity:0;transform:translateY(6px) scale(.85)}30%{opacity:1}100%{opacity:0;transform:translateY(-18px) scale(1.05)}}
@keyframes m-arm-l{0%,100%{transform:rotate(0)}20%{transform:rotate(-20deg)}55%{transform:rotate(-26deg)}80%{transform:rotate(0)}}
@keyframes m-arm-r{0%,100%{transform:rotate(0)}20%{transform:rotate(20deg)}55%{transform:rotate(26deg)}80%{transform:rotate(0)}}
@keyframes m-sway{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}}
@keyframes m-glow{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
@keyframes m-headbutt{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-6px) rotate(-3deg)}70%{transform:translateY(2px) rotate(2deg)}}
@keyframes m-twitch{0%,100%{transform:rotate(0)}40%{transform:rotate(-11deg)}72%{transform:rotate(7deg)}}
@keyframes m-wag{0%,100%{transform:rotate(0)}25%{transform:rotate(13deg)}75%{transform:rotate(-13deg)}}
@keyframes m-bounce{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-5px) scaleY(1.04)}72%{transform:translateY(0) scaleY(.96)}}
@keyframes m-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-17deg)}}
@keyframes m-float{0%{transform:translateY(0)}40%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@keyframes m-nod{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes m-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes m-flop{0%,100%{transform:rotate(0)}50%{transform:rotate(19deg)}}
@keyframes m-bristle{0%,100%{transform:scale(1)}50%{transform:scale(1.06) translateY(-2px)}}
@keyframes m-flick{0%,100%{transform:rotate(0)}30%{transform:rotate(-15deg)}65%{transform:rotate(9deg)}}
@keyframes m-waddle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes m-spout{0%,100%{transform:translateY(0) scaleY(1)}40%{transform:translateY(-6px) scaleY(1.08)}}
@keyframes m-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes m-leap{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-18px) scaleY(1.06)}62%{transform:translateY(0) scaleY(.94)}}
@keyframes m-curl{0%,100%{transform:rotate(0)}50%{transform:rotate(-17deg)}}
@keyframes m-pop-spot{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes m-pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.09)}}

/* ---- Respect the reader and the gallery Motion switch ---- */
@media (prefers-reduced-motion:reduce){
  .mascot,.mascot *{animation:none !important}
}
.motion-off .mascot,.motion-off .mascot *{animation:none !important}