/* =========================================================
   index.html 首頁專用樣式
   目的：把首頁（Hero／課程規劃／作業專區）跟各關卡頁（ui04、ui06...）
   統一成同一套視覺語言 —— Tiffany Blue 主色、玻璃質感卡片、微漸層、
   微動態，取代原本模板預設的藍色（#0490BD）與純平面卡片。
   只在 body.index-page 之下生效，不影響其他頁面。
   ========================================================= */

body.index-page {
	--accent-color: #0ABAB5 !important;      /* 覆蓋模板預設藍，改用跟關卡頁一致的 Tiffany Blue */
	--nav-hover-color: #0ABAB5 !important;
	--nav-dropdown-hover-color: #0ABAB5 !important;
	--u-agent: #6350C4;   /* Figma Agent 識別紫，用來區分 Intermediate 關卡 */
	--u-figjam: #EE4A85;  /* FigJam 桃紅，用來區分 Advanced 關卡 */
	--u-brand-strong: #067A76;
	--u-agent-strong: #4C3D9E;
	--u-figjam-strong: #C93A6C;
	--u-line: #D8EEEC;
	--u-dot: #D3EFEC;
	--u-glass-blur: blur(16px) saturate(160%);
	--ui-ease: cubic-bezier(.16,.84,.44,1);
	font-family: "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}

body.index-page h1, body.index-page h2, body.index-page h3 {
	font-family: "Chiron GoRound TC","Noto Sans TC","PingFang TC",sans-serif;
}

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

/* ---------- 修正模板寫死的藍色（main.css 裡有 4 處固定寫 #0490BD，變數蓋不到） ---------- */
body.index-page .events .event-card .event-tag.academic {
	background-color: rgba(10,186,181,.14);
	color: #067A76;
}

/* =========================================================
   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:#0ABAB5; opacity:.22; }
body.index-page .about::after { width:280px; height:280px; bottom:-40px; left:-40px; background:#6350C4; 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 .display-6 span {
	background: linear-gradient(120deg, #0ABAB5 0%, #067A76 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
body.index-page .about .display-6 span:after { display:none; } /* 移除模板原本的底線裝飾，改用漸層字色 */

body.index-page .about .stat-box {
	background: linear-gradient(165deg, rgba(255,255,255,.75) 0%, rgba(223,246,244,.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 #0ABAB5;
	box-shadow: 0 14px 28px -20px rgba(10,186,181,.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(10,186,181,.5);
}
body.index-page .about .stat-box .stat-number { color:#067A76; }

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

body.index-page .about .mission-vision-row .value-card {
	background: linear-gradient(165deg, rgba(255,255,255,.7) 0%, rgba(223,246,244,.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(10,20,20,.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(10,20,20,.38);
}
body.index-page .about .mission-vision-row .value-card .card-icon {
	background: linear-gradient(135deg, #0ABAB5 0%, #067A76 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 { position:relative; }
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, #0ABAB5, #6350C4);
}

body.index-page .featured-programs .isotope-filters li {
	transition: transform .2s var(--ui-ease), background .2s, color .2s;
}
body.index-page .featured-programs .isotope-filters li:hover {
	transform: translateY(-2px);
}
body.index-page .featured-programs .isotope-filters li:hover,
body.index-page .featured-programs .isotope-filters li.filter-active {
	background: linear-gradient(120deg, #0ABAB5 0%, #067A76 100%);
}

body.index-page .featured-programs .program-item {
	background: linear-gradient(165deg, rgba(255,255,255,.72) 0%, rgba(223,246,244,.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(10,20,20,.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(10,20,20,.4);
}

/* 徽章依難度分色：Beginner=teal／Intermediate=purple／Advanced=pink，呼應關卡頁三色識別 */
body.index-page .featured-programs .program-badge {
	background: linear-gradient(120deg, #0ABAB5 0%, #067A76 100%);
	box-shadow: 0 4px 12px -4px rgba(10,186,181,.5);
}
body.index-page .featured-programs .program-badge.lvl-intermediate {
	background: linear-gradient(120deg, #6350C4 0%, #4C3D9E 100%);
	box-shadow: 0 4px 12px -4px rgba(99,80,196,.5);
}
body.index-page .featured-programs .program-badge.lvl-advanced {
	background: linear-gradient(120deg, #EE4A85 0%, #C93A6C 100%);
	box-shadow: 0 4px 12px -4px rgba(238,74,133,.5);
}

body.index-page .featured-programs .program-content h3 a { color:#1B1F22; transition:color .2s; }
body.index-page .featured-programs .program-item:hover .program-content h3 a { color:#067A76; }

/* 修正模板既有排版問題：.program-badge 是絕對定位在整張卡片右上角，
   當標題較長時文字會被難度徽章蓋住（例如「7.設計系統＋變數 Design System」）。
   在有圖／文左右並排的寬螢幕版型下，幫標題保留徽章的空間。 */
@media (min-width: 768px) {
	body.index-page .featured-programs .program-content h3 { padding-right: 108px; }
}
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; }

/* =========================================================
   Events（作業專區）
   ========================================================= */
body.index-page .events .event-card {
	background: linear-gradient(165deg, rgba(255,255,255,.75) 0%, rgba(223,246,244,.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(10,20,20,.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(10,20,20,.36);
}
body.index-page .events .event-card .event-date {
	background: linear-gradient(160deg, #0ABAB5 0%, #067A76 100%);
}
body.index-page .events .event-card .event-actions .btn-learn-more {
	background: linear-gradient(120deg, #0ABAB5 0%, #067A76 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(10,186,181,.6);
}
body.index-page .events .btn-view-all {
	background: linear-gradient(120deg, #0ABAB5 0%, #067A76 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(10,186,181,.6);
}

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

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

@media (prefers-reduced-motion: reduce) {
	body.index-page .about::before, body.index-page .about::after { animation:none; }
}