/* =============================================================
   HERO A — 有感知的座艙 The Sentient Cabin · 滿版 WebGL 輪播版
   五幕滿版場景 · Three.js 液態衝擊波過渡 · 游標漣漪扭曲
   場景 4（Invisible Engineering）為深色戲劇時刻：燈光暗轉。
   ============================================================= */

:root {
  --a-bg-0: #f2f4f6;
  --a-bg-1: #e4e8ec;
  --a-ink: #10161e;
  --a-ink-dim: rgba(16, 22, 30, .62);
  --a-ink-mute: rgba(16, 22, 30, .42);
}

body.hero-a {
  background: var(--a-bg-0); color: var(--a-ink); overflow-x: clip;
  transition: color .9s ease;
}
body.hero-a.tone-dark {
  --a-ink: #eef3fa;
  --a-ink-dim: rgba(230, 238, 248, .68);
  --a-ink-mute: rgba(210, 222, 238, .45);
}
body.hero-a.tone-dark .hr-top .brand img { filter: brightness(0) invert(1); }

.ha-stage {
  position: relative; height: 100svh; min-height: 660px; overflow: hidden;
  background: var(--a-bg-0);
}

/* ---------- 滿版場景層（fallback 圖 + 節點座標系） ---------- */
.ha-scenes { position: absolute; inset: 0; z-index: 2; }
.ha-scene { position: absolute; inset: 0; margin: 0; visibility: hidden; }  /* margin:0 清除 <figure> 預設邊距,避免 hero 出現白邊(2026-07-24) */
.ha-scene.is-on { visibility: visible; }
.ha-scene img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
/* WebGL 啟用後：DOM 圖僅作節點座標系，本體隱藏 */
html.gl-on .ha-scene img { opacity: 0; }

/* ---------- WebGL 畫布（滿版） ---------- */
.ha-gl { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
html.no-gl .ha-gl { display: none; }

/* ---------- 文字保護漸層（scrim） ---------- */
.ha-scrim { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ha-scrim::before, .ha-scrim::after {
  content: ""; position: absolute; inset: 0;
  transition: opacity 1.1s ease;
}
/* 亮幕：左側白霧 + 底部輕霧 */
.ha-scrim::before {
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(244, 246, 249, .94) 0%, rgba(244, 246, 249, .72) 26%, rgba(244, 246, 249, .28) 48%, transparent 66%),
    linear-gradient(0deg, rgba(244, 246, 249, .55) 0%, transparent 26%);
}
/* 暗幕：左側墨黑 + 全域 vignette */
.ha-scrim::after {
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(5, 9, 15, .88) 0%, rgba(5, 9, 15, .6) 28%, rgba(5, 9, 15, .18) 50%, transparent 68%),
    radial-gradient(120% 90% at 60% 45%, transparent 52%, rgba(4, 8, 13, .55) 100%);
}
body.tone-dark .ha-scrim::before { opacity: 0; }
body.tone-dark .ha-scrim::after { opacity: 1; }

/* ---------- 感知層 canvas（波紋/游標） ---------- */
.ha-sense { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* ---------- 感知節點（JS 依 cover 框重定位） ---------- */
.ha-node {
  position: absolute; z-index: 8;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: rgba(var(--n-rgb, var(--ckpt-rgb)), .9);
  box-shadow: 0 0 0 5px rgba(var(--n-rgb, var(--ckpt-rgb)), .16);
  animation: ha-breathe 3.2s ease-in-out infinite;
}
@keyframes ha-breathe {
  0%, 100% { box-shadow: 0 0 0 5px rgba(var(--n-rgb, var(--ckpt-rgb)), .16); }
  50% { box-shadow: 0 0 0 13px rgba(var(--n-rgb, var(--ckpt-rgb)), .07); }
}
.ha-node .tag {
  position: absolute; left: 24px; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 14px; border-radius: 10px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(16, 22, 30, .08);
  border-left: 3px solid rgb(var(--n-rgb, var(--ckpt-rgb)));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(16, 22, 30, .12);
  white-space: nowrap;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.ha-node .tag b { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: #10161e; }
.ha-node .tag span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: rgba(16, 22, 30, .5); }
.ha-node.lit .tag, .ha-node:hover .tag { opacity: 1; transform: translateX(0); }
.ha-node.flip .tag { left: auto; right: 24px; transform: translateX(8px); }
.ha-node.flip.lit .tag, .ha-node.flip:hover .tag { transform: translateX(0); }

/* ---------- 文案（五幕疊放切換） ---------- */
.ha-copy {
  position: absolute; z-index: 10;
  left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(620px, 52vw);
}
/* grid 同格疊放：軌道高度＝最高一幕的內容高度，
   EN/JP 文案較長時 CTA 不會再疊到 lead 上（2026-07-20 修正） */
.ha-copytrack { display: grid; min-height: clamp(230px, 30vh, 330px); }
.ha-slidecopy { grid-area: 1 / 1; position: relative; width: 100%; visibility: hidden; }
.ha-slidecopy.is-on { visibility: visible; }
.ha-slidecopy .kicker { color: var(--a-ink-mute); margin-bottom: 24px; }
.ha-slidecopy .display { color: var(--a-ink); font-size: clamp(34px, 5.2vw, 78px); }
.ha-slidecopy .display em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ent), var(--ckpt) 55%, var(--safe));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ha-slidecopy .lead { color: var(--a-ink-dim); max-width: 480px; margin-top: 22px; }

.ha-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.ha-cta .hbtn.solid {
  background: var(--a-ink); color: var(--a-bg-0); border-color: var(--a-ink);
  box-shadow: 0 10px 32px rgba(16, 22, 30, .22);
  transition: transform .45s var(--ease-out), box-shadow .45s, background .9s, color .9s, border-color .9s;
}
body.tone-dark .ha-cta .hbtn.solid { color: #10161e; }
.ha-cta .hbtn.solid:hover { box-shadow: 0 18px 46px rgba(16, 22, 30, .3); }
.ha-cta .hbtn.ghost { color: var(--a-ink); border-color: rgba(16, 22, 30, .32); transition: transform .45s var(--ease-out), color .9s, border-color .9s; }
body.tone-dark .ha-cta .hbtn.ghost { border-color: rgba(238, 243, 250, .4); }
.ha-cta .hbtn.ghost:hover { border-color: currentColor; }

/* 三色細帶 */
.ha-spectrum { display: flex; gap: 8px; margin-top: 34px; }
.ha-spectrum i { height: 4px; border-radius: 4px; }
.ha-spectrum i:nth-child(1) { width: 56px; background: var(--ent); }
.ha-spectrum i:nth-child(2) { width: 88px; background: var(--ckpt); }
.ha-spectrum i:nth-child(3) { width: 40px; background: var(--safe); }

/* ---------- 場景進度（左下） ---------- */
.ha-progress {
  position: absolute; left: var(--gutter); bottom: 26px; z-index: 12;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
}
.ha-progress .bar {
  position: relative; width: clamp(34px, 4vw, 56px); height: 4px; border-radius: 4px;
  background: rgba(16, 22, 30, .18);
  overflow: hidden;
  transition: background .9s;
}
body.tone-dark .ha-progress .bar { background: rgba(238, 243, 250, .22); }
.ha-progress .bar i {
  position: absolute; inset: 0;
  background: currentColor;
  transform: scaleX(var(--p, 0)); transform-origin: left;
  border-radius: 4px;
}
.ha-progress .num { margin-left: 8px; font-size: 11px; letter-spacing: .22em; color: var(--a-ink-mute); }
.ha-progress .num b { color: var(--a-ink); font-weight: 600; }

.hero-a .readout { color: var(--a-ink); z-index: 12; transition: color .9s; }
.hero-a .scroll-cue { color: var(--a-ink); left: auto; right: clamp(18px, 3.4vw, 44px); bottom: 26px; transition: color .9s; }

.ha-veil { position: fixed; inset: 0; z-index: 200; background: #fbfcfd; pointer-events: none; }

/* ---------- RWD ---------- */
@media (max-width: 980px) {
  .ha-copy { width: min(560px, 88vw); top: auto; bottom: 15vh; transform: none; }
  .ha-copytrack { min-height: clamp(240px, 34vh, 340px); }
  /* 行動版 scrim：底部為主 */
  .ha-scrim::before {
    background:
      linear-gradient(0deg, rgba(244, 246, 249, .95) 6%, rgba(244, 246, 249, .68) 34%, rgba(244, 246, 249, .2) 58%, transparent 74%);
  }
  .ha-scrim::after {
    background:
      linear-gradient(0deg, rgba(5, 9, 15, .92) 8%, rgba(5, 9, 15, .62) 36%, rgba(5, 9, 15, .2) 60%, transparent 76%);
  }
  .ha-node .tag b { font-size: 10.5px; }
  .ha-progress { bottom: 20px; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  .ha-stage { min-height: 640px; }
  .ha-copy { bottom: 11vh; }
  .ha-cta .hbtn { padding: 13px 22px; font-size: 14px; }
  .ha-node .tag { display: none; }
}

/* ==================================================================
   標題/文案動畫改由 CSS transition 驅動（2026-07-17 bugfix）
   合成器執行緒執行：主執行緒卡頓（shader 編譯、大圖解碼）或 rAF 凍結
   （背景分頁）都不影響，杜絕「標題快速閃過／凍在半路」。
   JS（hero-a.js）僅負責切換 .is-on / .leaving class。
   ================================================================== */
.ha-slidecopy .display .sl i {
  transition: transform .95s cubic-bezier(.19, 1, .22, 1);
  will-change: transform;
}
.ha-slidecopy.is-on .display .sl:nth-child(1) i { transition-delay: .06s; }
.ha-slidecopy.is-on .display .sl:nth-child(2) i { transition-delay: .17s; }
.ha-slidecopy.is-on .display .sl:nth-child(3) i { transition-delay: .28s; }
.ha-slidecopy.is-on .display .sl i { transform: translateY(0); }
.ha-slidecopy.leaving { visibility: visible; }
.ha-slidecopy.leaving .display .sl i {
  transform: translateY(-112%);
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.6, 0, .7, .2);
  transition-delay: 0s;
}
.ha-slidecopy .kicker,
.ha-slidecopy .lead {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.19, 1, .22, 1);
}
.ha-slidecopy.is-on .kicker { opacity: 1; transform: none; transition-delay: .02s; }
.ha-slidecopy.is-on .lead   { opacity: 1; transform: none; transition-delay: .3s; }
.ha-slidecopy.leaving .kicker,
.ha-slidecopy.leaving .lead {
  opacity: 0;
  transform: translateY(-14px);
  transition-duration: .4s;
  transition-delay: 0s;
}
html.no-motion .ha-slidecopy .display .sl i,
html.no-motion .ha-slidecopy .kicker,
html.no-motion .ha-slidecopy .lead { transition: none; opacity: 1; transform: none; }

/* ══ CJK 防孤字:hero 大標與 lede 平衡換行(2026-07-20) ══ */
html[lang="zh-Hant"] .ha-slidecopy .display,
html[lang="ja"] .ha-slidecopy .display { text-wrap: balance; }
html[lang="zh-Hant"] .ha-slidecopy .lead,
html[lang="ja"] .ha-slidecopy .lead { text-wrap: pretty; }

/* ══ 小筆電(視窗較矮)緊湊模式:縮小 hero 文案間距與字級,避免內容溢出 ══ */
@media (max-height: 820px) {
  .ha-slidecopy .display { font-size: clamp(30px, 4.4vw, 58px); }
  .ha-slidecopy .kicker { margin-bottom: 14px; }
  .ha-slidecopy .lead { margin-top: 14px; }
  .ha-cta { margin-top: 20px; }
  .ha-spectrum { margin-top: 22px; }
}
@media (max-height: 700px) {
  .ha-slidecopy .display { font-size: clamp(26px, 4vw, 46px); }
  .ha-copy { width: min(560px, 56vw); }
}

/* ══ 深色幕(tone-dark)導航反白(2026-07-20):
   第四幕暗場時選單/語言切換/logo 轉白,捲動後導航有淺色毛玻璃底則恢復深字 ══ */
body.tone-dark .site-nav:not(.scrolled) .brand img {
  filter: brightness(0) invert(1);
}
.site-nav .brand img { transition: filter .9s ease; }
body.tone-dark .site-nav:not(.scrolled) .nav-links > .ni > a {
  color: rgba(238, 243, 250, .82);
}
body.tone-dark .site-nav:not(.scrolled) .nav-links > .ni > a:hover,
body.tone-dark .site-nav:not(.scrolled) .nav-links > .ni:focus-within > a {
  color: #fff; background: rgba(255, 255, 255, .1);
}
body.tone-dark .site-nav:not(.scrolled) .nav-lang {
  border-color: rgba(255, 255, 255, .32);
}
body.tone-dark .site-nav:not(.scrolled) .nav-lang a { color: rgba(255, 255, 255, .6); }
body.tone-dark .site-nav:not(.scrolled) .nav-lang a:hover { color: #fff; }
body.tone-dark .site-nav:not(.scrolled) .nav-lang a.on { background: #fff; color: #10161e; }
body.tone-dark .site-nav:not(.scrolled) .nav-burger { border-color: rgba(255, 255, 255, .35); }
body.tone-dark .site-nav:not(.scrolled) .nav-burger span::before,
body.tone-dark .site-nav:not(.scrolled) .nav-burger span::after { background: #eef3fa; }
.nav-links > .ni > a, .nav-lang, .nav-lang a { transition-duration: .9s; }