/*
  CuratedPrep — login button doodle
  The character is injected into .login-button-stage and stands on the Open
  Library button. It keeps a gentle dance/wave loop from first paint.
*/

#cp-doodle{
  position:absolute;
  right:16px;
  bottom:48px;
  width:58px;
  height:70px;
  z-index:5;
  pointer-events:none;
  color:#12324a;
  transform-origin:50% 100%;
  will-change:transform;
  filter:drop-shadow(0 8px 10px rgba(18,50,74,.2));
}
#cp-doodle svg{width:100%;height:100%;overflow:visible}

/* Pivots are in the drawing's own coordinates (the viewBox): shoulders at
   11,27 and 43,27, hips at 22,41 and 32,41. transform-box must be view-box
   for that; with fill-box the browser measures each pivot from the limb's own
   small bounding box, so the arms swung round a point off the body and
   floated away from it. */
.dood{transform-box:view-box;transform-origin:27px 56px}
.dood .d-sweat,.dood .d-effort,.dood .d-stars{opacity:0;transition:opacity .15s;transform-box:fill-box;transform-origin:center}
.d-arm-l{transform-box:view-box;transform-origin:11px 27px}
.d-arm-r{transform-box:view-box;transform-origin:43px 27px}
.d-leg-l{transform-box:view-box;transform-origin:22px 41px}
.d-leg-r{transform-box:view-box;transform-origin:32px 41px}
.d-body{transform-box:view-box;transform-origin:27px 25px}

/* The "lift" target gets this class briefly while the doodle strains.
   Apply to an element that is NOT otherwise transformed (e.g. the login card). */
.cp-lift-wobble{animation:cpLiftWobble .13s ease-in-out 9 alternate}
@keyframes cpLiftWobble{from{transform:translateY(0) rotate(0)}to{transform:translateY(-2px) rotate(.25deg)}}

/* idle */
.dood.idle .d-body{animation:cpBreathe 2.6s ease-in-out infinite}
@keyframes cpBreathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1px) scaleY(1.03)}}

/* walk */
.dood.walk .d-body{animation:cpBob .3s ease-in-out infinite alternate}
.dood.walk .d-leg-l{animation:cpLegA .3s ease-in-out infinite alternate}
.dood.walk .d-leg-r{animation:cpLegB .3s ease-in-out infinite alternate}
.dood.walk .d-arm-l{animation:cpLegB .3s ease-in-out infinite alternate}
.dood.walk .d-arm-r{animation:cpLegA .3s ease-in-out infinite alternate}
@keyframes cpBob{from{transform:translateY(0)}to{transform:translateY(-2.4px)}}
@keyframes cpLegA{from{transform:rotate(22deg)}to{transform:rotate(-18deg)}}
@keyframes cpLegB{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}

/* wave */
.dood.wave .d-arm-r{animation:cpWave .5s ease-in-out infinite}
.dood.wave .d-body{animation:cpBreathe 2.6s ease-in-out infinite}
@keyframes cpWave{0%,100%{transform:rotate(-112deg)}50%{transform:rotate(-78deg)}}

/* look around */
.dood.look{animation:cpLook 1.7s ease-in-out}
@keyframes cpLook{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}60%{transform:rotate(9deg)}}

/* jump */
.dood.jump{animation:cpHop .85s cubic-bezier(.16,1,.3,1)}
@keyframes cpHop{0%{transform:translateY(0) scaleY(1)}18%{transform:translateY(2px) scaleY(.86)}45%{transform:translateY(-30px) scaleY(1.08)}70%{transform:translateY(0) scaleY(.92)}100%{transform:translateY(0) scaleY(1)}}

/* spin */
.dood.spin{transform-origin:27px 33px;animation:cpSpin .8s cubic-bezier(.16,1,.3,1)}
@keyframes cpSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* cheerful dance */
.dood.dance{animation:cpDanceBody .62s ease-in-out infinite alternate}
.dood.dance .d-body{animation:cpDanceFace .62s ease-in-out infinite alternate}
.dood.dance .d-arm-l{animation:cpDanceArmL .46s ease-in-out infinite alternate}
.dood.dance .d-arm-r{animation:cpDanceArmR .46s ease-in-out infinite alternate}
.dood.dance .d-leg-l{animation:cpDanceLegL .42s ease-in-out infinite alternate}
.dood.dance .d-leg-r{animation:cpDanceLegR .42s ease-in-out infinite alternate}
.dood.dance .d-stars{opacity:.75;animation:cpStars 1.8s linear infinite}
@keyframes cpDanceBody{from{transform:translateY(0) rotate(-5deg)}to{transform:translateY(-7px) rotate(5deg)}}
@keyframes cpDanceFace{from{transform:translateX(-1px) rotate(-3deg)}to{transform:translateX(1px) rotate(3deg)}}
@keyframes cpDanceArmL{from{transform:rotate(62deg)}to{transform:rotate(-20deg)}}
@keyframes cpDanceArmR{from{transform:rotate(-62deg)}to{transform:rotate(20deg)}}
@keyframes cpDanceLegL{from{transform:rotate(20deg)}to{transform:rotate(-22deg)}}
@keyframes cpDanceLegR{from{transform:rotate(-22deg)}to{transform:rotate(20deg)}}

/* small button-stage hop */
.dood.hop{animation:cpButtonHop .78s cubic-bezier(.16,1,.3,1)}
.dood.hop .d-arm-l{animation:cpDanceArmL .38s ease-in-out infinite alternate}
.dood.hop .d-arm-r{animation:cpWave .38s ease-in-out infinite alternate}
@keyframes cpButtonHop{
  0%,100%{transform:translateY(0) rotate(0)}
  20%{transform:translateY(2px) scaleY(.9)}
  52%{transform:translateY(-15px) rotate(5deg)}
  76%{transform:translateY(0) scaleY(.94)}
}

/* peek (lean) */
.dood.peek{transform:rotate(10deg)}

/* strain to lift */
.dood.strain{animation:cpShake .1s steps(2,end) infinite}
.dood.strain .d-body{transform:translateY(3px) scaleY(.9)}
.dood.strain .d-arm-l{transform:rotate(58deg)}
.dood.strain .d-arm-r{transform:rotate(-58deg)}
.dood.strain .d-leg-l{transform:rotate(14deg)}
.dood.strain .d-leg-r{transform:rotate(-14deg)}
.dood.strain .d-effort{opacity:1}
.dood.strain .d-sweat{opacity:1;animation:cpDrip 1s ease-in infinite}
@keyframes cpShake{from{transform:translateX(-1.4px)}to{transform:translateX(1.4px)}}
@keyframes cpDrip{0%{transform:translateY(0);opacity:.9}100%{transform:translateY(7px);opacity:0}}

/* flop backward (gives up) */
.dood.flop{animation:cpFlop 1.2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes cpFlop{0%{transform:rotate(0)}20%{transform:rotate(-10deg)}55%{transform:rotate(-74deg) translateY(4px)}100%{transform:rotate(-74deg) translateY(4px)}}

/* dizzy (stars) */
.dood.dizzy .d-stars{opacity:1;animation:cpStars 1.2s linear}
.dood.dizzy{animation:cpSway 1.2s ease-in-out}
@keyframes cpSway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes cpStars{from{transform:rotate(0)}to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  #cp-doodle .dood,#cp-doodle .dood *{animation:none!important}
}
@media (max-width:880px){
  #cp-doodle{
    right:12px;
    bottom:48px;
    width:50px;
    height:60px;
  }
}