/**
 * 進階互動
 *
 * 每一項都必須在 prefers-reduced-motion 或 JS 失效時安全降級。
 */

/* ===== 頂端捲動進度條 ===== */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-third), var(--color-primary));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ===== 回到頂端（附進度環）===== */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 900;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 22px rgba(2, 27, 72, 0.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem) scale(0.9);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), visibility 0.35s;
}

.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--color-second); transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.to-top__ring { position: absolute; inset: -4px; transform: rotate(-90deg); pointer-events: none; }
.to-top__ring circle { fill: none; stroke-width: 2; }
.to-top__ring .track { stroke: rgba(255, 255, 255, 0.22); }
.to-top__ring .bar { stroke: var(--color-accent); stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }
.to-top__arrow { font-size: 1.1rem; line-height: 1; }

/*
 * v2 移除卡片 3D 傾斜與游標聚光。
 * 游標追隨的傾斜、滑鼠位置的金色光暈，在展示型網站有趣，
 * 但在企業形象站顯得輕浮，也會讓使用者難以瞄準卡片裡的連結。
 * 專業感靠留白與字級分層，不是靠這些花招。保留的只有下面這一項——
 * 區塊標題的遮罩上移，克制、一次性、不干擾閱讀。
 */

/* ===== 區塊標題的遮罩進場 ===== */
.section-title .mask > span { display: block; }

.js-motion .section-header [data-mask] {
  display: block;
  overflow: hidden;
}

.js-motion .section-header [data-mask] > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-motion .section-header.is-revealed [data-mask] > span { transform: translateY(0); }
.motion-off .section-header [data-mask] > span { transform: none !important; transition: none !important; }

/* ===== 手機選單項目錯開進場 ===== */
@media (max-width: 800px) {
  .header-nav li {
    opacity: 0;
    transform: translateX(-0.8rem);
    transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
  }

  .header-nav.is-open li { opacity: 1; transform: none; }
  .header-nav.is-open li:nth-child(1) { transition-delay: 0.06s; }
  .header-nav.is-open li:nth-child(2) { transition-delay: 0.10s; }
  .header-nav.is-open li:nth-child(3) { transition-delay: 0.14s; }
  .header-nav.is-open li:nth-child(4) { transition-delay: 0.18s; }
  .header-nav.is-open li:nth-child(5) { transition-delay: 0.22s; }
  .header-nav.is-open li:nth-child(6) { transition-delay: 0.26s; }
  .header-nav.is-open li:nth-child(7) { transition-delay: 0.30s; }

  /* 漢堡變 X */
  .header-toggle span { transform-origin: center; }
  .header-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .header-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .header-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* JS 失效時選單一定看得到 */
.motion-off .header-nav li,
html:not(.js-motion) .header-nav li { opacity: 1 !important; transform: none !important; }

/* ===== 圖片模糊浮現 ===== */
.card__media { position: relative; background: var(--color-second-bg); }

.card__media img {
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}

.js-motion .card__media img:not(.is-loaded) { filter: blur(12px); opacity: 0; transform: scale(1.04); }
.card__media img.is-loaded { filter: none; opacity: 1; }
.motion-off .card__media img { filter: none !important; opacity: 1 !important; }

/* ===== 深色 CTA 區塊的底紋 =====
 *
 * 舊版用兩團 radial-gradient（28rem／24rem）＋位移動畫當「動態網格」，
 * 但 CTA 只有約 340px 高，光暈半徑比區塊還大，被 overflow:hidden 一裁
 * 就變成一塊邊緣分明的亮色矩形——看起來像破圖，不像設計。
 *
 * 改用與深藍數據帶同一套的細線技術圖騰：尺寸由 background-size 決定、
 * 不受區塊高度影響，永遠平均分布，也讓兩個深色區塊的語言一致。
 */
.cta { position: relative; overflow: hidden; }

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(115deg, transparent 48%, rgba(255, 255, 255, 0.07) 49%, transparent 50%),
    linear-gradient(65deg, transparent 62%, rgba(255, 255, 255, 0.05) 63%, transparent 64%),
    linear-gradient(150deg, transparent 30%, rgba(255, 255, 255, 0.04) 31%, transparent 32%);
  background-size: 340px 340px, 480px 480px, 260px 260px;
  pointer-events: none;
}

.cta .container { position: relative; z-index: 1; }

/* ===== 條列進場時的細線掃過 ===== */
.rowlist { position: relative; }

/* ===== 焦點可見性（鍵盤操作）===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ===== 減少動態 ===== */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .cta::before { animation: none; }
  .js-motion .section-header [data-mask] > span { transform: none; transition: none; }
  .js-motion .card__media img:not(.is-loaded) { filter: none; opacity: 1; transform: none; }
  .header-nav li { opacity: 1; transform: none; }
}