/* One approved character, pre-rendered poses; no 3D framework or continuous animation. */
.project-detail-photo:has(img[src*="7156"]){max-width:360px;margin:24px auto 48px}
.character-sprite{display:none;position:absolute;inset:0;background-size:400% 400%;background-repeat:no-repeat}
.pose-ready .character-sprite{background-image:url('assets/companion/jojo-emotions.webp')}
.companion-character:is([data-state=jump],[data-state=heart],[data-state=sixseven],[data-state=flag]) .character-sprite{display:block;animation:jojo-frames .8s steps(4,end) 3}
.companion-character:is([data-state=jump],[data-state=heart],[data-state=sixseven],[data-state=flag]) .character-idle{visibility:hidden}
.companion-character[data-state=jump] .character-sprite{background-position-y:0%}
.companion-character[data-state=heart] .character-sprite{background-position-y:33.3333%}
.companion-character[data-state=sixseven] .character-sprite{background-position-y:66.6667%}
.flag-ready[data-state=flag] .character-sprite{background-image:url('assets/companion/jojo-flags.webp');background-size:400% 300%;animation:jojo-reveal 2.4s steps(1,end) 1 forwards}
.companion-character[data-flag=au][data-state=flag] .character-sprite{background-position-y:0%}
.companion-character[data-flag=pe][data-state=flag] .character-sprite{background-position-y:50%}
.companion-character[data-flag=co][data-state=flag] .character-sprite{background-position-y:100%}
@keyframes jojo-reveal{0%{background-position-x:0%}20%{background-position-x:33.3333%}40%,70%,90%{background-position-x:66.6667%}60%,80%,100%{background-position-x:100%}}
@keyframes jojo-frames{from{background-position-x:0%}to{background-position-x:133.3333%}}
.reduce-motion .character-sprite,.simplified .character-sprite{display:none!important}
@media(prefers-reduced-motion:reduce){html:not(.custom-motion) .character-sprite{display:none!important}}
.companion-hide{position:fixed;z-index:41;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font:24px/1 'DM Sans',sans-serif;cursor:pointer}
.companion-restore{position:fixed;right:16px;bottom:16px;z-index:40;min-height:44px;padding:10px 14px;background:var(--paper);color:#095b73;border:1px solid #095b73;border-radius:6px;font:600 14px/1.4 'DM Sans',sans-serif;cursor:pointer}
.companion-trigger[hidden],.companion-hide[hidden],.companion-restore[hidden]{display:none!important}
.repository-categories{display:grid;grid-template-columns:1fr 1fr;gap:16px 30px;margin:24px 0}
.artist-repository h2{font-size:clamp(2rem,4vw,3rem);line-height:1.2;margin:16px 0 24px}.artist-repository p{max-width:780px}.repository-categories h3{font-size:1.6rem;line-height:1.3}.repository-categories h3:nth-of-type(2){grid-column:2;grid-row:1}.repository-categories p:nth-of-type(2){grid-column:2;grid-row:2}
@media(max-width:760px){.repository-categories{display:block}.repository-categories h3{margin:24px 0 12px}}
.companion-trigger{touch-action:none;user-select:none;cursor:grab}.companion-trigger.is-dragging{cursor:grabbing}.companion-trigger img{pointer-events:none}.companion-trigger .companion-wordmark{font-size:.95rem;font-family:'DM Sans',sans-serif;line-height:1.3}.companion-wordmark strong{font-weight:800}.companion-wordmark strong:first-child{color:#095b73}.companion-wordmark strong:last-child{color:#a32621}.companion-trigger.is-dragging .companion-character{animation:none!important}
@media(forced-colors:active){.companion-wordmark strong{color:ButtonText!important}}
body{padding-bottom:125px}
.companion-art.companion-character{width:76px;height:100px;line-height:0;flex-shrink:0;overflow:visible;transform-origin:50% 90%}
.companion-character img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom}
.companion-character .character-wave{display:none}
.companion-character.wave-ready[data-state=greet] .character-wave{display:block}
.companion-character.wave-ready[data-state=greet]:not(.wave-unavailable) .character-idle{visibility:hidden}
.companion-character.wave-unavailable .character-wave{display:none}
.companion-trigger .companion-character{width:42px;height:56px}
.companion-trigger{padding:4px 8px;min-height:64px;background:transparent;border:0;box-shadow:none;flex-direction:column;gap:4px}
.companion-trigger .companion-character{width:64px;height:88px;filter:drop-shadow(0 3px 3px #29272420)}
.companion-trigger>span:last-child{font-size:.8rem;background:transparent;border:0;padding:3px 5px;color:var(--ink);text-shadow:0 1px 2px var(--paper),1px 0 2px var(--paper),-1px 0 2px var(--paper)}
.character-expression{position:absolute;left:72%;top:0;padding:6px 8px;line-height:1.2;font:600 .8rem/1.2 'DM Sans',sans-serif;color:#922b24;background:#f5f2eb;border:1px solid #922b24;border-radius:10px;white-space:nowrap}
.companion-trigger .character-expression{display:none}
.companion-character[data-state=greet]{animation:character-hello 2.4s ease-in-out 1}
.companion-character[data-state=guide]{animation:character-guide 1.2s ease-in-out 1}
.companion-character[data-state=celebrate]{animation:character-cheer 1.2s ease-in-out 1}
.companion-character[data-state=idle]{animation:character-idle 1.6s ease-in-out 1}
@keyframes character-idle{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-3px) rotate(-3deg)}70%{transform:translateY(-1px) rotate(2deg)}}
@keyframes character-hello{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) translateY(-2px)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
@keyframes character-guide{0%,100%{transform:rotate(0)}45%{transform:rotate(6deg) translateX(3px)}}
@keyframes character-cheer{0%,100%{transform:translateY(0)}35%{transform:translateY(-4px) rotate(-3deg)}65%{transform:translateY(-2px) rotate(3deg)}}
.reduce-motion .companion-character,.simplified .companion-character{animation:none!important;transform:none!important}
.reduce-motion .character-wave,.simplified .character-wave{display:none!important}
.reduce-motion .character-idle,.simplified .character-idle{visibility:visible!important}
.reduce-motion .character-expression,.simplified .character-expression{display:none!important}
@media(prefers-reduced-motion:reduce){html:not(.custom-motion) .companion-character{animation:none!important;transform:none!important}html:not(.custom-motion) .companion-character .character-wave{display:none!important}html:not(.custom-motion) .companion-character .character-idle{visibility:visible!important}html:not(.custom-motion) .character-expression{display:none!important}}
@media(max-width:760px){.companion-trigger .companion-character{width:48px;height:66px}.companion-trigger{min-height:54px}.companion-art.companion-character{width:64px;height:86px}}
/* Fixed hair size and baseline in every frame; only poses change. */
.companion-character img,.character-sprite{left:-16.6667%;right:auto;width:133.3333%;height:100%;object-fit:fill}
.companion-character .character-sprite{background-image:none!important;animation:none!important}
.pose-frame{position:absolute;inset:0;display:block;opacity:0;background-size:400% 400%;background-repeat:no-repeat;background-position-y:var(--pose-row,0%)}
.pose-ready .pose-frame{background-image:url('assets/companion/jojo-emotions.webp')}
.companion-character[data-state=heart]{--pose-row:33.3333%}
.companion-character[data-state=sixseven]{--pose-row:66.6667%}
.flag-ready[data-state=flag] .pose-frame{background-image:url('assets/companion/jojo-flags.webp');background-size:400% 300%}
.companion-character[data-flag=au][data-state=flag]{--pose-row:0%}
.companion-character[data-flag=pe][data-state=flag]{--pose-row:50%}
.companion-character[data-flag=co][data-state=flag]{--pose-row:100%}
.frame-0{background-position-x:0%}.frame-1{background-position-x:33.3333%}.frame-2{background-position-x:66.6667%}.frame-3{background-position-x:100%}
.companion-character:is([data-state=jump],[data-state=heart],[data-state=sixseven],[data-state=flag]) .frame-0{animation:pose-0 2.4s ease-in-out both}
.companion-character:is([data-state=jump],[data-state=heart],[data-state=sixseven],[data-state=flag]) .frame-1{animation:pose-1 2.4s ease-in-out both}
.companion-character:is([data-state=jump],[data-state=heart],[data-state=sixseven],[data-state=flag]) .frame-2{animation:pose-2 2.4s ease-in-out both}
.companion-character:is([data-state=jump],[data-state=heart],[data-state=sixseven],[data-state=flag]) .frame-3{animation:pose-3 2.4s ease-in-out both}
@keyframes pose-0{0%,15%{opacity:1}22%,100%{opacity:0}}
@keyframes pose-1{0%,15%{opacity:0}22%,38%{opacity:1}45%,100%{opacity:0}}
@keyframes pose-2{0%,38%{opacity:0}45%,68%{opacity:1}75%,100%{opacity:0}}
@keyframes pose-3{0%,68%{opacity:0}75%,100%{opacity:1}}
.companion-character[data-state=jump]{animation:jojo-jump-smooth 2.4s ease-in-out both}
.companion-character[data-state=sixseven]{animation:jojo-sway-smooth 2.4s ease-in-out both}
@keyframes jojo-jump-smooth{0%,100%{transform:translateY(0)}20%{transform:translateY(2px)}50%{transform:translateY(-10px)}80%{transform:translateY(0)}}
@keyframes jojo-sway-smooth{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
.jojo-hover{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:8px 12px!important;background:var(--paper)!important;border:1px solid #095b73!important;border-radius:12px!important;color:#095b73!important;font:600 14px/1.2 'DM Sans',sans-serif!important;white-space:nowrap;opacity:0;pointer-events:none;text-shadow:none!important;transition:opacity .12s ease}
.jojo-hover::after{content:'';position:absolute;top:100%;left:50%;border:6px solid transparent;border-top-color:#095b73;transform:translateX(-50%)}
@media(hover:hover){.companion-trigger:hover .jojo-hover{opacity:1}}
.companion-trigger:focus-visible .jojo-hover{opacity:1}
.companion-trigger.is-dragging .jojo-hover{opacity:0}
.companion-trigger.near-top .jojo-hover{bottom:auto;top:calc(100% + 8px)}
.companion-trigger.near-top .jojo-hover::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#095b73}