/* ==========================================
   開頁按鈕與側邊選單樣式 (Menu Button & Side Panel CSS)
   ========================================== */
.menu-placeholder{
    width: 100%;
    height: 100%;
    position: relative;
}
/* 17x17 日蝕開頁按鈕 */
.menu-btn {
    position: absolute;
    /* 預設在 m1-pic 內採用絕對定位 (Default absolute inside m1-pic) */
    top: 10.3px;
    right: 10.3px;
    width: 20.4px;
    height: 20.4px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 100;
    /* 確保按鈕永遠在選單面板的最上方 */
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    transition: opacity 0.3s ease;
    opacity: 0;
    /* 預設隱藏 (Default hidden) */
    pointer-events: none;
    /* 預設不可點擊 (Default disabled clicks) */
    z-index: 1000;
}

.menu-btn svg {
    width: 100%;
    height: 100%;
}

/* 置頂解鎖後改為 fixed 定位 (Switch to fixed when pinned animation ends) */
.menu-btn.is-fixed {
    position: fixed;
}

/* 按鈕位於圖片或影片上方時改用白色圖示 */
.menu-btn.is-on-image svg > circle {
    fill: #ffffff;
}

/* 小圓挖空的月亮形狀，沿用原本的平滑縮放動態 */
.mask-circle {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), r 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: 10.5px 7.2px;
    /* 以小圓實際圓心 (10.5px, 7.2px) 為縮放起點，使其原地置中縮放 */
}

/* 懸停或選單開啟時，讓右上角小圓縮小至 0 (變為滿圓) */
.menu-btn:hover .mask-circle,
.menu-open .mask-circle {
    transform: scale(0);
    r: 0;
}

/* 選單展開後，懸停按鈕時恢復月牙形 */
.menu-open .menu-btn:hover .mask-circle {
    transform: scale(1);
    r: 6.5px;
}

/* 側邊選單面板 */
.menu-panel {
    position: absolute;
    /* 預設在 m1-pic 內絕對定位 (Default absolute inside m1-pic) */
    top: 0;
    right: 0;
    width: calc(840*var(--vw-base));
    /* 寬度約 55% */
    height: 100%;
    background-color: rgba(230, 230, 230, 0.9);
    /* #e6e6e6 背景色，透明度 0.9 */
    z-index: 999;
    /* 低於按鈕的 z-index */
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    /* 預設在右側畫面外 */
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    justify-content: start;
    box-sizing: border-box;
    padding: calc(128*var(--vw-base)) calc(70*var(--vw-base)) 0 calc(0*var(--vw-base));
}

/* 置頂解鎖後定位改為 fixed 且高度 100vh (Switch to fixed and 100vh when pinned animation ends) */
.menu-panel.is-fixed {
    position: fixed;
    height: 100vh;
}

/* 當選單開啟時的狀態 */
.menu-open .menu-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    /* 滑入顯示 */
}

/* 選單項目容器 */
.menu-items {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* max-width: calc(600*var(--vw-base)); */
    margin: 0;
    /* 偏左對齊 */
}

/* 單個選單項目 */
.menu-item {
    display: flex;
    align-items: center;
    width: calc(282*var(--vw-base));
    height: calc(84*var(--vw-base));
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    /* 項目之間的細白線 */
    color: #333333;
    position: relative;
    text-decoration: none;
    box-sizing: border-box;
    padding-left: calc(55*var(--vw-base));
    transition: color 0.3s ease, width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
    /* 項目收回時的過渡動畫 (Leave transition)：斜線先收，寬度延遲 0.3s 後再收縮 */
}

/* 項目 Hover 時的文字變色 */
.menu-item:hover {
    width: calc(637*var(--vw-base));
    transition: color 0.3s ease, width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
    /* 項目展開時的過渡動畫 (Hover transition)：寬度延遲 0.1s 變寬，於 0.7s 時完全展開 */
}

/* 中文字樣式 */
.menu-item .cn {
    font-family: "Noto Serif TC";
    font-weight: 400;
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.3em;
    margin-left: calc(0*var(--vw-base));
    /* 與左側月亮的間距 */
}

/* 英文字樣式 (3D 翻轉容器，提供滾動空間與透視) */
.menu-item .en {
    position: relative;
    display: inline-block;
    height: calc(24*var(--vw-base));
    margin-left: calc(12*var(--vw-base));
    perspective: calc(200*var(--vw-base));
}

.menu-item .en .en-light {
    position: relative;
    display: block;
    font-family: "Butler_Light";
    font-style: normal;
    color: #333333;
    font-size: calc(20*var(--vw-base));
    line-height: calc(24*var(--vw-base));
    opacity: 1;
    transform: translateY(0);
    /* 項目收回時的過渡動畫 (Leave transition)：延遲 0.1s，0.6s 下降 */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.menu-item .en .en-italic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    text-align: inherit;
    font-family: "Butler_Regular";
    font-weight: 400;
    font-style: italic;
    color: #333333;
    font-size: calc(20*var(--vw-base));
    line-height: calc(24*var(--vw-base));
    opacity: 0;
    white-space: nowrap;
    /* 初始狀態為 translateY(80%) 且 scaleY(0.8)，移除旋轉改為高度縮放 (Initial transform at 80% height and scaleY 0.8) */
    transform: translateY(100%) scaleY(0.8);
    transform-origin: center bottom;
    /* 項目收回時的過渡動畫 (Leave transition)：延遲 0.1s，0.2s 下降 */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

/* 懸停滑動與旋轉淡入淡出，採用與 bar-item 一致的 3D 月昇特效 (Hover Slide, Rotate & Fade) */
.menu-item:hover .en .en-light {
    opacity: 0;
    transform: translateY(-50%);
    /* 項目展開時的過渡動畫 (Hover transition)：無延遲，0.6s 快速上升 */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.menu-item:hover .en .en-italic {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    /* 項目展開時的過渡動畫 (Hover transition)：無延遲，0.2s 快速上升與高度變大 */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

/* 項目左側的小月亮裝飾（Hover 時升起） */
.menu-item::before {
    content: '';
    position: relative;
    top: calc(7*var(--vw-base));
    left: calc(13*var(--vw-base));
    width: calc(25*var(--vw-base));
    height: calc(27*var(--vw-base));
    background-image: url(../img/index/half-circle-bar.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: rotate(-35deg) scale(0.7) translate(calc(-10*var(--vw-base)), calc(10*var(--vw-base)));
    transform-origin: bottom right;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.menu-item:hover::before {
    opacity: 1;
    transform: rotate(0deg) scale(1) translate(0, 0);
}

.menu-item::after {
    content: '';
    position: absolute;
    left: calc(635*var(--vw-base));
    top: calc(42*var(--vw-base));
    width: calc(133.84*var(--vw-base));
    /* 斜邊長度 (Hypotenuse length): sqrt(117^2 + 65^2) */
    height: 1px;
    /* 1px 細線 (Thin line) */
    background-color: rgba(255, 255, 255, 0.7);
    /* 半透明白色 (Semi-transparent white) */
    transform-origin: 0% 50%;
    /* 以右上角起點為縮放與旋轉中心 (Rotate and scale from top-right origin) */
    transform: rotate(150.95deg) scaleX(0);
    /* 旋轉指向左下，預設縮小至 0 (Rotate towards bottom-left, scaleX to 0) */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
    /* 項目收回時的過渡動畫 (Leave transition)：斜線無延遲，立刻於 0.5s 內收縮完畢 */
}

.menu-item:hover::after {
    transform: rotate(150.95deg) scaleX(1);
    /* 懸停時由右上往左下展開 (Expand from top-right to bottom-left on hover) */
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
    /* 項目展開時的過渡動畫 (Hover transition)：等寬度展開後，斜線才開始延遲播放 */
}




.bar-item {
    position: relative;
    width: auto;
    height: auto;
    text-align: center;
    cursor: pointer;
}

.bar-item::before {
    content: '';
    position: absolute;
    bottom: calc(-8*var(--vw-base));
    left: calc(-13*var(--vw-base));
    width: calc(25*var(--vw-base));
    height: calc(27*var(--vw-base));
    background-image: url(../img/index/half-circle-bar.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    /* 初始狀態：單純下移 5vw-base，不要旋轉 (Initial state: translateY 5vw-base, no rotation) */
    transform: translateY(calc(5*var(--vw-base)));
    transform-origin: bottom right;
    /* 初始遮罩設定在左上角，為 0% 半徑 (Initial mask at top-left, radius 0%) */
    -webkit-clip-path: circle(0% at 20% 0%);
    clip-path: circle(0% at 20% 0%);
    /* 下降收回時 (Leave transition)：延遲 0.1s，0.6s 下降（採用 ease-out 使尾端不突然變慢） */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, -webkit-clip-path 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.bar-item:hover::before {
    opacity: 1;
    /* 懸停時，回到原位 (TranslateY back to 0) */
    transform: translateY(0);
    /* 懸停時將遮罩半徑擴張至 150%，模擬從上往下「一筆畫出」的動態 (Expand mask to 150%) */
    -webkit-clip-path: circle(150% at 20% 0%);
    clip-path: circle(150% at 20% 0%);
    /* 上升展開時 (Hover transition)：無延遲，0.8s 快速上升 */
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -webkit-clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.bar-item .cn {
    position: relative;
    color: #333333;
    font-family: "Noto Serif TC";
    font-weight: 400;
    font-size: calc(18*var(--vw-base));
    line-height: 1.15em;
    letter-spacing: 0.3em;
}

.bar-item.bar-left .cn {
    text-align: start;
}

.bar-item.bar-right .cn {
    left: calc(5*var(--vw-base));
    text-align: end;
}

.bar-item .en {
    position: relative;
    margin-top: calc(6*var(--vw-base));
    width: 100%;
    height: calc(22*var(--vw-base));
    /* 設定固定高度作為滑動窗口 (Fixed height for sliding viewport) */
    /* overflow-y: hidden; */
    /* 啟用 overflow-y hidden 裁剪跑出容器的文字 (Enable overflow-y hidden to clip out-of-bound text) */
    perspective: calc(200*var(--vw-base));
    /* 啟用 3D 空間透視度 (Enable 3D Perspective) */
}

.bar-item .en .en-light {
    position: relative;
    display: block;
    font-family: "Butler_Light";
    font-style: normal;
    color: #333333;
    font-size: calc(18*var(--vw-base));
    line-height: calc(22*var(--vw-base));
    /* 行高對齊容器高度 (Line height aligned with container) */
    letter-spacing: 0em;
    opacity: 1;
    transform: translateY(0);
    /* 項目收回時的過渡動畫 (Leave transition)：延遲 0.1s，0.6s 下降（採用 ease-out 使尾端不變慢） */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.bar-item .en .en-italic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    text-align: inherit;
    /* 繼承對齊方式 (Inherit text alignment) */
    font-family: "Butler_Regular";
    font-weight: 400;
    font-style: italic;
    color: #333333;
    font-size: calc(18*var(--vw-base));
    line-height: calc(22*var(--vw-base));
    letter-spacing: 0em;
    opacity: 0;
    white-space: nowrap;
    transform: translateY(100%) scaleY(0.8);
    transform-origin: center bottom;
    /* 項目收回時的過渡動畫 (Leave transition)：延遲 0.1s，0.2s 下降（採用 ease-out 使尾端不變慢） */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

/* 懸停滑動與旋轉淡入淡出 (Hover Slide, Rotate & Fade) */
.bar-item:hover .en .en-light {
    opacity: 0;
    transform: translateY(-50%);
    /* 項目展開時的過渡動畫 (Hover transition)：無延遲，0.7s 快速上升（採用 ease-out 使尾端不變慢） */
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.bar-item:hover .en .en-italic {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    /* 項目展開時的過渡動畫 (Hover transition)：無延遲，0.2s 快速上升（採用 ease-out 使尾端不變慢） */
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.bar-logo-fake {
    position: relative;
    width: calc(46 * var(--vw-base));
    height: calc(128 * var(--vw-base));
}



.bar-logo {
    position: relative;
    width: 100%;
    height: 100%;
}

.bar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bar-item {
    opacity: 0;
}



/*背景音樂按鈕*/
.music-fixed {
    position: fixed;
    bottom: calc(50*var(--vw-base));
    right: calc(50*var(--vw-base));
    z-index: 9999;
}

:root {
    --vw-base: 1vw;
}

.music-toggle {
    /* 設定基礎大小 */
    width: calc(40 * var(--vw-base));
    height: calc(40 * var(--vw-base));
    background: transparent;
    border: none;
    cursor: pointer;
    transform: scale(0.75);
    /* 關鍵：設定變形的中心點為正中心 */
    transform-origin: center center;
    
    /* 使用 transform 來處理平滑縮放 */
    transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.music-toggle.playing {
    /* 40 變 30，縮放比例就是 30/40 = 0.75 */
    transform: scale(1);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

.m1-navbar {
    position: absolute;
    left: 50%;
    top: calc(76 * var(--vw-base));
    width: calc(1568 * var(--vw-base));
    height: auto;
    transform: translate(-50%, 0);

    /* 關鍵佈局：改用 Grid */
    display: grid;
    /* 這裡定義三個區塊：左側佔據剩餘空間、中間固定、右側佔據剩餘空間 */
    grid-template-columns: 1fr auto 1fr;
    align-items: end; /* 文字底部對齊 */
}

/* 左側群組：貼左 */
.nav-left-group {
    display: flex;
    justify-content: flex-start;
    gap: calc(150 * var(--vw-base)); /* 按鈕間距 */
}

/* 右側群組：貼右 */
.nav-right-group {
    display: flex;
    justify-content: flex-end;
    gap: calc(120 * var(--vw-base)); /* 按鈕間距 */
}

/* Logo 容器 */
.bar-logo-box {
    width: calc(46 * var(--vw-base));
    height: calc(128 * var(--vw-base));
    margin: 0 calc(50 * var(--vw-base)); /* Logo 與兩側選單的緩衝空間 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.bar-logo {
    display: block;
    width: 100%;
    height: 100%;
}
/* 左側群組 (見月、築心、藏作) */
.nav-left-group .bar-item:nth-child(1) { transform: translateX(40px); }
.nav-left-group .bar-item:nth-child(2) { transform: translateX(35px); }
.nav-left-group .bar-item:nth-child(3) { transform: translateX(30px); }

/* 右側群組 (共好、山居、留聲) */
.nav-right-group .bar-item:nth-child(1) { transform: translateX(-30px); }
.nav-right-group .bar-item:nth-child(2) { transform: translateX(-35px); }
.nav-right-group .bar-item:nth-child(3) { transform: translateX(-40px); }