/* --------------------- 側邊欄彈出動畫設定 ------------------- */
/* 側邊欄樣式 */
#brxe-shzxvq,
#brxe-jlfbro {
    transform: translateX(100%);
    transition: transform 1.0s ease, opacity 0.5s ease, visibility 0s linear 1s;
    will-change: transform, opacity;
    opacity: 0; /* 預設為 0，確保隱藏 */
    visibility: hidden; /* 預設隱藏 */
}

/* 觸發顯示 */
#brxe-shzxvq.active,
#brxe-jlfbro.active {
    transform: translateX(0);
    opacity: 1 !important; /* 變為可見 */
    visibility: visible !important; /* 這樣在動畫結束前不會閃現 */
    transition: transform 1.0s ease, opacity 0.5s ease, visibility 0s linear 0s;
}

/* 關閉動畫，確保動畫執行完後才隱藏 */
#brxe-shzxvq:not(.active),
#brxe-jlfbro:not(.active) {
    opacity: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 1.0s ease, opacity 0.5s ease, visibility 0s linear 1s;
}

/* ---------------------------------------- */

/* 按鈕樣式 */
.home-main-button {
    transition: opacity 0.5s ease;
}

.home-main-button.hidden {
    opacity: 0;
    pointer-events: none; /* 隱藏後禁止點擊 */
}

/* 菜單按鈕組樣式 */
.home-menu-button {
    transition: transform 1.0s ease; /* 添加 opacity 的 transition */
    opacity: 1; /* 確保初始可見 */
}

.home-menu-button.move {
    transform: translateX(-40dvw); /* 向左位移 */
}

/* 地球 icon 樣式 */
#brxe-mmefts,
.home-menu-button.move .lang-link-container { /* ✅ 新增規則 */
    transition: opacity 0.5s ease;
}

#brxe-mmefts.hidden,
.home-menu-button.move .lang-link-container { /* ✅ 新增規則 */
    opacity: 0 !important;
    pointer-events: none; /* 禁止點擊 */
}

/* 關閉按鈕 */
.sidebar-close-button {
    opacity: 0;
    pointer-events: none; /* 隱藏後禁止點擊 */
    transition: opacity 0.5s ease;
}

.sidebar-close-button.show {
    opacity: 1;
    pointer-events: auto;
}




/* ------------------ yello overlay -------------------- */
.home-overlay {
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0s linear 1s;
    visibility: hidden;
}

.home-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.5s ease, visibility 0s linear 0s;
}


/* ------------------ RWD -------------------- */
@media (max-width: 991px) {
    #brxe-shzxvq,
    #brxe-jlfbro {
        transform: translateY(100%);
    }

    #brxe-shzxvq.active,
    #brxe-jlfbro.active {
        transform: translateY(0);
    }

    #brxe-shzxvq:not(.active),
    #brxe-jlfbro:not(.active) {
        transform: translateY(100%);
    }

    .home-menu-button.move {
        transform: none;
    }

    .workslist-title {
        color: #000
    }
}