/* Buster's puppy styles, lifted from setup.css (v17). The first block is the puppy; the rest are the setup bits that touch him.
   polished v1: talking bob for drawings, pointer cursor on living Busters, Reduce Motion keeps blinks. */
/* Setup (one steady window pinned to the top), the tour, the setup bar on Today, and Buster the puppy.
   Every class here starts with bs- (setup) or bp- (puppy) so nothing collides with the app's own styles. */

/* ---------- the puppy ---------- */
.bp{position:relative;display:inline-block;line-height:0;transform-origin:50% 100%;vertical-align:bottom}
.bp-dog{display:block;overflow:visible;transform-origin:50% 100%}
.bp-dog .eye{transform-box:fill-box;transform-origin:center;animation:bpBlink 5.2s infinite}
.bp-dog.nap .eye{animation:none;transform:scaleY(.12)}
@keyframes bpBlink{0%,93%,100%{transform:none}95.5%{transform:scaleY(.1)}}
.bp.breathe .bp-dog{animation:bpBreathe 3.2s ease-in-out infinite}
@keyframes bpBreathe{50%{transform:scale(1.015,1.03)}}
.bp.hop{animation:bpHop .6s cubic-bezier(.2,.7,.2,1)}
@keyframes bpHop{0%{transform:none}30%{transform:translateY(-18px) scale(.97,1.04)}62%{transform:translateY(0) scale(1.06,.93)}100%{transform:none}}
.bp.wag{animation:bpWag .9s ease-in-out}
@keyframes bpWag{15%{transform:rotate(-5deg)}35%{transform:rotate(5deg)}55%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}100%{transform:none}}
.bp.tilt{animation:bpTilt 2.4s ease-in-out infinite}
@keyframes bpTilt{0%,55%,100%{transform:none}65%,88%{transform:rotate(-10deg)}}
.bp.tilt1{animation:bpTilt1 .9s ease-in-out}
@keyframes bpTilt1{35%,70%{transform:rotate(-10deg)}}
.bp.shake{animation:bpShake .45s linear}
@keyframes bpShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.bp.droop{animation:bpDroop .9s cubic-bezier(.2,.7,.2,1)}
@keyframes bpDroop{30%,70%{transform:translateY(5px) rotate(-5deg) scaleY(.92)}}
.bp.sniffing .bp-dog{animation:bpSniff .15s ease-in-out infinite alternate}
@keyframes bpSniff{to{transform:translateY(2px) rotate(-1.5deg)}}
.bp.trot{animation:bpTrot 1.2s cubic-bezier(.2,.7,.2,1) both}
.bp.trot .bp-dog{animation:bpBob .16s ease-in-out 7 alternate}
@keyframes bpTrot{from{transform:translateX(-260px)}to{transform:none}}
@keyframes bpBob{to{transform:translateY(-4px)}}
.bp.zoom{animation:bpZoom 1.5s ease-in-out}
/* talking (drawings only; the living Buster moves his mouth) */
.bp.talking .bp-dog{animation:bpTalk .26s ease-in-out infinite alternate}
@keyframes bpTalk{to{transform:translateY(-1.5px) scale(1.012,.988)}}
.bp[data-live]{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@keyframes bpZoom{0%{transform:none}22%{transform:translateX(80px)}23%{transform:translateX(80px) scaleX(-1)}55%{transform:translateX(-80px) scaleX(-1)}56%{transform:translateX(-80px)}82%{transform:translateX(8px)}100%{transform:none}}
.bp-bub{position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;background:#f4efe6;color:#1b1f1d;font-size:14px;font-weight:700;line-height:1;padding:8px 11px;border-radius:12px;pointer-events:none;z-index:6;transform-origin:50% 100%;animation:bpBub 1.6s cubic-bezier(.2,.7,.2,1) both}
.bp-bub::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#f4efe6}
.bp-bub.acc{background:var(--accent);color:var(--onAccent)}.bp-bub.acc::after{border-top-color:var(--accent)}
.bp-bub.warm{background:var(--warm)}.bp-bub.warm::after{border-top-color:var(--warm)}
.bp-bub.start{left:0;translate:none;transform-origin:20px 100%}.bp-bub.start::after{left:24px}
.bp-bub.end{left:auto;right:0;translate:none;transform-origin:calc(100% - 20px) 100%}.bp-bub.end::after{left:auto;right:12px}
.bp-bub.right{bottom:auto;top:8px;left:calc(100% + 10px);translate:none;transform-origin:0 50%}.bp-bub.right::after{top:50%;left:-12px;margin:-6px 0 0;border-top-color:transparent;border-right-color:#f4efe6}
.bp-bub.right.acc::after{border-top-color:transparent;border-right-color:var(--accent)}
.bp-bub.side{bottom:auto;top:50%;left:auto;right:calc(100% + 10px);translate:0 -50%;transform-origin:100% 50%}.bp-bub.side::after{top:50%;left:100%;margin:-6px 0 0;border-top-color:transparent;border-left-color:#f4efe6}
.bp-bub.side.acc::after{border-top-color:transparent;border-left-color:var(--accent)}
.bp-bub.below{bottom:auto;top:calc(100% + 10px);left:auto;right:0;translate:none;transform-origin:calc(100% - 20px) 0}.bp-bub.below::after{top:auto;bottom:100%;left:auto;right:12px;border-top-color:transparent;border-bottom-color:#f4efe6}
.bp-bub.below.acc::after{border-top-color:transparent;border-bottom-color:var(--accent)}
@keyframes bpBub{0%{opacity:0;transform:translateY(6px) scale(.7)}12%{opacity:1;transform:scale(1.06)}20%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
.bp-puff{position:absolute;font-size:14px;font-style:italic;font-weight:600;color:var(--text2);pointer-events:none;white-space:nowrap;animation:bpPuff .9s ease-out forwards}
@keyframes bpPuff{0%{opacity:0;transform:translate(0,4px)}30%{opacity:1}100%{opacity:0;transform:translate(12px,-22px)}}
.bs-dash .bp-dog{animation:bpBob .14s ease-in-out infinite alternate}
@keyframes bsDash{from{transform:translateX(-90px)}to{transform:translateX(400px)}}
.bp.peek{position:absolute;right:18px;bottom:calc(100% - 18px);z-index:-1}
@keyframes bsZz{0%{opacity:0;transform:translate(0,4px)}30%,60%{opacity:1}100%{opacity:0;transform:translate(6px,-10px)}}
/* Reduce Motion: still drawings, speech bubbles simply appear, but he still blinks. */
@media (prefers-reduced-motion:reduce){.bs-layer *,.bs-layer *::before,.bs-layer *::after,.bp,.bp *:not(.eye){animation:none!important;transition:none!important}}
