/* =======================================================
   日系極簡線條風與細緻動畫升級 (Desktop Only)
   ======================================================= */
@media (min-width: 1025px) { 
       
    /* 1. 漢堡選單按鈕線條化 */
    .burger-menu-btn {
        background-color: transparent !important;
        box-shadow: none !important;
        width: 54px;
        height: 54px;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .burger-menu-btn::before,
    .burger-menu-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(49, 77, 96, 0.22);
        pointer-events: none;
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
    }
    
    .burger-menu-btn::after {
        inset: 4px;
        border: 1px solid rgba(49, 77, 96, 0.08);
    }
    
    #menu-panel.open ~ .burger-menu-btn::before {
        border-color: rgba(49, 77, 96, 0.35);
    }
    
    #menu-panel.open ~ .burger-menu-btn::after {
        border-color: rgba(49, 77, 96, 0.18);
    }
    
    @media (hover: hover) and (pointer: fine) {
        .burger-menu-btn:hover {
            transform: scale(1.06) !important;
            box-shadow: none !important;
        }
        .burger-menu-btn:hover::before {
            transform: rotate(180deg) scale(1.06);
            border-color: var(--accent-color);
        }
        .burger-menu-btn:hover::after {
            transform: rotate(-90deg) scale(0.96);
            border-color: rgba(113, 156, 176, 0.35);
        }
    }
    
    .burger-line {
        background-color: var(--main-dark-color);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, background-color 0.4s ease;
    }
    
    #menu-panel.open ~ .burger-menu-btn .burger-line {
        background-color: var(--main-dark-color);
    }
    
    #menu-panel.open ~ .burger-menu-btn .burger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    #menu-panel.open ~ .burger-menu-btn .burger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    #menu-panel.open ~ .burger-menu-btn .burger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* 2. 選單面板升級 */
    #menu-panel {
        background-color: rgba(243, 247, 250, 0.97) !important;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        z-index: 998;
        counter-reset: menu-counter;
        transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s !important;
    }
    
    /* 角落 L 形線條裝飾 (Corner Bracket Decoration) */
    .menu-corner-lt,
    .menu-corner-rb {
        display: block;
        position: absolute;
        pointer-events: none;
        width: 36px;
        height: 36px;
    }
    
    .menu-corner-lt { top: 55px; left: 65px; }
    .menu-corner-rb { bottom: 55px; right: 65px; }
    
    .corner-h {
        position: absolute;
        width: 36px;
        height: 1px;
        background: rgba(49, 77, 96, 0.3);
        display: block;
        transform: scaleX(0);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s;
    }
    
    .corner-v {
        position: absolute;
        width: 1px;
        height: 36px;
        background: rgba(49, 77, 96, 0.3);
        display: block;
        transform: scaleY(0);
        transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0s;
    }
    
    .menu-corner-lt .corner-h { top: 0; left: 0; transform-origin: left; }
    .menu-corner-lt .corner-v { top: 0; left: 0; transform-origin: top; }
    .menu-corner-rb .corner-h { bottom: 0; right: 0; transform-origin: right; }
    .menu-corner-rb .corner-v { bottom: 0; right: 0; transform-origin: bottom; }
    
    /* 開啟時：帶延遲的描繪動畫 */
    #menu-panel.open .menu-corner-lt .corner-h,
    #menu-panel.open .menu-corner-rb .corner-h {
        transform: scaleX(1);
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
    }
    
    #menu-panel.open .menu-corner-lt .corner-v,
    #menu-panel.open .menu-corner-rb .corner-v {
        transform: scaleY(1);
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.42s;
    }
    
    .menu-item {
        color: var(--main-dark-color) !important;
        font-family: 'Noto Serif TC', serif;
        font-size: clamp(15px, 1.3vw, 22px);
        font-weight: 300;
        letter-spacing: clamp(5px, 0.5vw, 10px);
        margin: clamp(16px, 3vh, 32px) 0;
        cursor: pointer;
        position: relative;
        counter-increment: menu-counter;
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1), color 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    #menu-panel.open .menu-item {
        opacity: 0.95;
        transform: translateY(0);
    }
    
    /* 開場瀑布延遲：僅作用於 opacity/transform，letter-spacing/color 保持即時 */
    #menu-panel.open .menu-item:nth-child(1) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    #menu-panel.open .menu-item:nth-child(2) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    #menu-panel.open .menu-item:nth-child(3) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    #menu-panel.open .menu-item:nth-child(4) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    /* 未來擴展用：第 5~8 項選單延遲 */
    #menu-panel.open .menu-item:nth-child(5) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.8s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    #menu-panel.open .menu-item:nth-child(6) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    #menu-panel.open .menu-item:nth-child(7) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.0s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.0s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    #menu-panel.open .menu-item:nth-child(8) { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s, letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s, color 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0s !important; }
    
    .menu-item::before {
        content: "0" counter(menu-counter);
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 10px;
        font-weight: 400;
        color: var(--accent-color);
        margin-right: 16px;
        letter-spacing: 1px;
        border: 1px solid transparent;
        padding: 2px 6px;
        display: inline-block;
        transition: border-color 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .menu-item::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 100% !important;
        height: 1px !important;
        background: var(--accent-color) !important;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        margin: 0 !important;
    }
    
    @media (hover: hover) and (pointer: fine) {
        .menu-item:hover {
            letter-spacing: 12px !important;
            color: var(--accent-color) !important;
        }
        .menu-item:hover::before {
            border-color: rgba(113, 156, 176, 0.45);
            transform: scale(0.95);
        }
        .menu-item:hover::after {
            transform: scaleX(1) !important;
        }
    }

    /* 3. 公告列表線條化與自繪動畫 */
    .news-item {
        border-bottom: none !important;
        position: relative;
        overflow: visible;
        transition: padding 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .news-item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--border-color);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }
    
    .news-date, .news-tag, .news-title {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(4px);
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .reveal-on-scroll.visible .news-item::after,
    .active #news-list-container .news-item::after {
        transform: scaleX(1);
    }
    
    .reveal-on-scroll.visible .news-item .news-date,
    .reveal-on-scroll.visible .news-item .news-tag,
    .reveal-on-scroll.visible .news-item .news-title,
    .active #news-list-container .news-item .news-date,
    .active #news-list-container .news-item .news-tag,
    .active #news-list-container .news-item .news-title {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
    
    .news-item:nth-child(1)::after { transition-delay: 0.1s; }
    .news-item:nth-child(1) .news-date { transition-delay: 0.3s; }
    .news-item:nth-child(1) .news-tag { transition-delay: 0.4s; }
    .news-item:nth-child(1) .news-title { transition-delay: 0.5s, 0.5s, 0.5s, 0s; }
    
    .news-item:nth-child(2)::after { transition-delay: 0.2s; }
    .news-item:nth-child(2) .news-date { transition-delay: 0.4s; }
    .news-item:nth-child(2) .news-tag { transition-delay: 0.5s; }
    .news-item:nth-child(2) .news-title { transition-delay: 0.6s, 0.6s, 0.6s, 0s; }
    
    .news-item:nth-child(3)::after { transition-delay: 0.3s; }
    .news-item:nth-child(3) .news-date { transition-delay: 0.5s; }
    .news-item:nth-child(3) .news-tag { transition-delay: 0.6s; }
    .news-item:nth-child(3) .news-title { transition-delay: 0.7s, 0.7s, 0.7s, 0s; }
    
    .news-item:nth-child(4)::after { transition-delay: 0.4s; }
    .news-item:nth-child(4) .news-date { transition-delay: 0.6s; }
    .news-item:nth-child(4) .news-tag { transition-delay: 0.7s; }
    .news-item:nth-child(4) .news-title { transition-delay: 0.8s, 0.8s, 0.8s, 0s; }
    
    .news-item:nth-child(5)::after { transition-delay: 0.5s; }
    .news-item:nth-child(5) .news-date { transition-delay: 0.7s; }
    .news-item:nth-child(5) .news-tag { transition-delay: 0.8s; }
    .news-item:nth-child(5) .news-title { transition-delay: 0.9s, 0.9s, 0.9s, 0s; }
    
    .news-item::before {
        content: "";
        position: absolute;
        inset: -2px -10px;
        border: 1px solid rgba(113, 156, 176, 0.35);
        opacity: 0;
        transform: scale(0.995);
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
        pointer-events: none;
        z-index: 2;
    }
    
    .news-item-arrow {
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%) translateX(12px);
        opacity: 0;
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 14px;
        font-weight: 300;
        color: var(--accent-color);
        transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease, letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        letter-spacing: -2px;
    }
    
    @media (hover: hover) and (pointer: fine) {
        .news-item:hover {
            background-color: transparent !important;
            padding-left: 20px;
        }
        .news-item:hover::before {
            opacity: 1;
            transform: scale(1);
        }
        .news-item:hover .news-title {
            color: var(--accent-color);
        }
        .news-item:hover .news-item-arrow {
            opacity: 1;
            transform: translateY(-50%) translateX(0);
            letter-spacing: 0px;
        }
    }

    /* 4. 展廳按鈕油墨左繮內儲浦動畫 (Liquid Ink Fill) */
    .enter-gallery-btn {
        position: relative;
        overflow: hidden;
        background-color: transparent !important;
        color: var(--main-dark-color);
        transition: color 1.2s cubic-bezier(0.9, 0, 0.1, 1) !important;
        box-shadow: none !important;
        z-index: 0;
    }
    
    /* 油墨充內層 */
    .enter-gallery-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--main-dark-color);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 1.2s cubic-bezier(0.9, 0, 0.1, 1);
        z-index: -1;
        pointer-events: none;
    }
    
    .enter-gallery-btn::after {
        display: none;
    }
    
    .btn-arrow {
        display: inline-block;
        transition: transform 1.2s cubic-bezier(0.9, 0, 0.1, 1);
        letter-spacing: 0;
    }
    
    @media (hover: hover) and (pointer: fine) {
        .enter-gallery-btn:hover {
            color: white !important;
            transform: none;
        }
        .enter-gallery-btn:hover::before {
            transform: scaleX(1);
        }
        .enter-gallery-btn:hover .btn-arrow {
            transform: translateX(5px);
        }
    }
    
    .back-btn {
        position: relative;
        color: #666;
        transition: color 0.4s ease !important;
    }
    
    .back-btn::before {
        content: "←" !important;
        display: inline-block;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .back-btn::after {
        content: "";
        position: absolute;
        bottom: 4px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--main-dark-color);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    @media (hover: hover) and (pointer: fine) {
        .back-btn:hover {
            color: var(--main-dark-color) !important;
        }
        .back-btn:hover::before {
            transform: translateX(-6px) scaleX(1.3) !important;
        }
        .back-btn:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }
    }

    /* 5. 滾動指示器重製 */
    .scroll-hint-mobile {
        display: none !important;
    }
    
    .scroll-hint-desktop {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    
    .scroll-text {
        font-family: 'Noto Sans TC', sans-serif;
        font-size: 10px;
        font-weight: 300;
        letter-spacing: 3px;
        color: rgba(49, 77, 96, 0.58);
        writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
    }
    
    .scroll-line {
        position: relative;
        width: 1px;
        height: 55px;
        background: rgba(49, 77, 96, 0.2);
        overflow: hidden;
        display: block;
    }
    
    .scroll-line::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 15px;
        background: var(--accent-color);
        animation: scrollDotFlow 2.4s infinite cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    @keyframes scrollDotFlow {
        0% {
            transform: translateY(-15px);
        }
        70%, 100% {
            transform: translateY(55px);
        }
    }

    /* 6. 頁面標題展開效果 */
    .section-title {
        border-bottom: none !important;
        position: relative;
        letter-spacing: 24px;
        opacity: 0;
        transition: letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    }
    
    .section-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100%;
        height: 1px;
        background-color: var(--border-color);
        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
    }
    
    .active .section-title {
        letter-spacing: 12px;
        opacity: 1;
    }
    
    .active .section-title::after {
        transform: translateX(-50%) scaleX(1);
    }
}