/* The animated puppy. Load order matters: later files refine earlier ones (see docs/STRUCTURE.md). */
/* ===== animated Buddy (the puppy) ===== */
.buddy-puppy { display: block; aspect-ratio: 3 / 4; object-fit: contain; transform-origin: 50% 82%; animation: puppy-idle 3.8s cubic-bezier(.45, 0, .55, 1) infinite; will-change: transform; }
.art .buddy-puppy, .coach-card .buddy-puppy, .result-hero .buddy-puppy, .auth .art .buddy-puppy, .hero-art2 .buddy-puppy { animation: puppy-idle 3.8s cubic-bezier(.45, 0, .55, 1) infinite; }
#buddy .buddy-puppy { animation: puppy-idle 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
.buddy-puppy.wave { animation: buddy-wave .5s ease-in-out 5; }
.buddy-puppy.cheer { animation: hop .75s ease-out; }
.buddy-puppy.oops { animation: nod .7s ease-in-out; }
.buddy-puppy.talk { animation: buddy-talk .28s ease-in-out infinite alternate; }
@keyframes puppy-idle { 0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); } 25% { transform: translateY(-5px) rotate(1deg) scale(1.01, .99); } 50% { transform: translateY(-9px) rotate(-.6deg) scale(.99, 1.015); } 75% { transform: translateY(-4px) rotate(1.2deg) scale(1.01, .99); } }
@keyframes buddy-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg) translateY(-3px); } }
@keyframes buddy-talk { from { transform: translateY(0) scale(1); } to { transform: translateY(-2px) scale(1.015); } }
@media (prefers-reduced-motion: reduce) { .buddy-puppy, .art .buddy-puppy, .coach-card .buddy-puppy, .result-hero .buddy-puppy, .auth .art .buddy-puppy, .hero-art2 .buddy-puppy, #buddy .buddy-puppy { animation: none; } }
.mascot .m-body { transform-box: fill-box; transform-origin: 50% 100%; }
.mascot .m-tail { transform-box: view-box; transform-origin: 238px 282px; animation: wag 2.6s ease-in-out infinite; }
@keyframes wag { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(8deg); } }
.mascot .m-eyes { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 5s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.07); } }
.mascot .m-wave { transform-box: view-box; transform-origin: 92px 270px; }
.mascot.wave .m-wave { animation: wavearm .5s ease-in-out 5; }
@keyframes wavearm { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
.mascot .m-jaw, .mascot .m-open { transform-box: fill-box; transform-origin: 50% 0%; }
.mascot.talk .m-jaw { animation: jaw .2s ease-in-out infinite alternate; }
@keyframes jaw { from { transform: translateY(0) scaleY(1); } to { transform: translateY(5px) scaleY(1.3); } }
.mascot.talk .m-open { animation: openm .2s ease-in-out infinite alternate; }
@keyframes openm { from { opacity: 0; transform: scaleY(.3); } to { opacity: 1; transform: scaleY(1); } }
.mascot.cheer .m-body { animation: hop .75s ease-out; }
.mascot.cheer .m-tail { animation-duration: .22s; }
@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 22% { transform: translateY(-26px) scale(.95, 1.06); } 45% { transform: translateY(0) scale(1.06, .94); } 65% { transform: translateY(-12px) scale(1); } 85% { transform: translateY(0) scale(1.03, .97); } 100% { transform: translateY(0); } }
.mascot.oops .m-body { animation: nod .7s ease-in-out; }
@keyframes nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg) translateY(3px); } 65% { transform: rotate(3deg); } }
#buddy { position: fixed; right: 14px; bottom: 10px; width: 112px; z-index: 45; pointer-events: none; display: none; }
#buddy.on { display: block; animation: rise .4s ease both; }
#buddy .mascot { width: 100%; height: auto; filter: drop-shadow(0 8px 10px rgba(150, 100, 20, .3)); }
#buddy .say { position: absolute; right: 12px; bottom: 100%; margin-bottom: -18px; width: max-content; max-width: min(300px, 68vw); background: #fff; color: var(--ink); border: 2px solid var(--y); border-radius: 18px; padding: 10px 14px; font-weight: 600; font-size: .96rem; line-height: 1.35; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: 90% 100%; transition: opacity .25s, transform .25s; }
#buddy .say.show { opacity: 1; transform: none; }
#buddy .say::after { content: ""; position: absolute; right: 30px; bottom: -11px; width: 18px; height: 18px; background: #fff; border-right: 2px solid var(--y); border-bottom: 2px solid var(--y); transform: rotate(45deg); }
.bubble.pop, #buddy .say.pop { animation: sayPop .4s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes sayPop { 0% { transform: scale(.8); opacity: .3; } 100% { transform: none; opacity: 1; } }
.hero-art2 { position: relative; text-align: center; } .hero-art2 .mascot { width: 170px; } .hero-art2 .bubble { margin: 6px auto 0; max-width: 240px; font-size: .9rem; display: block; }
.hero-art2 .bubble:empty { display: none; }
@media (max-width: 700px) { #buddy { width: 78px; right: 8px; bottom: 6px; } #buddy .say { font-size: .86rem; max-width: 62vw; } }