@charset "UTF-8";

/* =====================================================================
   工研院投資地圖網 — 前台 首頁專屬樣式（index.css）
   僅 index.html 載入；共用 token / 元件請見 style.css。
   ---------------------------------------------------------------------
   目錄
     1. Home Layout（首頁主版面）
     2. Hero（主視覺）
     3. Quick Menu（快速選單雙卡）
     4. RWD（md ≤ 1199 / sm ≤ 767）
   ===================================================================== */


/* =====================================================================
   1. Home Layout
   ===================================================================== */
.home__main { display: flex; flex-direction: column; }
/* 不加水平 padding，讓 .activities 卡片自身的 padding 與上方快速選單切齊 */
.home__activities-wrap { padding-bottom: 5rem; }


/* =====================================================================
   2. Hero
   ===================================================================== */
/* 首頁限定：header 透明、nav 半透明，透出後方 hero
   （index.css 僅首頁載入 → 不影響內頁 header）*/
.site-header { background: transparent; box-shadow: none; }
.site-nav {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
}
/* 淺色文字陰影（白色 halo）：深色 nav 文字疊在 hero 上更清晰 */
.site-nav__item { text-shadow: 0 1px 20px rgba(255, 255, 255, 0.8); }

.hero {
  position: relative;
  height: 460px;
  margin-top: -60px; /* 上移到 nav 後面，讓半透明 nav 透出 hero */
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; /* 超寬時讓 101 主體維持在畫面內 */
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-40) var(--space-56);
}
.svg-filters { position: absolute; width: 0; height: 0; pointer-events: none; }

/* ---------------------------------------------------------------------
   液態玻璃元件（Apple Liquid Glass 技法）— 四層分離，故邊緣不鋸齒：
     .glass__filter   折射層：backdrop-filter + SVG 位移濾鏡，「無背景」只扭曲背後影像
     .glass__overlay  透亮 tint 層：極低不透明度白，不套濾鏡 → 邊緣乾淨
     .glass__specular 鏡面高光邊框（最上、不擋事件）
     .glass__content  內容（最上層）
   --------------------------------------------------------------------- */
.glass {
  position: relative;
  isolation: isolate;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
}
.glass__filter {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  filter: url(#liquid-glass);
  isolation: isolate;
}
.glass__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255, 255, 255, 0.22);
}
.glass__specular {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 0 6px rgba(255, 255, 255, 0.55);
}
.glass__content { position: relative; z-index: 3; }

/* Hero 內容卡（套用 .glass） */
.hero__content { max-width: 640px; width: 100%; }
.hero__content .glass__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32) var(--space-40);
}
/* 透亮玻璃上文字改白色 + 文字陰影壓住背景 */
.hero__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 30, 48, 0.5);
}
.hero__desc {
  font-size: var(--font-size-body-m);
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0, 30, 48, 0.5);
}

/* Hero 漸層主要按鈕 */
.btn--hero {
  position: relative;
  overflow: hidden;
  width: 180px;
  padding: var(--space-8) var(--space-14);
  color: var(--color-text-white);
  background-image: linear-gradient(-77deg, #008187 2%, #1c4aa6 86%);
  border: 0;
  box-shadow: 0 6px 16px rgba(0, 49, 74, 0.38);
  transition: box-shadow var(--transition-fast), filter var(--transition-fast);
}
.btn--hero:hover { filter: brightness(1.08); } /* box-shadow 改由呼吸光暈 animation 控制 */
/* Apollo 風格 hover：透明白塊快速掃過 */
.btn--hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 50%;
  background: rgba(255, 255, 255, 0.38);
  transform: skewX(-20deg) scale(1.5);
  transition: left 0.6s ease;
  pointer-events: none;
}
.btn--hero:hover::before { left: 130%; }


/* =====================================================================
   3. Quick Menu
   ===================================================================== */
/* scroll-margin-top：捲動定位時避開 sticky header（桌機 topbar+nav ≈ 139px） */
.quickmenu { background: var(--color-white); padding: 5rem var(--space-32); scroll-margin-top: 140px; }
.quickmenu__title { margin-bottom: var(--space-18); }
/* 首頁區塊標題：漸層文字（同「開始探索」按鈕配色 -77deg teal→blue） */
.quickmenu__title,
.activities__head .section-title {
  width: fit-content;
  background-image: linear-gradient(-77deg, #008187 2%, #1c4aa6 86%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.quickmenu__grid { display: flex; gap: var(--space-18); }

.quick-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-24) var(--space-32) var(--space-24) var(--space-24);
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.quick-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12); }
.quick-card__icon { flex: 0 0 auto; width: 56px; height: 56px; }
.quick-card__body { flex: 1 1 auto; display: flex; align-items: center; gap: var(--space-16); }
.quick-card__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-8); }
.quick-card__title { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: 1.25; }
.quick-card__desc { font-size: var(--font-size-body-s); color: var(--color-text-dark); }
.quick-card__arrow {
  flex: 0 0 auto;
  width: var(--icon-24); height: var(--icon-24);
  transition: transform var(--transition-fast);
}
.quick-card:hover .quick-card__arrow { transform: translateX(var(--space-8)); } /* 右移 8px */
.quick-card--primary   .quick-card__title { color: var(--color-text-primary); }
.quick-card--secondary .quick-card__title { color: var(--color-secondary-dark); }

/* 大圖標用回 images SVG；箭頭用 Lineicons 字型，依卡片主題著色 */
.quick-card__arrow.lni { width: auto; height: auto; font-size: 1.5rem; line-height: 1; }
.quick-card--primary   .quick-card__arrow.lni { color: var(--color-primary); }
.quick-card--secondary .quick-card__arrow.lni { color: var(--color-secondary); }
/* 查看更多箭頭 */
.link-more .lni { font-size: 1.25rem; vertical-align: middle; }


/* =====================================================================
   4. RWD
   ===================================================================== */
@media (max-width: 1199px) {
  .hero__inner { padding-inline: var(--space-32); }
}

@media (max-width: 767px) {
  /* Hero：玻璃卡改滿版 */
  .hero { height: auto; min-height: 320px; margin-top:0; }
  .hero__inner { padding: var(--space-16); }
  .hero__content { max-width: none; width: 100%; }
  .hero__content .glass__content { padding: var(--space-24); }
  .hero__title { font-size: var(--font-size-h2); }
  .btn--hero { width: 100%; }

  /* Quick menu 改直排（手機 header 僅 topbar ≈ 60px） */
  .quickmenu { padding: var(--space-32) var(--space-16); scroll-margin-top: 68px; }
  .quickmenu__grid { flex-direction: column; }

  /* Activities 外距 */
  .home__activities-wrap { padding: 0 var(--space-16) var(--space-32); }
}


/* =====================================================================
   5. 動畫（Corporate＋Premium：進場 / 互動 / 氛圍三層）
   signature easing: cubic-bezier(0.2,0,0,1)；進場用 emphasized(0.05,0.7,0.1,1)
   ===================================================================== */
/* --- 滾動進場（用 animation 而非 transition，避免與卡片 hover transform 衝突）--- */
.reveal { opacity: 0; }
.reveal.is-visible { opacity: 1; animation: revealUp 0.6s cubic-bezier(0.05, 0.7, 0.1, 1) backwards; }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Hero 內容進場 --- */
.hero__content { animation: heroFadeIn 0.8s cubic-bezier(0.05, 0.7, 0.1, 1) both; }
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Hero 背景視差（scale 預留餘量；transform 由 index.js 更新）--- */
.hero__bg { transform: scale(1.2); will-change: transform; }

/* --- 氛圍層：Hero 背景光點緩升 --- */
.hero__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero__fx span {
  position: absolute; bottom: -12px;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
  animation: fxRise linear infinite;
}
.hero__fx span:nth-child(1) { left: 12%; width: 5px; height: 5px; animation-duration: 11s; animation-delay: 0s; }
.hero__fx span:nth-child(2) { left: 28%; width: 8px; height: 8px; animation-duration: 14s; animation-delay: 2s; }
.hero__fx span:nth-child(3) { left: 45%; width: 4px; height: 4px; animation-duration: 9s;  animation-delay: 1s; }
.hero__fx span:nth-child(4) { left: 63%; width: 7px; height: 7px; animation-duration: 13s; animation-delay: 3.5s; }
.hero__fx span:nth-child(5) { left: 78%; width: 5px; height: 5px; animation-duration: 10s; animation-delay: 1.5s; }
.hero__fx span:nth-child(6) { left: 90%; width: 6px; height: 6px; animation-duration: 12s; animation-delay: 4s; }
@keyframes fxRise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-420px) scale(0.6); opacity: 0; }
}

/* --- 氛圍層：玻璃卡光澤斜向緩掃 --- */
.hero__content .glass::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  animation: glassShine 6.5s ease-in-out 1.2s infinite;
}
@keyframes glassShine {
  0%        { left: -60%; }
  55%, 100% { left: 130%; }
}

/* --- 氛圍層：「開始探索」呼吸光暈（引導點擊）--- */
.btn--hero { animation: heroBtnGlow 2.8s ease-in-out infinite; }
@keyframes heroBtnGlow {
  0%, 100% { box-shadow: 0 6px 16px rgba(0, 49, 74, 0.38); }
  50%      { box-shadow: 0 8px 22px rgba(0, 49, 74, 0.42), 0 0 16px 1px rgba(0, 150, 160, 0.45); }
}

/* --- 互動層：快速選單卡 hover 浮起 --- */
.quick-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 49, 74, 0.16); }

/* 快速選單圖標改回原始 SVG（已移除線條描繪動畫）*/

/* --- 無障礙：減少動態時關閉所有自動 / 氛圍動畫（hover 互動保留）--- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; animation: none !important; }
  .hero__content { animation: none !important; }
  .hero__bg { transform: none !important; will-change: auto; }
  .hero__fx { display: none !important; }
  .hero__content .glass::before { display: none !important; animation: none !important; }
  .btn--hero { animation: none !important; }
}