/* top-box Section */
/* 主要英雄區塊的基本設定 */
.top-box {
    height: 100vh;                /* 設定高度為視窗高度 */
    position: relative;           /* 設為相對定位，作為子元素定位的參考點 */
    display: flex;                /* 使用 flex 布局 */
    align-items: center;          /* 垂直置中 */
    justify-content: center;      /* 水平置中 */
    text-align: center;          /* 文字置中 */
    color: white;                /* 文字顏色為白色 */
    padding: 1rem;               /* 內距 */
    overflow: hidden;            /* 隱藏溢出內容 */
    /* 背景使用深色漸層，從深藍色到稍亮的藍色 */
    background: linear-gradient(135deg, #1d5ab5 0%, #90b7f2 100%);
}

/* 移動的光暈效果 - 第一層背景 */
.top-box::before {
    content: '';                 /* 偽元素必需的內容屬性 */
    position: absolute;          /* 絕對定位 */
    top: -50%;                  /* 延伸超出容器 */
    left: -50%;
    width: 200%;                /* 寬度為容器的兩倍 */
    height: 200%;               /* 高度為容器的兩倍 */
    /* 創建斜向的漸層光暈 */
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(33, 150, 243, 0.1) 25%,    /* 科技藍色，透明度 0.1 */
        transparent 50%,
        rgba(33, 150, 243, 0.1) 75%,
        transparent 100%
    );
    animation: shine 8s linear infinite;  /* 應用動畫，8秒循環 */
    transform: rotate(30deg);    /* 旋轉 30 度 */
}

/* 靜態光暈效果 - 第二層背景 */
.top-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 多重背景：圓形光暈 + 線性漸層 */
    background: 
        /* 左上角的藍色光暈 */
        radial-gradient(circle at 20% 30%, rgba(33, 150, 243, 0.15) 0%, transparent 50%),
        /* 右下角的青綠色光暈 */
        radial-gradient(circle at 80% 70%, rgba(100, 255, 218, 0.15) 0%, transparent 50%),
        /* 左上到右下的藍色漸層 */
        linear-gradient(60deg, rgba(76, 175, 255, 0.1) 0%, rgba(76, 175, 255, 0) 50%),
        /* 右上到左下的青綠色漸層 */
        linear-gradient(-60deg, rgba(149, 255, 226, 0.1) 0%, rgba(149, 255, 226, 0) 50%);
    z-index: 1;                 /* 設定層級，確保在基礎背景之上 */
}

/* 點狀背景效果 - 最上層裝飾 */
.top-box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* 創建多個小圓點 */
    background: 
        radial-gradient(2px 2px at 40px 60px, #fff 100%, transparent),
        radial-gradient(2px 2px at 20% 20%, #fff 100%, transparent),
        radial-gradient(2px 2px at 30% 70%, #fff 100%, transparent),
        radial-gradient(2px 2px at 70% 80%, #fff 100%, transparent),
        radial-gradient(2px 2px at 90% 10%, #fff 100%, transparent);
    background-repeat: repeat;   /* 背景重複 */
    background-size: 200px 200px;/* 設定背景尺寸 */
    opacity: 0.2;               /* 設定透明度 */
    animation: twinkle 4s ease-in-out infinite;  /* 閃爍動畫 */
    z-index: 2;                 /* 確保在光暈效果之上 */
}

/* 內容容器樣式 */
.top-box-content {
    position: relative;          /* 相對定位 */
    z-index: 3;                 /* 最高層級，確保內容永遠在最上層 */
    max-width: 800px;           /* 限制最大寬度 */
    opacity: 0;                 /* 初始透明 */
    transform: translateY(20px); /* 初始位置略微向下 */
    animation: fadeInUp 1s forwards;  /* 向上淡入動畫 */
}

/* 移動光暈動畫 */
@keyframes shine {
    0% {
        transform: translateX(-50%) translateY(-50%) rotate(30deg);
    }
    100% {
        transform: translateX(50%) translateY(50%) rotate(30deg);
    }
}

/* 點狀背景閃爍動畫 */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;           /* 開始和結束時的透明度 */
    }
    50% {
        opacity: 0.4;           /* 中間點的透明度 */
    }
}

/* 內容區塊淡入動畫 */
@keyframes fadeInUp {
    to {
        opacity: 1;             /* 最終完全不透明 */
        transform: translateY(0);/* 移動到最終位置 */
    }
}

.top-box h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.top-box p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}