body {
    margin: 0;
    background: linear-gradient(to right,rgb(0, 0, 0),rgb(2, 0, 129));
    color: white;
    font-family: 'Arial', sans-serif;
    overflow-x: hidden; /* 防止水平滾動 */
    min-height: 2000px; /* 確保頁面足夠長以展示滾動效果 */
}
a {
    color: blue; /* 未訪問的顏色（預設藍色，可自訂） */
}

a:visited {
    color: red; /* 訪問後的顏色，改成紅色（或任何顏色，如 #FF0000） */
}

a:hover {
    color: green; /* 滑鼠懸停時的顏色（可選） */
}

a:active {
    color: orange; /* 點擊瞬間的顏色（可選） */
}
/*========================================================================================================*/
.Navigation-Bar{
    background: linear-gradient(to right,rgb(254, 255, 172),rgb(255, 210, 142));
    margin: auto;
    padding: 0px 20px;
    width: 80%;
    height: 100%;
    font-size: 150%;
    color: rgb(0, 0, 0);
    border: 1px solid #ddd;
}
.back-to-top {         /* 按鈕樣式 */
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
}
.back-to-top.show {   /* 按鈕顯示時的樣式 */
    opacity: 1;
}
.back-to-top:hover {    /* 按鈕懸停效果 */
    transform: scale(1.1);
    background-color: #0056b3;
}
/*========================================================================================================*/
/* 英雄動畫區塊的容器，作為一個滾動的「間隔」 */
.hero-animation-wrapper {
    position: relative;
    z-index: 10;
    pointer-events: none; /* 讓下層內容可點擊，但動畫元素本身不可點擊 */
}

/* 實際的圖案/內容區塊 - 在動畫期間固定在視窗中央 */
.hero-content {
    position: fixed; /* 始終固定在視窗中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中 */
    width: 80vw; /* 初始寬度為視窗的80% */
    height: 80vh; /* 初始高度為視窗的80% */
    /* --- 這裡設定背景圖片 --- */
    background-image: url(個人/images.jpg); /* 請確認路徑正確 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* --- 背景圖片設定結束 --- */
    display: flex;
    flex-direction: column; /* 讓影片和文字框垂直排列 */
    justify-content: center; /* 初始時內容垂直居中 */
    align-items: center;
    box-sizing: border-box;
    will-change: opacity; /* 提示瀏覽器這些屬性會變化 */
    z-index: 11; /* 確保在 wrapper 之上 */
    opacity: 1; /* 初始可見 */
    pointer-events: auto; /* 讓 hero-content 內部元素可交互 */
    overflow: hidden; /* 確保縮放的影片不會溢出 hero-content */
}

/* 替換巨大文字的影片元素 */
.hero-video {
    position: absolute;
    top: 50%; /* 初始垂直居中 */
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* 初始縮放比例為 1 */
    width: 100%; /* 初始填滿 hero-content 寬度 */
    height: 100%; /* 初始填滿 hero-content 高度 */
    object-fit: cover; /* 確保影片覆蓋整個區域，可能裁剪 */
    will-change: transform, top; /* 提示瀏覽器這些屬性會變化 */
    
    /* --- 新增：嘗試使用混合模式讓黑色「透明」 --- */
    mix-blend-mode: screen; /* 讓黑色部分與背景混合，產生類似透明的效果 */
    /* 如果影片內容是淺色，背景是深色，可以嘗試 mix-blend-mode: multiply; */
    /* --- 新增結束 --- */
}

/* 三個水平文字框的容器 */
.text-boxes-container {
    position: absolute;
    bottom: 0; /* 初始在 hero-content 底部 */
    width: 100%;
    display: flex; /* 啟用 Flexbox */
    flex-direction: row; /* 水平排列 */
    justify-content: space-around; /* 均勻分佈，兩端留空 */
    align-items: flex-end; /* 讓文字框底部對齊容器底部 */
    padding: 0 2vw 2vh; /* 左右各2vw，底部2vh的內邊距 */
    box-sizing: border-box;
    opacity: 0; /* 初始隱藏 */
    will-change: opacity, transform;
    transform: translateY(0); /* 初始位置 */
    z-index: 12; /* 確保文字框在影片之上 */
}

.text-box {
    width: 25%; /* 每個文字框佔容器寬度的30% */
    background-color: rgba(0, 0, 0, 0.6);
    padding: 1.5vh 1vw; /* 垂直1.5vh，水平1vw的內邊距 */
    margin: 0; /* 移除預設外邊距，由 justify-content 處理間距 */
    border-radius: 8px;
    text-align: center;
    font-size: 1.2vw; /* 調整字體大小以適應水平佈局 */
    color: #eee;
    opacity: 0; /* 初始隱藏，由 JS 控制 */
    /* 移除 transform: translateY(50px); */
    transform: scaleY(0); /* 初始高度為 0 */
    transform-origin: top; /* 從頂部開始縮放 */
    will-change: opacity, transform;
}

/* 底部進度條 */
.progress-bar-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 100;
    opacity: 0; /* 初始隱藏 */
    transition: opacity 0.3s ease-out; /* 進度條容器的淡入淡出可以有 CSS 過渡 */
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #007bff; /* 藍色進度條 */
    transition: width 0.05s linear; /* 平滑進度條動畫 */
}

.progress-bar.second {
    background-color: #28a745; /* 第二個進度條用綠色 */
}

/* 下方滾動內容 */
.main-scroll-content {
    background: linear-gradient(to right,rgb(0, 0, 0),rgb(2, 0, 129));
    min-height: 200vh; /* 確保有足夠的內容可以滾動 */
    padding: 50px;
    box-sizing: border-box;
    position: relative;
    z-index: 5;
}

.main-scroll-content h2 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #eee;
}

.main-scroll-content p {
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 1em;
    color: #ccc;
}