/* =========================================================
   index.html 首頁專用樣式
   目的：把首頁（Hero／課程規劃／作業專區）跟 web16.html（從架構圖到精稿）
   統一成同一套視覺語言——鮮明海洋藍綠＋日落橘、玻璃質感卡片、微漸層、
   微動態，取代模板預設的純平面卡片與單一藍色。
   只在 body.index-page 之下生效，不影響其他頁面。
   ========================================================= */

body.index-page {
	--accent-color: #E8622A !important;      /* 覆蓋模板預設藍，改用跟 web16 一致的日落橘 */
	--nav-hover-color: #B84418 !important;
	--nav-dropdown-hover-color: #E8622A !important;
	--u-teal: #0EA5B8;
	--u-teal-strong: #066B7A;
	--u-amber: #D89A2E;
	--u-amber-strong: #9C6B14;
	--u-line: #D8EFF2;
	--u-dot: #E4F7F9;
	--u-glass-blur: blur(16px) saturate(160%);
	--ui-ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- 全站網點背景：呼應 web16 頁面的淺色底，取代原本的純色背景 ---------- */
body.index-page {
	background-color: #FAFDFE;
	background-image: radial-gradient(var(--u-dot) 1px, transparent 1.2px);
	background-size: 22px 22px;
	overflow-x: clip; /* 避免 hero 裝飾光暈（負值定位）撐開水平捲動 */
}

body.index-page .events .event-card .event-tag.academic {
	background-color: rgba(14,165,184,.14);
	color: var(--u-teal-strong);
}
body.index-page .events .event-card .event-tag.sports {
	background-color: rgba(232,98,42,.14);
	color: #B84418;
}

/* =========================================================
   About / Hero 區塊
   ========================================================= */
body.index-page .about { position:relative; overflow:hidden; padding-top:80px; }
body.index-page .about::before,
body.index-page .about::after {
	content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
	filter:blur(80px); animation: idxFloat 18s ease-in-out infinite;
}
body.index-page .about::before { width:360px; height:360px; top:-80px; right:-60px; background:#0EA5B8; opacity:.22; }
body.index-page .about::after { width:280px; height:280px; bottom:-40px; left:-40px; background:#E8622A; opacity:.14; animation-duration:23s; animation-delay:-7s; }
body.index-page .about .container { position:relative; z-index:1; }
@keyframes idxFloat { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-18px,20px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { body.index-page .about::before, body.index-page .about::after { animation:none; } }

body.index-page .about .display-6 {
	font-weight:900;
	letter-spacing:-.01em;
}

body.index-page .about .stat-box {
	background: linear-gradient(165deg, rgba(255,255,255,.75) 0%, rgba(228,247,249,.55) 100%);
	backdrop-filter: var(--u-glass-blur);
	-webkit-backdrop-filter: var(--u-glass-blur);
	border: 1px solid rgba(255,255,255,.7);
	border-bottom: 3px solid #0EA5B8;
	box-shadow: 0 14px 28px -20px rgba(14,165,184,.4);
	transition: transform .3s var(--ui-ease), box-shadow .3s;
}
body.index-page .about .stat-box:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 20px 36px -18px rgba(14,165,184,.5);
}
body.index-page .about .stat-box .stat-number { color: var(--u-teal-strong); }

body.index-page .about .image-stack img {
	border: 3px solid #fff;
	box-shadow: 0 24px 48px -24px rgba(6,20,22,.35);
}

body.index-page .about .mission-vision-row .value-card {
	background: linear-gradient(165deg, rgba(255,255,255,.7) 0%, rgba(228,247,249,.4) 100%);
	backdrop-filter: var(--u-glass-blur);
	-webkit-backdrop-filter: var(--u-glass-blur);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -28px rgba(6,20,22,.3);
	transition: transform .3s var(--ui-ease), box-shadow .3s;
}
body.index-page .about .mission-vision-row .value-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 28px 50px -26px rgba(6,20,22,.38);
}
body.index-page .about .mission-vision-row .value-card .card-icon {
	background: linear-gradient(135deg, #0EA5B8 0%, #E8622A 100%) !important;
}
body.index-page .about .mission-vision-row .value-card .card-icon i { color:#fff !important; }
body.index-page .about .mission-vision-row .value-card:hover .card-icon i { color:#fff !important; }

/* =========================================================
   Featured Programs（課程規劃卡片）
   ========================================================= */
body.index-page .section-title h2 { font-weight:900; }
body.index-page .section-title h2:before,
body.index-page .section-title h2:after {
	background: linear-gradient(90deg, #0EA5B8, #E8622A);
}

body.index-page .featured-programs .program-item {
	background: linear-gradient(165deg, rgba(255,255,255,.72) 0%, rgba(228,247,249,.45) 100%);
	backdrop-filter: var(--u-glass-blur);
	-webkit-backdrop-filter: var(--u-glass-blur);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 44px -30px rgba(6,20,22,.32);
	transition: transform .32s var(--ui-ease), box-shadow .32s;
}
body.index-page .featured-programs .program-item:hover {
	transform: translateY(-7px);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 30px 56px -26px rgba(6,20,22,.4);
}
body.index-page .featured-programs .program-content h3 a { color:#0B2A30; transition:color .2s; }
body.index-page .featured-programs .program-item:hover .program-content h3 a { color: var(--u-teal-strong); }
body.index-page .featured-programs .program-btn { transition: gap .2s var(--ui-ease); }
body.index-page .featured-programs .program-item:hover .program-btn { gap:12px; }

/* 「從架構圖到精稿」卡片：用日落橘標示，跟其他關卡的海洋藍綠做出區隔，呼應 web16 的雙色識別 */
body.index-page .featured-programs .program-item.is-web16 {
	border-bottom: 3px solid #E8622A;
}
body.index-page .featured-programs .program-item.is-web16:hover .program-content h3 a { color:#B84418; }

/* =========================================================
   Events（作業專區）
   ========================================================= */
body.index-page .events .event-card {
	background: linear-gradient(165deg, rgba(255,255,255,.75) 0%, rgba(228,247,249,.4) 100%);
	backdrop-filter: var(--u-glass-blur);
	-webkit-backdrop-filter: var(--u-glass-blur);
	border: 1px solid rgba(255,255,255,.7);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -28px rgba(6,20,22,.3);
	transition: transform .3s var(--ui-ease), box-shadow .3s;
}
body.index-page .events .event-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 26px 48px -24px rgba(6,20,22,.36);
}
body.index-page .events .event-card .event-date {
	background: linear-gradient(160deg, #0EA5B8 0%, #066B7A 100%);
}
body.index-page .events .event-card .event-actions .btn-learn-more {
	background: linear-gradient(120deg, #0EA5B8 0%, #066B7A 100%);
	transition: transform .2s var(--ui-ease), box-shadow .2s;
}
body.index-page .events .event-card .event-actions .btn-learn-more:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -10px rgba(14,165,184,.6);
}
body.index-page .events .btn-view-all {
	background: linear-gradient(120deg, #0EA5B8 0%, #066B7A 100%);
	transition: transform .2s var(--ui-ease), box-shadow .2s;
}
body.index-page .events .btn-view-all:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -14px rgba(14,165,184,.6);
}

/* ---------- 按鈕輕壓回饋 ---------- */
body.index-page a.program-btn:active,
body.index-page .btn-learn-more:active,
body.index-page .btn-view-all:active { transform: scale(.97); }

/* ---------- 捲動進場動畫：拉長時間、換柔和 easing ---------- */
body.index-page [data-aos] { transition-duration: 700ms !important; transition-timing-function: var(--ui-ease) !important; }