/* v2.8 타이틀 로고 (js/logo.js) — 아무것도 없는 데서 빛의 선이 윤곽을 긋고(.lg-line) → 속이 차오르고(.lg-fill) → O의 보석이 박힌다(.lg-gem).
   글자마다 --t(시작 시각)를 js가 준다. 다 그려진 뒤엔 예전처럼 은은히 빛난다(shimmer). 누르면 예전과 같이 타며 사라진다(burnAway). */
.t-title { position: relative; align-items: flex-start; letter-spacing: 0; }
/* v3.0 입체 로고: 마우스를 따라 조금 기운다(js/logo.js LOGO.tilt). 굴곡 · 질감 · 두께는 글자 속(.lg-fill)의 bevel 필터 */
.t-title { transform: perspective(1100px) rotateY(var(--tx, 0deg)) rotateX(var(--ty, 0deg)); transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.t-title .lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.t-title .lg { display: block; flex: none; overflow: visible;
  animation: lgGlow 2.8s var(--t) ease-out both, shimmer 6s calc(var(--t) + 4.6s) ease-in-out infinite; }
@keyframes lgGlow {
  0% { filter: drop-shadow(0 0 3px rgba(255, 232, 170, .95)) drop-shadow(0 0 14px rgba(255, 180, 90, .6)); }
  50% { filter: brightness(1.45) drop-shadow(0 0 20px rgba(255, 226, 160, .9)) drop-shadow(0 0 46px rgba(255, 140, 60, .45)); }
  100% { filter: drop-shadow(0 0 18px rgba(240, 200, 120, .35)) drop-shadow(0 2px 0 rgba(60, 40, 10, .8)); }
}
/* 1. 빛의 선: 윤곽을 따라 그어진다(pathLength 100) → 다 차면 가는 테두리 빛으로 남는다 */
.t-title .lg-line { fill: none; stroke: #fff4d2; stroke-width: 10; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
  animation: lgDraw 1.25s calc(var(--t) + var(--s, 0s)) cubic-bezier(.45, .05, .35, 1) forwards,
             lgEdge 1s calc(var(--t) + var(--s, 0s) + 1.5s) ease-out forwards; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
@keyframes lgEdge { to { stroke-opacity: .3; stroke-width: 4; } }
/* 2. 속이 차오른다 */
.t-title .lg-fill { opacity: 0; animation: lgFill .9s calc(var(--t) + .9s) ease-out forwards; }
.t-title .lg-o .lg-fill { animation-delay: calc(var(--t) + 1.15s); }
@keyframes lgFill { to { opacity: 1; } }
/* 3. O: 용의 보석이 하나씩 박힌다 (동쪽은 빈 자리) */
.t-title .lg-gem { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center;
  animation: lgGem .5s calc(var(--t) + 1.45s + var(--s, 0s)) cubic-bezier(.3, 1.7, .5, 1) forwards; }
@keyframes lgGem { to { opacity: 1; transform: none; } }

/* 부제와 시작 단추는 로고가 다 생긴 뒤에 */
.screen-title .t-sub { animation-delay: 3.4s; }
.screen-title .t-start { animation-delay: 3.9s, 5.1s; }

/* 입장(누름): 예전 글자와 같이 하나씩 타며 가운데로 */
.screen-title.awaken .t-title .lg { animation: burnAway 1.5s calc(.25s + var(--d) * .09s) cubic-bezier(.55, 0, .8, .2) forwards; }

@media (prefers-reduced-motion: reduce) {
  .t-title .lg { animation: none; filter: drop-shadow(0 0 18px rgba(240, 200, 120, .35)) drop-shadow(0 2px 0 rgba(60, 40, 10, .8)); }
  .t-title .lg-line { display: none; }
  .t-title .lg-fill, .t-title .lg-gem { opacity: 1; transform: none; animation: none; }
  .screen-title .t-sub, .screen-title .t-start { animation-delay: 0s; }
}