/* =========================================================
   오프닝 인트로 · 타이틀 시퀀스 (js/intro.js)
   #app[data-state] = INTRO | TITLE | PLAYING 에 따라 3D 위 HTML UI를 바꾼다.
   애니메이션은 transform·opacity·filter 위주라 메인 스레드 레이아웃을 건드리지 않는다.
   ========================================================= */

/* 인트로·타이틀 동안은 게임 UI를 숨기고, 플레이로 넘어오면 부드럽게 나타난다 */
#app[data-state="INTRO"] :is(.hud, .controls, .hint, .guide, .skill, .panel, .dialog, .choices, .actions, .toast),
#app[data-state="TITLE"] :is(.hud, .controls, .hint, .guide, .skill, .panel, .dialog, .choices, .actions, .toast) { visibility: hidden; }
#app[data-state="PLAYING"] .hud { animation: inHudIn 0.8s 0.5s cubic-bezier(0.3, 1.2, 0.5, 1) backwards; }
#app[data-state="PLAYING"] .controls { animation: inHudUp 0.8s 0.7s cubic-bezier(0.3, 1.2, 0.5, 1) backwards; }
@keyframes inHudIn { from { opacity: 0; translate: 0 -24px; } to { opacity: 1; translate: 0 0; } }
@keyframes inHudUp { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

.intro-root {
  display: block; padding: 0; overflow: hidden; cursor: pointer;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  --in-top: env(safe-area-inset-top, 0px); --in-bot: env(safe-area-inset-bottom, 0px);
}
.in-dim { position: absolute; inset: 0; pointer-events: none; }

/* ---------- Phase 1: 시네마틱 프롤로그 ---------- */
.in-prologue { cursor: default; }
.in-prologue .in-dim { background: radial-gradient(ellipse at 50% 50%, rgba(18, 10, 28, 0.2) 0%, rgba(18, 10, 28, 0.72) 100%); }
.in-prologue::before { content: ''; position: absolute; inset: 0; z-index: 3; background: #0b0612; pointer-events: none; animation: inFromBlack 2.4s ease-out forwards; }
@keyframes inFromBlack { from { opacity: 1; } to { opacity: 0; } }

.in-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #07040c; pointer-events: none; animation: inBar 1.6s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.in-bar-top { top: 0; transform-origin: top; }
.in-bar-bottom { bottom: 0; transform-origin: bottom; }
@keyframes inBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.in-lines { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 20px; pointer-events: none; }
.in-line {
  grid-area: 1 / 1; margin: 0; text-align: center; color: #fff8ec;
  font-family: var(--font-display); font-size: clamp(21px, 4.4vw, 42px); line-height: 1.55; letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
  opacity: 0; filter: blur(10px); translate: 0 12px;
  transition: opacity 1.4s ease, filter 1.4s ease, translate 1.6s ease;
}
.in-line.show { opacity: 1; filter: blur(0); translate: 0 0; }

.in-skip {
  position: absolute; z-index: 4; top: calc(var(--in-top) + 16px); right: 16px; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 999px; cursor: pointer; background: rgba(255, 253, 246, 0.16); color: #fff8ec;
  font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.8s 1.6s backwards; transition: background 0.2s, transform 0.2s;
}
.in-skip span { opacity: 0.75; margin-left: 4px; font-size: 12px; }
.in-skip:hover, .in-skip:focus-visible { background: rgba(255, 253, 246, 0.32); transform: translateY(-2px); outline: none; }

/* ---------- Phase 2: 타이틀 ---------- */
.in-dim-title { background: linear-gradient(to bottom, rgba(255, 244, 222, 0.62), rgba(255, 244, 222, 0) 46%, rgba(255, 244, 222, 0) 58%, rgba(60, 34, 12, 0.5)); animation: fadeIn 1.2s; }

.in-hero { position: absolute; left: 0; right: 0; top: calc(var(--in-top) + 7vh); padding: 0 16px; text-align: center; pointer-events: none; }
.in-logo { margin: 0; font-family: var(--font-display); font-weight: normal; line-height: 1.02; display: flex; flex-direction: column; align-items: center; }
.in-l1, .in-l2 { display: block; white-space: nowrap; }
.in-l1 { font-size: clamp(30px, 6.4vw, 52px); color: var(--honey); -webkit-text-stroke: 3px #8a5a14; paint-order: stroke fill; text-shadow: 0 4px 0 #8a5a14; }
.in-l2 { font-size: clamp(60px, 15vw, 124px); color: #fff; -webkit-text-stroke: 6px var(--rose-deep); paint-order: stroke fill; text-shadow: 0 8px 0 var(--rose-deep), 0 14px 22px rgba(90, 30, 20, 0.35); letter-spacing: 0.01em; --o: 0.55s; }
.in-ch {
  display: inline-block; transform-origin: 50% 90%;
  animation: inDrop 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.09s + var(--o, 0.15s)) backwards,
            inBob 2.6s ease-in-out calc(var(--i) * 0.12s + 2s) infinite;
}
.in-sp { display: inline-block; width: 0.34em; }
@keyframes inDrop {
  0% { opacity: 0; transform: translateY(-160%) scale(1.5, 0.8) rotate(-14deg); }
  55% { opacity: 1; transform: translateY(6%) scale(0.92, 1.12) rotate(2deg); }
  78% { transform: translateY(-3%) scale(1.04, 0.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes inBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%) scale(1.02); } }

.in-sub {
  display: inline-block; margin: 14px 0 0; padding: 6px 22px; border-radius: 999px; background: var(--sky); color: #0f3a62;
  font-family: var(--font-display); font-size: clamp(14px, 2.6vw, 20px); box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(15, 58, 98, 0.3);
  animation: inRise 0.7s 1.7s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}
@keyframes inRise { from { opacity: 0; transform: translateY(14px) scale(0.85); } to { opacity: 1; transform: none; } }

.in-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--in-bot) + 8vh); padding: 0 16px; display: grid; place-items: center; }
.in-press {
  margin: 0; color: #fff; font-family: var(--font-display); font-size: clamp(16px, 3.6vw, 26px); text-align: center; letter-spacing: 0.03em;
  text-shadow: 0 2px 0 rgba(90, 50, 20, 0.7), 0 0 16px rgba(0, 0, 0, 0.55);
  animation: inBlink 1.5s ease-in-out 2.3s infinite, fadeIn 0.6s 2.2s backwards;
}
@keyframes inBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
.in-menu { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; animation: popIn 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); }
.in-menu[hidden] { display: none; }
.in-menu-open { cursor: default; }

.in-mute {
  position: absolute; z-index: 4; top: calc(var(--in-top) + 16px); right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  cursor: pointer; font-size: 20px; background: rgba(255, 253, 246, 0.85); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, 0.25);
  animation: fadeIn 0.6s 1s backwards;
}

/* 시작 입력 → 로고가 커지며 사라진다 (이어서 화이트아웃) */
.in-leave .in-hero { animation: inLeave 0.5s ease-in forwards; }
.in-leave .in-foot, .in-leave .in-mute, .in-leave .in-dim { animation: inLeaveFade 0.4s ease-in forwards; }
.in-leave { pointer-events: none; }
@keyframes inLeave { to { opacity: 0; transform: scale(1.35); } }
@keyframes inLeaveFade { to { opacity: 0; } }

/* 화이트아웃: 켜질 땐 빠르게, 걷힐 땐 천천히 (그 사이 카메라가 플레이 시점으로 이동) */
.in-flash { position: fixed; z-index: 62; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity 1.1s ease-out; }
.in-flash.on { opacity: 1; pointer-events: auto; transition: opacity 0.5s ease-in; }

@media (max-height: 480px) {
  .in-hero { top: calc(var(--in-top) + 3vh); }
  .in-foot { bottom: calc(var(--in-bot) + 4vh); }
  .in-bar { height: 6vh; }
}
@media (prefers-reduced-motion: reduce) {
  .in-ch { animation: inRise 0.6s backwards; }
  .in-press { animation: fadeIn 0.6s 1s backwards; }
  .in-line { filter: none; translate: 0 0; }
}

/* 프롤로그 시네마틱 자막: 문제(빨강) → 솔루션·변화(초록) 꼬리표 + 큰 자막 */
.in-cine .in-dim { background: radial-gradient(ellipse at 50% 45%, rgba(18, 10, 28, 0) 40%, rgba(18, 10, 28, 0.45) 100%); }
.in-cap {
  position: absolute; left: 50%; bottom: calc(9vh + 22px); transform: translateX(-50%); z-index: 4;
  width: min(760px, calc(100% - 32px)); display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; pointer-events: none; opacity: 0; translate: 0 10px; transition: opacity 0.5s ease, translate 0.6s ease;
}
.in-cap.show { opacity: 1; translate: 0 0; }
.in-tag {
  font-family: var(--font-display); font-size: clamp(13px, 2.2vw, 17px); padding: 4px 14px; border-radius: 999px;
  background: rgba(255, 253, 246, 0.9); color: #5a3a22; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25);
}
.in-cap[data-tone='bad'] .in-tag { background: #ff8a7a; color: #fff; }
.in-cap[data-tone='good'] .in-tag { background: #5cc98a; color: #fff; }
.in-say {
  margin: 0; color: #fff8ec; font-family: var(--font-display); font-size: clamp(20px, 3.8vw, 36px); line-height: 1.4;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6);
}
@media (max-width: 720px) { .in-cap { bottom: calc(6vh + 14px); } }
@media (prefers-reduced-motion: reduce) { .in-cap { transition: none; translate: 0 0; } }