﻿/* Decorative only: no panel, controls, pointer targets, or reserved screen space. */
.buddy { position: fixed; top: 0; left: 0; z-index: 10; width: 48px; height: 58px; pointer-events: none; user-select: none; opacity: 0; will-change: transform; }
.buddy.is-visible { opacity: 1; }
.buddy-boy { display: block; width: 100%; height: 100%; pointer-events: none; }
.buddy-prop { display: none; }
.buddy[data-activity="code"] .prop-code, .buddy[data-activity="read"] .prop-read, .buddy[data-activity="graduate"] .prop-graduate, .buddy[data-activity="film"] .prop-film, .buddy[data-activity="contact"] .prop-contact { display: block; }
.boy-arm, .boy-leg, .boy-head { transform-box: fill-box; }
.boy-arm { transform-origin: 50% 8%; }
.boy-leg { transform-origin: 50% 0; }
.boy-head { transform-origin: 50% 95%; }
.buddy[data-activity="wave"]:not(.is-walking) .boy-arm-right { animation: buddy-wave 1.1s ease-in-out 3; }
.buddy[data-activity="code"]:not(.is-walking) .boy-head, .buddy[data-activity="film"]:not(.is-walking) .boy-head { animation: buddy-think 1.5s ease-in-out 2; }
.buddy[data-activity="read"]:not(.is-walking) .boy-head { animation: buddy-read 1.5s ease-in-out 2; }
.buddy[data-activity="graduate"]:not(.is-walking) .boy-arm-left { animation: buddy-wave 1.1s ease-in-out 3; }
.buddy.is-walking .boy-leg-left, .buddy.is-walking .boy-arm-right { animation: buddy-step .4s ease-in-out infinite alternate; }
.buddy.is-walking .boy-leg-right, .buddy.is-walking .boy-arm-left { animation: buddy-step .4s ease-in-out -.4s infinite alternate; }
.buddy.is-walking .boy-body { animation: buddy-bob .2s ease-in-out infinite alternate; }
.buddy:not(.is-visible) * { animation-play-state: paused; }
.farewell { position: relative; height: 164px; overflow: hidden; background: #eee7f7; background-image: radial-gradient(#d9cde8 1px, transparent 1px); background-size: 20px 20px; border-top: 1px solid #e2d7ed; text-align: center; }
.farewell-copy { position: relative; z-index: 1; margin: 14px 12px 0; color: #62438b; font-family: var(--heading); font-size: 22px; font-weight: 600; line-height: 1.25; }
.farewell-copy > span { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 400; margin-top: 5px; }
.buddy-enabled .farewell-copy { opacity: 0; }
.buddy-enabled .farewell.is-arrived .farewell-copy { opacity: 1; animation: farewell-hello .65s ease-out; }
.farewell-spot { position: absolute; bottom: 12px; left: 50%; width: 64px; height: 77px; transform: translateX(-50%); }
.farewell-spark { position: absolute; bottom: 30px; color: #b67742; font-size: 26px; opacity: .35; }
.spark-left { left: calc(50% - 90px); }
.spark-right { right: calc(50% - 90px); }
.farewell.is-arrived .farewell-spark { animation: farewell-spark 1s ease-in-out 3; }
@keyframes buddy-wave { 0%, 100% { transform: rotate(-115deg); } 40% { transform: rotate(-150deg); } 70% { transform: rotate(-125deg); } }
@keyframes buddy-step { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes buddy-bob { to { transform: translateY(-2px); } }
@keyframes buddy-think { 50% { transform: rotate(5deg) translateY(1px); } }
@keyframes buddy-read { 50% { transform: rotate(-6deg) translateY(2px); } }
@keyframes farewell-hello { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes farewell-spark { 50% { transform: translateY(-5px) rotate(12deg); opacity: .8; } }
@media (min-width: 1024px) {
    .buddy { width: 64px; height: 77px; }
}
@media (prefers-reduced-motion: reduce) {
    .buddy *, .farewell * { animation: none !important; transition: none !important; }
}
