/* Everside OS pointer. One hand, a vocabulary of states. */
body.hand, body.hand * { cursor: none !important; }
body.hand input, body.hand textarea, body.hand [contenteditable="true"] { cursor: text !important; }
#oshand { position: fixed; inset: auto; left: 0; top: 0; z-index: 100; width: 32px; height: 38px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; pointer-events: none; will-change: transform; opacity: 0; transition: opacity .25s; }
#oshand::backdrop, .osspark::backdrop { display: none; }
body.hand #oshand { opacity: 1; }
body.immersive #oshand, #oshand.text { opacity: 0; }
#oshand svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)) drop-shadow(0 0 9px rgba(255, 250, 248, .3)); transition: transform .12s cubic-bezier(.2, .8, .2, 1), opacity .15s; }
#oshand .ring, #oshand .orbit, #oshand .glyph, #oshand .palm, #oshand .fist { opacity: 0; transition: opacity .15s; }
#oshand .ring { transform-origin: 22px 6px; transition: opacity .2s, stroke-dasharray .2s; }
/* ready: this can be pressed */
#oshand.ready svg { transform: scale(1.08); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 13px rgba(255, 250, 248, .55)); }
#oshand.ready .ring { opacity: 1; }
/* press: it gives under you */
#oshand.down svg { transform: scale(.88); }
/* hold and pull: over anything pullable the finger opens into a palm; while dragging it closes */
#oshand.hold .pt, #oshand.pull .pt { opacity: 0; }
#oshand.hold .palm { opacity: 1; }
#oshand.pull .fist { opacity: 1; }
/* watch: over art it steps back so the picture stays the point */
#oshand.watch svg { opacity: .62; transform: scale(.92); }
#oshand.watch .glyph.play { opacity: 1; }
/* working: the three lights orbit the fingertip */
#oshand.working .orbit { opacity: 1; }
#oshand.working .ring { opacity: 0; }
#oshand .orbit { transform-origin: 22px 6px; animation: osspin 1.1s linear infinite; }
@keyframes osspin { to { transform: rotate(360deg); } }
/* no: a small shake, a broken ring */
#oshand.no .ring { opacity: 1; stroke-dasharray: 3 4; }
#oshand.no svg { animation: osshake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes osshake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } }
/* leave: this goes outside the OS */
#oshand.leave .glyph.out, #oshand.leave .ring { opacity: 1; }
/* arrived: the pointer carries the unread light until you look */
#oshand.arrived .ring { opacity: 1; stroke: #2BB673; stroke-opacity: 1; animation: ospulse 2s ease-in-out infinite; }
@keyframes ospulse { 0%, 100% { filter: drop-shadow(0 0 4px #2BB673); } 50% { filter: drop-shadow(0 0 12px #2BB673); } }
/* rest: it breathes when you stop */
#oshand.rest svg { animation: osbreathe 4s ease-in-out infinite; }
@keyframes osbreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* hello: it arrives */
#oshand.hello svg { animation: oshello .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes oshello { from { transform: scale(.7) rotate(-18deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
/* the click leaves a pixel behind */
.osspark { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; overflow: visible; width: 4px; height: 4px; border-radius: 1px; background: #FFFAF8; pointer-events: none; z-index: 99; animation: osspark .5s ease-out forwards; }
@keyframes osspark { to { transform: translateY(-18px) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #oshand svg, #oshand .orbit, .osspark { animation: none !important; }
  #oshand svg { transition: none; }
}
body.still #oshand.rest svg, body.still #oshand.hello svg, body.still #oshand.no svg { animation: none; }