/* Scholar Quest Companion Motion Engine v2
   Whole-character transforms + landmark-driven feature overlays.  Character packs
   choose semantic recipes; screens never choose species-specific animations. */
.companion-svg[data-motion-engine="2"]{
  transform-box:fill-box;
  transform-origin:50% 88%;
  will-change:transform;
  overflow:visible;
}
.companion-svg[data-motion-engine="2"] .companion-composition{
  transform-box:fill-box;
  transform-origin:50% 88%;
  animation:sqAmbientBreath var(--sq-breathe-duration,3.4s) ease-in-out infinite;
}
.companion-svg[data-motion-engine="2"][data-motion-busy="true"] .companion-composition{animation-play-state:paused}
.companion-svg[data-motion-engine="2"] .illustrated-base{animation:none!important}
[data-sq-motion-host="2"]{--sq-motion-energy:1;position:relative}

.companion-svg.sq-motion-breathe{animation:sqMotionBreathe 1.05s ease-in-out}
.companion-svg.sq-motion-curious_sway{animation:sqMotionCuriousSway 1.05s ease-in-out}
.companion-svg.sq-motion-micro_bounce{animation:sqMotionMicroBounce .76s cubic-bezier(.2,.82,.25,1)}
.companion-svg.sq-motion-curious_pop{animation:sqMotionCuriousPop .72s cubic-bezier(.18,.9,.2,1)}
.companion-svg.sq-motion-tilt_left{animation:sqMotionTiltLeft .76s ease-in-out}
.companion-svg.sq-motion-tilt_right{animation:sqMotionTiltRight .76s ease-in-out}
.companion-svg.sq-motion-soft_wave{animation:sqMotionSoftWave .98s ease-in-out}
.companion-svg.sq-motion-soft_nod{animation:sqMotionSoftNod .72s ease-in-out}
.companion-svg.sq-motion-weight_shift{animation:sqMotionWeightShift 1.05s ease-in-out}
.companion-svg.sq-motion-purposeful_lean{animation:sqMotionPurposefulLean .82s ease-in-out}
.companion-svg.sq-motion-small_hop{animation:sqMotionSmallHop .78s cubic-bezier(.2,.82,.25,1)}
.companion-svg.sq-motion-double_hop{animation:sqMotionDoubleHop 1.08s cubic-bezier(.2,.82,.25,1)}
.companion-svg.sq-motion-happy_rock{animation:sqMotionHappyRock .98s ease-in-out}
.companion-svg.sq-motion-notice_lean{animation:sqMotionNoticeLean .9s ease-in-out}
.companion-svg.sq-motion-proud_nod{animation:sqMotionProudNod .82s ease-in-out}
.companion-svg.sq-motion-notice_hop{animation:sqMotionNoticeHop .92s cubic-bezier(.2,.82,.25,1)}
.companion-svg.sq-motion-happy_wiggle{animation:sqMotionHappyWiggle .92s ease-in-out}
.companion-svg.sq-motion-discover_bounce{animation:sqMotionDiscoverBounce 1.05s cubic-bezier(.18,.9,.2,1)}
.companion-svg.sq-motion-peek_left{animation:sqMotionPeekLeft 1.05s cubic-bezier(.2,.75,.25,1)}
.companion-svg.sq-motion-peek_right{animation:sqMotionPeekRight 1.05s cubic-bezier(.2,.75,.25,1)}
.companion-svg.sq-motion-big_pop{animation:sqMotionBigPop .9s cubic-bezier(.16,.9,.22,1)}
.companion-svg.sq-motion-walk_bob{animation:sqMotionWalkBob 1.15s ease-in-out}
.companion-svg.sq-motion-inspect_bob{animation:sqMotionInspectBob 1s ease-in-out}
.companion-svg.sq-motion-present_lean{animation:sqMotionPresentLean .9s ease-in-out}
.companion-svg.sq-motion-celebrate_burst{animation:sqMotionCelebrateBurst 1.25s cubic-bezier(.16,.88,.22,1)}
.companion-svg.sq-motion-settle{animation:sqMotionSettle .78s ease-out}

@keyframes sqAmbientBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(calc(-1 * var(--sq-breathe-y,3px))) scale(var(--sq-breathe-scale,1.016))}}
@keyframes sqMotionBreathe{0%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(calc(-1.25 * var(--sq-breathe-y,3px))) scale(1.025,1.04)}}
@keyframes sqMotionCuriousSway{0%,100%{transform:rotate(0) translateY(0)}28%{transform:rotate(calc(-1 * var(--sq-tilt,5deg))) translateY(-4px)}62%{transform:rotate(calc(.7 * var(--sq-tilt,5deg))) translateY(-6px)}82%{transform:rotate(calc(-.25 * var(--sq-tilt,5deg))) translateY(-2px)}}
@keyframes sqMotionMicroBounce{0%,100%{transform:translateY(0) scale(1)}38%{transform:translateY(calc(-.62 * var(--sq-hop,15px))) scale(1.035,.985)}68%{transform:translateY(-2px) scale(.992,1.02)}}
@keyframes sqMotionCuriousPop{0%,100%{transform:translateY(0) scale(1)}34%{transform:translateY(calc(-.9 * var(--sq-hop,15px))) scale(1.055,.96)}62%{transform:translateY(-3px) scale(.985,1.035)}80%{transform:translateY(calc(-.2 * var(--sq-hop,15px)))}}
@keyframes sqMotionTiltLeft{0%,100%{transform:rotate(0)}42%{transform:rotate(calc(-1 * var(--sq-tilt,5deg))) translateY(-3px)}72%{transform:rotate(calc(-.25 * var(--sq-tilt,5deg)))}}
@keyframes sqMotionTiltRight{0%,100%{transform:rotate(0)}42%{transform:rotate(var(--sq-tilt,5deg)) translateY(-3px)}72%{transform:rotate(calc(.25 * var(--sq-tilt,5deg)))}}
@keyframes sqMotionSoftWave{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(calc(-.7 * var(--sq-tilt,5deg))) translateY(-4px)}43%{transform:rotate(calc(.8 * var(--sq-tilt,5deg))) translateY(-6px)}63%{transform:rotate(calc(-.55 * var(--sq-tilt,5deg))) translateY(-4px)}82%{transform:rotate(calc(.25 * var(--sq-tilt,5deg))) translateY(-2px)}}
@keyframes sqMotionSoftNod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(4px) rotate(1.5deg)}58%{transform:translateY(-4px) rotate(-1deg)}78%{transform:translateY(1px)}}
@keyframes sqMotionWeightShift{0%,100%{transform:translateX(0) rotate(0)}36%{transform:translateX(calc(-1 * var(--sq-shift,6px))) rotate(-1.8deg)}66%{transform:translateX(calc(.65 * var(--sq-shift,6px))) rotate(1.2deg)}84%{transform:translateX(calc(-.2 * var(--sq-shift,6px)))}}
@keyframes sqMotionPurposefulLean{0%,100%{transform:translateX(0) rotate(0)}38%{transform:translateX(var(--sq-shift,6px)) rotate(calc(.72 * var(--sq-tilt,5deg))) translateY(-3px)}70%{transform:translateX(calc(.3 * var(--sq-shift,6px))) rotate(1deg)}}
@keyframes sqMotionSmallHop{0%,100%{transform:translateY(0) scale(1)}34%{transform:translateY(calc(-1 * var(--sq-hop,15px))) scale(1.035,.97)}62%{transform:translateY(-3px) scale(.99,1.025)}78%{transform:translateY(calc(-.18 * var(--sq-hop,15px)))}}
@keyframes sqMotionDoubleHop{0%,100%{transform:translateY(0)}19%{transform:translateY(calc(-1 * var(--sq-hop,15px))) rotate(-2.2deg)}39%{transform:translateY(0)}57%{transform:translateY(calc(-.7 * var(--sq-hop,15px))) rotate(2deg)}78%{transform:translateY(-2px)}}
@keyframes sqMotionHappyRock{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(calc(-.7 * var(--sq-tilt,5deg))) translateY(-5px)}55%{transform:rotate(calc(.8 * var(--sq-tilt,5deg))) translateY(-5px)}76%{transform:rotate(calc(-.35 * var(--sq-tilt,5deg))) translateY(-2px)}}
@keyframes sqMotionNoticeLean{0%,100%{transform:translateX(0) rotate(0)}36%{transform:translateX(var(--sq-shift,6px)) rotate(calc(.65 * var(--sq-tilt,5deg))) translateY(-2px)}64%{transform:translateX(calc(.55 * var(--sq-shift,6px))) rotate(calc(.28 * var(--sq-tilt,5deg)))}80%{transform:translateX(calc(.15 * var(--sq-shift,6px)))}}
@keyframes sqMotionProudNod{0%,100%{transform:translateY(0) rotate(0) scale(1)}24%{transform:translateY(-5px) rotate(-2deg) scale(1.025)}48%{transform:translateY(2px) rotate(1.5deg) scale(1.015)}72%{transform:translateY(-3px) rotate(-.7deg)}}
@keyframes sqMotionNoticeHop{0%,100%{transform:translateY(0) translateX(0) rotate(0)}32%{transform:translateY(calc(-.85 * var(--sq-hop,15px))) translateX(calc(.5 * var(--sq-shift,6px))) rotate(3deg)}64%{transform:translateY(-3px) translateX(calc(.18 * var(--sq-shift,6px))) rotate(.8deg)}}
@keyframes sqMotionHappyWiggle{0%,100%{transform:rotate(0) translateY(0)}16%{transform:rotate(calc(-1 * var(--sq-tilt,5deg))) translateY(-3px)}36%{transform:rotate(var(--sq-tilt,5deg)) translateY(-5px)}57%{transform:rotate(calc(-.75 * var(--sq-tilt,5deg))) translateY(-4px)}76%{transform:rotate(calc(.4 * var(--sq-tilt,5deg))) translateY(-2px)}}
@keyframes sqMotionDiscoverBounce{0%,100%{transform:translateY(0) rotate(0) scale(1)}26%{transform:translateY(calc(-1.12 * var(--sq-hop,15px))) rotate(-3deg) scale(1.06,.96)}50%{transform:translateY(-4px) rotate(2.5deg) scale(.985,1.04)}69%{transform:translateY(calc(-.45 * var(--sq-hop,15px))) rotate(-1.2deg)}85%{transform:translateY(-1px)}}
@keyframes sqMotionPeekLeft{0%{transform:translateX(calc(-3 * var(--sq-shift,6px))) rotate(-5deg);opacity:.45}34%{transform:translateX(calc(.6 * var(--sq-shift,6px))) rotate(2deg);opacity:1}62%{transform:translateX(calc(-.25 * var(--sq-shift,6px))) rotate(-1deg)}100%{transform:translateX(0);opacity:1}}
@keyframes sqMotionPeekRight{0%{transform:translateX(calc(3 * var(--sq-shift,6px))) rotate(5deg);opacity:.45}34%{transform:translateX(calc(-.6 * var(--sq-shift,6px))) rotate(-2deg);opacity:1}62%{transform:translateX(calc(.25 * var(--sq-shift,6px))) rotate(1deg)}100%{transform:translateX(0);opacity:1}}
@keyframes sqMotionBigPop{0%,100%{transform:translateY(0) scale(1)}28%{transform:translateY(calc(-1.25 * var(--sq-hop,15px))) scale(1.08,.94)}52%{transform:translateY(-4px) scale(.97,1.055)}72%{transform:translateY(calc(-.35 * var(--sq-hop,15px))) scale(1.02,.99)}}
@keyframes sqMotionWalkBob{0%,100%{transform:translateX(0) translateY(0) rotate(0)}18%{transform:translateX(calc(.45 * var(--sq-shift,6px))) translateY(-6px) rotate(2deg)}38%{transform:translateX(var(--sq-shift,6px)) translateY(0) rotate(-1deg)}58%{transform:translateX(calc(.45 * var(--sq-shift,6px))) translateY(-6px) rotate(-2deg)}80%{transform:translateX(0) translateY(0) rotate(1deg)}}
@keyframes sqMotionInspectBob{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(3px) rotate(calc(.45 * var(--sq-tilt,5deg)))}58%{transform:translateY(-3px) rotate(calc(-.28 * var(--sq-tilt,5deg)))}80%{transform:translateY(1px)}}
@keyframes sqMotionPresentLean{0%,100%{transform:translateX(0) rotate(0)}32%{transform:translateX(var(--sq-shift,6px)) rotate(calc(.85 * var(--sq-tilt,5deg))) translateY(-5px)}60%{transform:translateX(calc(.35 * var(--sq-shift,6px))) rotate(calc(.28 * var(--sq-tilt,5deg))) translateY(-2px)}}
@keyframes sqMotionCelebrateBurst{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(calc(-1.2 * var(--sq-hop,15px))) rotate(-4deg) scale(1.08,.94)}40%{transform:translateY(-3px) rotate(4deg) scale(.97,1.05)}58%{transform:translateY(calc(-.8 * var(--sq-hop,15px))) rotate(-2.5deg) scale(1.04,.98)}78%{transform:translateY(-2px) rotate(1deg)}}
@keyframes sqMotionSettle{0%{transform:translateY(-5px) scale(1.025)}55%{transform:translateY(2px) scale(.99,1.02)}100%{transform:translateY(0) scale(1)}}

.sq-feature-overlay{pointer-events:none}
.sq-feature-overlay path,.sq-feature-overlay circle,.sq-feature-overlay ellipse{vector-effect:non-scaling-stroke}
.sq-overlay-blink{animation:sqOverlayBlink .2s ease-in-out both}
.sq-overlay-wave{animation:sqOverlayWave .72s ease-out both}
.sq-overlay-think{animation:sqOverlayThink .9s ease-in-out both}
.sq-overlay-proud,.sq-overlay-discover,.sq-overlay-point{animation:sqOverlayPop .78s ease-out both}
@keyframes sqOverlayBlink{0%,100%{opacity:0}12%,82%{opacity:1}}
@keyframes sqOverlayWave{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:translate(4px,-5px) scale(1.18)}}
@keyframes sqOverlayThink{0%{opacity:0;transform:translateY(4px)}28%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-4px)}}
@keyframes sqOverlayPop{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.22)}}

.sq-motion-fx{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible}
.sq-motion-fx i{position:absolute;font-style:normal;color:#F4C54F;text-shadow:0 2px 7px rgba(244,197,79,.28);animation:sqMotionFxPop 1s ease-out both}
.sq-motion-fx i:nth-child(1){left:12%;top:18%;font-size:20px}.sq-motion-fx i:nth-child(2){right:10%;top:8%;font-size:15px;animation-delay:.05s}.sq-motion-fx i:nth-child(3){right:16%;bottom:18%;font-size:13px;animation-delay:.11s}.sq-motion-fx i:nth-child(4){left:22%;bottom:12%;font-size:12px;animation-delay:.16s}
@keyframes sqMotionFxPop{0%{opacity:0;transform:scale(.25) rotate(-10deg)}28%{opacity:1;transform:scale(1.18) rotate(3deg)}100%{opacity:0;transform:translateY(-10px) scale(1.45) rotate(10deg)}}

@media(prefers-reduced-motion:reduce){
  .companion-svg[data-motion-engine="2"],.companion-svg[data-motion-engine="2"] *{animation:none!important;transition:none!important}
  .sq-motion-fx{display:none!important}
}
[data-reduce-motion="true"] .companion-svg[data-motion-engine="2"],
[data-reduce-motion="true"] .companion-svg[data-motion-engine="2"] *{animation:none!important;transition:none!important}
[data-reduce-motion="true"] .sq-motion-fx{display:none!important}
