1,100..900&display=swap');

.containerWrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    background-color: #2F3036;
    cursor: pointer;
}

.layer {
    position: absolute;
    top: 50%;
    left: 50%;
}

/* 기본: 2/3 스케일 기준 (sm 이하) */
.layer-3 {
    width: 141px;
    height: 142px;
    transform: translate(-53px, -192px) rotate(62deg);
    background: url("../img/layer_3_Vector_Smart_Object.png") no-repeat center center;
    background-size: contain;

    animation: fadeIn 2s ease-out forwards;

    mask-image: conic-gradient(white 0deg, transparent 0deg);
    -webkit-mask-image: conic-gradient(white 0deg, transparent 0deg);

    mask-size: cover;
    -webkit-mask-size: cover;

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-position: center;
    -webkit-mask-position: center;

    animation: ScaleUp3 0.5s ease-out forwards;
    animation-delay: 4.5s;
}

.layer-4 {
    width: 80px;

    transform: translate(-36px, -180px);

    animation: slideInLeft 2s ease-out forwards, ScaleUp4 0.5s ease-out forwards;

    animation-delay: 0s, 4.5s;
}

.layer-5 {
    width: 125px;
    height: 125px;
    transform: translate(-51px, -200px) rotate(19deg);

    animation: slideInRight 2s ease-out forwards, ScaleUp5 0.5s ease-out forwards;

    animation-delay: 0s, 4.5s;
}

.layer-6 {
    width: 150px;
    aspect-ratio: 252/117;
    transform: translate(-40%, -40px);
    opacity: 0;

    animation: fadeIn 1s ease-out forwards,
        fadeOut 1.5s ease-out forwards;

    animation-delay: 2s, 3.5s;
}



.logo {
    display: none;
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 283px;
    height: 35px;
    opacity: 0;

    animation: fadeIn 2s ease-out forwards;
    animation-delay: 4.5s;
}

/* sm 이상: 원본 해상도 기준 */
@media (min-width: 640px) {
    .layer-3 {
        width: 247px;
        height: 218px;
        transform: translate(50px, -235px) rotate(67deg);
        background: url("../img/layer_3_Vector_Smart_Object.png") no-repeat center center;
        transform-origin: top left;
    }

    .layer-4 {
        width: 149px;
        height: 150px;
        transform: translate(-90px, -176px);
        transform-origin: top left;
    }

    .layer-5 {
        width: 188px;
        height: 188px;
        transform: translate(-57px, -223px) rotate(26deg);
        transform-origin: top left;
    }

    .layer-6 {
        width: 250px;
        aspect-ratio: 252 / 117;
        transform: translate(-43%, 30px);
    }


    .logo {
        opacity: 0;
        top: 46px;
        left: 48px;
        transform: translate(0, 0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translate(calc(-36px - 40px), -180px);
        /* 왼쪽에서 더 밀어냄 */
    }

    to {
        opacity: 1;
        transform: translate(-36px, -180px);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translate(calc(-51px + 40px), -200px) rotate(19deg);
        /* 오른쪽에서 더 밀어냄 */
    }

    to {
        opacity: 1;
        transform: translate(-51px, -200px) rotate(19deg);
    }
}

@keyframes riseUp {
    from {
        opacity: 0;
        transform: translate(-43%, 50px);
        /* 기본값은 7번 기준 */
    }

    to {
        opacity: 1;
        transform: translate(-43%, 0);
    }
}

@keyframes riseUp-6 {
    from {
        opacity: 0;
        transform: translate(-43%, 80px);
    }

    to {
        opacity: 1;
        transform: translate(-43%, 0px);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes ScaleUp3 {
    from {
        transform: translate(-53px, -192px) rotate(62deg) scale(1);
    }

    to {
        transform: translate(-53px, -192px) rotate(62deg) scale(1.5);
    }
}

@keyframes ScaleUp4 {
    from {
        transform: translate(-36px, -180px) scale(1);
    }

    to {
        transform: translate(-36px, -180px) scale(1.5);
    }
}

@keyframes ScaleUp5 {
    from {
        transform: translate(-51px, -200px) rotate(19deg) scale(1);
    }

    to {
        transform: translate(-51px, -200px) rotate(19deg) scale(1.5);
    }
}

/* sm 사이즈 대응 (원본 위치로) */
@media (min-width: 640px) {
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translate(calc(-127px - 40px), -176px);
        }

        to {
            opacity: 1;
            transform: translate(-90px, -176px);
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translate(calc(-57px + 40px), -223px) rotate(26deg);
        }

        to {
            opacity: 1;
            transform: translate(-57px, -223px) rotate(26deg);
        }
    }

    @keyframes riseUp {
        from {
            opacity: 0;
            transform: translate(-50%, calc(108px + 40px));
        }

        to {
            opacity: 1;
            transform: translate(-50%, 108px);
        }
    }



    @keyframes ScaleUp3 {
        from {
            transform: translate(50px, -235px) rotate(67deg) scale(1);
        }

        to {
            transform: translate(110px, -238px) rotate(70deg) scale(1.5);
        }
    }

    @keyframes ScaleUp4 {
        from {
            transform: translate(-90px, -176px) scale(1);
        }

        to {
            transform: translate(-90px, -176px) scale(1.5);
        }
    }

    @keyframes ScaleUp5 {
        from {
            transform: translate(-57px, -223px) scale(1) rotate(26deg);
        }

        to {
            transform: translate(-57px, -223px) scale(1.5) rotate(26deg);
        }
    }
}

.menu-item {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    font-size: 2em;
    color: #f1f1f0;
    font-family: 'Montserrat', sans-serif;
}

.menu-item:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.containerWrapper.show-main .menu-item.delay-1 {
    transform: translate(0px, -330px);
    opacity: 1;

    transition-delay: 0.5s;
}

.containerWrapper.show-main .menu-item.delay-2 {
    transform: translate(240px, -220px);
    opacity: 1;

    transition-delay: 0.7s;
}

.containerWrapper.show-main .menu-item.delay-3 {
    transform: translate(380px, -50px);
    opacity: 1;

    transition-delay: 0.9s;
}

.containerWrapper.show-main .menu-item.delay-4 {
    transform: translate(240px, 120px);
    opacity: 1;

    transition-delay: 1.1s;
}

.containerWrapper.show-main .menu-item.delay-5 {
    transform: translate(0px, 230px);
    opacity: 1;
    transition-delay: 1.3s;
}

@media (max-width: 1200px) {
    .containerWrapper.show-main .menu-item.delay-1 {
        transform: translate(0px, -330px);
    }

    .containerWrapper.show-main .menu-item.delay-2 {
        transform: translate(200px, -220px);
    }

    .containerWrapper.show-main .menu-item.delay-3 {
        transform: translate(280px, -50px);
    }

    .containerWrapper.show-main .menu-item.delay-4 {
        transform: translate(180px, 120px);
    }

    .containerWrapper.show-main .menu-item.delay-5 {
        transform: translate(0px, 220px);
    }
}

@media (max-width: 640px) {
    .containerWrapper.show-main .menu-item.delay-1 {
        transform: translate(-50%, 0px);
    }

    .containerWrapper.show-main .menu-item.delay-2 {
        transform: translate(-50%, 70px);
    }

    .containerWrapper.show-main .menu-item.delay-3 {
        transform: translate(-50%, 140px);
        font-size: 34px;
    }

    .containerWrapper.show-main .menu-item.delay-4 {
        transform: translate(-50%, 210px);
    }

    .containerWrapper.show-main .menu-item.delay-5 {
        transform: translate(-50%, 280px);
    }
}