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

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

/* 이벤트 CG: 무대 위·초상화와 대사창 아래. 떠 있는 동안 초상화는 숨긴다(그림 안에 인물이 있다) */
#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 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform-origin: 50% 40%; }
#cine .cn-cg.on.kb-in img { animation: cnCgIn 16s ease-out forwards; }
#cine .cn-cg.on.kb-out img { animation: cnCgOut 16s ease-out forwards; }
#cine .cn-cg.on.kb-pan img { animation: cnCgPan 18s ease-in-out forwards; }
@keyframes cnCgIn { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes cnCgOut { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes cnCgPan { from { transform: scale(1.1) translateX(3%); } to { transform: scale(1.1) translateX(-3%); } }
#cine.cg .cn-por { opacity: 0 !important; transition: opacity .3s; }
/* CG 아래 대사창은 조금 더 투명하게(그림이 보이게) */
#cine.cg .cn-box:not(.narr) { background: linear-gradient(120deg, #0d1b2fd8, #192e45cc); }
@media (prefers-reduced-motion: reduce) { #cine .cn-cg img { animation: none !important; } }

/* 소환 의식(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; }