/*
 * 這是你的主要背景容器。
 * 它會預設載入 'bg.jpg' 作為背景圖片。
 * 這樣做的好處是，如果影片無法播放，或者在特定條件下（例如手機直式），
 * 'bg.jpg' 會自動成為可見的背景。
 */
.videobg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: url(bg.jpg) no-repeat center center; /* 預設圖片作為影片不顯示時的備用 */
    background-size: cover; /* 確保背景圖片覆蓋整個螢幕 */
    z-index: -2; /* 確保背景在最底層 */
}

/*
 * 這是背景上的遮罩層，用於增強內容的可讀性。
 * 它比背景圖片/影片高一層，但仍低於主要內容。
 */
.videobg:after {
    content: "";
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, .35); /* 半透明黑色遮罩 (預設) */
    z-index: -1; /* 遮罩層在影片上方，內容下方 */
}

/*
 * 這是影片背景的樣式。
 * 預設情況下，影片是顯示的。
 */
.videobg video {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; /* 確保影片寬度為 100% */
    height: 100%; /* 確保影片高度為 100% */
    object-fit: cover; /* 確保影片適應容器，可能會裁剪部分內容 */
    display: block; /* 預設顯示影片 */
}

/*
 * 針對手機直式瀏覽的媒體查詢。
 *
 * (max-width: 844px): 捕捉 CSS 邏輯寬度小於或等於 844px 的螢幕。
 * iPhone 14 在直式時的邏輯高度是 844px，這涵蓋了它及其他常見手機寬度。
 * (orientation: portrait): 明確指出只有在裝置處於直式方向時才應用這些樣式。
 *
 * 在此條件下，影片將被隱藏，而 .videobg 容器中預設設定的 'bg.jpg' 將會顯示。
 */
@media only screen and (max-width: 844px) and (orientation: portrait) {
    .videobg video {
        display: none; /* 在手機直式時隱藏影片 */
    }
    .videobg {
        background-image: url('bg.jpg'); /* 再次明確設定 bg.jpg 以防其他規則覆蓋 */
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
    /*
     * 降低手機直式時遮罩的透明度，讓背景圖片更清晰可見。
     * 請調整這裡的 `.50` 數值：
     * - 數值越小 (例如 .30, .20)，遮罩越透明，背景圖片會越亮。
     * - 數值越大 (例如 .60, .70)，遮罩越不透明，背景圖片會越暗。
     */
    .videobg:after {
        background: rgba(0, 0, 0, .30); /* 降低遮罩透明度 */
    }
}

/*
 * 包裹內容的容器樣式。
 * 調整為使用 Flexbox 進行水平垂直置中，並保持左右 15px 的間距。
 */
.wrap {
    position: absolute;
    top: 50%;
    left: 50%; /* 從左邊界移動 50% */
    width: calc(100% - 30px); /* 計算實際寬度，扣除左右各 15px 間距 */
    transform: translate(-50%, -50%); /* 水平及垂直居中 */

    /* Flexbox 佈局用於其子元素的水平置中 */
    display: flex;
    flex-direction: column; /* 將子元素垂直堆疊 */
    align-items: center; /* 在交叉軸 (水平方向) 上置中子元素 */
    /* text-align: center; /* 這裡的 text-align 可以被 flexbox 的 align-items 覆蓋，但為了兼容性可以保留 */

    color: #fff;
    transition: all .25s;
}

/* 段落文字樣式 */
p {
    font-size: 1.25em;
    text-align: left;
    align-self: flex-start; /* 確保 p 元素在 Flexbox 佈局中靠左對齊 */
}

/* Logo 區域樣式 */
.logo {
    border-radius: 6px;
    overflow: hidden;
    /* 由於 .wrap 現在是 flex 容器並設定了 align-items: center，
     * logo 作為直接子元素會自動水平置中。 */
}

/*
 * 針對 div.nav-button 區塊的樣式。
 * 這個樣式會確保其內部的 inline-block 元素 (例如你的 .button) 能夠水平置中。
 * 並且讓這個區塊本身在 .wrap 內部水平置中 (因為 .wrap 是 flex 容器)。
 */
.nav-button {
    width: 100%; /* 確保它佔滿 .wrap 的寬度 */
    text-align: center; /* 水平置中其內部的行內元素 */
    margin-top: 1em; /* 如果需要，可以添加一些上邊距 */
}

/* 按鈕樣式 */
.button {
    display: inline-block; /* 保持為 inline-block，現在其父容器 .nav-button 會處理其水平置中 */
    padding: 4px 8px;
    border: 1px solid #fff; /*白邊框 */
    border-radius: 6px;
    color: #fff;
    background: rgba(255, 255, 255, 0.20); /* 半透明白色背景 */
    min-width: 120px;
    margin: 0.5em; /* 調整按鈕之間的間距，讓它們不會黏在一起 */
    text-decoration: none;
    position: relative;
    transition: all .25s;
    font-size: 1.25em;
}

/* 按鈕懸停效果 (before 偽元素) */
.button:before {
    content: "";
    display: block;
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 0; /* 預設寬度為 0 */
    background: #28CCF8; /* 藍色背景 */
    border-radius: 4px;
    overflow: hidden;
    opacity: 0; /* 預設隱藏 */
    transition: all .25s;
    z-index: -1;
}

/* 按鈕懸停時邊框顏色變化 */
.button:hover {
    border-color: #28CCF8;
}

/* 按鈕懸停時 before 偽元素擴展並顯示 */
.button:hover:before {
    width: 100%;
    right: 0;
    opacity: 1;
}

/*
 * 桌面螢幕的媒體查詢。
 * 當螢幕寬度大於或等於 750px 時，.wrap 已經被通用 Flexbox 規則水平置中，
 * 這裡的規則將確保其行為一致。
 */
@media (min-width: 750px) {
    .wrap {
        left: 50%; right: auto;
        transform: translate(-50%, -50%);
        /* 無需再次設置 display/flex-direction/align-items，因為它已在通用 .wrap 規則中。 */
    }
}