/* =====================================================
   SVG ICON SYSTEM
   用途：取代 emoji，統一金色霓虹 + 動畫風格
   ===================================================== */

/* 設定 SVG 圖標的基本大小與位置 */
/* stocks.html 的 <style> 區塊內新增 */

/* 設定 SVG 圖標的基本大小與位置 */
.icon-title {
  width: 24px;
  height: 24px;
  vertical-align: text-bottom;
  margin-right: 6px; 
}

/* ★ 金色霓虹特效 (Cyberpunk Gold) */
.icon-neon-gold {
  color: #facc15; /* 本體顏色 */
  /* 強烈的發光陰影：第一層是光暈，第二層是擴散光 */
  filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.9)) 
          drop-shadow(0 0 8px rgba(250, 204, 21, 0.6));
  
  /* 呼吸動畫：讓閃電忽明忽暗 */
  animation: neon-pulse 3s infinite alternate;
}

/* 呼吸動畫定義 */
@keyframes neon-pulse {
  from {
    filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.6));
    opacity: 0.85;
  }
  to {
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, 1));
    opacity: 1;
  }
}
/* 設定 Pro 按鈕裡的皇冠圖示 */
.icon-pro-crown {
  width: 20px;        /* 大小適中 */
  height: 20px;
  color: #facc15;     /* 亮金色 */
  margin-right: 6px;  /* 跟文字拉開一點距離 */
  
  /* 讓皇冠自帶發光光暈，質感升級 */
  filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.8));
}
/* AI 星芒圖示設定 */
.icon-ai-sparkles {
  width: 16px;        /* 大小跟文字搭配 */
  height: 16px;
  margin-right: 6px;  /* 跟文字拉開距離 */
  color: #facc15;     /* 亮金色 */
  
  /* 讓它自帶光暈 */
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.6));
  
  /* 呼吸動畫：忽大忽小 + 忽明忽暗 */
  animation: ai-breathe 2s infinite ease-in-out alternate;
}

@keyframes ai-breathe {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
    filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9));
  }
}
.icon-lab-flask {
  width: 22px;        /* 比文字稍大，顯得有份量 */
  height: 22px;
  margin-right: 8px;
  color: #facc15;     /* 統一用你的品牌金 */
  
  /* 科技光暈 */
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.6));
  
  /* 微微傾斜，看起來像正在進行實驗 */
  transform: rotate(-10deg);
  transition: transform 0.3s ease;
}

/* 滑鼠移過去時，燒杯回正，像是「實驗完成」 */
#sec-bt:hover .icon-lab-flask {
  transform: rotate(0deg) scale(1.1);
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.9));
}
.icon-lab-flask {
  width: 24px;        /* 大小適中 */
  height: 24px;
  margin-right: 8px;  /* 跟文字拉開距離 */
  color: #facc15;     /* 品牌金 */
  vertical-align: text-bottom; /* 對齊文字底部 */
  
  /* 科技光暈 */
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.6));
  
  /* 預設微微傾斜，像是在做實驗 */
  transform: rotate(-10deg);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* 滑鼠移到整個區塊時，燒杯回正並變亮 */
#sec-bt:hover .icon-lab-flask {
  transform: rotate(0deg) scale(1.1);
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.9));
}
/* 雷達圖示本體 */
.icon-ai-radar {
  width: 24px;        /* 大小適中 */
  height: 24px;
  margin-right: 8px;
  color: #facc15;     /* 品牌金 */
  vertical-align: text-bottom;
  /* 基礎科技光暈 */
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.6));
}

/* 1. 掃描線的旋轉動畫 */
.radar-sweep {
  transform-origin: 12px 12px; /* 以中心點為軸旋轉 */
  animation: radar-spin 3s linear infinite; /* 3秒轉一圈，無限循環 */
}
@keyframes radar-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 2. 風險紅點的閃爍動畫 */
.radar-blip {
  /* 讓紅點自帶紅色光暈 */
  filter: drop-shadow(0 0 2px #f43f5e);
  animation: blip-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes blip-pulse {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.3); }
}

/* 滑鼠移到整個區塊時，雷達光暈增強 */
#sec-ai-risk:hover .icon-ai-radar {
  filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.9));
}
.icon-trend-chart {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: #facc15;     /* 品牌金 */
  vertical-align: text-bottom;
  
  /* 基礎光暈 */
  filter: drop-shadow(0 0 4px rgba(250, 204, 21, 0.5));
  transition: transform 0.3s ease;
}

/* 讓趨勢線末端的圓點「呼吸閃爍」 */
.trend-pulse {
  transform-origin: 19px 5px; /* 設定圓點圓心為旋轉/縮放軸心 */
  animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; r: 2; fill: #facc15; }
  50% { opacity: 0.6; r: 3; fill: #fff; } /* 變大並變亮白 */
}

/* 滑鼠移到區塊時，整張圖表微微放大 */
#sec-trend:hover .icon-trend-chart {
  transform: scale(1.1) translateX(2px);
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.8));
}