/* --- 基礎設定 --- */
:root {
    /* 預設暗色模式變數 */
    --primary-color: #4da3ff;      
    --secondary-color: #adb5bd;
    --text-color: #e0e0e0;            
    --bg-body: #121212;
    --bg-light: #1e1e1e;           
    --header-bg: #242424;
    --card-bg: #2d2d2d;
    
    /* 新增：水桶樣式變數 */
    --bucket-bg: #2a2a2a;
    --bucket-shadow: rgba(0,0,0,0.5);

    /* Hero 區域暗色漸層 (深藍色調) */
    --hero-bg-start: #0a062b;
    --hero-bg-end: #203a43;
    --hero-text: #ffffff;

    --transition: all 0.3s ease;
}

/* 亮色模式覆寫 */
body.light-mode {
    --primary-color: #007bff;      
    --secondary-color: #6c757d;
    --text-color: #333;            
    --bg-body: #ffffff;
    --bg-light: #f8f9fa;           
    --header-bg: #ffffff;
    --card-bg: #ffffff;

    /* 新增：水桶樣式變數 (淺色模式) */
    --bucket-bg: #e9ecef;
    --bucket-shadow: rgba(0,0,0,0.15);

    /* Hero 區域亮色漸層 (淺紫藍色調) */
    --hero-bg-start: #e0c3fc;
    --hero-bg-end: #8ec5fc;
    --hero-text: #333333;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* 加入背景顏色變數 */
body { font-family: 'Segoe UI', sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--bg-body); transition: background-color 0.3s ease, color 0.3s ease; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.container { max-width: 900px; margin: 0 auto; padding: 0 20px; }

/* --- 導航欄 --- */
/* 修改背景為變數 */
/* 修改：加入 transform 到 transition 屬性中，以便進行位移動畫 */
header { 
    background: var(--header-bg); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1000; 
    transition: background-color 0.2s ease, transform 0.2s ease; 
}

/* 新增：隱藏導航欄的樣式 (往上移動 100% 高度) */
header.header-hidden {
    transform: translateY(-100%);
}

.nav-container { display: flex; justify-content: space-between; align-items: center; height: 60px; }

/* 修改 Logo 樣式以適應圖片 */
.logo { 
    display: flex; 
    align-items: center;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1); /* 滑鼠移過去稍微放大 */
}

.logo img {
    height: 40px; /* 設定高度以適應導航欄 */
    width: 40px;
    border-radius: 50%; /* 圓形頭像 */
    border: 2px solid var(--primary-color); /* 加上主題色邊框 */
    object-fit: cover;
    background-color: var(--card-bg); /* 新增：確保圖片載入前或透明時有背景 */
}

/* 修改：加入 align-items: center 讓列表項目垂直置中 */
.nav-links { display: flex; align-items: center; }
.nav-links li { margin-left: 20px; }
/* 新增：讓連結內容 (圖示+文字) 垂直置中 */
.nav-links a { display: flex; align-items: center; }
.nav-links a:hover { color: var(--primary-color); }

/* 新增：語言選擇器樣式 */
.lang-select {
    background: transparent;
    border: 1px solid var(--secondary-color);
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    transition: var(--transition);
    margin-left: 15px;
}

.lang-select:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.lang-select option {
    background: var(--card-bg);
    color: var(--text-color);
}

/* 新增：導航文字預設隱藏 (桌面版只顯示圖示) */
.nav-text { display: none; }

/* 主題切換按鈕樣式 */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.2rem;
    cursor: pointer;
    transition: var(--transition);
    /* 新增：讓按鈕內容垂直置中 */
    display: flex;
    align-items: center;
}
.theme-toggle:hover { color: var(--primary-color); }

.burger { display: none; cursor: pointer; font-size: 1.5rem; color: var(--text-color); }

/* --- 通用 Section --- */
.section { padding: 80px 0; }
.bg-light { background-color: var(--bg-light); transition: background-color 0.3s ease; }
.section-title { text-align: center; margin-bottom: 40px; font-size: 2rem; }
.btn { display: inline-block; background: var(--primary-color); color: #fff; padding: 10px 25px; border-radius: 5px; margin-top: 10px; transition: var(--transition); }
.btn:hover { background: #0056b3; }

/* --- Hero Section --- */
/* Hero 保持漸層，但文字顏色需確保對比 */
.hero { 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    background: linear-gradient(135deg, var(--hero-bg-start) 0%, var(--hero-bg-end) 100%); 
    color: var(--hero-text); 
    transition: color 0.3s ease;
}

/* 新增：固定內容容器寬度，避免打字時寬度變化導致背景或排版跳動 */
.hero .container {
    width: 100%;
}

.hero h1 { font-size: 3rem; margin-bottom: 10px; min-height: 1.2em; /* 防止高度塌陷 */ }

/* 新增：固定段落高度，避免打字時高度跳動 */
.hero p {
    min-height: 1.6em;
}

.highlight { color: var(--primary-color); font-weight: bold; }

/* --- 打字機特效樣式 --- */
/* 游標閃爍動畫 */
.typing-cursor::after {
    content: '|';
    animation: blink 1s step-end infinite;
    color: var(--text-color);
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Hero 按鈕初始隱藏與淡入效果 */
.hero .btn {
    opacity: 0;
    transform: translateY(20px);
    /* 分開設定 transition，讓淡入較慢(1s)，但 hover 變色保持較快(0.3s) */
    transition: opacity 1s ease, transform 1s ease, background-color 0.3s ease;
}

.hero .btn.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- About & Skills Section --- */
.about-text { margin-bottom: 40px; text-align: center; font-size: 1.1rem; color: var(--secondary-color); transition: color 0.3s ease; }

/* 修改容器為 Flex 橫向排列 */
.skills-container { 
    max-width: 800px; 
    margin: 0 auto; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

/* 讓標題佔滿整行 */
.skills-container h3 { 
    width: 100%;
    margin-bottom: 30px; 
    text-align: center; 
}

/* 新增：水桶與波浪樣式 */
.skill-box { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100px;
}

.bucket {
    position: relative;
    width: 60px;
    height: 120px;
    border: 3px solid var(--secondary-color);
    border-top: none;
    border-radius: 0 0 15px 15px;
    /* 底層背景：改為變數 */
    background: var(--bucket-bg);
    overflow: hidden;
    margin-bottom: 15px;
    /* 陰影：改為變數 */
    box-shadow: inset 0 0 10px var(--bucket-shadow);
    z-index: 1;
    /* 新增過渡效果 */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.water {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* 加入高度過渡動畫，時間 1.5秒，緩出效果 */
    transition: height 1.5s ease-out;
    
    /* 修改：使用 background-size 讓實體顏色高度降低，避免遮擋下沉的波浪 */
    background-color: transparent;
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-size: 100% calc(100% - 10px);
    background-position: bottom;
    background-repeat: no-repeat;
    
    z-index: 2;
}

/* 新增：SVG 波浪動畫效果 (取代舊的旋轉遮罩) */
.water::before, .water::after {
    content: "";
    position: absolute;
    /* 讓波浪位於水面之上 */
    /* 修改：將波浪位置下移，讓它部分重疊在水面上，修正視覺高度過高的問題 */
    bottom: calc(100% - 10px);
    left: 0;
    /* 寬度設為 200% 以便進行無縫輪播 */
    width: 200%;
    height: 15px; /* 波浪高度，控制波動幅度 */
    background-color: var(--primary-color);
    
    /* 使用 SVG 作為遮罩，畫出波浪形狀 */
    /* SVG 路徑：繪製一個底部平整、頂部波浪的形狀 */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 V 50 Q 250 0 500 50 T 1000 50 V 100 z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100 V 50 Q 250 0 500 50 T 1000 50 V 100 z' fill='black'/%3E%3C/svg%3E");
    
    /* 遮罩大小：寬度 50% (對應容器的 100%)，高度 100% */
    -webkit-mask-size: 50% 100%;
    mask-size: 50% 100%;
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    
    animation: wave-move 2s linear infinite;
    /* animation-play-state: paused; */
}

/* 第二層波浪：透明度較低，速度較慢，製造層次感 */
.water::after {
    opacity: 0.5;
    height: 18px; /* 稍微高一點 */
    /* 修改：將波浪位置下移 */
    bottom: calc(100% - 12px); 
    animation: wave-move 6s linear infinite reverse; /* 反向流動 */
    /* animation-play-state: paused; */
}

/* 波浪水平移動動畫 */
@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.skill-info {
    text-align: center;
}

.skill-name {
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 5px;
    display: block;
}

.skill-level {
    font-size: 0.9rem;
    color: var(--secondary-color);
    display: block;
}

/* 新增：載入中的佔位樣式 */
.skill-box.placeholder {
    opacity: 0.3;
    animation: pulse 1.5s infinite ease-in-out;
    pointer-events: none; /* 防止載入中被點擊 */
}

@keyframes pulse {
    0% { opacity: 0.3; }
    50% { opacity: 0.6; }
    100% { opacity: 0.3; }
}

/* 移除舊的條狀進度條樣式 (.skill-title, .progress-bar 等) */

/* --- Contact Section --- */
.center-text { text-align: center; }
.contact-methods { display: flex; justify-content: center; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.contact-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 150px; height: 120px;
    background: var(--card-bg); border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* 修改這裡：不要用 var(--transition) (它是 all)，改為指定屬性 */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    
    /* 新增這行：明確指定顏色，讓 <a> 標籤更穩定，不依賴 inherit */
    color: var(--text-color);
    
    cursor: pointer;
}
.contact-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.contact-card i { font-size: 2.5rem; margin-bottom: 10px; color: var(--primary-color); transition: color 0.3s ease; }
.contact-card span { font-weight: bold; transition: color 0.3s ease; }

/* --- Footer --- */
footer { background: #333; color: #fff; text-align: center; padding: 20px 0; }

/* --- 響應式 --- */
@media (max-width: 768px) {
    /* 修改手機版選單背景 - 改為懸浮小框框 */
    .nav-links { 
        display: none; 
        flex-direction: column; 
        position: absolute; 
        top: 70px; /* 距離頂部 */
        right: 20px; /* 距離右邊 */
        width: auto; /* 自動寬度 */
        min-width: 160px; /* 稍微加寬以容納文字 */
        background: var(--card-bg); /* 使用卡片背景色 */
        text-align: center; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 加深陰影 */
        border-radius: 12px; /* 圓角 */
        padding: 15px; /* 內距 */
        border: 1px solid rgba(255,255,255,0.05); /* 微弱邊框增加質感 */
    }
    .nav-links.active { display: flex; }
    .nav-links li { margin: 8px 0; } /* 調整垂直間距 */
    
    /* 新增：手機版顯示文字並排版 */
    .nav-text { 
        display: inline-block; 
        margin-left: 12px; 
        font-size: 1rem;
        font-weight: 500;
    }

    /* 新增：讓按鈕內容水平置中排列 (圖示+文字) */
    .nav-links li a, 
    .nav-links li button {
        display: flex;
        align-items: center;
        justify-content: center; /* 內容置中 */
        width: 100%;
        padding: 5px 0; /* 增加點擊區域 */
    }

    .burger { display: block; }
    .hero h1 { font-size: 2rem; }
}

/* --- 自定義通知系統 --- */
#notification-container {
    position: fixed;
    top: 80px; /* 位於導航欄下方一點點 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000; /* 確保在最上層 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* 讓點擊可以穿透容器空白處 */
}

.notification-toast {
    background: var(--card-bg);
    color: var(--text-color);
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 90vw;
    pointer-events: auto; /* 讓卡片本身可以被點擊(如果需要互動) */
    border-left: 5px solid transparent;
    animation: slideIn 0.3s ease forwards;
}

/* 狀態樣式 */
.notification-toast.success { border-left-color: #2ecc71; }
.notification-toast.error { border-left-color: #e74c3c; }
.notification-toast.warning { border-left-color: #f1c40f; }

/* 圖示顏色 */
.notification-toast.success i { color: #2ecc71; }
.notification-toast.error i { color: #e74c3c; }
.notification-toast.warning i { color: #f1c40f; }

/* 新增：回到頂部按鈕樣式 */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 確保火箭飛出時不會超出圓圈(如果需要) */
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    filter: brightness(1.1);
    transform: translateY(-5px);
}

/* 火箭發射動畫狀態 */
.back-to-top.launching {
    /* 向上飛出螢幕，並放大 */
    transform: translateY(-120vh) scale(1.5);
    opacity: 0;
    /* 加速飛出 */
    transition: transform 1s ease-in, opacity 0.5s ease-in 0.5s;
    pointer-events: none; /* 發射中不可點擊 */
}

.back-to-top.launching i {
    /* 讓圖示本身稍微抖動 */
    animation: rocket-shake 0.1s infinite;
    color: #ffeb3b; /* 發射時變黃色 */
}

@keyframes rocket-shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-2px, 2px); }
    50% { transform: translate(2px, -2px); }
    75% { transform: translate(-2px, -2px); }
    100% { transform: translate(2px, 2px); }
}

/* 螢幕震動效果 */
.shaking {
    animation: screen-shake 0.5s cubic-bezier(.36,.07,.19,.97) both infinite;
    overflow-x: hidden; /* 防止震動時出現橫向卷軸 */
}

@keyframes screen-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* 進場動畫 */
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 離場動畫 */
@keyframes fadeOut {
    to { opacity: 0; transform: translateY(-20px); }
}