/* === About page agent spacing (global load) === */
/* Primary: if you add .about-agent wrapper, full-width separator appears */
.about-agent{ margin-top:20px; padding-top:14px; border-top:1px dashed #e5e7eb; }
.about-agent img{ height:28px; width:auto; vertical-align:middle; margin-right:12px; }
/* Fallback: if no wrapper exists, at least push the Solteam line down a bit */
img[alt*="solteam" i], img[src*="solteam" i]{
  height:28px; width:auto; vertical-align:middle; margin-right:12px;
  margin-top:16px; /* create breathing room even without wrapper */
}
/* If the agent line is the last block inside the card, add top border visually */
img[alt*="solteam" i], img[src*="solteam" i]{
  outline:1px dashed transparent; /* keep layout stable */
}



/* 預設狀態：紅色底線隱藏 */
nav.header-nav a {
  position: relative;
  text-decoration: none; /* 移除預設底線 */
}

nav.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* 底線位置 */
  width: 0;
  height: 2px;
  background-color: #e11d48; /* 底線顏色：紅色 */
  transition: width 0.3s ease-in-out; /* 動畫效果 */
}

/* 滑鼠移上去或 active 狀態：底線展開 */
nav.header-nav a:hover::after,
nav.header-nav a:focus-visible::after,
nav.header-nav a.active::after {
  width: 100%;
}

/* 清掉預設底線樣式 */
nav.header-nav a {
  position: relative;
  text-decoration: none !important;
  color: inherit; /* 保持原本文字顏色 */
}

/* 用 ::after 畫紅色底線，預設隱藏 */
nav.header-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px; /* 距離文字下方 */
  width: 0;
  height: 2px;
  background-color: #e11d48; /* 紅色底線 */
  transition: width 0.3s ease-in-out;
}

/* hover / active 時展開 */
nav.header-nav a:hover::after,
nav.header-nav a:focus-visible::after,
nav.header-nav a.active::after {
  width: 100%;
}

/* 讓容器提供 3D 透視，旋轉更明顯 */
.header-left { perspective: 800px; }

/* Logo 左右搖擺（慢速版） */
img.site-logo {
  display: inline-block;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
  animation: tilt-rotate 8s ease-in-out infinite; /* 原本 4s 改成 8s */
}

@keyframes tilt-rotate {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(90deg); }   /* 向右 90° */
  50%  { transform: rotateY(0deg); }    /* 回中 */
  75%  { transform: rotateY(-80deg); }  /* 向左 80° */
  100% { transform: rotateY(0deg); }    /* 回中 */
}