/* ══════════════════════════════════════════════════════════
   title-shared.css — 두 게임(레테의 샘 / 서온고 방송부)이 공유하는
   타이틀 화면 + 제작진 모달 사양.

   · 색은 직접 쓰지 않는다. 게임별 CSS의 :root 가 정의하는 --title-* 변수만 쓴다.
     예외 2개: #04060a (두 게임의 바닥색이 동일), rgba(0,0,0,…) 검은 그림자.

   · 이 파일은 게임별 CSS에 정의된 키프레임 3종에 의존한다:
       fadeUp  → .title-eyebrow / .title-divider / #title-sub / .title-tagline
       fadeIn  → #title-screen
       chevBob → .credits-hint
     게임 CSS에서 이 셋 중 하나를 지우면 그 게임의 타이틀 애니메이션만 조용히 멈춘다.

   · kenburns 는 타이틀 전용이 아니다. 레테 인게임 #bg-layer(css/style.css)와
     랜딩 히어로(js/select.js)도 쓴다. 그래서 index.html 도 이 파일을 링크한다.
   ══════════════════════════════════════════════════════════ */

/* ── 타이틀 전용 키프레임 ── */
@keyframes kenburns { 0% { transform: scale(1.06) translate(0,0); } 100% { transform: scale(1.15) translate(-1.4%,-1.4%); } }
@keyframes logoRise { 0% { opacity:0; transform: translateY(38px) scale(.94); filter: blur(6px); } 100% { opacity:1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes glowPulse {
  0%,100% { text-shadow: 0 0 24px rgba(var(--title-accent-rgb),.35), 0 0 48px rgba(var(--title-logo-glow-rgb),.18); }
  50%     { text-shadow: 0 0 34px rgba(var(--title-accent-rgb),.6),  0 0 70px rgba(var(--title-logo-glow-rgb),.32); }
}
@keyframes drawDivider { from { transform: scaleX(0); opacity:0; } to { transform: scaleX(1); opacity:1; } }
@keyframes menuIn { from { opacity:0; transform: translateX(-14px); } to { opacity:1; transform: translateX(0); } }
@keyframes sparkleDrift { 0% { transform: translateY(0) scale(.5); opacity:0; } 12% { opacity:.9; } 80% { opacity:.55; } 100% { transform: translateY(-150px) scale(1); opacity:0; } }
@keyframes moonBreath { 0%,100% { opacity:.55; } 50% { opacity:.8; } }
@keyframes diamondSpin { from { transform: rotate(45deg) scale(1); } 50% { transform: rotate(225deg) scale(1.15); } to { transform: rotate(405deg) scale(1); } }

/* ── 타이틀 화면 ── */
#title-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 200; overflow: hidden; padding: clamp(14px, 2.2vw, 26px);
  background:
    radial-gradient(80% 60% at 22% 0%, var(--title-glow-a), transparent 60%),
    radial-gradient(70% 60% at 100% 100%, var(--title-glow-b), transparent 62%),
    #04060a;
  animation: fadeIn .6s ease both;
}
.title-hero-card {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: clamp(14px, 2vw, 22px);
  border: 1px solid rgba(var(--title-accent-rgb), .22);
  box-shadow: 0 20px 60px rgba(0,0,0,.56), 0 0 46px rgba(var(--title-accent-rgb), .09);
}

/* ── 배경 + 캐릭터 합성 무대 ── */
.title-stage { position: absolute; inset: 0; overflow: hidden; }
.title-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; opacity: .85;
  animation: kenburns 30s ease-in-out infinite alternate;
}
.title-bg--static { animation: none; }

/* .title-cast 자식 img 는 --x / --h 를 반드시 인라인으로 받아야 한다.
   정의되지 않으면 var() 가 계산 시점에 무효가 되어 left 가 auto 로 풀린다. */
.title-cast { position: absolute; right: 0; bottom: 0; width: min(64%, 940px); height: 100%; }
.title-cast img {
  position: absolute; bottom: 0; left: var(--x); height: var(--h);
  width: auto; object-fit: contain; object-position: bottom;
}
.tc-side  { z-index: 1; filter: brightness(.72) saturate(.9) drop-shadow(0 14px 26px rgba(0,0,0,.5)); }
.tc-lead  { z-index: 2; filter: drop-shadow(0 16px 30px rgba(0,0,0,.55)); }
.tc-wings { z-index: 1; }
.tc-flip  { transform: scaleX(-1); }

/* ── 그레이드 4겹 ── */
.title-grade-moon { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 45% at 50% 6%, var(--title-moon), transparent 60%); animation: moonBreath 7s ease-in-out infinite; }
.title-grade-left { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--title-shade-rgb),.82) 0%, rgba(var(--title-shade-rgb),.5) 40%, transparent 70%); }
.title-grade-bottom { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--title-shade-rgb),.3) 0%, transparent 34%, rgba(var(--title-shade-rgb),.55) 100%); }
.title-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 150px 30px rgba(var(--title-shade-rgb),.6); }

/* ── 스파클 ── */
.title-sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.title-sparkles span { position: absolute; border-radius: 50%; background: var(--title-spark);
  box-shadow: 0 0 6px var(--title-spark-glow); animation: sparkleDrift linear infinite; }

/* ── 상단 도구 ── */
.title-tools {
  position: absolute; top: clamp(16px, 2.5vw, 28px); left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px); z-index: 4; display: flex; align-items: center; justify-content: space-between;
}
.title-tool-actions { display: flex; align-items: center; gap: 8px; }
.title-tools button {
  padding: 9px 15px; border-radius: 10px; color: var(--title-tool-text);
  font-family: 'Noto Sans KR', sans-serif; font-size: 12.5px; letter-spacing: .03em; cursor: pointer;
  background: rgba(var(--title-panel-rgb), .62);
  border: 1px solid var(--title-tool-border); backdrop-filter: blur(7px);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.title-tools button:hover { color: #fff; border-color: var(--accent); background: rgba(var(--title-panel-hover-rgb), .78); }

/* ── 텍스트 오버레이 ── */
#title-overlay {
  position: absolute; left: clamp(28px, 5vw, 74px); top: 0; bottom: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  width: min(620px, 78vw); text-align: left;
  text-shadow: 0 3px 18px rgba(var(--title-shade-rgb), .7);
}
.title-eyebrow { font-size: 12px; letter-spacing: .5em; color: var(--title-eyebrow); text-transform: uppercase;
  margin-left: 4px; opacity: 0; animation: fadeUp .8s ease .1s both; }

/* 제목. #title-text 가 줄을 세로로 쌓고, .title-line 이 글자를 가로로 나열한다.
   lines-1(레테)는 글자 단위 애니메이션, lines-2(서온고)는 줄 단위 애니메이션. */
#title-text {
  display: flex; flex-direction: column; margin-top: 14px;
  font-family: 'Gowun Batang', serif; font-weight: 700; line-height: .98;
  color: var(--title-logo); animation: glowPulse 5s ease-in-out infinite;
}
#title-text .title-line { display: flex; align-items: flex-end; gap: 2px; }
#title-text .title-ch { display: inline-block;
  animation: logoRise .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
/* .title-gap 규칙은 .title-ch 뒤에 와야 한다. 특정도가 같아 뒤쪽이 이긴다. */
#title-text .title-gap { width: 34px; animation: none; }
#title-text.lines-2 .title-line {
  animation: logoRise .9s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
#title-text.lines-1 { font-size: clamp(56px, 7vw, 92px); }
#title-text.lines-2 { font-size: clamp(34px, 5vw, 64px); row-gap: .06em; }

.title-divider { display: flex; align-items: center; gap: 16px; margin: 20px 0 4px 6px; opacity: 0; animation: fadeUp .8s ease .7s both; }
.title-divider .tdl { height: 1px; width: 66px; transform-origin: left; background: linear-gradient(90deg, transparent, var(--accent)); animation: drawDivider 1s ease .75s both; }
.title-divider .tdd { color: var(--accent); font-size: 13px; display: inline-block; animation: diamondSpin 9s ease-in-out infinite; }
.title-divider .tdr { height: 1px; flex: 1; max-width: 180px; transform-origin: left; background: linear-gradient(90deg, var(--accent), transparent); animation: drawDivider 1.2s ease .8s both; }
#title-sub { font-family: 'Gowun Batang', serif; font-size: 15px; letter-spacing: .42em; color: var(--title-sub);
  margin-left: 6px; opacity: 0; animation: fadeUp .8s ease .85s both; }
.title-tagline { font-size: 14.5px; line-height: 1.9; color: var(--muted-text); margin: 20px 0 24px 6px; max-width: 420px;
  text-wrap: pretty; opacity: 0; animation: fadeUp .8s ease 1s both; }

/* ── 메뉴 ── */
.title-menu { position: relative; top: 16px; display: flex; align-items: stretch; gap: 10px; margin-left: 2px; }
.menu-item {
  display: flex; align-items: center; gap: 12px; width: 210px; padding: 13px 16px;
  border-radius: 13px; border: 1px solid rgba(var(--title-line-rgb), .14);
  background: linear-gradient(90deg, rgba(var(--title-panel-rgb),.55), rgba(var(--title-panel-rgb),.2));
  color: var(--title-menu-text); cursor: pointer; text-align: left; transition: all .2s ease;
  animation: menuIn .6s ease both; backdrop-filter: blur(4px);
}
.title-primary { border-color: var(--title-primary-border);
  background: linear-gradient(180deg, rgba(var(--title-accent-rgb),.2), rgba(var(--title-panel-rgb),.78));
  box-shadow: 0 8px 24px rgba(0,0,0,.38); }
.title-secondary { border-color: var(--title-secondary-border); background: rgba(var(--title-panel-rgb), .62); }
.menu-item:hover { border-color: rgba(var(--title-accent-rgb), .7); background: rgba(var(--title-panel-hover-rgb), .86);
  transform: translateY(-2px); box-shadow: 0 0 28px rgba(var(--title-accent-rgb), .16); }
.menu-item:disabled { opacity: .45; cursor: not-allowed; }
.menu-item:disabled:hover { transform: none; box-shadow: none; }
.mi-glyph { font-size: 17px; color: var(--accent); text-shadow: 0 0 10px var(--accent); width: 22px; text-align: center; flex-shrink: 0; }
.mi-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.mi-label { font-family: 'Gowun Batang', serif; font-size: 19px; font-weight: 700; letter-spacing: .14em; line-height: 1; }
.mi-sub { font-size: 11px; letter-spacing: .06em; color: var(--soft-text); line-height: 1; }
.mi-arrow { margin-left: auto; font-size: 20px; color: var(--faint-text); }

.title-footer { position: absolute; right: 22px; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--faint-text); letter-spacing: .08em; }
.title-footer span { opacity: .4; }

/* ── 모바일 ── */
@media (max-width: 640px) {
  #title-screen { padding: 0; }
  .title-hero-card { border: 0; border-radius: 0; }
  .title-bg { object-position: 58% center; }
  .title-cast { width: 92%; opacity: .5; }
  .title-cast .tc-side { display: none; }
  .title-grade-left { background: linear-gradient(90deg, rgba(var(--title-shade-rgb),.86) 0%, rgba(var(--title-shade-rgb),.6) 68%, rgba(var(--title-shade-rgb),.2) 100%); }
  #title-overlay { left: 24px; right: 24px; top: 72px; bottom: 24px; width: auto; justify-content: flex-end; }
  #title-text.lines-1 { font-size: clamp(48px, 15vw, 68px); }
  #title-text.lines-2 { font-size: clamp(28px, 9vw, 44px); }
  #title-text .title-gap { width: 20px; }
  .title-divider { margin-top: 14px; }
  .title-tagline { margin: 14px 0 18px 4px; font-size: 13px; }
  .title-tagline br { display: none; }
  .title-menu { top: 0; flex-direction: column; }
  .menu-item { width: 100%; }
  .title-footer { display: none; }
  .title-tools button { padding: 8px 10px; font-size: 11.5px; }
}

/* ── 제작진 모달 ── */
.credits-body { text-align: center; }
.credits-kicker { font-size: 11px; letter-spacing: .4em; color: var(--title-eyebrow); text-transform: uppercase; }
.credits-title { font-family: 'Gowun Batang', serif; font-size: 30px; color: var(--heading-alt); margin: 14px 0 20px; letter-spacing: .14em; }
.credits-list { font-size: 13.5px; line-height: 2.1; color: var(--muted-text); }
.credits-hint { margin-top: 22px; font-size: 12px; color: var(--faint-text); animation: chevBob 1.6s ease-in-out infinite; }