/* ============================================================
   NOVASCAN 首頁專屬樣式
   定位：Professional Financial Terminal × AI Market Intelligence ×
   Premium Futuristic Interface —— 不是 Cyberpunk 遊戲介面。動畫全部偏慢、
   偏安靜，卡片微互動預設幾乎看不見、只在 hover 時才稍微浮現，不會干擾閱讀。
   只有這個頁面用這份 CSS，不影響其他 8 個工作頁面（那些頁面共用 style.css
   裡完全靜態的 .ai-bg）。
   ============================================================ */

body.home-body { min-height: 100vh; }

/* ------------------------------------------------------------
   背景：改用一張現成的合成背景圖（globe / data wave / 星空 / grid /
   data bars 全部已經畫在圖裡了），CSS 只負責鋪圖 + 上一層很淡的深色
   overlay 幫助可讀性。不再另外用 CSS 畫 globe/grid/星點，避免跟圖重複。
   全部 pointer-events:none，不擋任何操作，完全靜態（沒有 animation）。
   圖檔位置：/images/novascan-home-bg.webp
   ------------------------------------------------------------ */
.home-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #040914;
}
.home-fx-bg-image {
  position: absolute;
  inset: 0;
  background-image: url("/images/novascan-home-bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
@media (max-width: 1080px) {
  .home-fx-bg-image { background-position: 55% top; }
}
@media (max-width: 640px) {
  .home-fx-bg-image { background-position: 60% top; opacity: 0.82; }
}

/* 很淡的深色 overlay：由上到下漸深，確保卡片區文字對比足夠，
   但頂部（背景圖最精彩的 globe/星空區）幾乎不遮。 */
.home-fx-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(2, 8, 20, 0.05),
    rgba(2, 8, 20, 0.18) 55%,
    rgba(2, 8, 20, 0.32)
  );
}

/* ------------------------------------------------------------
   Hero：中間主要內容 + 左右兩側裝飾欄（引言/關鍵字、地球儀/標語）。
   兩側欄純裝飾（aria-hidden），螢幕不夠寬時直接藏起來，不擠壓中間內容、
   也不會在小螢幕上造成擁擠或橫向捲動。
   ------------------------------------------------------------ */
.home-hero-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  max-width: 1400px;
  margin: 0 auto;
  padding-top: 20px;
}
.home-hero-side {
  flex: 0 0 220px;
  padding-top: 40px;
}
.home-hero-side-right { text-align: right; }
@media (max-width: 1180px) {
  .home-hero-side { display: none; }
}

.home-hero-quote {
  font-style: italic;
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-dim);
  margin: 0 0 14px;
}
.home-hero-rule { width: 28px; height: 1px; background: var(--border); margin-bottom: 14px; }
.home-hero-keywords {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  opacity: 0.75;
}

.home-hero {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 8px;
  text-align: center;
}
/* 背景圖如果在 hero 這一段比較亮，就用一團很淡的 radial 深色暈染幫助可讀性，
   不是實體黑框，只在文字後方輕輕壓暗。 */
.home-hero::before {
  content: "";
  position: absolute;
  inset: -80px -180px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(3, 10, 25, 0.35) 0%,
    rgba(3, 10, 25, 0.15) 45%,
    transparent 75%
  );
}
/* 極小的狀態 pill，取代之前拿掉的那個大版本——這次只當作 hero 最上方一個
   低調的系統狀態提示，不是主要視覺重點。 */
.home-status-pill-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  background: rgba(62,207,142,0.08);
  border: 1px solid rgba(62,207,142,0.25);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 20px;
}
.home-status-dot-mini {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.home-hero-caption {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  opacity: 0.6;
  margin: 0;
}

.home-brand {
  /* 68px 是設計稿的桌機尺寸，但這是英文品牌名稱（不像中文可以逐字換行），
     螢幕窄的時候必須跟著縮小，不然會硬被瀏覽器截斷/擠壓換行。用 clamp()
     讓它隨視窗寬度平滑縮放，同時夾在 56~72px 的設計範圍內。 */
  font-size: clamp(32px, 11vw, 68px);
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  line-height: 1.1;
}
/* 兩色拆開："NOVA" 用素白、"SCAN" 用青色發光——比之前那種漸層掃過去更乾淨，
   比較像「終端機品牌字」而不是特效字。青色的部分加一個非常慢的發光呼吸。 */
.home-brand-nova { color: var(--text); }
.home-brand-scan {
  color: var(--ai-cyan);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ai-cyan) 45%, transparent));
  animation: home-brand-glow 6s ease-in-out infinite;
}
@keyframes home-brand-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.88; }
}
.home-tagline {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.6;
}
.home-subtagline {
  font-size: 15px;
  color: var(--text-dim);
  margin: 0 0 14px;
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  .home-brand-scan { animation: none; }
}

/* ------------------------------------------------------------
   分頁 Module Cards
   ------------------------------------------------------------ */
.home-portal-grid {
  max-width: 1200px;
  margin: 44px auto 0;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1080px) { .home-portal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .home-portal-grid { grid-template-columns: 1fr; } }

.home-portal {
  /* 每張卡片自己的識別色，inline style 設在各張卡片的 <a> 上（見 index.html），
     這裡沒設到的話就退回品牌青色，不會壞掉。 */
  --card-accent: var(--ai-cyan);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 22px 18px;
  border-radius: var(--radius);
  /* 光暈重寫：邊框收斂成很淡的一層（幾乎只是輪廓），真正的「彩色光」改成
     由卡片內部左上角一團柔焦色塊（見 ::before）負責——比照參考圖那種
     「光從 icon 後方暈開，滲進卡片本身」的效果，而不是單純外框發光。 */
  /* 背景改成合成照片後底色比較花，卡片邊框/底色都調得更中性、更不透明一點，
     避免背景圖透出來干擾文字；彩色 identity 交給 hover 時的 accent glow。 */
  border: 1px solid rgba(100, 180, 255, 0.14);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--card-accent) 8%, transparent) inset,
    0 14px 34px rgba(0,0,0,0.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 40%),
    rgba(9, 18, 38, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: transform 300ms ease-out, border-color 300ms ease-out, box-shadow 300ms ease-out;
}
.home-portal.is-visible {
  animation: home-portal-in 0.5s ease-out forwards;
}
@keyframes home-portal-in {
  to { opacity: 1; transform: translateY(0); }
}
/* 柔焦色塊：貼在卡片左上角，平常幾乎看不見（Idle = quiet），
   只有 hover 時才輕輕浮現一點 accent 色——顏色識別交給 hover，
   不是 8 張卡片平常就各自亮著不同顏色。 */
.home-portal::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30%;
  left: -20%;
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-accent) 55%, transparent), transparent 72%);
  filter: blur(28px);
  opacity: 0.08;
  transition: opacity 300ms ease-out, transform 300ms ease-out;
  pointer-events: none;
}
.home-portal:hover::before {
  opacity: 0.3;
  transform: scale(1.12);
}
.home-portal:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--card-accent) 20%, transparent) inset,
    0 18px 40px rgba(0,0,0,0.34);
}
.home-portal:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 2px;
}

/* 標題＋圓形箭頭同一列（比照參考圖：箭頭跟在標題右邊，不是放在卡片最下面） */
.home-portal-header-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.home-portal-title {
  font-size: 19px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.home-portal-desc {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-portal-footer {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-portal-num {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--card-accent) 88%, white 12%);
  background: color-mix(in srgb, var(--card-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 35%, transparent);
  border-radius: 999px;
  padding: 2px 8px;
}
.home-portal-label {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--card-accent) 75%, var(--text-dim) 25%);
}
.home-portal-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 14px;
  flex-shrink: 0;
  transition: transform 300ms ease-out, border-color 300ms ease-out, color 300ms ease-out;
}
.home-portal:hover .home-portal-arrow {
  transform: translateX(3px);
  border-color: var(--card-accent);
  color: var(--card-accent);
}

/* --- Micro Data Visualization：每個模組專屬的抽象小圖形（不是真實數字，
   只是模組識別的視覺符號）。固定貼在卡片右下角、絕對定位，不影響版面／
   不會讓卡片高度不一致。平常非常淡（Idle = quiet），hover 才提升到看得見
   的程度，並讓該模組的圖形播放一次 400~700ms 的微動畫（不是無限循環）。 --- */
.home-portal-pattern {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 110px;
  height: 68px;
  z-index: 0;
  opacity: 0.12;
  color: var(--card-accent);
  pointer-events: none;
  transition: opacity 300ms ease-out;
}
.home-portal:hover .home-portal-pattern { opacity: 0.4; }
.home-portal-pattern svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 全部採同一個原則：平常就是完整、靜止的圖形（跟著父層 0.12 透明度一起很淡），
   hover 時播放一次「重新畫一次／長出來一次」的動畫，動畫播完就自然回到原本
   靜止的樣子——不是「平常藏起來、hover 才出現」，兩者視覺上不一樣：前者才
   符合「Idle 平靜、Hover 才有一次性回饋」的原則，後者等於平常不存在。 */

/* 01 Portfolio：三層 segmented ring，hover 時像重新「填色」一次 */
.home-portal:hover .home-portal-pattern-portfolio .viz-ring { animation: home-viz-ring-draw 600ms ease-out; }
@keyframes home-viz-ring-draw {
  from { stroke-dashoffset: 168; }
}

/* 02 Stock Scan：訊號長條 + 掃描線，hover 時掃過一次 */
.home-portal-pattern-scan .scan-line { transform: translateX(-20%); }
.home-portal:hover .home-portal-pattern-scan .scan-line { animation: home-scan-sweep 600ms ease-in-out; }
@keyframes home-scan-sweep {
  from { transform: translateX(-20%); }
  to   { transform: translateX(120%); }
}

/* 03 Capital Plan：資金流向線 + 節點，hover 時像重新畫一次、節點依序彈出 */
.home-portal-pattern-capital .viz-node { transform-box: fill-box; transform-origin: center; }
.home-portal:hover .home-portal-pattern-capital .viz-flow-line { animation: home-viz-draw-100 500ms ease-out; }
.home-portal:hover .home-portal-pattern-capital .viz-node { animation: home-viz-pop 300ms ease-out backwards; }
.home-portal-pattern-capital .viz-node:nth-of-type(2) { animation-delay: 80ms !important; }
.home-portal-pattern-capital .viz-node:nth-of-type(3) { animation-delay: 160ms !important; }
.home-portal-pattern-capital .viz-node:nth-of-type(4) { animation-delay: 240ms !important; }
@keyframes home-viz-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* 04 Performance：P/L sparkline，hover 時像重新描一次線 */
.home-portal:hover .home-portal-pattern-performance .viz-spark { animation: home-viz-draw-100 550ms ease-out; }

/* 共用的「重新描線」動畫：pathLength=100 的線都能共用 */
@keyframes home-viz-draw-100 {
  from { stroke-dasharray: 100; stroke-dashoffset: 100; }
  to   { stroke-dasharray: 100; stroke-dashoffset: 0; }
}

/* 05 Congress：交易活動長條，hover 時由下往上依序長出一次 */
.home-portal-pattern-congress .viz-bar { transform-box: fill-box; transform-origin: bottom; }
.home-portal:hover .home-portal-pattern-congress .viz-bar { animation: home-viz-grow-y 320ms ease-out backwards; }
.home-portal-pattern-congress .viz-bar:nth-of-type(2) { animation-delay: 60ms !important; }
.home-portal-pattern-congress .viz-bar:nth-of-type(3) { animation-delay: 120ms !important; }
.home-portal-pattern-congress .viz-bar:nth-of-type(4) { animation-delay: 180ms !important; }
@keyframes home-viz-grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* 06 Smart Money：雷達 ping，hover 時像掃描點往外擴散一次 */
.home-portal-pattern-radar .radar-ping { transform-origin: center; transform: scale(0.85); opacity: 0.6; }
.home-portal:hover .home-portal-pattern-radar .radar-ping { animation: home-radar-ping 650ms ease-out; }
@keyframes home-radar-ping {
  0%   { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* 07 Market Radar：市場脈動波形，hover 時描一次線（地球圖形已經在背景圖裡了，
   這裡不重複畫 globe） */
.home-portal:hover .home-portal-pattern-globe .viz-pulse { animation: home-viz-draw-100 550ms ease-out; }

/* 08 Tools：3x3 計算網格，hover 時依序淡入一次 */
.home-portal-pattern-tools .viz-cell { transform-box: fill-box; transform-origin: center; }
.home-portal:hover .home-portal-pattern-tools .viz-cell { animation: home-viz-cell-in 260ms ease-out backwards; }
.home-portal-pattern-tools .viz-cell:nth-of-type(2) { animation-delay: 30ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(3) { animation-delay: 60ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(4) { animation-delay: 30ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(5) { animation-delay: 60ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(6) { animation-delay: 90ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(7) { animation-delay: 60ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(8) { animation-delay: 90ms !important; }
.home-portal-pattern-tools .viz-cell:nth-of-type(9) { animation-delay: 120ms !important; }
@keyframes home-viz-cell-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

@media (max-width: 560px) {
  .home-portal-pattern { width: 84px; height: 52px; right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-portal { opacity: 1; transform: none; animation: none !important; }
  .home-portal:hover { transform: none; }
  .home-portal-pattern * { animation: none !important; }
}

.home-footnote {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.6;
  padding-bottom: 40px;
}

.home-footnote a {
  color: inherit;
  text-decoration: underline;
}