/* =============================================
 * Splash Screen Component (shared)
 * index.html / wrapper.html 공용
 *
 * 타임라인:
 *   0.08s~0.18s  따 reveal (0.10s, linear)
 *   0.17s~0.27s  다 reveal (따 끝 10ms 전 → 이음새 보정)
 *   0.26s~0.36s  닥 reveal (다와 체인)
 *   0.36s~0.61s  영문 우→좌 reveal (0.25s)
 *   0.63s        따/다/닥 키프레스 + 클릭음
 *   1.9s         페이드아웃 시작
 *
 * 글자 경계 (Logo.png 픽셀 실측, 오버랩 0):
 *   따/다: top 35%   / bot 31.5%
 *   다/닥: top 68%   / bot 64.5%
 *   한/영: 80%
 * ============================================= */

#splash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #302842;
    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% 80%, 0% 80%);
    will-change: clip-path, transform;
    animation:
        splash-reveal-1 0.10s linear 0.08s forwards,
        splash-key-press 0.15s ease-out 0.73s;
}

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

/* 닥 — 다와 체인 */
#splash .splash-char-3 {
    position: absolute;
    top: 0; left: 0; width: 100%;
    clip-path: polygon(68% 0%, 68% 0%, 64.5% 80%, 64.5% 80%);
    will-change: clip-path, transform;
    animation:
        splash-reveal-3 0.10s linear 0.26s forwards,
        splash-key-press-heavy 0.18s ease-out 0.87s;
}

/* 영문 — 닥 끝(0.36s)과 이어짐 */
#splash .splash-logo-bottom {
    position: absolute;
    top: 0; left: 0; width: 100%;
    clip-path: inset(80% 0 0 100%);
    will-change: clip-path;
    animation: splash-reveal-rtl 0.25s linear 0.36s forwards;
}

/* === Keyframes: reveal === */
@keyframes splash-reveal-1 {
    to { clip-path: polygon(0% 0%, 35% 0%, 31.5% 80%, 0% 80%); }
}
@keyframes splash-reveal-2 {
    to { clip-path: polygon(35% 0%, 68% 0%, 64.5% 80%, 31.5% 80%); }
}
@keyframes splash-reveal-3 {
    to { clip-path: polygon(68% 0%, 100% 0%, 100% 80%, 64.5% 80%); }
}

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

/* === Keyframe: 키프레스 (따/다 — 기존 GoStop stamp 동일) === */
@keyframes splash-key-press {
    0%   { transform: translate(0, 0); }
    40%  { transform: translate(-1px, 5px); }
    100% { transform: translate(0, 0); }
}

/* === Keyframe: 키프레스 heavy (닥 — 더 깊게) === */
@keyframes splash-key-press-heavy {
    0%   { transform: translate(0, 0); }
    40%  { transform: translate(-1px, 8px); }
    100% { transform: translate(0, 0); }
}