/* DataBunny mascot. Active asset: /assets/bunny-pet.png, a single 30x38px pixel-art
   frame scaled up with nearest-neighbour rendering. The dance (bounce, squash/stretch,
   hop, sway, small rotation) and the hop walk-in are pure CSS transforms on ::before;
   ::after is the soft ground shadow. tools/mascot/make_mascot.py still builds the
   older 12-frame sheet (/assets/bunny-mascot.png), which is no longer referenced. */
.ns-mascot{--u:3px;--fw:calc(var(--u)*30);--fh:calc(var(--u)*38);--mascot-grad:linear-gradient(90deg,#ff4f8b,#ff8a3d);position:fixed;right:18px;bottom:10px;z-index:40;display:flex;align-items:flex-end;gap:6px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;pointer-events:none;transition:opacity .35s ease,transform .35s ease}
.ns-mascot[hidden]{display:none}
.ns-mascot>*{pointer-events:auto}
.ns-mascot.is-tucked{opacity:0;transform:translateX(calc(100% + 24px))}
.ns-mascot.is-tucked>*{pointer-events:none}
.ns-mascot.is-minimized .ns-mascot-bubble,.ns-mascot.is-minimized .ns-mascot-bunny{display:none}
.ns-mascot:not(.is-minimized) .ns-mascot-restore{display:none}

/* bunny button: static hit area; the art and shadow are pseudo-elements */
.ns-mascot-bunny{position:relative;flex:none;width:calc(var(--fw) + var(--u)*4);height:calc(var(--fh) + var(--u)*8);padding:0;border:0;border-radius:16px;background:none;cursor:pointer}
.ns-mascot-bunny:before{content:"";position:absolute;left:calc(var(--u)*2);bottom:calc(var(--u)*3);width:var(--fw);height:var(--fh);background:url(/assets/bunny-pet.png) center bottom/100% 100% no-repeat;image-rendering:crisp-edges;image-rendering:pixelated;transform-origin:50% 100%}
.ns-mascot-bunny:after{content:"";position:absolute;left:50%;bottom:calc(var(--u)*1);width:calc(var(--fw)*.62);height:calc(var(--u)*4);margin-left:calc(var(--fw)*-.31);border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,47,.22),rgba(20,20,47,.08) 70%,rgba(20,20,47,0));z-index:-1}
.ns-mascot-bunny:focus-visible{outline:3px solid #ff4f8b;outline-offset:2px}
.ns-mascot.is-walking .ns-mascot-bunny{animation:ns-mascot-enter 2.4s linear both}
.ns-mascot.is-walking .ns-mascot-bunny:before{animation:ns-mascot-hopwalk .4s ease-in-out infinite}
.ns-mascot.is-walking .ns-mascot-bunny:after{animation:ns-mascot-shadow-walk .4s ease-in-out infinite}
.ns-mascot.is-walking .ns-mascot-bubble{opacity:0;visibility:hidden}
.ns-mascot.is-dancing .ns-mascot-bunny:before{animation:ns-mascot-dance 2.4s ease-in-out infinite}
.ns-mascot.is-dancing .ns-mascot-bunny:after{animation:ns-mascot-shadow 2.4s ease-in-out infinite}
.ns-mascot.is-dancing .ns-mascot-bunny:hover:before,.ns-mascot.is-dancing .ns-mascot-bunny:hover:after{animation-duration:1.2s}
@keyframes ns-mascot-enter{from{transform:translateX(calc(var(--fw) + 60px))}to{transform:translateX(0)}}
@keyframes ns-mascot-hopwalk{0%,100%{transform:translateY(0) scale(1.04,.96)}50%{transform:translateY(calc(var(--u)*-3)) scale(.98,1.03) rotate(-2deg)}}
@keyframes ns-mascot-shadow-walk{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.7}}
@keyframes ns-mascot-dance{
 0%,100%{transform:translate(0,0) scale(1,1) rotate(0)}
 8%{transform:translate(0,0) scale(1.1,.88) rotate(0)}
 18%{transform:translate(0,calc(var(--u)*-6)) scale(.94,1.08) rotate(-4deg)}
 28%{transform:translate(0,0) scale(1.08,.9) rotate(0)}
 36%{transform:translate(0,0) scale(1,1) rotate(0)}
 46%{transform:translate(calc(var(--u)*-2),0) scale(1,1) rotate(-7deg)}
 56%{transform:translate(calc(var(--u)*2),0) scale(1,1) rotate(7deg)}
 64%{transform:translate(0,0) scale(1.06,.93) rotate(0)}
 72%{transform:translate(0,calc(var(--u)*-3)) scale(.97,1.04) rotate(3deg)}
 80%{transform:translate(0,0) scale(1.05,.95) rotate(0)}
 90%{transform:translate(0,0) scale(1,1) rotate(-2deg)}}
@keyframes ns-mascot-shadow{0%,8%,28%,36%,64%,80%,100%{transform:scaleX(1);opacity:1}18%{transform:scaleX(.62);opacity:.55}46%{transform:translateX(calc(var(--u)*-2)) scaleX(.95)}56%{transform:translateX(calc(var(--u)*2)) scaleX(.95)}72%{transform:scaleX(.82);opacity:.75}}

/* speech bubble */
.ns-mascot-bubble{position:relative;align-self:flex-start;max-width:248px;margin-bottom:calc(var(--fh)*.45);padding:10px 30px 10px 14px;border:2px solid transparent;border-radius:16px;background:linear-gradient(#fff,#fff) padding-box,var(--mascot-grad) border-box;box-shadow:0 12px 30px rgba(37,52,89,.16);color:#14142f;transition:opacity .35s ease,visibility .35s}
.ns-mascot-bubble:after{content:"";position:absolute;right:-9px;bottom:16px;width:14px;height:14px;background:#fff;border-right:2px solid #ff8a3d;border-bottom:2px solid #ff8a3d;transform:rotate(-45deg);border-bottom-right-radius:3px}
.ns-mascot-label{display:block;margin:0 0 3px;font-size:10px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;background:var(--mascot-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ns-mascot-tip{margin:0;font-size:13px;font-weight:600;line-height:1.4;transition:opacity .3s ease}
.ns-mascot-tip.is-fading{opacity:0}
.ns-mascot-close{position:absolute;top:5px;right:5px;width:24px;height:24px;padding:0;border:0;border-radius:999px;background:transparent;color:#4a5168;font:700 16px/24px Inter,system-ui,sans-serif;cursor:pointer}
.ns-mascot-close:hover{background:#fff0f5;color:#14142f}
.ns-mascot-close:focus-visible,.ns-mascot-restore:focus-visible{outline:3px solid #ff4f8b;outline-offset:2px}

/* minimized: a small round bunny button to bring him back */
.ns-mascot-restore{width:46px;height:46px;padding:0;border:2px solid #ff4f8b;border-radius:999px;background:url(/assets/bunny-pet.png) 6px 2px/30px 38px no-repeat,#fff;image-rendering:crisp-edges;image-rendering:pixelated;box-shadow:0 8px 20px rgba(37,52,89,.16);cursor:pointer}

@media(max-width:640px){
 .ns-mascot{--u:2px;right:8px;bottom:8px}
 .ns-mascot-bubble{max-width:min(196px,calc(100vw - 96px));padding:8px 28px 8px 11px}
 .ns-mascot-tip{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .ns-mascot,.ns-mascot-tip,.ns-mascot-bubble{animation:none;transition:none}
 .ns-mascot .ns-mascot-bunny,.ns-mascot .ns-mascot-bunny:before,.ns-mascot .ns-mascot-bunny:after,.ns-mascot.is-walking .ns-mascot-bunny,.ns-mascot.is-dancing .ns-mascot-bunny:before,.ns-mascot.is-dancing .ns-mascot-bunny:after{animation:none;transform:none}
 .ns-mascot.is-walking .ns-mascot-bubble{opacity:1;visibility:visible}
 .ns-mascot-tip.is-fading{opacity:1}
}
@media print{.ns-mascot{display:none}}