/* waiv-mascot.css — "Tappy", a little waiv card that walks the page, follows
   your cursor with its eyes, and emotes when you tap it. */

.bud{position:fixed;left:0;top:0;z-index:60;width:86px;height:126px;cursor:grab;
  -webkit-user-select:none;user-select:none;will-change:transform;touch-action:none;}
.bud.is-held{cursor:grabbing;}
.bud-shadow{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:54px;height:10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,2,10,.55),transparent 75%);filter:blur(2px);}

/* hop/dance/idle motion lives on the inner so the root transform = placement */
.bud-facing{position:absolute;inset:0;transform-origin:50% 92%;}
.bud-inner{position:absolute;inset:0;transform-origin:50% 92%;}
.bud.is-breathing .bud-inner{animation:bud-breathe 3.4s ease-in-out infinite;}
@keyframes bud-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
.bud.is-walking .bud-inner{animation:bud-step .5s ease-in-out infinite;}
@keyframes bud-step{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-5px) rotate(2.5deg)}}
.bud.is-happy .bud-inner{animation:bud-bounce .42s ease-in-out 4;}
@keyframes bud-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px)}70%{transform:translateY(-4px)}}
.bud.is-dance .bud-inner{animation:bud-dance .6s ease-in-out infinite;}
@keyframes bud-dance{0%{transform:rotate(-12deg) translateY(0)}25%{transform:rotate(8deg) translateY(-8px)}50%{transform:rotate(-8deg) translateY(0)}75%{transform:rotate(12deg) translateY(-8px)}100%{transform:rotate(-12deg)}}
.bud.is-angry .bud-inner{animation:bud-shake .09s linear 16;}
@keyframes bud-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}}
.bud.is-sad .bud-inner{animation:bud-sad .6s ease forwards;}
@keyframes bud-sad{to{transform:translateY(6px) rotate(0)}}
.bud.is-love .bud-inner{animation:bud-love .7s ease-in-out infinite;}
@keyframes bud-love{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.bud.is-dizzy .bud-inner{animation:bud-wob .5s ease-in-out infinite;}
@keyframes bud-wob{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* legs — tucked right under the card body */
.bud-legs{position:absolute;left:50%;top:99px;transform:translateX(-50%);display:flex;gap:15px;z-index:1;}
.bud-legs i{width:8px;height:14px;border-radius:0 0 4px 4px;background:#0a1326;transform-origin:top center;}
.bud.is-dance .bud-legs i:nth-child(1){animation:bud-leg .3s ease-in-out infinite;}
.bud.is-dance .bud-legs i:nth-child(2){animation:bud-leg .3s ease-in-out infinite .15s;}
@keyframes bud-leg{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}

/* arms + hands */
.bud-arm{position:absolute;top:46px;width:9px;height:24px;border-radius:5px;background:#0a1326;z-index:1;transform-origin:50% 0;}
.bud-arm-l{left:-1px;transform:rotate(28deg);}
.bud-arm-r{right:-1px;transform:rotate(-28deg);}
.bud-hand{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fbe79a,#caa45a);box-shadow:inset 0 -1px 2px rgba(120,80,0,.4),0 1px 2px rgba(0,0,0,.3);}
/* idle gentle sway; emotes wave */
.bud.is-breathing .bud-arm-l{animation:bud-sway 3.4s ease-in-out infinite;}
.bud.is-breathing .bud-arm-r{animation:bud-sway 3.4s ease-in-out infinite reverse;}
@keyframes bud-sway{0%,100%{transform:rotate(28deg)}50%{transform:rotate(20deg)}}
.bud.is-happy .bud-arm-l,.bud.is-love .bud-arm-l,.bud.is-dance .bud-arm-l{animation:bud-wave-l .4s ease-in-out infinite;}
.bud.is-happy .bud-arm-r,.bud.is-love .bud-arm-r,.bud.is-dance .bud-arm-r{animation:bud-wave-r .4s ease-in-out infinite;}
@keyframes bud-wave-l{0%,100%{transform:rotate(40deg)}50%{transform:rotate(8deg)}}
@keyframes bud-wave-r{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-40deg)}}
.bud.is-angry .bud-arm-l{transform:rotate(54deg);}
.bud.is-angry .bud-arm-r{transform:rotate(-54deg);}
.bud.is-sad .bud-arm-l,.bud.is-sad .bud-arm-r{animation:none;}
.bud.is-sad .bud-arm-l{transform:rotate(12deg);}
.bud.is-sad .bud-arm-r{transform:rotate(-12deg);}

/* card body */
.bud-body{position:absolute;left:5px;right:5px;top:6px;height:96px;border-radius:13px;z-index:2;overflow:visible;
  box-shadow:inset 0 1.5px 0 rgba(255,228,160,.5),inset 0 0 0 1px rgba(180,150,90,.4),0 10px 22px -8px rgba(0,2,12,.8);}
.bud-logo{position:absolute;left:8px;bottom:7px;height:9px;opacity:.85;z-index:3;}
.bud-chip{position:absolute;right:8px;bottom:8px;width:11px;height:8px;border-radius:2px;z-index:3;
  background:linear-gradient(140deg,#c7b27a,#8a7340);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);}

/* face */
.bud-face{position:absolute;left:0;right:0;top:20px;z-index:4;}
.bud-brows{display:flex;justify-content:center;gap:14px;height:0;}
.bud-brows i{position:absolute;width:13px;height:3px;border-radius:2px;background:#0a1326;opacity:0;top:-7px;transition:transform .2s,opacity .2s;}
.bud-brows i:nth-child(1){margin-left:-15px;}
.bud-brows i:nth-child(2){margin-left:15px;}
.bud.is-angry .bud-brows i{opacity:1;}
.bud.is-angry .bud-brows i:nth-child(1){transform:rotate(20deg);}
.bud.is-angry .bud-brows i:nth-child(2){transform:rotate(-20deg);}
.bud.is-sad .bud-brows i{opacity:1;}
.bud.is-sad .bud-brows i:nth-child(1){transform:rotate(-22deg);}
.bud.is-sad .bud-brows i:nth-child(2){transform:rotate(22deg);}

.bud-eyes{display:flex;justify-content:center;gap:9px;}
.bud-eye{width:15px;height:15px;border-radius:50%;background:#fbfdff;position:relative;box-shadow:inset 0 -1px 2px rgba(0,0,40,.18);
  animation:bud-blink 4.2s infinite;}
@keyframes bud-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.bud-pupil{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#0a1326;transform:translate(-50%,-50%);transition:transform .12s;}
/* happy/love → curved closed eyes */
.bud.is-happy .bud-eye,.bud.is-love .bud-eye{height:8px;border-radius:0 0 15px 15px;background:transparent;box-shadow:none;border-bottom:3px solid #0a1326;animation:none;}
.bud.is-happy .bud-pupil,.bud.is-love .bud-pupil{display:none;}
.bud.is-dizzy .bud-pupil{animation:bud-spin 0.6s linear infinite;}
@keyframes bud-spin{to{transform:translate(-50%,-50%) rotate(360deg) translateX(3px)}}

.bud-mouth{width:15px;height:8px;margin:6px auto 0;border:2.5px solid #0a1326;border-top:0;border-radius:0 0 16px 16px;transition:all .2s;}
.bud.is-sad .bud-mouth,.bud.is-angry .bud-mouth{border-top:2.5px solid #0a1326;border-bottom:0;border-radius:16px 16px 0 0;margin-top:9px;}
.bud.is-dance .bud-mouth,.bud.is-dizzy .bud-mouth{width:12px;height:13px;border:2.5px solid #0a1326;border-radius:50%;background:#0a1326;}
.bud.is-idle .bud-mouth{width:11px;height:0;border:0;border-bottom:2.5px solid #0a1326;border-radius:0;}
.bud-blush{position:absolute;left:0;right:0;top:18px;display:none;justify-content:center;gap:24px;}
.bud-blush i{width:8px;height:5px;border-radius:50%;background:rgba(255,120,120,.55);filter:blur(.5px);}
.bud.is-love .bud-blush,.bud.is-happy .bud-blush{display:flex;}

/* fx particles */
.bud-fx{position:absolute;left:0;right:0;top:-10px;height:0;z-index:5;pointer-events:none;}
.bud-fx span{position:absolute;left:50%;top:0;opacity:0;font-size:13px;line-height:1;}
.bud.is-love .bud-fx .fx-heart,.bud.is-happy .bud-fx .fx-spark,.bud.is-dance .bud-fx .fx-note,.bud.is-angry .bud-fx .fx-steam,.bud.is-dizzy .bud-fx .fx-star{animation:bud-float 1.1s ease-out forwards;}
.bud-fx .fx-heart:nth-child(2),.bud-fx .fx-note:nth-child(2){animation-delay:.18s !important;}
.bud-fx .fx-heart:nth-child(3),.bud-fx .fx-note:nth-child(3){animation-delay:.36s !important;}
.fx-heart{color:#ff5d7a;}.fx-spark{color:#ffd527;}.fx-note{color:#cfe0ff;}.fx-steam{color:rgba(255,255,255,.6);}.fx-star{color:#ffd527;}
.bud-fx span:nth-child(1){margin-left:-18px;}
.bud-fx span:nth-child(2){margin-left:0;}
.bud-fx span:nth-child(3){margin-left:14px;}
@keyframes bud-float{0%{opacity:0;transform:translateY(4px) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1.1)}}

/* speech bubble */
.bud-bubble{position:absolute;left:50%;top:-12px;white-space:nowrap;z-index:7;
  transform:translate(-50%,-100%) scale(0);transform-origin:50% 120%;transition:transform .26s cubic-bezier(.2,1.5,.4,1);
  background:#fff;color:#0a1326;font-family:'Ubuntu',sans-serif;font-weight:700;font-size:12px;padding:7px 12px;border-radius:12px;
  box-shadow:0 8px 20px -6px rgba(0,2,12,.5);}
.bud-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:#fff;border-radius:2px;}
.bud.show-bubble .bud-bubble{transform:translate(-50%,-100%) scale(1);}

@media (prefers-reduced-motion: reduce){
  .bud *{animation:none !important;}
}
@media (max-width:620px){ .bud{transform:scale(.82);transform-origin:left bottom;} }