/* =============================================
 * Splash Screen Component (shared)
 * index.html / portal-player.html 공용
 *
 * 타임라인 (연속 와이프):
 *   0.15s~0.33s 따 reveal (0.18s, linear)
 *   0.32s~0.50s 다 reveal (따 끝 10ms 전 시작 → 이음새 보정)
 *   0.50s~0.68s 닥 reveal (다와 정확 체인)
 *   0.68s 영문 우→좌 reveal
 *   2.2s  따/다/닥 키프레스 + 조약돌 클릭음
 *   3.2s  페이드아웃 시작
 *
 * 글자 경계 (디버그 도구 실측, 오버랩 0):
 *   따/다: top 35.5% / bot 30.5%
 *   다/닥: top 68%   / bot 63%
 *   한/영: 74%
 * ============================================= */

#splash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

#splash.hidden {
    opacity: 0;
    pointer-events: none;
}

#splash .splash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --- Logo wrapper --- */
#splash .splash-logo-wrap {
    position: relative;
    z-index: 1;
    width: 85vw;
    max-width: 380px;
}

#splash .splash-logo-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════════════
 * 글자별 단일 레이어 — 오버랩 0%
 * 이동 애니메이션 시 인접 레이어와 겹치지 않음
 * ═══════════════════════════════════════════════ */

/* 따 */
#splash .splash-char-1 {
    position: relative;
    clip-path: polygon(0% 0%, 2% 0%, 0% 74%, 0% 74%);
    will-change: clip-path, transform;
    animation:
        splash-reveal-1 0.18s linear 0.15s forwards,
        splash-key-press 0.18s ease-out 2.2s;
}

/* 다 — 따 끝 10ms 전 시작 (이음새 보정) */
#splash .splash-char-2 {
    position: absolute;
    top: 0; left: 0; width: 100%;
    clip-path: polygon(35.5% 0%, 35.5% 0%, 30.5% 74%, 30.5% 74%);
    will-change: clip-path, transform;
    animation:
        splash-reveal-2 0.18s linear 0.32s forwards,
        splash-key-press 0.18s ease-out 2.3s;
}

/* 닥 — 다 끝(0.50s)과 정확히 이어짐 */
#splash .splash-char-3 {
    position: absolute;
    top: 0; left: 0; width: 100%;
    clip-path: polygon(68% 0%, 68% 0%, 63% 74%, 63% 74%);
    will-change: clip-path, transform;
    animation:
        splash-reveal-3 0.18s linear 0.50s forwards,
        splash-key-press 0.18s ease-out 2.4s;
}

/* 영문 — 닥 끝(0.68s)과 이어짐 */
#splash .splash-logo-bottom {
    position: absolute;
    top: 0; left: 0; width: 100%;
    clip-path: inset(74% 0 0 100%);
    will-change: clip-path;
    animation: splash-reveal-rtl 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.68s forwards;
}

/* === Keyframes: reveal === */
@keyframes splash-reveal-1 {
    to { clip-path: polygon(0% 0%, 35.5% 0%, 30.5% 74%, 0% 74%); }
}
@keyframes splash-reveal-2 {
    to { clip-path: polygon(35.5% 0%, 68% 0%, 63% 74%, 30.5% 74%); }
}
@keyframes splash-reveal-3 {
    to { clip-path: polygon(68% 0%, 100% 0%, 100% 74%, 63% 74%); }
}

@keyframes splash-reveal-rtl {
    to { clip-path: inset(74% 0 0 0); }
}

/* === Keyframe: 키프레스 (clip-path 대각선 기울기와 동일 방향) === */
/* 경계선 기울기: dx=-5%, dy=74% → 거의 수직, 미세하게 좌하단 */
@keyframes splash-key-press {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-1px, 5px); }
    100% { transform: translate(0, 0); }
}