/* 진입 인트로(스플래시) 오버레이 */

:root {
    --splash_navy: #071a2f;
    --splash_navy_deep: #03101f;
}

.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background:
        radial-gradient(120% 80% at 50% 42%, #0d2f52 0%, var(--splash_navy) 46%, var(--splash_navy_deep) 100%);
    transform-origin: 50% 44%;
    animation: splash_collapse 0.8s cubic-bezier(0.7, 0, 0.28, 1) 2.62s forwards;
}

.splash.is_done {
    display: none;
}

/* 심볼 무대 */
.splash_stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * 광원은 반드시 별도 원형 레이어로 만든다.
 * SVG <g>에 drop-shadow를 걸면 SVG 필터 영역에 잘려 사각형 경계가 드러난다.
 */
.splash_glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(96, 200, 255, 0.42) 0%,
        rgba(51, 177, 255, 0.16) 40%,
        rgba(51, 177, 255, 0) 70%
    );
    opacity: 0;
    animation: splash_glow_pulse 1.9s ease-out 0.35s;
}

.splash_symbol {
    width: 74px;
    height: auto;
    overflow: visible;
    fill: #33b1ff;
}

.splash_symbol_diamond,
.splash_symbol_body {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
}

.splash_symbol_body {
    animation: splash_body_settle 1s cubic-bezier(0.16, 0.9, 0.28, 1) 0.15s forwards;
}

.splash_symbol_diamond {
    animation: splash_diamond_settle 1s cubic-bezier(0.16, 0.9, 0.28, 1) 0.35s forwards;
}

/* 심볼 실루엣 안에서만 스치는 반짝임 (clipPath로 형태 제한) */
.splash_shine {
    opacity: 0;
    animation: splash_shine_sweep 0.85s ease-in-out 1.4s;
}

/* 로고타입 */
.splash_wordmark {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: center;
    opacity: 0;
    transform: translateY(18px);
    animation: splash_wordmark_rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) 1.72s forwards;
}

/* 본문 스크롤 잠금 */
body.is_splash_active {
    overflow: hidden;
}

@keyframes splash_diamond_settle {
    0% {
        opacity: 0;
        transform: rotate(-160deg) scale(0.3);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes splash_body_settle {
    0% {
        opacity: 0;
        transform: rotate(115deg) scale(0.42);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes splash_glow_pulse {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }
    45% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.32;
        transform: scale(0.92);
    }
}

@keyframes splash_shine_sweep {
    0% {
        opacity: 0;
        transform: translateX(0) skewX(-12deg);
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(32px) skewX(-12deg);
    }
}

@keyframes splash_wordmark_rise {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes splash_collapse {
    0% {
        opacity: 1;
        transform: scale(1);
        clip-path: circle(140% at 50% 42%);
    }
    100% {
        opacity: 0;
        transform: scale(1.06);
        clip-path: circle(0% at 50% 42%);
    }
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .splash,
    .splash_symbol_diamond,
    .splash_symbol_body,
    .splash_shine,
    .splash_glow,
    .splash_wordmark {
        animation: none;
    }

    .splash {
        display: none;
    }
}