.resident-rig{position:absolute;inset:0;z-index:4;pointer-events:none;transform-origin:42% 91%;animation:resident-rock 7.8s ease-in-out infinite;animation-play-state:paused}
.resident-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.resident-rig .headphones-hotspot{pointer-events:auto}
.resident-rig .character-hand{background-image:url('assets/room-grey.png');animation:resident-mouse 6.4s ease-in-out infinite;animation-play-state:paused}
.typing-hand{position:absolute;inset:0;background:url('assets/room-grey.png') 0 0/100% 100%;clip-path:polygon(41.1% 61%,41.4% 60.4%,42% 60.3%,42.8% 60.7%,43.5% 62%,42.7% 62.1%);transform-origin:41.3% 61.4%;animation:resident-type 5.6s ease-in-out infinite;animation-play-state:paused;pointer-events:none;z-index:2}
body[data-mode=room] .resident-rig,body[data-mode=room] .resident-rig .character-hand,body[data-mode=room] .typing-hand{animation-play-state:running}
@keyframes resident-rock{0%,100%{transform:rotate(-.18deg)}40%{transform:rotate(.28deg)}65%{transform:rotate(.08deg)}}
@keyframes resident-mouse{0%,25%,100%{transform:rotate(var(--hand-angle,0deg))}36%,62%{transform:rotate(calc(var(--hand-angle,0deg) + 1.1deg))}48%,76%{transform:rotate(calc(var(--hand-angle,0deg) - .6deg))}}
@keyframes resident-type{0%,16%,28%,40%,52%,70%,100%{transform:rotate(0deg)}22%,34%,46%,58%{transform:rotate(1.8deg)}}
.spider-scene{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none;overflow:visible}
.motion-reduced .resident-rig{transform:none!important}