/* shop-mood.css — 캐릭터 상태 신호의 모양 (전체계획 #155 · 경험계약 §6)
   ★ 무대 규칙(shop-tarojip.css · shop-oracle-ui.css) 뒤에 읽는다 — 같은 선택자의 숨결을 여기서 강도별로 갈아 끼운다.
   ★ 값은 캐릭터마다 다르다: `--mood-amp` 를 shop-mood.js 가 .tj-stage 에 얹는다(루나 1 · 하연 .6 · 청운 .4). */

.tj-stage{ --mood-amp: 1; }

/* 상태 층 — 무대의 스틸(z4) 위, 영상 두 겹(z1·2)과 컷(z3) 위 */
.tj-stage .mood-layer{
  position:absolute; inset:0; z-index:5; pointer-events:none;
}
.tj-stage .mood-face,
.tj-stage .mood-talk,
.tj-stage .mood-blink{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:46% var(--tj-face-y, 16%);   /* 무대 스틸과 **같은 변수**를 쓴다 — 따로 두면 글 쓸 때 얼굴만 어긋난다(2026-09-05) */
  opacity:0;
}
/* 상태 컷 — 들어오는 쪽이 위로 덮는다(크로스페이드 아님). 길이는 JS 가 강도별로 얹는다 */
.tj-stage .mood-face{ transition:opacity .4s ease; }
.tj-stage .mood-face.is-on{ opacity:1; }
/*  입 — 말하는 동안만 켠다(2026-09-05 사람 지시 ⑩). 전환 없이 톡톡 갈린다(150ms).
    `<접두>-talk-a/b.jpg` 는 **기본 스틸에 입만 갈아 끼운 그림**이라(깜빡임 컷과 같은 방법)
    켜고 꺼도 움직이는 것은 입뿐이다. 두 장이 다 없으면 이 층은 비어 있다. */
.tj-stage .mood-talk{ z-index:3; transition:none; }
.tj-stage .mood-talk.is-on{ opacity:1; }
/* 깜빡임 — 전환 없이 켰다 끈다(120ms). 눈 감은 컷이 없으면 이 층은 비어 있다.
   입 층보다 **위**다(z 4) — 다만 말하는 동안에는 깜빡이지 않으므로 둘이 겹칠 일은 없다. */
.tj-stage .mood-blink{ z-index:4; transition:none; }
.tj-stage .mood-blink.is-on{ opacity:1; }
/* 도사집 띠(위 38%)에서는 얼굴 자리를 무대와 같이 본다(shop-oracle-ui.css --dj-face-y) */
body.dj-on .tj-stage .mood-face,
body.dj-on .tj-stage .mood-talk,
body.dj-on .tj-stage .mood-blink{ object-position:46% var(--dj-face-y, 28%); }

/* 기본 상태 = 스틸 + 호흡. 무대의 tj-still-on 규칙이 영상을 숨기고 스틸을 켠다.
   숨결 진폭만 캐릭터 강도로 — 루나 0.8% · 하연 0.48% · 청운 0.32%. 상태 층도 같은 숨을 쉰다(어긋나면 눈·컷이 겹쳐 보인다). */
@media (prefers-reduced-motion: no-preference){
  body.tj-still-on .tj-stage .tj-still,
  body.tj-still-on .tj-stage .mood-layer{
    animation: mood-breathe 7.5s ease-in-out infinite;
  }
}
@keyframes mood-breathe{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(calc(1 + 0.008 * var(--mood-amp, 1))); }
}