/* 하이센스 20문항 — 움직임 모양(motion.js 짝). 보라 #6c3be8 계열.
   기준: 기존 hisense/motion.css 누름 .97·0.16초·cubic-bezier(.23,1,.32,1).
   CSS transition 은 transform 에만 걸고, motion.js 는 개별 속성 translate/rotate/scale 만 움직이므로 서로 안 부딪힌다
   (hyperframes-animation rules-index «no CSS transition on animated elements» — 같은 속성을 두 시계가 쥐지 않게). */
:root{--hxm-ui:cubic-bezier(.23,1,.32,1)}

/* 누름 — rules/press-release-spring.md «Subtle press» .96~.97, 눌림은 짧게 */
.hx-opt,.hx-level-card,.hx-part,.hx-card,.hx-nav button{transition:transform .16s var(--hxm-ui),box-shadow .16s var(--hxm-ui)}
.hx-opt:active,.hx-level-card:active,.hx-part:active,.hx-nav button:not(:disabled):active{transform:scale(.97)}

/* 포커스 링 — 키보드로 올 때만 */
.hx-opt:focus-visible,.hx-level-card:focus-visible,.hx-part:focus-visible,.hx-card:focus-visible,.hx-nav button:focus-visible,.hx-slot:focus-visible{outline:3px solid #6c3be8;outline-offset:3px}

/* 보기 카드 hover — 포인터 기기만(터치에서 hover 가 붙어 남지 않게) */
@media (hover:hover) and (pointer:fine){
 .hx-opt:hover,.hx-level-card:hover,.hx-part:hover{transform:translateY(-2px);box-shadow:0 8px 20px #6c3be81f}
 .hx-opt:hover:active,.hx-level-card:hover:active,.hx-part:hover:active{transform:translateY(-2px) scale(.97)}
}

/* 끌기 들림 그림자 — rules/cursor-drag.md «the shadow is the off-the-surface cue» (애니메이트하지 않는 상태 표시) */
.hxm-lifted{box-shadow:0 14px 28px #2a165f33,0 3px 8px #2a165f1f!important;z-index:5;cursor:grabbing}

/* 짚기 파장 고리(mark 가 .hx-mark 안에 잠깐 넣는다) */
.hx-mark{overflow:visible}
.hxm-ripple{position:absolute;inset:-3px;border-radius:50%;border:2.5px solid #6c3be8;pointer-events:none;opacity:0}

/* 축 — 등갓은 위 가운데에 매달려 흔들림, 손은 손목(아래 가운데)에서 */
.hx-lamp-stage img{transform-origin:50% 0}
.hx-guide-face svg,.hx-guide-face img{transform-origin:50% 85%}
.hx-guide-face{transform-origin:50% 100%}
.hx-badge{transform-origin:50% 50%}
.hx-card{transform-origin:50% 60%}
.hx-mark{transform-origin:50% 100%}

/* 축하 — .hx-celebrate(가로 100%, 엔진이 min 180px) 안에 손 + 색종이 */
.hx-celebrate{position:relative}
.hxm-cel{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hxm-cel-hand{position:absolute;z-index:1;left:50%;top:50%;width:120px;height:120px;margin:-66px 0 0 -60px;transform-origin:50% 100%}
.hxm-cel-hand svg{width:100%;height:100%;display:block;overflow:visible}
.hxm-cel-hand.nologo{border-radius:50%;background:#6c3be8}
.hxm-cel-bit{position:absolute;left:50%;top:58%;width:9px;height:14px;margin:-7px 0 0 -4.5px;border-radius:2px;opacity:0}
.hxm-cel-bit.r{width:10px;height:10px;border-radius:50%}

/* 움직임 줄이기 — 누름·hover 이동 없음, 축하는 정지 그림(색종이 보임) */
@media (prefers-reduced-motion:reduce){
 .hx-opt,.hx-level-card,.hx-part,.hx-card,.hx-nav button{transition:none}
 .hx-opt:active,.hx-level-card:active,.hx-part:active,.hx-nav button:not(:disabled):active,
 .hx-opt:hover,.hx-level-card:hover,.hx-part:hover{transform:none}
 .hxm-cel-bit{opacity:1}
}