/* index.html 인트로 오버레이 + 메인 페이드인 */
:root {
    --intro-fade: 1000ms;
}

body:not(.is-ready) {
    overflow: hidden;
    height: 100vh;
}

/* 인트로 */
.intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #ffffff;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity var(--intro-fade) ease, visibility var(--intro-fade) ease;
    visibility: visible;
    width: 100%;
    height: 100vh;
}

.intro.is-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro.is-needtap {
    cursor: pointer;
}

.intro__video {
    display: block;
    width: min(72vw, 960px);
    max-width: calc(100vw - 40px);
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    transform: translateY(-20%);
}

@media (max-width: 640px) {
    .intro__video {
        width: min(86vw, 560px);
        max-height: 56vh;
    }
}

/* 메인 래퍼: 인트로 종료 후 페이드인 */
#main {
    min-height: 100vh;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--intro-fade) ease, transform var(--intro-fade) ease;
    pointer-events: none;
}

body.is-ready {
    height: auto;
    overflow: auto;
}

body.is-ready #main {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}