/* ═══════════════════════════════════════════════════════════════
   2026-05-08 Workflow 動畫（取代靜態 wf-steps）
   18s 三幕：寫 / 錯 / 熟。每幕 6s（hero 字 → slogan → demo）
   配色翻譯：dark→cream、jade→ink/vermilion、coral→vermilion
   IO 觸發：進入 viewport 才播、滾出停（省電）
   a11y：pause/replay 按鈕 + reduced-motion 退化成 3 張靜態卡

   ⚠ 本檔也含 edit-compare 比較表 / edit-exam 類別卡 / edit-footer SEO 連結組
   （拆檔時這幾段夾在 workflow 跟 sprint 中間，未來可再細分）
═══════════════════════════════════════════════════════════════ */
.edit-workflow {
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(48px, 6vw, 80px);
  /* 效能：viewport 外不渲染（比 reveal-on-scroll 更狠，但這 section 大、值得）
     contain-intrinsic-size 給瀏覽器一個 placeholder 高度，避免 layout 跳動 */
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}
.edit-workflow .edit-section-h2 { text-align: center; }
.edit-workflow .edit-section-eyebrow { text-align: center; }

/* section 之間 subtle vertical divider（沿用既有設計語言） */
.edit-bento + .edit-workflow::before,
.edit-workflow + .edit-section::before,
.sticky-demo + .edit-workflow::before {
  content: '';
  display: block;
  width: 1px; height: clamp(40px, 5vw, 64px);
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in oklch, var(--c-vermilion) 35%, transparent),
    transparent);
  margin: clamp(-32px, -3vw, -48px) auto clamp(20px, 3vw, 32px);
}

/* ── 動畫容器 ──────────────────────────────────────── */
/* 2026-05-08 user 二次回饋：
   - light mode 米色 bg 上 #f4f1ea 文字、#6e6e78 灰、#5fc9a0 淺綠都看不到
   - dark mode 表現良好，保持原稿色
   解法：ink/muted 用 var(--c-ink)/var(--c-muted) 自動隨 theme 翻轉；
        jade 在 light mode 改深綠、dark mode 還原原稿青綠。
        coral / line 在兩 mode 都維持原稿（user 沒抱怨）。*/
.wf-anim {
  --wf-total: 18s;
  --wf-bg:    var(--c-bg);            /* stage bg = 網站 bg（兩 mode 自動 flip）*/
  --wf-ink:   var(--c-ink);           /* light: 墨黑、dark: 暖白 */
  --wf-muted: var(--c-muted);         /* 同上 */
  --wf-jade:  #2D8762;                /* light mode 深森林綠（~5:1 on cream paper）*/
  --wf-coral: #ff6b5b;                /* 原稿珊瑚紅 */
  --wf-line:  #2e2e38;                /* 原稿暗灰 line（key border） */

  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 1100px;
  position: relative;
}
/* dark mode：jade 還原原稿青綠（dark bg 上漂亮） */
[data-theme="dark"] .wf-anim {
  --wf-jade: #5fc9a0;
}

/* 預設整段暫停；is-playing 時所有後代動畫 running */
.wf-anim:not(.is-playing) *,
.wf-anim.is-paused * {
  animation-play-state: paused !important;
}

.wf-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  /* transparent，讓 .home-bg mesh/orb/conic 透上來；不再是純色塊壓在 textured 頁面 bg 上 */
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  /* 效能：bound layout/paint side effects；GPU 圖層化避免每 frame 重排 */
  contain: layout paint;
  transform: translateZ(0);
}

.wf-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  /* 效能：每幕 contain 自己的 paint，不跨 scene 重排 */
  contain: layout paint style;
}
.wf-scene-1 { animation: wfVisible1 var(--wf-total) infinite; }
.wf-scene-2 { animation: wfVisible2 var(--wf-total) infinite; }
.wf-scene-3 { animation: wfVisible3 var(--wf-total) infinite; }
@keyframes wfVisible1 {
  0%, 32.5% { opacity: 1; }
  33.33%, 100% { opacity: 0; }
}
@keyframes wfVisible2 {
  0%, 32.5% { opacity: 0; }
  34.17%, 65.83% { opacity: 1; }
  66.67%, 100% { opacity: 0; }
}
@keyframes wfVisible3 {
  0%, 65.83% { opacity: 0; }
  67.5%, 99% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Hero 大字 ──────────────────────────────────────── */
.wf-hero {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-weight: 900;
  font-size: clamp(180px, 32vw, 420px);
  line-height: 0.9;
  color: var(--wf-ink);
  letter-spacing: -0.02em;
  user-select: none;
  margin: 0;
}
.wf-scene-1 .wf-hero { animation: wfHero1 var(--wf-total) infinite cubic-bezier(0.34, 1.3, 0.64, 1); }
.wf-scene-2 .wf-hero { animation: wfHero2 var(--wf-total) infinite cubic-bezier(0.34, 1.3, 0.64, 1); }
.wf-scene-3 .wf-hero { animation: wfHero3 var(--wf-total) infinite cubic-bezier(0.34, 1.3, 0.64, 1); }
.wf-scene-2 .wf-hero { color: var(--wf-coral); }   /* 「錯」用朱印紅 */

@keyframes wfHero1 {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(40px); }
  2.78% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: blur(0); }
  4.44% { transform: translate(-50%, -50%) scale(1); }
  8.33% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  10% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  21.11% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  22.5% { opacity: 0; }
  33.33%, 100% { opacity: 0; }
}
@keyframes wfHero2 {
  0%, 33.33% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(40px); }
  36.11% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: blur(0); }
  37.78% { transform: translate(-50%, -50%) scale(1); }
  41.67% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  43.33% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  54.44% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  55.83% { opacity: 0; }
  66.67%, 100% { opacity: 0; }
}
@keyframes wfHero3 {
  0%, 66.67% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; filter: blur(40px); }
  69.44% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; filter: blur(0); }
  71.11% { transform: translate(-50%, -50%) scale(1); }
  75% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  76.67% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  87.78% { transform: translate(-50%, -110%) scale(0.32); opacity: 0.85; }
  89.17% { opacity: 0; }
  100% { opacity: 0; }
}

/* 紅 X 劃過「錯」字 */
.wf-x-strike {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(180px, 32vw, 420px);
  height: 10px;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  opacity: 0;
  animation: wfXShow var(--wf-total) infinite;
}
.wf-x-strike::before {
  content: ''; position: absolute; inset: 0;
  background: var(--wf-coral);
  border-radius: 5px;
  box-shadow: 0 0 32px rgba(255,107,91,0.6);
  transform-origin: left center;
  transform: scaleX(0);
  animation: wfXLine var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wfXShow {
  0%, 35% { opacity: 0; }
  36.5%, 41.5% { opacity: 1; }
  43%, 100% { opacity: 0; }
}
@keyframes wfXLine {
  0%, 35% { transform: scaleX(0); }
  37.78% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* ── slogan ──────────────────────────────────────── */
.wf-slogan {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 90%;
  pointer-events: none;
}
.wf-slogan-main {
  font-family: var(--ff-serif-cn, 'Noto Serif TC', serif);
  font-weight: 900;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--wf-ink);
  overflow: hidden;
}
.wf-slogan-sub {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-weight: 400;
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--wf-muted);
  letter-spacing: .05em;     /* chrome review：中文 .12em 太鬆 → .05em */
  margin-top: 18px;
}

.wf-scene-1 .wf-slogan { animation: wfSlogan1 var(--wf-total) infinite; }
.wf-scene-2 .wf-slogan { animation: wfSlogan2 var(--wf-total) infinite; }
.wf-scene-3 .wf-slogan { animation: wfSlogan3 var(--wf-total) infinite; }
@keyframes wfSlogan1 {
  0%, 9.5% { opacity: 0; }
  10.5%, 21.11% { opacity: 1; }
  22.22%, 100% { opacity: 0; }
}
@keyframes wfSlogan2 {
  0%, 42.83% { opacity: 0; }
  43.83%, 54.44% { opacity: 1; }
  55.56%, 100% { opacity: 0; }
}
@keyframes wfSlogan3 {
  0%, 76.17% { opacity: 0; }
  77.17%, 87.78% { opacity: 1; }
  88.89%, 100% { opacity: 0; }
}

.wf-scene-1 .wf-slogan-main span,
.wf-scene-2 .wf-slogan-main span,
.wf-scene-3 .wf-slogan-main span {
  display: inline-block; opacity: 0; transform: translateY(40px);
  animation: wfCharIn var(--wf-total) infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.wf-scene-1 .wf-slogan-main span:nth-child(1) { animation-delay: calc(var(--wf-total) * 0.1000); }
.wf-scene-1 .wf-slogan-main span:nth-child(2) { animation-delay: calc(var(--wf-total) * 0.1033); }
.wf-scene-1 .wf-slogan-main span:nth-child(3) { animation-delay: calc(var(--wf-total) * 0.1067); }
.wf-scene-1 .wf-slogan-main span:nth-child(4) { animation-delay: calc(var(--wf-total) * 0.1100); }
.wf-scene-1 .wf-slogan-main span:nth-child(5) { animation-delay: calc(var(--wf-total) * 0.1133); }
.wf-scene-1 .wf-slogan-main span:nth-child(6) { animation-delay: calc(var(--wf-total) * 0.1167); }
.wf-scene-1 .wf-slogan-main span:nth-child(7) { animation-delay: calc(var(--wf-total) * 0.1200); }
.wf-scene-2 .wf-slogan-main span:nth-child(1) { animation-delay: calc(var(--wf-total) * 0.4333); }
.wf-scene-2 .wf-slogan-main span:nth-child(2) { animation-delay: calc(var(--wf-total) * 0.4367); }
.wf-scene-2 .wf-slogan-main span:nth-child(3) { animation-delay: calc(var(--wf-total) * 0.4400); }
.wf-scene-2 .wf-slogan-main span:nth-child(4) { animation-delay: calc(var(--wf-total) * 0.4433); }
.wf-scene-2 .wf-slogan-main span:nth-child(5) { animation-delay: calc(var(--wf-total) * 0.4467); }
.wf-scene-2 .wf-slogan-main span:nth-child(6) { animation-delay: calc(var(--wf-total) * 0.4500); }
.wf-scene-2 .wf-slogan-main span:nth-child(7) { animation-delay: calc(var(--wf-total) * 0.4533); }
.wf-scene-3 .wf-slogan-main span:nth-child(1) { animation-delay: calc(var(--wf-total) * 0.7667); }
.wf-scene-3 .wf-slogan-main span:nth-child(2) { animation-delay: calc(var(--wf-total) * 0.7700); }
.wf-scene-3 .wf-slogan-main span:nth-child(3) { animation-delay: calc(var(--wf-total) * 0.7733); }
.wf-scene-3 .wf-slogan-main span:nth-child(4) { animation-delay: calc(var(--wf-total) * 0.7767); }
.wf-scene-3 .wf-slogan-main span:nth-child(5) { animation-delay: calc(var(--wf-total) * 0.7800); }
.wf-scene-3 .wf-slogan-main span:nth-child(6) { animation-delay: calc(var(--wf-total) * 0.7833); }
@keyframes wfCharIn {
  0% { opacity: 0; transform: translateY(40px); }
  2.5%, 100% { opacity: 1; transform: translateY(0); }
}

.wf-scene-1 .wf-slogan-sub { animation: wfSubFade1 var(--wf-total) infinite; opacity: 0; }
.wf-scene-2 .wf-slogan-sub { animation: wfSubFade2 var(--wf-total) infinite; opacity: 0; }
.wf-scene-3 .wf-slogan-sub { animation: wfSubFade3 var(--wf-total) infinite; opacity: 0; }
@keyframes wfSubFade1 {
  0%, 13% { opacity: 0; transform: translateY(8px); }
  15%, 21.11% { opacity: 1; transform: translateY(0); }
  22.22%, 100% { opacity: 0; }
}
@keyframes wfSubFade2 {
  0%, 46.33% { opacity: 0; transform: translateY(8px); }
  48.33%, 54.44% { opacity: 1; transform: translateY(0); }
  55.56%, 100% { opacity: 0; }
}
@keyframes wfSubFade3 {
  0%, 79.67% { opacity: 0; transform: translateY(8px); }
  81.67%, 87.78% { opacity: 1; transform: translateY(0); }
  88.89%, 100% { opacity: 0; }
}

/* ── Demo ──────────────────────────────────────── */
.wf-demo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ── Scene 1 demo: 4 keys + 大勾 ── */
.wf-keys {
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}
.wf-key {
  width: clamp(56px, 8vw, 110px);
  height: clamp(56px, 8vw, 110px);
  border-radius: 14px;
  border: 2px solid var(--wf-line);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 48px);
  color: var(--wf-muted);
}
.wf-key-active {
  animation: wfKeyPress var(--wf-total) infinite cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes wfKeyPress {
  0%, 23.5% { transform: translateY(0); border-color: var(--wf-line); color: var(--wf-muted); background: transparent; box-shadow: 0 0 0 0 transparent; }
  25% { transform: translateY(6px); border-color: var(--wf-jade); color: var(--wf-jade); background: color-mix(in oklch, var(--wf-jade) 12%, transparent); }
  26.5% { transform: translateY(0); border-color: var(--wf-jade); color: var(--wf-jade); background: color-mix(in oklch, var(--wf-jade) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in oklch, var(--wf-jade) 18%, transparent); }
  28.5% { box-shadow: 0 0 0 0 transparent; }
  30.56% { transform: translateY(0); border-color: var(--wf-jade); color: var(--wf-jade); background: color-mix(in oklch, var(--wf-jade) 12%, transparent); }
  31.67%, 100% { transform: translateY(0); border-color: var(--wf-line); color: var(--wf-muted); background: transparent; }
}
.wf-scene-1 .wf-demo { animation: wfDemo1Show var(--wf-total) infinite; }
@keyframes wfDemo1Show {
  0%, 22% { opacity: 0; }
  22.78%, 30.56% { opacity: 1; }
  31.67%, 100% { opacity: 0; }
}
.wf-check {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: clamp(140px, 18vw, 260px);
  height: clamp(140px, 18vw, 260px);
  border-radius: 50%;
  background: var(--wf-jade);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 60px color-mix(in oklch, var(--wf-jade) 30%, transparent);
  animation: wfCheckBig var(--wf-total) infinite cubic-bezier(0.34, 1.5, 0.64, 1);
}
.wf-check svg {
  width: 50%; height: 50%;
  stroke: var(--wf-bg);
  stroke-width: 12;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wf-check svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: wfCheckDraw var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1);
}
@keyframes wfCheckBig {
  0%, 26.5% { transform: translate(-50%, -50%) scale(0); }
  28% { transform: translate(-50%, -50%) scale(1.1); }
  29.5% { transform: translate(-50%, -50%) scale(1); }
  30.56% { transform: translate(-50%, -50%) scale(1); }
  31.67%, 100% { transform: translate(-50%, -50%) scale(0); }
}
@keyframes wfCheckDraw {
  0%, 27.5% { stroke-dashoffset: 100; }
  29.5% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

/* ── Scene 2 demo: 卡 → 堆疊 ── */
.wf-scene-2 .wf-demo { animation: wfDemo2Show var(--wf-total) infinite; }
@keyframes wfDemo2Show {
  0%, 55% { opacity: 0; }
  56.11%, 63.89% { opacity: 1; }
  65%, 100% { opacity: 0; }
}
.wf-err-flow {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 70px);
}
.wf-err-card {
  width: clamp(112px, 14vw, 180px);
  height: clamp(140px, 17vw, 220px);
  border-radius: 12px;
  background: rgba(255,107,91,0.06);
  border: 2px solid var(--wf-coral);
  position: relative;
  transform: rotate(-4deg);
  animation: wfErrCardIn var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1);
}
.wf-err-card::before {
  content: '✕';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(56px, 7vw, 96px);
  color: var(--wf-coral);
  font-weight: 300;
}
@keyframes wfErrCardIn {
  0%, 55% { opacity: 0; transform: translateX(-40px) rotate(-12deg) scale(0.85); }
  57.5% { opacity: 1; transform: translateX(0) rotate(-4deg) scale(1); }
  60% { opacity: 1; transform: translateX(0) rotate(-4deg) scale(1); }
  62% { opacity: 0; transform: translateX(80px) rotate(8deg) scale(0.6); }
  65%, 100% { opacity: 0; }
}
.wf-err-arrow {
  width: clamp(32px, 4vw, 64px);
  height: 2px;
  background: var(--wf-muted);
  position: relative;
  opacity: 0;
  animation: wfArrowShow var(--wf-total) infinite;
}
.wf-err-arrow::after {
  content: '';
  position: absolute;
  right: -2px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid var(--wf-muted);
  border-right: 2px solid var(--wf-muted);
  transform: translateY(-50%) rotate(45deg);
}
@keyframes wfArrowShow {
  0%, 57% { opacity: 0; }
  58.5%, 62% { opacity: 0.6; }
  63%, 100% { opacity: 0; }
}
.wf-err-stack {
  position: relative;
  width: clamp(112px, 14vw, 180px);
  height: clamp(140px, 17vw, 220px);
  opacity: 0;
  animation: wfStackShow var(--wf-total) infinite;
}
@keyframes wfStackShow {
  0%, 58% { opacity: 0; transform: translateX(20px); }
  60%, 63.5% { opacity: 1; transform: translateX(0); }
  65%, 100% { opacity: 0; }
}
.wf-err-layer {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255,107,91,0.04);
  border: 1px solid var(--wf-coral);
}
.wf-err-layer:nth-child(1) { transform: translate(-12px, 10px) rotate(-5deg); opacity: 0.4; }
.wf-err-layer:nth-child(2) { transform: translate(-6px, 5px) rotate(-2deg); opacity: 0.7; }
.wf-err-layer:nth-child(3) {
  background: var(--wf-bg);
  border-color: var(--wf-coral);
  box-shadow: 0 0 32px rgba(255,107,91,0.2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
}
.wf-err-label {
  font-family: var(--ff-mono); font-size: 11px;
  color: var(--wf-coral); letter-spacing: 0.2em;
}
.wf-err-clock {
  font-family: var(--ff-serif-cn, serif);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 38px);
  color: var(--wf-ink);
}
.wf-err-when {
  font-size: 12px;
  color: var(--wf-muted);
}

/* ── Scene 3 demo: bars + 大分數 ── */
.wf-scene-3 .wf-demo { animation: wfDemo3Show var(--wf-total) infinite; }
@keyframes wfDemo3Show {
  0%, 88% { opacity: 0; }
  89.44%, 97.22% { opacity: 1; }
  98.33%, 100% { opacity: 0; }
}
.wf-score-block {
  display: grid;
  grid-template-columns: 1fr clamp(140px, 18vw, 240px);
  align-items: center;
  gap: clamp(28px, 4vw, 80px);
  width: min(85%, 900px);
}
.wf-bars {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
}
.wf-bar-row {
  display: grid;
  grid-template-columns: clamp(80px, 10vw, 130px) 1fr clamp(32px, 3.5vw, 48px);
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  font-family: var(--ff-sans-cn, var(--ff-sans));
}
.wf-bar-lbl {
  font-size: clamp(12px, 1.2vw, 16px);
  color: var(--wf-ink);
  font-weight: 500;
}
.wf-bar-val {
  font-family: var(--ff-mono);
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--wf-jade);
  text-align: right;
}
.wf-bar-track {
  height: clamp(6px, 0.7vw, 10px);
  background: var(--wf-line);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}
.wf-bar-fill {
  position: absolute;
  inset: 0;
  background: var(--wf-jade);
  border-radius: 5px;
  transform-origin: left;
  transform: scaleX(0);
  box-shadow: 0 0 12px color-mix(in oklch, var(--wf-jade) 40%, transparent);
}
.wf-b1 .wf-bar-fill { animation: wfBar1 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
.wf-b2 .wf-bar-fill { animation: wfBar2 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
.wf-b3 .wf-bar-fill { animation: wfBar3 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
.wf-b4 .wf-bar-fill { animation: wfBar4 var(--wf-total) infinite cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes wfBar1 {
  0%, 89.44% { transform: scaleX(0); }
  92% { transform: scaleX(0.92); }
  97.22% { transform: scaleX(0.92); }
  98.33%, 100% { transform: scaleX(0); }
}
@keyframes wfBar2 {
  0%, 90.28% { transform: scaleX(0); }
  92.83% { transform: scaleX(0.78); }
  97.22% { transform: scaleX(0.78); }
  98.33%, 100% { transform: scaleX(0); }
}
@keyframes wfBar3 {
  0%, 91.11% { transform: scaleX(0); }
  93.67% { transform: scaleX(0.85); }
  97.22% { transform: scaleX(0.85); }
  98.33%, 100% { transform: scaleX(0); }
}
@keyframes wfBar4 {
  0%, 91.94% { transform: scaleX(0); }
  94.5% { transform: scaleX(0.65); }
  97.22% { transform: scaleX(0.65); }
  98.33%, 100% { transform: scaleX(0); }
}
.wf-total {
  text-align: center;
  opacity: 0;
  animation: wfTotalIn var(--wf-total) infinite cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes wfTotalIn {
  0%, 93% { opacity: 0; transform: scale(0.6); }
  95.5% { opacity: 1; transform: scale(1.05); }
  96.5% { opacity: 1; transform: scale(1); }
  97.22% { opacity: 1; transform: scale(1); }
  98.33%, 100% { opacity: 0; transform: scale(1); }
}
.wf-total-num {
  font-family: var(--ff-serif-cn, serif);
  font-weight: 900;
  font-size: clamp(64px, 9vw, 130px);
  line-height: 1;
  color: var(--wf-jade);
}
.wf-total-den {
  font-family: var(--ff-sans-cn, var(--ff-sans));
  font-weight: 400;
  font-size: clamp(16px, 2vw, 26px);
  color: var(--wf-muted);
  margin-top: 6px;
  letter-spacing: 0.06em;
}

/* ── 場景間色塊轉場 ── */
.wf-wipe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-100%);
}
.wf-wipe-1 { background: var(--wf-coral); animation: wfWipe1 var(--wf-total) infinite cubic-bezier(0.76, 0, 0.24, 1); }
.wf-wipe-2 { background: var(--wf-jade);  animation: wfWipe2 var(--wf-total) infinite cubic-bezier(0.76, 0, 0.24, 1); }
@keyframes wfWipe1 {
  0%, 32.5% { transform: translateX(-100%); }
  33.33% { transform: translateX(0); }
  34.17% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes wfWipe2 {
  0%, 65.83% { transform: translateX(-100%); }
  66.67% { transform: translateX(0); }
  67.5% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ── Stage overlay click-target（取代 video 按鈕的暫停操作）── */
.wf-stage-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;          /* 在所有 scene/wipe 上方 */
  outline: none;
}
.wf-stage-overlay:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: -4px;
  border-radius: 12px;
}

/* ── 2026 cursor-following glass chip（取代舊右上角 fixed chip）──
   設計重點：
   1. 跟游標移動（JS lerp on rAF，不是 transition）
   2. Frosted glass：backdrop-filter blur 24px + saturate 1.6
   3. Conic gradient hairline 邊（朱印紅 → 透明 旋轉，2026 light 質感）
   4. Inner highlight + drop shadow 雙層光感
   5. 朱印紅小 dot（pulse）+ 中文標 + ↵ glyph 三段式
   6. Hover/exit micro-anim：scale-in 220ms cubic-bezier(.34,1.4,.64,1) */
.wf-hover-hint {
  /* 位置由 JS 透過 --hx/--hy 推進；預設藏起來 */
  --hx: 0px;
  --hy: 0px;
  position: absolute;
  left: 0;
  top: 0;
  /* +18px 偏離游標：不擋指針 */
  transform: translate3d(calc(var(--hx) + 18px), calc(var(--hy) + 18px), 0) scale(.85);
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s cubic-bezier(.2, .8, .2, 1), scale .22s cubic-bezier(.34, 1.4, .64, 1);
  will-change: transform, opacity;
}
.wf-stage:hover .wf-hover-hint {
  opacity: 1;
  transform: translate3d(calc(var(--hx) + 18px), calc(var(--hy) + 18px), 0) scale(1);
}

.wf-hover-hint-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wf-ink);
  /* Frosted glass — 2026 SaaS 標配但加 saturate 提色 */
  background: color-mix(in oklch, var(--c-bg) 78%, transparent);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border-radius: 999px;
  /* 雙層光：外掉影 + 內 highlight */
  box-shadow:
    0 12px 32px -12px rgba(0, 0, 0, .25),
    0 2px 6px -2px rgba(0, 0, 0, .12),
    inset 0 1px 0 color-mix(in oklch, white 40%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--c-ink) 8%, transparent);
}
[data-theme="dark"] .wf-hover-hint-text {
  background: color-mix(in oklch, var(--c-bg) 70%, transparent);
  box-shadow:
    0 12px 32px -12px rgba(0, 0, 0, .55),
    0 2px 6px -2px rgba(0, 0, 0, .35),
    inset 0 1px 0 color-mix(in oklch, white 12%, transparent),
    inset 0 0 0 1px color-mix(in oklch, var(--c-ink) 14%, transparent);
}

/* Conic-gradient hairline rotating border（朱印紅活光圈）
   用 ::before mask 內描出 1px 環，conic-gradient 動畫旋轉 */
.wf-hover-hint-text::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--ang, 0deg),
    transparent 0deg,
    color-mix(in oklch, var(--c-vermilion) 70%, transparent) 60deg,
    transparent 120deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: wfHintConicSpin 4s linear infinite;
  pointer-events: none;
}
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes wfHintConicSpin {
  to { --ang: 360deg; }
}

/* 朱印紅小 dot — playing 時 pulse、paused 時靜止 */
.wf-hover-hint-text::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-vermilion);
  box-shadow: 0 0 8px color-mix(in oklch, var(--c-vermilion) 60%, transparent);
  flex-shrink: 0;
  animation: wfHintDotPulse 1.4s ease-in-out infinite;
}
.wf-anim.is-paused .wf-hover-hint-text::after { animation: none; opacity: .5; }
@keyframes wfHintDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.6); }
}

/* reduced-motion：不跑 conic spin / dot pulse */
@media (prefers-reduced-motion: reduce) {
  .wf-hover-hint-text::before { animation: none; }
  .wf-hover-hint-text::after { animation: none; }
}

/* ── 編輯式 meta caption（取代 video controls）── */
/* 一行：[●●●] · [寫·錯·熟] · ──────── · 自動播放 · ↻
   看起來像學術圖表 figure caption / 唱片內頁 metadata，不是 video player */
.wf-meta {
  display: flex;
  align-items: center;
  justify-content: center;     /* user 回饋：caption 要置中 */
  gap: 12px;
  margin-top: 14px;
  padding: 0 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--c-muted);
}

/* 場景進度 3 顆點 */
.wf-scene-dots {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}
.wf-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid color-mix(in oklch, var(--c-ink) 28%, transparent);
  background: transparent;
  transition: background .35s ease, border-color .35s ease;
}
.wf-dot.is-passed { background: color-mix(in oklch, var(--c-vermilion) 35%, transparent); border-color: var(--c-vermilion); }
.wf-dot.is-current {
  background: var(--c-vermilion);
  border-color: var(--c-vermilion);
  animation: wfDotPulse 1.4s ease-in-out infinite;
}
@keyframes wfDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-vermilion) 50%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklch, var(--c-vermilion) 0%, transparent); }
}

.wf-meta-divider {
  flex-shrink: 0;
  font-family: var(--ff-serif-cn, serif);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .1em;
  color: color-mix(in oklch, var(--c-ink) 65%, transparent);
}

/* hairline 進度（不是粗條，是細線像論文 chart axis）
   不再 flex:1 拉滿、改固定 200px，讓整列能置中 */
.wf-meta-rule {
  flex: 0 0 200px;
  height: 1px;
  background: color-mix(in oklch, var(--c-ink) 12%, transparent);
  position: relative;
  overflow: hidden;
}
.wf-meta-rule-fill {
  position: absolute;
  left: 0; top: 0;
  width: 0;
  height: 100%;
  background: var(--c-vermilion);
  transition: width .1s linear;
}

.wf-meta-state {
  flex-shrink: 0;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .12em;
}
.wf-anim.is-paused .wf-meta-state { color: var(--c-vermilion); }

/* ↻ replay：純文字 link，無框 */
.wf-meta-replay {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0 4px;
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in oklch, var(--c-ink) 55%, transparent);
  cursor: pointer;
  transition: color .2s ease, transform .3s cubic-bezier(.34, 1.5, .64, 1);
  line-height: 1;
}
.wf-meta-replay:hover {
  color: var(--c-vermilion);
  transform: rotate(-180deg);
}
.wf-meta-replay:focus-visible {
  outline: 2px solid var(--c-vermilion);
  outline-offset: 2px;
  border-radius: 50%;
}

/* RWD：mobile meta 換行（仍置中）*/
@media (max-width: 600px) {
  .wf-meta { flex-wrap: wrap; gap: 8px 10px; }
  .wf-meta-rule { order: 99; flex-basis: 60%; }
  .wf-meta-divider { font-size: 10.5px; }
}

/* ── reduced-motion fallback ── */
.wf-static-steps {
  display: none;     /* 預設藏起來；reduced-motion 才秀 */
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--c-rule);
  max-width: 720px;
  margin-inline: auto;
}
.wf-static-step {
  padding: clamp(28px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--c-rule);
  text-align: center;
}
.wf-static-num {
  display: block;
  font-family: var(--ff-serif-cn, serif);
  font-size: 13px; font-weight: 500;
  letter-spacing: .3em;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.wf-static-h {
  font-family: var(--ff-serif-cn, serif);
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 700;
  color: var(--c-vermilion);
  line-height: 1;
  margin: 0 0 18px;
}
.wf-static-desc {
  font-family: var(--ff-serif-cn, serif);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.8;
  color: var(--c-text);
  max-width: 540px;
  margin: 0 auto;
  text-align: left;
  text-wrap: pretty;
}
.wf-static-desc strong { color: var(--c-ink); font-weight: 700; }

/* reduced-motion：不播動畫、隱藏 stage/控制、改秀靜態卡 */
@media (prefers-reduced-motion: reduce) {
  .wf-stage,
  .wf-controls,
  .wf-meta { display: none !important; }
  .wf-static-steps { display: block; }
}

/* === 效能：will-change 只在 is-playing 時 promote GPU 圖層，paused 時釋放 ===
   意外效益：低階 GPU 在背景 idle 時不囤積 framebuffer 記憶體 */
.wf-anim.is-playing .wf-hero,
.wf-anim.is-playing .wf-slogan-main span,
.wf-anim.is-playing .wf-slogan-sub,
.wf-anim.is-playing .wf-key-active,
.wf-anim.is-playing .wf-check,
.wf-anim.is-playing .wf-check svg path,
.wf-anim.is-playing .wf-err-card,
.wf-anim.is-playing .wf-err-arrow,
.wf-anim.is-playing .wf-err-stack,
.wf-anim.is-playing .wf-x-strike,
.wf-anim.is-playing .wf-x-strike::before,
.wf-anim.is-playing .wf-bar-fill,
.wf-anim.is-playing .wf-total,
.wf-anim.is-playing .wf-wipe {
  will-change: transform, opacity;
}
.wf-anim.is-playing .wf-hero { will-change: transform, opacity, filter; }

/* ── RWD：keys 在 ≤480 改 2x2 grid ── */
@media (max-width: 480px) {
  .wf-keys {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: clamp(120px, 50vw, 180px);
  }
  .wf-key {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
  }
  .wf-score-block {
    grid-template-columns: 1fr;
    gap: 18px;
    width: 90%;
  }
  .wf-err-flow {
    transform: scale(.85);
  }
}
@media (max-width: 720px) {
  .wf-stage { aspect-ratio: 4 / 3; }    /* 手機高瘦比例 */
  .wf-hero { font-size: clamp(120px, 28vw, 200px); }
  .wf-slogan-main { font-size: clamp(28px, 6vw, 48px); }
  .wf-slogan-sub { font-size: 12px; margin-top: 12px; }
}
.wf-cta-row {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 12px;
  align-items: center;
}
.wf-cta-note {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .05em;
  color: var(--c-muted);
  text-transform: uppercase;
}

/* Comparison table — vs 補習班 */
.edit-compare {
  width: 100%; border-collapse: collapse; max-width: 880px;
  margin: 24px auto 0; font-family: var(--ff-sans-cn);
}
.edit-compare th, .edit-compare td {
  padding: 14px 16px; text-align: left;
  border-bottom: 1px solid var(--c-rule);
  font-size: 14.5px;
}
.edit-compare thead th {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted); font-weight: 500;
  border-bottom: 2px solid var(--c-ink);
}
.edit-compare th.us { color: var(--c-vermilion); }
.edit-compare td.feat { font-weight: 500; color: var(--c-ink); }
.edit-compare td.us { color: var(--c-vermilion); font-weight: 600; }
.edit-compare td.us::before { content: '✓ '; }
.edit-compare td.no { color: var(--c-muted); }
.edit-compare td.no::before { content: '— '; opacity: .5; }
.edit-compare td.partial { color: var(--c-warning); }
.edit-compare td.partial::before { content: '◐ '; }

/* Exam category cards (logged-out, choosing exam type) */
.edit-exam-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0; border-top: 1px solid var(--c-rule);
}
.edit-exam-card {
  padding: 40px 32px;
  border-right: 1px solid var(--c-rule);
  background: var(--c-paper);
  text-align: left; cursor: pointer;
  transition: background .25s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.edit-exam-card:last-child { border-right: none; }
/* mobile-first：直排，下邊框；≥768 改回橫排右邊框（已由 grid auto-fit 處理）*/
@media (max-width: 767.98px) {
  .edit-exam-card { border-right: none; border-bottom: 1px solid var(--c-rule); }
  .edit-exam-card:last-child { border-bottom: none; }
}
@media (hover: hover) {
  .edit-exam-card {
    transition: background .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
    transform-style: preserve-3d;
  }
  .edit-exam-card:hover {
    background: var(--c-paper-2);
    transform: translateY(-4px);
    box-shadow: 0 18px 48px -16px color-mix(in oklch, var(--c-vermilion, #b23a2b) 28%, transparent);
    z-index: 1;
  }
  .edit-exam-card:hover .edit-exam-arrow { transform: translateX(6px); color: var(--c-vermilion, #b23a2b); }
  .edit-exam-card .edit-exam-arrow { transition: transform .3s ease, color .3s ease; }
}
.edit-exam-eyebrow {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-vermilion); font-weight: 500;
  margin-bottom: 18px;
}
.edit-exam-name {
  font-family: var(--ff-serif-cn); font-size: 36px; font-weight: 800;
  letter-spacing: -.02em; color: var(--c-ink); margin: 0 0 12px;
}
.edit-exam-spec {
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--c-muted);
  letter-spacing: .04em; margin-bottom: 24px;
}
.edit-exam-arrow {
  font-family: var(--ff-serif-en); font-size: 22px; color: var(--c-vermilion);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  display: inline-block;
}

/* Footer / SEO links */
.edit-footer {
  max-width: 1080px; margin: 80px auto 0; padding: 56px clamp(20px, 5vw, 40px) 40px;
  border-top: 1px solid var(--c-rule);
  font-family: var(--ff-sans-cn);
}
.edit-footer-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}
.edit-footer-h {
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: 12px;
}
.edit-footer-link {
  display: block; font-size: 13.5px; line-height: 2;
  color: var(--c-ink); text-decoration: none;
  transition: color .15s;
}
.edit-footer-link:hover { color: var(--c-vermilion); }
/* P2-10: mobile（≤375px）「答案以考選部公告為準 · ...」擠成兩行 dot 落單
   提高 line-height、加 wrap，spans 各自不被截斷 */
.edit-footer-bottom {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--c-rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px;
  font-family: var(--ff-mono); font-size: 11px; color: var(--c-muted);
  letter-spacing: .04em; line-height: 1.7;
}
.edit-footer-bottom > span { min-width: 0; }