/* Header 背景與 Hero 同步 */


.header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 3.2rem;
    overflow: hidden;
    color: white;
    z-index: 1;
}

.logo {
    color: #ffffff;
    text-decoration: none;
    padding: 3.2rem 4.8rem;
    font-size: 3.2rem;
}

.main-nav-list {
    list-style: none;
    display: flex;
    padding-right: 3.2rem;
    gap: 4.8rem;
}

.main-nav-list a {
    font-size: 2.4rem;
    color: #e6e8eb;
    text-decoration: none;
    transition: all 0.3s;
}

.main-nav-link:link,
.main-nav-link:visited {
    padding: 0.8rem 2.0rem;
    border-radius: 0.9rem;
    border: 5px solid #394561;
}

.main-nav-link:hover,
.main-nav-link:active {
    background-color: #525c75;
    border: 5px solid #394561;
}

.nav-toggle {
    display: none;
}


/* Header 粒子 */
.header .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: float 20s linear infinite;
    z-index: 0;
}

/* Section Hero */
.section-hero {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* 確保圖片從外面進來時不會有捲軸 */
    color: white;

}

/* 新增 hero-content 容器來管理文字和圖片的 flex 佈局 */
.hero-content {
    display: flex;
    align-items: center;
    /* 垂直居中對齊 */
    justify-content: center;
    /* 初始水平居中，動畫後會改變 */
    width: 100%;
    /* 佔滿 section-hero 寬度 */
    position: relative;
    /* 為了讓圖片定位 */
}


/* 漸層動畫共用 */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 粒子漂浮動畫共用 */
@keyframes float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    50% {
        transform: translateY(-40px) translateX(20px);
        opacity: 1;
    }
}

/* Hero 文字 */
.hero-text-box {
    position: relative;
    /* 為了 z-index 和 transform */
    z-index: 2;
    font-size: 6.4rem;
    font-weight: 700;
    top: -5rem;
    width: 0ch;
    max-width: 15ch;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid transparent;
    /* top: -10rem;  移除這個，讓 flex 佈局控制垂直位置 */
    font-family: "JetBrains Mono", monospace;
    /* text-align: center; 移除這個，因為 flex 佈局會處理 */
    flex-shrink: 0;
    /* 防止文字在寬度不足時縮小 */


    animation:
        typing 1.5s steps(15) forwards,
        move-left 2s 1.5s forwards,
        cursor-blink 1s 3.5s infinite step-end;
}

@keyframes typing {
    from {
        width: 0ch;
        border-color: #eee;
    }

    to {
        width: 15ch;
        border-color: #eee;
    }
}

/* 平滑移動到最左邊 */
@keyframes move-left {
    from {
        transform: translateX(0);
    }

    to {
        /* 將 -20vw 改為更大的負數，例如 -35vw */
        transform: translateX(-27vw);
    }
}

@keyframes cursor-blink {

    0%,
    100% {
        border-color: #eee;
    }

    50% {
        border-color: transparent;
    }
}




/* Hero 圖片容器 */
.hero-img {
    position: absolute;
    right: 15rem;
    top: -50%;
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    z-index: 1;
    width: 50vw;
    border-radius: 1.5rem;
    border: 3px solid transparent;
    /* 初始透明邊框 */
    box-shadow: none;
    /* 初始無光暈 */

    /* 先滑入圖片，延遲0秒，持續2秒 */
    animation:
        image-slide-in 2s 1.5s forwards,
        border-glow 1s 3.5s forwards;
    /* 光暈延遲到滑入完成後 */
}




.hero-img img {
    /* === 修改：讓圖片填滿容器 === */
    width: 100%;
    /* 圖片寬度填滿其父容器 (.hero-img) */
    height: auto;
    display: block;
    border-radius: 1.2rem;
}

/* 新增圖片滑入動畫 */
@keyframes image-slide-in {
    from {
        transform: translateY(-50%) translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

/* 滑入完成後才顯示邊框光暈 */
@keyframes border-glow {
    from {
        border-color: transparent;
        box-shadow: none;
    }

    to {
        border-color: #fff0;
        box-shadow: 0 0 3rem rgba(255, 0, 150, 0.6),
            0 0 6rem rgba(0, 200, 255, 0.4),
            0 0 9rem rgba(255, 255, 0, 0.2);
    }
}

.section-introduction {
    position: relative;
    padding: 5.2rem;
    border-radius: 6rem;
    background-color: transparent;
    /* 內部背景 */
    z-index: 0;
}

.section-introduction::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 6px;
    /* 邊框寬度 */
    border-radius: 6rem;
    background: linear-gradient(135deg, #ff6ec4, #7873f5, #4ade80);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
}


.subheading {
    line-height: 1.5;
    font-size: 3.2rem;
    font-weight: 500;
    color: #b5b9c4;
    text-transform: uppercase;
}

.heading-secondary {
    font-size: 4.0rem;
    font-weight: 600;
    color: #e6e8eb;
}

.introduction-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 6rem 0;

    /* 新增：置中所有項目 */
    justify-items: center;
    align-items: center;
    /* 增加上下內邊距，讓版面更好看 */
}

.grid-item {
    position: relative;
    /* 關鍵：設為子元素的定位基準 */
    width: 100%;
    padding: 6rem 0;
    /* 給定一個固定高度 */
    background-color: #394561;
    /* 設定背景色 */
    border-radius: 1.5rem;
    /* 圓角 */
    display: flex;
    /* 仍然使用 Flex 來置中 */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 滑鼠移上去時顯示為手形 */
    overflow: hidden;
    /* 確保內容不會溢出圓角外 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 為 hover 效果增加過渡動畫 */
    border: 5px solid transparent;


}

/* 2. 當滑鼠停在 Grid Item 上時的視覺效果 (可選，但建議) */
.grid-item:hover:not(.grid-span-2-col) {
    border-color: #e6e8ebb4;
    transform: translateY(-8px);
    /* 向上移動一點 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* 增加陰影 */
}

/* 3. 設定兩個文字 span 的共同樣式 */
.grid-item:not(.grid-span-2-col) .main-text,
.grid-item:not(.grid-span-2-col) .hover-text {
    position: absolute;
    /* 關鍵：讓文字可以重疊 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 精準置中 */
    width: 90%;
    /* 避免文字太長而貼邊 */
    text-align: center;
    transition: opacity 0.25s ease-in-out;
    /* 關鍵：設定透明度變化的動畫 */
}

/* 4. 設定初始狀態：主要文字可見 */
.grid-item:not(.grid-span-2-col) .main-text {
    font-size: 3.2rem;
    font-weight: 600;
    opacity: 1;
    /* 完全可見 */
}

/* 5. 設定初始狀態：Hover 文字隱藏 */
.grid-item:not(.grid-span-2-col) .hover-text {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
    color: #c7d2fe;
    /* 給 hover 文字一個不同的顏色 */
    opacity: 0;
    /* 完全透明 (隱藏) */
}

/* 6. 設定 Hover 觸發後的狀態 */
.grid-item:hover:not(.grid-span-2-col) .main-text {
    opacity: 0;
    /* 主要文字變透明 */
}

.grid-item:hover:not(.grid-span-2-col) .hover-text {
    opacity: 1;
    /* Hover 文字變可見 */
}

.grid-span-2-col {
    border-color: #e6e8ebb4;
}

.grid-span-2-col .hover-text {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.6;
    color: #c7d2fe;
    padding: 1.6rem 3.2rem;

    /* 給 hover 文字一個不同的顏色 */
}