/* 첫 화면(타이틀) — 2026-10-06 「B 포스터」 확정: 막차 객실 배경 + 네온 로고(따로 겹친다)
   배경은 화면을 꽉 채우고(cover) 천천히 다가오며, 로고는 네온이 「틱틱」 켜진 뒤 은은히 숨 쉰다
   ★2026-10-14 연출은 회사 인트로가 걷힌 「뒤」(#gmTitle.tGo)에 시작한다 — 예전엔 페이지를 열자마자 돌아서
     인트로(4초)에 덮인 채 끝나 버렸다(아무도 못 봤다). 던전막장 제목 연출과 같은 짜임:
     0~0.7 객실 불이 깜빡이며 켜짐 · 0.15~0.85 터널 불빛이 창밖을 훑고 지나감 · 0.6~2.1 네온 로고 틱틱
     · 1.45 덜컹(열차 흔들림) · 2.1 로고 위로 빛 한 줄 · 2.3 「화면을 눌러 시작」 · 2.6 회사 로고 */
#gmTitle{position:fixed;inset:0;z-index:9000;overflow:hidden;background:#0b0a0d;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;transition:opacity .55s ease}
html.gmSeen #gmTitle{display:none}
#gmTitle.out{opacity:0;pointer-events:none}
#gmTitle .tBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% 50%;
  transform-origin:42% 55%;filter:brightness(0)}
#gmTitle .tShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 72%,rgba(0,0,0,.7) 100%)}
#gmTitle .tSweep{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 30%,rgba(255,214,150,.0) 38%,rgba(255,214,150,.42) 47%,rgba(255,240,210,.6) 50%,rgba(255,214,150,.42) 53%,transparent 64%);
  background-size:260% 100%;background-position:130% 0}
/* 10-17 Macho 「타이틀 화면 로고도 안 바뀌었잖아」 — 새 로고(아이콘 B: 화투패 + 네온 두 줄)를 바탕만 투명하게 빼서(logo_sq.webp) 작게. 예전 가로 네온 로고는 화면 폭 90% 라 너무 컸다 */
#gmTitle .tLogo{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 7vh);width:min(58vw,260px);aspect-ratio:1/1;transform:translateX(-50%);opacity:0}
#gmTitle .tShine{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 7vh);width:min(58vw,260px);aspect-ratio:1/1;transform:translateX(-50%);
  pointer-events:none;opacity:0;mix-blend-mode:screen;
  -webkit-mask:url(../img/title/logo_sq.webp) center/contain no-repeat;mask:url(../img/title/logo_sq.webp) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 42%,rgba(255,236,210,.75) 50%,transparent 58%);background-size:300% 100%;background-position:120% 0}
#gmTitle .tTap{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 7vh + 18px);text-align:center;
  font:700 18px 'Noto Sans KR',sans-serif;letter-spacing:2px;color:#ffece0;text-shadow:0 2px 6px #000,0 0 14px rgba(230,40,30,.55);opacity:0}
#gmTitle .tCo{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 3.2vh);transform:translateX(-50%);opacity:0;pointer-events:none;line-height:0}
#gmTitle .tCo svg{width:118px;height:auto;display:block}

/* 인트로가 걷힌 뒤에만 돈다 */
#gmTitle.tGo .tBg{animation:tLights .75s steps(1,end) forwards,tZoom 24s .75s ease-in-out infinite alternate}
#gmTitle.tGo .tSweep{animation:tPass .7s .15s cubic-bezier(.5,0,.5,1) forwards}
#gmTitle.tGo .tLogo{animation:tFlick 1.5s .6s steps(1,end) forwards,tGlow 3.2s 2.4s ease-in-out infinite}
#gmTitle.tGo{animation:tJolt .34s 1.45s linear}
#gmTitle.tGo .tShine{animation:tSh .6s 2.1s ease-in-out}
#gmTitle.tGo .tTap{animation:tIn .6s 2.3s forwards,tBlink 1.6s 2.9s ease-in-out infinite}
#gmTitle.tGo .tCo{animation:tCoIn .7s 2.6s ease-out forwards}

@keyframes tLights{0%{filter:brightness(0)}12%{filter:brightness(.55)}18%{filter:brightness(.08)}34%{filter:brightness(.8)}40%{filter:brightness(.3)}58%,100%{filter:brightness(1)}}
@keyframes tPass{0%{opacity:1;background-position:130% 0}99%{opacity:1;background-position:-30% 0}100%{opacity:0}}
@keyframes tZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes tFlick{0%{opacity:0}8%{opacity:.85}12%{opacity:.1}22%{opacity:1}26%{opacity:.25}38%{opacity:1}44%{opacity:.55}52%,100%{opacity:1}}
@keyframes tGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) drop-shadow(0 0 10px rgba(255,60,40,.45))}}
@keyframes tJolt{0%{transform:translate(0,0)}20%{transform:translate(-3px,4px)}40%{transform:translate(3px,-2px)}60%{transform:translate(-2px,2px)}80%{transform:translate(1px,-1px)}100%{transform:none}}
@keyframes tSh{0%{opacity:1;background-position:120% 0}99%{opacity:1;background-position:-20% 0}100%{opacity:0}}
@keyframes tIn{to{opacity:1}}
@keyframes tCoIn{from{opacity:0;transform:translate(-50%,6px)}to{opacity:.9;transform:translate(-50%,0)}}
@keyframes tBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){
  #gmTitle.tGo,#gmTitle.tGo .tBg,#gmTitle.tGo .tLogo,#gmTitle.tGo .tTap,#gmTitle.tGo .tSweep,#gmTitle.tGo .tShine,#gmTitle.tGo .tCo{animation:none}
  #gmTitle.tGo .tBg{filter:none} #gmTitle.tGo .tLogo,#gmTitle.tGo .tTap{opacity:1} #gmTitle.tGo .tCo{opacity:.9}
}