@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);
    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(1) rotate(-1deg);
    }

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


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

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

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

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

    100% {
        transform: scale(1) 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;
    }
}


/* ===== Reset ===== */
/*
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { overflow: hidden; height: 100%; }
*/
    @font-face {
      font-family: 'CustomFont';
      src: local('Noto Serif TC'), local('Source Han Serif TC'), local('serif');
    }

    /* ===== Full-viewport container ===== */
    .scene {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      font-family: 'Noto Serif TC', 'Source Han Serif TC', serif;
    }

    /* ===== Background: cover, bottom-aligned ===== */
    .scene__bg {
      position: absolute;
      inset: 0;
      background: url('../paratree/background.jpg') center bottom / cover no-repeat;
      z-index: 0;
    }

    /* ===== Tree wrapper: always pinned to bottom-centre ===== */
    .tree-wrapper {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      display: none;
    }

    .tree-wrapper .tree-img {
      display: block;
      height: 100%;
      width: auto;
      cursor: pointer;
      transform-origin: center bottom;
    }

    /* tree-1, tree-2: no idle sway */
    /* tree-3 ~ tree-5: gentle idle sway */
    #tree-3 .tree-img,
    #tree-4 .tree-img,
    #tree-5 .tree-img {
      animation: idle-sway 4s ease-in-out infinite;
    }

    @keyframes idle-sway {
      0%, 100% { transform: rotate(0deg); }
      25%      { transform: rotate(0.6deg); }
      75%      { transform: rotate(-0.6deg); }
    }

    /* Click shake */
    @keyframes tree-shake {
      0%   { transform: rotate(0deg); }
      10%  { transform: rotate(-3deg); }
      20%  { transform: rotate(3deg); }
      30%  { transform: rotate(-2.5deg); }
      40%  { transform: rotate(2deg); }
      50%  { transform: rotate(-1.5deg); }
      60%  { transform: rotate(1deg); }
      70%  { transform: rotate(-0.5deg); }
      80%  { transform: rotate(0.3deg); }
      100% { transform: rotate(0deg); }
    }

    .tree-wrapper .tree-img.shaking {
      animation: tree-shake 0.6s ease-out !important;
    }

    /* ===== Overlay UI: hours + progress bar ===== */
    .tree-overlay {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: max(260px, 28vw);
      pointer-events: none;
    }

    /* Position overlay per tree */
    #tree-1 .tree-overlay { top: calc(2% - 50px); }
    #tree-2 .tree-overlay { top: calc(2% - 90px); }
    #tree-3 .tree-overlay { top: calc(8% - 140px); }
    #tree-4 .tree-overlay { top: calc(8% - 100px); }
    #tree-5 .tree-overlay { top: calc(5% - 160px); }

    /* -- Hours display -- */
    .hours-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 0.15em;
      white-space: nowrap;
      text-shadow: 0 2px 8px rgba(255,255,255,0.7);
    }

    .hours-label {
      font-size: clamp(0.7rem, 1.6vw, 1.1rem);
      color: #3b5a2a;
      font-weight: 700;
      text-shadow:
        0 0 5px rgba(255,255,255,0.95),
        0 0 10px rgba(255,255,255,0.7),
        0 1px 2px rgba(255,255,255,0.9);
    }

    .hours-number {
      font-size: clamp(1.6rem, 4.5vw, 3.5rem);
      font-weight: 700;
      color: #3b2f1e;
      letter-spacing: 0.02em;
      text-shadow:
        0 0 6px rgba(255,255,255,0.9),
        0 0 12px rgba(255,255,255,0.6),
        0 1px 3px rgba(255,255,255,0.8);
      font-family: 'Georgia', 'Noto Serif TC', serif;
    }

    .hours-unit {
      font-size: clamp(0.7rem, 1.6vw, 1.1rem);
      color: #3b5a2a;
      font-weight: 700;
      margin-left: 0.1em;
      text-shadow:
        0 0 5px rgba(255,255,255,0.95),
        0 0 10px rgba(255,255,255,0.7),
        0 1px 2px rgba(255,255,255,0.9);
    }

    /* -- Progress bar -- */
    .progress-container {
      margin-top: clamp(4px, 0.8vh, 10px);
      width: 90%;
    }

    .progress-bar-wrap {
      width: 100%;
      height: clamp(22px, 3vh, 38px);
      background: rgba(255,255,255,0.55);
      border-radius: 999px;
      overflow: visible;
      position: relative;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
      border: 1.5px solid rgba(180,200,170,0.4);
    }

    .progress-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #d4e4c8 0%, #b8d4a0 40%, #a0c888 100%);
      transition: width 0.6s ease;
      position: relative;
    }

    /* Leaf icon pinned to the end of the filled portion */
    .progress-leaf {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translate(50%, -50%);
      width: clamp(28px, 3.5vw, 48px);
      height: auto;
      z-index: 3;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
    }

    .progress-text {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: max-content;
      font-size: clamp(0.55rem, 1.2vw, 0.85rem);
      color: #5a7a5a;
      font-weight: 600;
      letter-spacing: 0.03em;
    }

    /* ===== Tree sizing ===== */
    #tree-1 { height: max(30vh, 15vw); max-height: 90vh; bottom: -30px; }
    #tree-2 { height: max(38vh, 19vw); max-height: 90vh; }
    #tree-3 { height: max(52.8vh, 26.4vw); max-height: 90vh; bottom: 20px; }
    #tree-4 { height: max(67.2vh, 36.6vw); max-height: 90vh; bottom: 30px; }
    #tree-5 { height: max(88.4vh, 44.2vw); max-height: 90vh; bottom: -20px; }

    @media (min-width: 576px) {
      #tree-1 { height: max(34vh, 16vw); }
      #tree-2 { height: max(42vh, 20vw); }
      #tree-3 { height: max(57.2vh, 27.5vw); }
      #tree-4 { height: max(72vh, 34.8vw); bottom: 10px; }
      #tree-5 { height: max(93.6vh, 45.5vw); }
    }

    @media (min-width: 992px) {
      #tree-1 { height: max(38vh, 17vw); }
      #tree-2 { height: max(46vh, 21vw); }
      #tree-3 { height: max(61.6vh, 28.6vw); }
      #tree-4 { height: max(76.8vh, 36vw); }
      #tree-5 { height: max(98.8vh, 46.8vw); }
    }

    @media (min-width: 1400px) {
      #tree-1 { height: max(42vh, 18vw); }
      #tree-2 { height: max(50vh, 22vw); }
      #tree-3 { height: max(66vh, 29.7vw); }
      #tree-4 { height: max(81.6vh, 37.2vw); }
      #tree-5 { height: max(104vh, 48.1vw); }
    }

    /* ===== Only show the active tree ===== */
    .tree-wrapper.active { display: block; }

    /* ===== Foreground grass (plane.png) ===== */
    .scene__grass {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 0;
      width: clamp(300px, 60vw, 900px);
      height: auto;
      pointer-events: none;
      transition: width 0.6s ease;
    }

    /* Grass sizes per tree stage */
    .scene.grass-xs .scene__grass {
      width: clamp(80px, 15vw, 200px);
    }
    .scene.grass-md .scene__grass {
      width: clamp(120px, 22.5vw, 300px);
    }




/* 確保容器有尺寸 */
#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);
    }