#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--hg-color-light);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    overflow: hidden;
    /*transform: translateY(0);*/
    opacity: 1;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity   0.8s ease;
}
#loader.loader_home {
    transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1), opacity 1s ease;
}

.loaded #loader {
    transform: translateY(-120%); /* เลื่อนให้ชัดเจนขึ้น */
}

.mask {
    position: relative;
    width: 200px;
}

.mask img {
    width: 100%;
    animation: logoFade 1s ease forwards;
}

/* โลโก้ค่อยๆโผล่ */
@keyframes logoFade {
    from {
        opacity: 0;
        filter: blur(6px);
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

.main-web {
    position: relative;
    overflow: hidden;
    /*transform: translateY(0);*/
    transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity   0.8s ease;
}
.side_home {
    transition: transform 2s cubic-bezier(0.77, 0, 0.175, 1); /* sync กับ loader */

}

.main-web.body-slide {
    transform: translateY(600px); /* เริ่มจากด้านล่าง */
}