/* =============================================
 * 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;
}

/* ─────────────────────────────────────────────────────────────
 * PWA standalone — iOS safe-area 보강
 * direct-after-splash(OD-S10) 에서 splash 는 portal wrapper top-level 에서
 * 그려지고, 그 동안 body.standalone 배경(#000)/theme-color 가 깔린다.
 * #splash 의 inset:0 만으로는 iOS home-indicator·status-bar safe-area strip
 * 을 못 덮어 하단(및 상단)에 검정이 비치므로, strip 만큼 splash 를 바깥으로
 * 확장해 brand 배경(#302842)으로 덮는다. host 메타에 viewport-fit=cover 가
 * 있어 env() 가 실제 inset 을 돌려준다(없는 환경이면 0 → 무해).
 * body.standalone 훅(wrapper.js)과 display-mode 미디어 둘 다 커버.
 * ───────────────────────────────────────────────────────────── */
body.standalone #splash {
    top: calc(-1 * env(safe-area-inset-top, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
}
@media all and (display-mode: standalone) {
    #splash {
        top: calc(-1 * env(safe-area-inset-top, 0px));
        right: calc(-1 * env(safe-area-inset-right, 0px));
        bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
        left: calc(-1 * env(safe-area-inset-left, 0px));
    }
}

#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); }
}