@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}


html {
    
    scroll-behavior: smooth;
}

body {
    background-color: #f9f9f9;
    min-height: 100%; /* 不要用高度鎖死，改用最小高度 */
    
    position: relative; /* 確保 fixed 元素定位基準正確 */
}


html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 強制隱藏橫向捲軸 */
}

/* Header 樣式保持不變，但加上 z-index 確保在最上層 */
header {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 30px 100px;
    z-index: 100;
}

header h2 {
    font-size: 2em;
    color: #359381;
    margin-right: 10em;
}

/* 固定後的 Header 樣式 */
header.sticky {
    position: fixed; /* 關鍵：固定在視窗頂部 */
    padding: 15px 100px; /* 縮小高度 */
    background: rgba(255, 255, 255, 0.9); /* 加上半透明背景 */
    backdrop-filter: blur(10px); /* 增加高級感的毛玻璃效果 */
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* 加上陰影增加層次感 */
}

/* 如果固定後想改 logo 顏色或導覽列文字顏色 */
header.sticky h2 {
    color: #359381; /* 保持你的綠色 */
    font-size: 1.5em; /* 稍微縮小 Logo */
}

nav a {
    color: #359381;
    padding: 6px 15px;
    border-radius: 20px;
    margin: 0 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

    nav a:hover,
    nav a.active {
        background-color: #359381;
        color: #f9f9f9;
    }

/* Parallax 容器核心設定 */
.parallax {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    /*background-color: transparent;
    //background: url("assets/paratree/background.png"); */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* 讓內容（如文字）也偏向底部對齊 */
    margin-bottom: -10px;
}


/* 每一層的通用設定 */
.layer {
    position: absolute !important;
    width: 140% !important;
    height: 100% !important; /* 高度設為 100%，避免撐開容器 */
    top: 0% !important;
    bottom: 0 !important; /* 絕對貼齊底部 */
    left: -20% !important; /* 水平居中補償 */
    /* 移除所有垂直方向的位移屬性 */
    pointer-events: none;

}

.layer:has(#leaf) {
    bottom: auto !important; /* 取消底部對齊 */
    top: -100px !important; /* 改為頂部對齊，確保葉子頂部不會被切斷 */
    height: 130% !important; /* 增加高度緩衝 */
}

.layer:has(#plant) {
    bottom: 0 !important;
    top: auto !important;
    /* 確保此層的變換支點在底部 */
    transform-origin: bottom center;
}

.layer:has(#tree) {
    z-index: 40 !important; /* 低於 center-content(50)，不蓋住文字 */
    pointer-events: none; /* 容器本身不吃點擊 */
}

.layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 關鍵：縮放支點在底部，這樣放大時不會往上飄 */
    transform-origin: bottom center;
    transform: scale(1.1);
    pointer-events: auto; /* 關鍵：讓圖片可以被點擊 */
}

.layer img, .layer h2, .music-btn {
    /* 只有圖片和按鈕本身可以接收點擊 */
    pointer-events: auto;
}

/* 文字層樣式修正 */
#text {
    position: absolute;
    bottom: 40%;
    top: auto;
    transform: translateX(-50%);
    font-size: 5em;
    color: #fff;
    white-space: nowrap;
    text-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    z-index: 5;
    pointer-events: none;
    
}



/* 下方內容區塊 */
.sec {
    background: #003329;
    padding: 100px;
    position: relative;
    z-index: 10;
}

.sec h2 {
    font-size: 3em;
    color: #fff;
    margin-bottom: 10px;
}

.sec p {
    font-size: 1em;
    color: #fff;
    font-weight: 300;
    line-height: 1.6;
}

/* RWD 響應式調整 */
@media (max-width: 768px) {
    header {
        padding: 20px 30px;
    }

        header h2 {
            margin-right: 2em;
        }

    #text {
        font-size: 2.5em;
    }

    .sec {
        padding: 50px 20px;
    }
}


/* 葉子的晃動：支點在上方，幅度稍大一點更有輕盈感 */

@keyframes swayLeaf {
    0%, 100% {
        transform: scale(0.7) translate(-5%, 5%) rotate(-2deg);
    }

    50% {
        transform: scale(0.7) translate(-5%, 5%) rotate(3deg);
    }
}

@keyframes swayAnimate5 {
    0%, 100% {
        transform: scale(0.7) translate(-5%, 5%) rotate(-2deg);
    }

    50% {
        transform: scale(0.7) translate(-5%, 5%) rotate(3deg);
    }
}

#tree {
    transform-origin: bottom center;
    margin-left: 50px;
    animation: swayTree 9s ease-in-out infinite;
    object-position: bottom;
    cursor: pointer;
    z-index: 15;
    
}


#top-action-btn {
    transform-origin: bottom center;
    margin-left: 50px;
    
    object-position: bottom;
    cursor: pointer;
    z-index: 15;
   
}

/* 樹木的搖擺：支點在底部 */
@keyframes swayTree {
    0%, 100% {
        /* 保持縮放 0.8 並進行旋轉 */
        transform: scale(0.8) rotate(-1deg);
    }

    50% {
        transform: scale(0.8) rotate(1.5deg);
    }
}


/* 劇烈抖動動畫 */
@keyframes shakeTree {
    0% {
        transform: scale(0.8) rotate(0deg);
    }

    25% {
        transform: rotate(-5deg) scale(0.8);
    }

    50% {
        transform: rotate(5deg) scale(0.8);
    }

    75% {
        transform: rotate(-3deg) scale(0.8);
    }

    100% {
        transform: scale(0.8) rotate(0deg);
    }
}

/* 當樹被加上這個類別時，暫停原本的慢搖，改執行劇烈抖動 */
.tree-shake {
    animation: shakeTree 0.8s cubic-bezier(.36,.07,.19,.97) !important;
}


#leaf {
    /* 確保葉子圖片在容器內靠右上對齊 */
    object-position: right top;
    /* 將變形支點設在右上角，這樣晃動時會以右上為中心，不會位移出邊界 */
    transform-origin: right top;
    /* 稍微放大並往內縮一點點，避免邊緣出現白邊 */
    transform: scale(0.1) translate(-5%, 5%);
    animation: swayLeaf 10s ease-in-out infinite;
}

#leaf-1 {
    /* 確保葉子圖片在容器內靠右上對齊 */
    object-position: right top;
    /* 將變形支點設在右上角，這樣晃動時會以右上為中心，不會位移出邊界 */
    transform-origin: right top;
    /* 稍微放大並往內縮一點點，避免邊緣出現白邊 */
    transform: scale(0.1) translate(-5%, 5%);
    animation: swayLeaf 10s ease-in-out infinite;
}

/*** bird */
#animate_5 {
   
    transform: scale(0.1) translate(-2%, 5%);
    animation: swayAnimate5 6s ease-in-out infinite;
}

#plant {
    transform-origin: bottom left;
    object-position: bottom;
    bottom: 0px;
    z-index: 30;
}



/* --- 療癒系慢速飛鳥 --- */

.bird-container {
    position: absolute;
    width: 50px;
    height: 35px;
    pointer-events: none;
}

/* 翅膀拍打：縮短時間（由2s改為0.6s~0.8s），並加大縮放幅度 */
.bird-body {
    transform-origin: center;
    /* 這裡的時間決定頻率，0.6s 會讓翅膀拍得比較有勁 */
    animation: bird-flap-strong 0.6s ease-in-out infinite alternate;
}

@keyframes bird-flap-strong {
    0% {
        /* 翅膀向下拍：壓扁身體，位置下移 */
        transform: scaleY(0.2) translateY(8px);
    }

    100% {
        /* 翅膀向上揚：身體拉長，位置上提 */
        transform: scaleY(1.4) translateY(-5px);
    }
}

@keyframes bird-flap-gentle {
    0% { transform: scaleY(0.4) translateY(5px); }
    100% { transform: scaleY(1.1) translateY(-3px); }
}

/* 身體輕微起伏 */
.bird-svg {
    width: 100%;
    height: 100%;
    animation: bird-float 4s ease-in-out infinite;
}

@keyframes bird-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* 極慢速橫越路徑 */
@keyframes fly-across-chill {
    0% { transform: translate(-20vw, 0); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translate(120vw, -10vh); opacity: 0; }
}

/* 三隻鳥的個性化設定 */
.bird-slow {
    top: 35%; /* 稍微飛低一點，與文字錯開 */
    animation: fly-across-chill 50s linear infinite; /* 恢復慢速橫越才有療癒感 */
    animation-delay: 0s;
    filter: blur(1.5px); /* 遠方的鳥應該比較模糊 */
    transform: scale(0.5);
}

.bird-med {
    top: 45%;
    animation: fly-across-chill 40s linear infinite;
    animation-delay: 15s;
    filter: blur(0.5px);
    transform: scale(0.8);
}

.bird-fast {
    top: 25%;
    animation: fly-across-chill 30s linear infinite;
    animation-delay: 8s;
    filter: blur(0px); /* 近處的鳥應該清晰 */
    transform: scale(0.6);
}


/* 音樂按鈕樣式 */
.music-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(53, 147, 129, 0.2); /* 你的 logo 綠色透明版 */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2000;
    transition: all 0.3s ease;
    font-size: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.music-btn:hover {
    transform: scale(1.1);
    background: rgba(53, 147, 129, 0.4);
}

/* 播放時的微光動畫 */
.music-btn.playing {
    box-shadow: 0 0 15px rgba(53, 147, 129, 0.6);
}

/* 電腦版預設隱藏漢堡按鈕 */
.menu-icon {
    display: none;
    color: #359381;
    cursor: pointer;
}

/* 手機版 RWD 設定 (768px 以下) */
@media (max-width: 768px) {
    header {
        justify-content: space-between;
        padding: 20px 30px;
    }

    header h2 {
        margin-right: 0;
    }

    .menu-icon {
        display: block; /* 顯示漢堡按鈕 */
        z-index: 101;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%; /* 預設在螢幕外 */
        width: 70%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease;
        z-index: 100;
        box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    }

    /* 選單開啟時的樣式 */
    nav.open {
        right: 0;
    }

    nav a {
        margin: 15px 0;
        font-size: 1.2em;
        width: 80%;
        text-align: center;
    }
}

/* 手機版 (768px 以下)：自動切換為全高 100% */
@media (max-width: 1024px) {
    .layer {
        top: 0 !important;
    }

    header.sticky {
        padding: 15px 30px;
    }
}


#scene {
    
}

    #scene .overlay-text {
        position: absolute;
        bottom: 20px;
        width:100%;
        transform: translateX(-50%);
        background: rgba(255,255,255,0.88);
        color: #f9f9f9;
        padding: 8px 16px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        
        font-weight: 600;
        white-space: nowrap;
    }

@media (max-width:480px) {
    #scene .overlay-text {
        bottom: 12px;
        font-size: 14px;
        padding: 6px 10px;
        white-space: normal;
    }
}

/* 確保容器有尺寸 */
#echart-nightingale {
    min-height: 320px;
}

@media (max-width:768px) {
    #echart-nightingale {
        min-height: 260px;
    }
}


.top-action-btn {
    position: fixed; /* 固定在視窗最上層 */
    top: 18px;
    right: 18px;
    z-index: 99999; /* 足夠高，避免被其他元素蓋住 */
    background: #359381;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    cursor: pointer;
    user-select: none;
    pointer-events: auto; /* 確保可接收點擊 */
}

    .top-action-btn:active {
        transform: translateY(1px);
    }