/* hero-art.css — 캐릭터 상황별 일러스트(hero-art.js): 대화 반신 표정·이벤트 CG */

/* 대화 반신(허리 위, 머리 위 여백 있음): 예전 전신 스탠딩은 174% 로 키워 윗부분만 보였다 → 반신은 거의 그대로 */
#cine:is(.full, .scene, .over) .cn-por.bust img { height: 104%; }

/* 이벤트 CG: 무대 위·초상화와 대사창 아래. 떠 있는 동안 초상화는 숨긴다(그림 안에 인물이 있다).
   그림은 확대·이동 없이 가만히 둔다. 화면이 그림(3:2)보다 넓어도 위아래는 6%까지만 자르고(인물 머리가 잘리지 않게),
   남는 좌우는 같은 그림을 흐려 채운다(--cg-img, cine.js). 움직이는 영상(video.mv)도 같은 자리에 겹친다. 떠 있는 동안 레터박스는 걷는다. */
#cine .cn-cg { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
#cine .cn-cg.on { opacity: 1; }
#cine .cn-cg::before { content: ''; position: absolute; inset: -6%; background: var(--cg-img, none) center / cover no-repeat; filter: blur(28px) saturate(1.15) brightness(.5); }
#cine .cn-cg :is(img, video.mv) { position: absolute; inset: 0 auto auto 50%; height: 100%; width: auto; aspect-ratio: 1.6; max-width: 100%; translate: -50% 0; object-fit: cover; object-position: 50% 38%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
#cine#cine.cg.bars .cn-bars i { height: 0; }
#cine.cg .cn-por { opacity: 0 !important; transition: opacity .3s; }
/* CG 아래 대사창은 조금 더 투명하게(그림이 보이게) */
#cine.cg .cn-box:not(.narr) { background: linear-gradient(120deg, #0d1b2fd8, #192e45cc); }

/* 소환 의식(gacha-fx.js) 공개 화면: 실루엣은 스탠딩, 채색(.lit)되는 순간 획득 스플래시가 그 자리에 떠오르고 흐린 사본이 뒤에 깔린다 */
.gx-feat .gf-splash-bg { position: absolute; inset: -4%; z-index: -1; background: center 30% / cover no-repeat; filter: blur(18px) brightness(.4) saturate(1.2); opacity: 0; }
.gx-feat .gf-splash { position: absolute; left: 2%; bottom: 0; height: 100%; aspect-ratio: 2 / 3; max-width: 60%; object-fit: cover; object-position: 50% 20%; opacity: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); }
.gx-feat.splash.lit .gf-splash-bg { animation: gfSplashBg 1.2s ease-out forwards; }
.gx-feat.splash.lit .gf-splash { animation: gfSplashIn 1.1s cubic-bezier(.16,.9,.22,1) forwards; }
.gx-feat.splash.lit .gf-art { animation: gfSplashOut .35s steps(4) forwards; }
@keyframes gfSplashBg { from { opacity: 0; transform: scale(1.08); } to { opacity: .85; transform: none; } }
@keyframes gfSplashIn { 0% { opacity: 0; transform: scale(1.12); filter: brightness(2.4); } 45% { opacity: 1; filter: brightness(1.4); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes gfSplashOut { to { opacity: 0; } }

/* 결과 화면 승리 포즈(머리~허벅지 구도): 전신 스탠딩보다 덜 키운다 */
.menu .res-art.win-pose { height: 100%; margin-top: 0; object-fit: contain; object-position: bottom; }