/*스타일*/

.coming-soon .scene-main {
    position:absolute;
    inset:0;
    z-index:10;

    background-image:url('../../img/coming-soon/coming_soon_start.png');
    background-position:center;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.coming-soon-conts {width:100%; height:100dvh; position:fixed; inset:0; z-index:100; visibility:hidden; pointer-events:none;}
.coming-soon-conts.is-active {visibility:visible; pointer-events:none;}
.coming-soon-conts.is-closing {visibility:visible; pointer-events:none;}

.coming-soon-conts .conts-wrap {width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform:translateX(var(--drag-x, 0px)); will-change:transform;}

.coming-soon-conts .conts-box {width:36.5625vw; aspect-ratio:702/407; flex:none; background:url(../../img/coming-soon/coming-soon.svg) no-repeat center / contain; font-size:0; opacity:0; transform:scale(.92); transform-origin:center; transition:opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1); will-change:transform,opacity;}

.coming-soon-conts.is-active .conts-box {opacity:1; transform:scale(1);}
.coming-soon-conts.is-closing .conts-box {opacity:0; transform:scale(.92); transition:opacity .15s ease, transform .2s cubic-bezier(.55,0,1,.45);}

.scene-drop-zone {
    position:absolute;
    z-index:15;
    display:block;
    box-sizing:border-box;
    pointer-events:none;
}

.scene-key-wrap {position:absolute;z-index:12;touch-action:none;will-change:transform;}
.scene-key-wrap.is-returning {transition:transform .35s cubic-bezier(.22,1,.36,1);}
.scene-key {inset:0;width:100%;height:100%;cursor:grab;}
.scene-key-wrap.is-grabbed .scene-key {cursor:grabbing;}
.scene-key img {
    display:block;
    width:100%;
    max-width:18rem;
    height:100%;
    max-height:11.6rem;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
    image-rendering:pixelated;
}
.scene-key-tooltip {
    position:absolute;
    left:calc(50% - 1.5rem);
    bottom:100%;
    transform:translateX(-50%);
    width:100%;
    pointer-events:none;
}

.scene-key-tooltip img {
    display:block;
    width:calc(77 / 180 * 100%);
    max-width:7.7rem;
    height:auto;
}

.scene-key-wrap.is-grabbed .scene-key-tooltip {
    opacity:0;
    visibility:hidden;
}
.scene-key-wrap.is-grabbed .scene-key-tooltip {opacity:0;visibility:hidden;}
.scene-particles {position:absolute;inset:0;z-index:60;width:100%;height:100%;pointer-events:none;}


/* BACK 화면 전환 중 열쇠와 툴팁 숨김 */
.scene.is-back-ending .scene-key,
.scene.is-back-ending .scene-key-tooltip {
    opacity:0;
}

/* 열쇠 등장 */
.scene-key-wrap.is-appearing .scene-key {
    animation:keyAppear 0.2s ease-in-out both;
}

/* 툴팁 등장 */
.scene-key-wrap.is-appearing .scene-key-tooltip {
    animation:tooltipAppear 0.2s ease-in-out both;
}

@keyframes keyAppear {
    0% {
        opacity:0;
        scale:.96;
    }

    100% {
        opacity:1;
        scale:1;
    }
}

@keyframes tooltipAppear {
    0% {
        opacity:0;
        translate:0 5px;
    }

    100% {
        opacity:1;
        translate:0 0;
    }
}



@media screen and (max-width: 768px) {
    .coming-soon-conts .conts-box {width:75vw;}
}





/* 화살표 전체 위치 및 기울기 */
.scene-key-arrow {
    position:absolute;
    left:calc(1300 / 2560 * 100%);
    bottom:calc(350 / 1440 * 100%);
    width:min(calc(53 / 2560 * 100%), 5.3rem);
    aspect-ratio:53 / 68;
    z-index:15;
    pointer-events:none;
    transform:rotate(-18deg);
    transform-origin:center;
}

.scene-key-arrow img {
    position:absolute;
    left:0;
    display:block;
    width:100%;
    height:auto;
    max-width:none;
    opacity:0;
    animation:keyArrowMove 1s linear infinite;
}

.scene-key-arrow img:nth-child(1) {
    top:0;
}

.scene-key-arrow img:nth-child(2) {
    top:50%;
    animation-delay:-.8s;
}

@keyframes keyArrowMove {
    0% {
        opacity:0;
        transform:translateY(15%);
    }

    25% {
        opacity:1;
    }

    65% {
        opacity:1;
        transform:translateY(-15%);
    }

    100% {
        opacity:0;
        transform:translateY(-30%);
    }
}

.scene-main:has(.scene-key-wrap.is-grabbed) .scene-key-arrow,
.scene-main:has(.scene-key-wrap.is-dragging) .scene-key-arrow {
    display:none;
}











@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}