/* Blu the BuenEd Bear -- pops up briefly at the bottom corners and the
   middle of the side edges as the visitor scrolls (never at the top).
   Reuses the peek artwork flipped/mirrored/rotated for each edge; the
   expressive poses (wink/wave/thumbs-up) only ever appear at the bottom
   corners, in their natural orientation. Eyes blink via two small overlay
   "eyelids" that scale in/out -- each pose has its own eye coordinates,
   since every pose is a separately cropped image. */
#blu-mascot{
  position:fixed;
  z-index:9500;
  pointer-events:none;
  width:104px;
  opacity:0;
  transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
  will-change:transform,opacity;
}
#blu-mascot .blu-art{position:relative;width:100%;line-height:0;transition:transform .1s linear}
#blu-mascot img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}

#blu-mascot .blu-eyelid{
  position:absolute;
  background:#8c5a30;
  border-radius:50%;
  transform:scaleY(0);
  transform-origin:center;
}
#blu-mascot.blu-blink .blu-eyelid{animation:blu-blink-anim .22s ease}

@keyframes blu-blink-anim{
  0%,100%{transform:scaleY(0)}
  45%,55%{transform:scaleY(1)}
}

/* Per-pose eye coordinates -- percentages measured against that pose's own
   cropped image, since every pose has different padding/composition. */
#blu-mascot.blu-pose-peek .blu-eyelid.left{left:36%;top:52%;width:9%;height:16%}
#blu-mascot.blu-pose-peek .blu-eyelid.right{left:59%;top:52%;width:9%;height:16%}

#blu-mascot.blu-pose-wink .blu-eyelid.left{left:41%;top:45%;width:13%;height:8%}
#blu-mascot.blu-pose-wink .blu-eyelid.right{left:63%;top:47%;width:12%;height:11%}

#blu-mascot.blu-pose-wave .blu-eyelid.left{left:43%;top:42%;width:14%;height:8%}
#blu-mascot.blu-pose-wave .blu-eyelid.right{left:61%;top:39%;width:11%;height:15%}

#blu-mascot.blu-pose-thumbsup .blu-eyelid.left{left:48%;top:42%;width:11%;height:9%}
#blu-mascot.blu-pose-thumbsup .blu-eyelid.right{left:64%;top:40%;width:13%;height:12%}

#blu-mascot.blu-pose-kiss .blu-eyelid.left{left:23%;top:39%;width:8%;height:10%}
#blu-mascot.blu-pose-kiss .blu-eyelid.right{left:36%;top:36%;width:9%;height:9%}

/* Bottom corners -- expressive poses appear here in their natural
   orientation, no flip needed. */
#blu-mascot.blu-right{bottom:14px;right:14px;transform:translateY(40px)}
#blu-mascot.blu-right.blu-show{transform:translateY(0)}

#blu-mascot.blu-left{bottom:14px;left:14px;transform:translateY(40px)}
#blu-mascot.blu-left .blu-art{transform:scaleX(-1)}
#blu-mascot.blu-left.blu-show{transform:translateY(0)}

#blu-mascot.blu-right.blu-lifted,
#blu-mascot.blu-left.blu-lifted{bottom:92px}

/* Middle of the side borders -- rotated 90deg so his paws grip a vertical
   edge instead of a horizontal one. Peek pose only. */
#blu-mascot.blu-mid-left{top:50%;left:14px;margin-top:-24px;transform:translateX(-40px)}
#blu-mascot.blu-mid-left .blu-art{transform:rotate(90deg)}
#blu-mascot.blu-mid-left.blu-show{transform:translateX(0)}

#blu-mascot.blu-mid-right{top:50%;right:14px;margin-top:-24px;transform:translateX(40px)}
#blu-mascot.blu-mid-right .blu-art{transform:rotate(-90deg)}
#blu-mascot.blu-mid-right.blu-show{transform:translateX(0)}

#blu-mascot.blu-show{opacity:1}

/* Signup/login success -- peeks up on the left side, right below the
   "60,000+ Universities Indexed" floating badge. Original unflipped art
   (bear + "Welcome!" in one image) -- not mirrored. */
#blu-mascot.blu-signup-left{left:4%;bottom:4%;transform:translateY(40px)}
#blu-mascot.blu-signup-left.blu-show{transform:translateY(0)}
#blu-mascot.blu-signup-left.blu-pose-kiss{width:150px}

@media (max-width:640px){
  #blu-mascot{width:72px}
  #blu-mascot.blu-signup-left.blu-pose-kiss{width:120px}
}

@media (prefers-reduced-motion: reduce){
  #blu-mascot{transition:opacity .3s ease}
  #blu-mascot.blu-right,#blu-mascot.blu-left,#blu-mascot.blu-signup-left,
  #blu-mascot.blu-mid-left,#blu-mascot.blu-mid-right,
  #blu-mascot.blu-right.blu-show,#blu-mascot.blu-left.blu-show,#blu-mascot.blu-signup-left.blu-show,
  #blu-mascot.blu-mid-left.blu-show,#blu-mascot.blu-mid-right.blu-show{
    transform:none;
  }
  #blu-mascot.blu-blink .blu-eyelid{animation:none}
}