/* 시절마디 마디 — 움직임 레이어 (덧붙이는 층)
   sjm-companion.css 뒤에 <link> 한 줄만 추가하면 됩니다.
   기존 배치·색·문구·판정 로직은 건드리지 않습니다. 여기 있는 것은 전부 애니메이션뿐입니다.
   [data-sjm-companion] 안쪽이라 기존 [움직임 끄기] 버튼(.sjmc-paused)과
   prefers-reduced-motion 규칙이 그대로 이 층도 끕니다. */

/* 1 · 마디 등장 — 화면이 뜨면 아래서 올라오며 나타난다 */
@keyframes sjmm-rise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}
[data-sjm-companion] .sjmc-visual{animation:sjmm-rise .52s cubic-bezier(.2,.7,.3,1) both}

/* 2 · 첫 문장이 한 박자 뒤에 */
@keyframes sjmm-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
[data-sjm-companion] .sjmc-eyebrow{animation:sjmm-in .42s ease-out both}
[data-sjm-companion] .sjmc-intro h1{animation:sjmm-in .48s ease-out .06s both}
[data-sjm-companion] .sjmc-lead{animation:sjmm-in .48s ease-out .14s both}
[data-sjm-companion] .sjmc-steps{animation:sjmm-in .48s ease-out .22s both}

/* 3 · 말풍선 — 처음 뜰 때, 그리고 대사가 바뀔 때마다 다시 */
[data-sjm-companion] .sjmc-bubble{animation:sjmm-bubble .46s cubic-bezier(.2,.7,.3,1) .3s both}
@keyframes sjmm-bubble{from{opacity:0;transform:translateY(9px) scale(.99)}to{opacity:1;transform:none}}
/* JS가 대사를 바꾸면 data-sjmm-said 값이 바뀌고, 그때 다시 한 번 재생된다 */
[data-sjm-companion] .sjmc-bubble[data-sjmm-said]{animation:sjmm-bubble .34s cubic-bezier(.2,.7,.3,1) both}
/* 말하는 중 커서 — 대사 끝에 한 칸 */
@keyframes sjmm-caret{0%,46%{opacity:1}50%,100%{opacity:0}}
[data-sjm-companion] .sjmc-bubble:after{content:"";display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-2px;background:var(--sjmc-accent,#b74f61);animation:sjmm-caret 1.15s step-end infinite}

/* 4 · 선택지가 하나씩 */
[data-sjm-companion] .sjmc-choices button{animation:sjmm-in .4s ease-out both}
[data-sjm-companion] .sjmc-choices button:nth-child(1){animation-delay:.40s}
[data-sjm-companion] .sjmc-choices button:nth-child(2){animation-delay:.46s}
[data-sjm-companion] .sjmc-choices button:nth-child(3){animation-delay:.52s}
[data-sjm-companion] .sjmc-choices button:nth-child(4){animation-delay:.58s}
[data-sjm-companion] .sjmc-choices button:nth-child(5){animation-delay:.64s}
[data-sjm-companion] .sjmc-choices button:nth-child(6){animation-delay:.70s}

/* 5 · 손가락에 반응 — 누르면 살짝 들렸다 눌린다 */
[data-sjm-companion] .sjmc-choices button{transition:background .18s,border-color .18s,transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s}
@media(hover:hover){[data-sjm-companion] .sjmc-choices button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000002e}}
[data-sjm-companion] .sjmc-choices button:active{transform:translateY(1px) scale(.985);box-shadow:none}
[data-sjm-companion] .sjmc-choices button[aria-pressed="true"]{transform:none}
/* 고른 칸에 띠 하나 — 선택이 눈에 남는다 */
@keyframes sjmm-mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-sjm-companion] .sjmc-choices button{position:relative;overflow:hidden}
[data-sjm-companion] .sjmc-choices button[aria-pressed="true"]:before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#f4c5ae;transform-origin:left;animation:sjmm-mark .3s ease-out both}

/* 6 · 표정 전환 — 흐릿하게 사라졌다 또렷하게 (원래는 투명도만 바뀌었습니다) */
@keyframes sjmm-face{0%{opacity:.25;filter:blur(3px);transform:scale(1.015)}100%{opacity:1;filter:none;transform:none}}
[data-sjm-companion] .sjmc-portrait[data-expression] img{animation:sjmm-face .34s cubic-bezier(.2,.7,.3,1) both;transition:transform .34s cubic-bezier(.2,.7,.3,1)}

/* 7 · 숨쉬기 — 계속 도는 움직임은 이것 하나뿐 */
@keyframes sjmm-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
[data-sjm-companion] .sjmc-portrait{animation:sjmm-breathe 5.4s ease-in-out 1.1s infinite}

/* 8 · 다음 버튼이 가끔 가리킨다 */
@keyframes sjmm-nudge{0%,88%,100%{transform:translate(0,0)}92%{transform:translate(3px,-3px)}96%{transform:translate(0,0)}}
[data-sjm-companion] .sjmc-next span{display:inline-block;animation:sjmm-nudge 6.2s ease-out 2s infinite}
[data-sjm-companion] .sjmc-next{transition:background .18s,transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s}
@media(hover:hover){[data-sjm-companion] .sjmc-next:hover{transform:translateY(-2px);box-shadow:0 10px 24px #00000038}}
[data-sjm-companion] .sjmc-next:active{transform:translateY(1px);box-shadow:0 3px 9px #0002}

/* 9 · 지금 어느 장을 지나는지 */
@keyframes sjmm-step{0%,100%{opacity:1}50%{opacity:.55}}
[data-sjm-companion] .sjmc-steps span{transition:color .3s}
[data-sjm-companion] .sjmc-steps [aria-current]{animation:sjmm-step 2.8s ease-in-out infinite}

/* 10 · 결과 안내가 도착할 때 — 이 칸은 companion 바깥이라 따로 끈다 */
@keyframes sjmm-guide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body:not(.sjmm-off) .sjmc-result-guide:not([hidden]){animation:sjmm-guide .5s cubic-bezier(.2,.7,.3,1) both}
body:not(.sjmm-off) .sjmc-result-guide:not([hidden]) .sjmc-result-portrait{animation:sjmm-rise .56s cubic-bezier(.2,.7,.3,1) .1s both}

/* 11 · 결과 본문이 한 컷씩 (웹툰형)
   기본 상태는 "보임"이다. 화면에 들어오는 순간 .sjmm-in 이 붙으면 한 번만 재생하고 끝난다.
   관찰이 실패하거나 스크립트가 죽어도 내용이 숨겨진 채로 남는 경우는 없다. */
@keyframes sjmm-cut{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sjmm-in{animation:sjmm-cut .5s cubic-bezier(.2,.7,.3,1) backwards}
body.sjmm-off .sjmm-in{animation:none}

/* 끄기 — 기존 버튼과 OS 설정 둘 다 존중한다 */
body.sjmm-off .sjmc-result-guide,body.sjmm-off .sjmc-result-guide *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
 [data-sjm-companion] *,[data-sjm-companion] *:before,[data-sjm-companion] *:after,
 .sjmc-result-guide,.sjmc-result-guide *,.sjmm-in{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
 [data-sjm-companion] .sjmc-bubble:after{display:none}
}