.scroll-buddies { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.buddy { --size-scale: 1; --step-duration: .9s; position: absolute; left: calc(100vw - 240px); top: calc(100vh - 86px); width: 68px; height: 70px; filter: drop-shadow(0 5px 0 rgba(10,10,10,.15)); transform: scale(var(--size-scale)); transform-origin: left top; transition: left 2.4s cubic-bezier(.3,.65,.35,1), top 2.4s cubic-bezier(.3,.65,.35,1), opacity .2s; }
.buddy.is-muted { opacity: .72; }
.buddy.is-docked { transition: none; }
.buddy svg { display: block; width: 100%; height: 100%; overflow: visible; animation: buddy-breathe 2.4s ease-in-out infinite; }
.buddy:nth-child(2) svg { animation-delay: -.7s; }
.buddy:nth-child(3) svg { animation-delay: -1.3s; }
.buddy:nth-child(4) svg { animation-delay: -1.9s; }
.buddy.is-walking svg { animation: buddy-walk-bob var(--step-duration) ease-in-out infinite; }
.buddy-leg { transform-box: fill-box; transform-origin: center top; }
.buddy-arm { transform-box: fill-box; }
.buddy-arm-left { transform-origin: right top; }
.buddy-arm-right { transform-origin: left top; }
.buddy.is-walking .buddy-leg-left { animation: buddy-step var(--step-duration) ease-in-out infinite alternate; }
.buddy.is-walking .buddy-leg-right { animation: buddy-step var(--step-duration) ease-in-out infinite alternate-reverse; }
.buddy.is-walking .buddy-arm-left, .buddy.is-walking .buddy-arm-right { animation: buddy-arm-swing var(--step-duration) ease-in-out infinite alternate; }
.buddy path { fill: none; stroke: #111; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.buddy .buddy-body { fill: var(--buddy-color); stroke-width: 2.2; }
.buddy-eyes { transform: translate(var(--look-x, 0px), var(--look-y, 0px)); transition: transform .16s ease; }
.buddy-eyes circle { fill: #111; }
.buddy-green { --buddy-color: #7db977; }
.buddy-red { --buddy-color: #ff502b; }
.buddy-blue { --buddy-color: #98b5bb; }
.buddy-gold { --buddy-color: #f2c14c; }
@keyframes buddy-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes buddy-walk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes buddy-step { from { transform: rotate(-34deg); } to { transform: rotate(34deg); } }
@keyframes buddy-arm-swing { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@media (max-width: 600px) { .buddy { --size-scale: .72; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .scroll-buddies, .buddy, .buddy svg, .buddy-eyes, .buddy.is-walking .buddy-leg, .buddy.is-walking .buddy-arm { animation: none; transition: none; } }