/* menu.css - 左側選單按鈕專用 (PWA 安全區域適配與極致彈跳版) */

/* 1. 顏色變數 */
:root {
    --menu-shadow-dark: 174, 174, 178;
    --menu-shadow-light: 0, 0, 0;
}

/* 2. 絕對重疊置中系統 (徹底封殺 Safari Grid 偏移 Bug) */
.menu-icon-wrapper {
    position: relative !important;
    display: block !important;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

.menu-icon-wrapper svg {
    /* 🟢 物理四角鎖死置中法，蘋果設備最吃這一套，絕對算不錯 */
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: auto !important; 
    
    display: block !important;
    max-width: none !important;
    max-height: none !important;
    pointer-events: none !important;
    
    /* 🟢 強制鎖死縮放中心點，防止 Safari 放大時飄移 */
    transform-origin: center center !important;
    transition: all 0.4s ease;
}

/* 漢堡圖標 */
.left-circle-btn .icon-hamburger {
    width: 20px;
    height: 20px;
    opacity: 0.7; 
    visibility: visible;
    transform: scale(1);
}

/* 取消圖標 (初始隱藏與縮小狀態) */
.left-circle-btn .icon-close {
    visibility: hidden;
    /* 只保留縮小效果，刪除 rotate，其餘交給 style.css */
    transform: scale(0.5) !important; 
    transition: opacity 0.3s ease, transform 0.4s ease, visibility 0s 0.3s;
}

/* 3. 按鈕本體 */
.left-circle-btn {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 6001 !important;
    overflow: visible !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 4. 偽元素背景 */
.left-circle-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: inherit;
    background: transparent;
    transition: all 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

/* =========================================
   🟢 展開狀態 (按鈕本體解放：維持原位，僅切換圖示與層級)
   ========================================= */

   .left-circle-btn.is-expanded {
    z-index: 6010 !important;
    /* 移除所有 position: fixed 與全螢幕的設定，讓它乖乖待在原本的位置 */
}

/* 🟢 確保圖標在 44px 的按鈕內完美置中 */
.left-circle-btn.is-expanded .menu-icon-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    place-items: center !important;
}

/* =========================================
   🟢 圖標互動 (Animation)
   ========================================= */

.left-circle-btn.is-expanded .icon-hamburger {
    transform: translateX(60px) !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.3s ease, visibility 0s 0.2s;
}

.left-circle-btn.is-expanded .icon-close {
    visibility: visible !important;
    transform: scale(1) !important;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s, visibility 0s 0s;
}