/*GSAP 애니메이션 관련 스타일*/

/*프리 로더 관련*/
.pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--extra-point-clr);
    color: var(--extra-extra-point-clr);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    z-index: 9999999999;
    overflow: hidden;
}
.pre-loader-img{
    transform: scaleY(0); /* 초기 상태에서 높이를 0으로 설정 */
    transform-origin: top; /* 위에서 아래로 */
    transition: transform 0.5s ease-in-out; /* transform에 transition 적용 */
    opacity: 0; /* 초기 상태에서 보이지 않도록 설정 */
    aspect-ratio: 240 / 30;
}
.pre-loader-counter{
    opacity: 0;
    transform: scaleY(0); /* 초기 상태에서 높이를 0으로 설정 */
    transform-origin: bottom; /* 위에서 아래로 */
    transition: transform 0.5s ease-in-out;
}
.pre-loader-img.on{
    transform: scaleY(1.0); /* 요소가 위로 확장되면서 보이게 됨 */
    opacity: 1; /* 이미지가 보이게 됨 */
}
.pre-loader-counter.on{
    opacity: 1;
    transform: scaleY(1.0); /* 요소가 위로 확장되면서 보이게 됨 */
}
.pre-loader.hide {
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

/*menu_bg 관련*/
#menu_bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--extra-point-clr);
    color: var(--extra-extra-point-clr);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: center;
    z-index: 301;
    overflow: hidden;
    transition: all .5s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
    transform: translate(-100%, 0);
}
.menu_bg.hide{
    width: 0;
    pointer-events: none;
    overflow: hidden;
}
html.has-menu-bg .menu_bg{
    transform: translate(0%, 0) !important;
}

/*bucket overlay 관련*/
.bucket-black-bg{
    inset: 0;
    position: fixed;
    z-index: 99901;
    background-color: rgba(0, 0, 0, 0.85);
    transition: opacity .45s cubic-bezier(0.215, 0.61, 0.355, 1);
    cursor: pointer;
}
html:not(.has-bucket-clicked) .bucket-black-bg{
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.bucket-white-overlay{
    box-sizing: border-box;
    top: 0;
    right: -200vw;
    bottom: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--spacing-xl) + var(--spacing-fix-2rem)) var(--grid-gutter) var(--spacing-fix-1rem);
    background-color: var(--body-bg-clr);
    overflow: auto;
    transform: translate(100%, 0);
    transition: right 0s .3s, transform .3s cubic-bezier(var(--cubic-x1), var(--cubic-y1), var(--cubic-x2), var(--cubic-y2));
    position: fixed;
    z-index: 99901;
}
html.has-bucket-clicked .bucket-white-overlay{
    right: 0;
    transform: translate(0%, 0);
    transition: transform .45s cubic-bezier(0.38, 0.005, 0.215, 1);
}