/* 設計 token：僅網頁配色，非機關官方 CIS 色票（v2 規格 §3）。 */
:root {
  --canvas: #f3f6f4;
  --card: #ffffff;
  --paper: #fffefb;
  --ink: #192d26;
  --ink-2: #33463e;
  --muted: #5d6e65;
  --primary: #285f44;
  --primary-ink: #ffffff;
  --accent: #a67a43;
  --line: #dbe5df;
  --line-soft: #e8eee9;
  --focus: #1d5fa8;

  --shadow-motion: 0 12px 36px rgba(22, 48, 36, 0.1);

  /* 8pt spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 40px;
  --s8: 48px;
  --s9: 56px;

  --font-sans: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
  /* 明體只用於 Classic 姓名。iPhone 不保證內建明體，所以自帶只含姓名用字的子集字型
     （Noto Serif TC SemiBold，SIL OFL 1.1；見 scripts/make-name-font.py）。
     字型載入失敗時依序退回系統明體，最後退回全站黑體；中文字為 1em 等寬字身、
     固定行高與 em 字距，任何退回情況下版面尺寸都不變。 */
  --font-ming: "Card Name Ming", "Songti TC", "Noto Serif TC", "Noto Serif CJK TC", "PMingLiU", "MingLiU", var(--font-sans);
  --font-latin: "Helvetica Neue", "Segoe UI", Arial, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@font-face {
  font-family: "Card Name Ming";
  src: url("../assets/fonts/card-name-ming.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@property --edge-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 200deg;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-width: 320px;
  /* 底色只放在 html：body 若有底色會蓋住 z-index:-1 的 Motion 背景層 */
  background: transparent;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}

p,
h1,
h2,
ul {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.nowrap {
  white-space: nowrap;
}

/* 共用版面：手機優先單欄；≥960px 為 5:3 橫式名片＋下方工具列（D4 方案 A）。 */

.page {
  position: relative;
  min-height: 100svh;
  max-width: 560px;
  margin: 0 auto;
  padding: max(var(--s3), env(safe-area-inset-top)) var(--s4) max(var(--s5), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}

.stage {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* ---- 名片 ---- */

.card {
  --card-pad-x: var(--s5);
  --card-pad-b: var(--s2);
  position: relative;
  padding: var(--s5) var(--card-pad-x) var(--card-pad-b);
}

.card__agency {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s3);
  padding-bottom: var(--s5);
}

.card__logo {
  width: 56px;
  height: auto;
  display: block;
}

.card__agency-zh {
  font-size: clamp(17px, 5.2vw, 22px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.card__agency-en {
  margin-top: 2px;
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--muted);
}

.card__brandline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}

.card__identity {
  padding: var(--s6) 0 var(--s5);
}

.card__role {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

.card__role-sep {
  width: 1px;
  height: 14px;
  background: currentColor;
  opacity: 0.4;
}

.card__name {
  margin-top: var(--s2);
  /* 補償最後一字後方的字距，讓名字視覺上對齊 */
  margin-right: -0.2em;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: 0.2em;
  font-weight: 600;
}

/* ---- 聯絡資訊 ---- */

.contacts {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s1);
  border-bottom: 1px solid var(--line-soft);
}

.contact:last-child {
  border-bottom: 0;
}

.contact__link {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon hint";
  align-items: center;
  column-gap: var(--s3);
  min-height: 64px;
  padding: var(--s3) 0;
  text-decoration: none;
  -webkit-user-drag: none;
  user-select: text;
  -webkit-user-select: text;
}

.contact__icon {
  grid-area: icon;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--primary);
}

.contact__label {
  grid-area: label;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.contact__value {
  grid-area: value;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  /* 只在 <wbr> 或空白處換行；Email 的換行點在 @ 之後 */
  overflow-wrap: break-word;
}

.contact__value--num {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.contact__hint {
  grid-area: hint;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  margin-top: 2px;
  font-size: 13px;
  color: var(--primary);
}

.contact__hint .icon {
  width: 14px;
  height: 14px;
}

/* ---- 工具列 ---- */

.actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 68px;
  min-width: 44px;
  padding: var(--s2) var(--s1);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

/* ---- 頁尾 ---- */

.footer {
  margin-top: auto;
  padding-top: var(--s2);
  display: grid;
  gap: var(--s2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.footer__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.footer__link .icon {
  width: 14px;
  height: 14px;
}

.footer__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 小螢幕（<360px）：收窄留白與圖示，讓 Email 完整一行 ---- */

@media (max-width: 359px) {
  .page {
    padding-left: var(--s3);
    padding-right: var(--s3);
  }

  .card {
    --card-pad-x: var(--s4);
  }

  .contact__link {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 10px;
  }

  .contact__icon {
    width: 32px;
    height: 32px;
  }

  .contact__icon .icon {
    width: 18px;
    height: 18px;
  }

  .contact__value {
    font-size: 15px;
  }
}

/* ---- 桌面：5:3 橫式名片 ---- */

@media (min-width: 960px) {
  .page {
    max-width: 1040px;
    padding: var(--s6) var(--s7) var(--s7);
    gap: var(--s5);
  }

  .stage {
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--s5);
  }

  .card {
    --card-pad-x: var(--s9);
    --card-pad-b: var(--s6);
    width: min(100%, 920px);
    aspect-ratio: 5 / 3;
    padding: var(--s7) var(--card-pad-x) var(--card-pad-b);
    display: flex;
    flex-direction: column;
  }

  .card__agency {
    gap: var(--s4);
    padding-bottom: var(--s5);
  }

  .card__logo {
    width: 76px;
  }

  .card__agency-zh {
    font-size: 28px;
    letter-spacing: 0.12em;
  }

  .card__agency-en {
    font-size: 15px;
  }

  /* 桌面主內容：同一個格線內的左右雙欄，兩欄在同一區域內垂直置中。
     Classic 與 Motion 共用這組幾何，切換模式時姓名與聯絡資訊位置不變。 */
  .card__body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    align-items: center;
    gap: var(--s9);
    padding-top: var(--s5);
  }

  .card__identity {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
  }

  .card__role {
    font-size: 18px;
  }

  .card__name {
    margin-top: 16px;
    font-size: 72px;
    line-height: 1.2;
  }

  .card__contacts {
    align-self: center;
  }

  .contacts {
    border-top: 0;
  }

  .contact {
    border-bottom: 0;
  }

  .contact__link {
    grid-template-columns: 32px 5.5em minmax(0, 1fr);
    grid-template-areas:
      "icon label value"
      ". . hint";
    min-height: 44px;
    padding: 6px 0;
    column-gap: var(--s3);
  }

  .contact__icon {
    width: 32px;
    height: 32px;
  }

  .contact__icon .icon {
    width: 18px;
    height: 18px;
  }

  .contact__label {
    font-size: 14px;
  }

  .contact__value {
    font-size: 16px;
  }

  /* 兩種模式的工具列列高相同（Motion dock 含內距與框線為 66px），
     名片在頁面中的垂直位置因此不隨模式切換而移動 */
  .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s3);
    min-height: 66px;
  }

  .action {
    flex-direction: row;
    gap: var(--s2);
    min-height: 48px;
    padding: 0 var(--s5);
    font-size: 15px;
  }

  .footer {
    justify-items: center;
    text-align: center;
  }

  .footer__link {
    justify-self: center;
  }
}

/* ---- 候選預覽標示（只出現在預覽版） ---- */

.preview-badge {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px var(--s2);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.preview-badge strong {
  font-weight: 600;
  color: var(--accent-ink, #6b4a1f);
  letter-spacing: 0.08em;
}

/* ---- 模式切換：低視覺權重。按鈕本身維持 44px 可點範圍，只有內層膠囊有底色 ---- */

.mode-switch {
  margin-left: auto;
  display: inline-flex;
  gap: 0;
}

.mode-switch__option {
  min-height: 44px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.mode-switch__pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mode-switch__en {
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.mode-switch__option:hover .mode-switch__pill {
  color: var(--ink);
}

.mode-switch__option[aria-pressed="true"] .mode-switch__pill {
  background: var(--card);
  border-color: var(--line);
  color: var(--primary);
  font-weight: 500;
}

.mode-switch__option:focus-visible {
  outline: none;
}

.mode-switch__option:focus-visible .mode-switch__pill {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* 手機只顯示中文模式名稱，進一步降低視覺權重 */
@media (max-width: 559px) {
  .mode-switch__en {
    display: none;
  }
}

/* ---- 聯絡列的複製鈕 ---- */

.contact__copy {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.contact__copy:hover {
  background: rgba(40, 95, 68, 0.07);
  color: var(--primary);
}

.contact__copy:active {
  transform: scale(0.94);
}

.contact__copy-done,
.action__icon-done {
  display: none;
}

.is-done .contact__copy-idle,
.is-done .action__icon-idle {
  display: none;
}

.is-done .contact__copy-done,
.is-done .action__icon-done {
  display: block;
  color: var(--primary);
}

/* ---- 工具列按鈕 ---- */

.action {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  transition: background-color 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease;
}

.action__icon {
  display: grid;
  place-items: center;
  color: var(--primary);
}

.action:hover {
  background: #f6f9f7;
  border-color: #c9d6ce;
}

.action:active {
  transform: scale(0.97);
}

.action--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.action--primary .action__icon {
  color: inherit;
}

.action--primary:hover {
  background: #1f4c36;
  border-color: #1f4c36;
}

/* ---- QR 對話框 ---- */

.qr-dialog {
  width: min(calc(100vw - 32px), 400px);
  max-height: calc(100svh - 32px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(17, 28, 23, 0.28);
  overscroll-behavior: contain;
}

.qr-dialog::backdrop {
  background: rgba(17, 28, 23, 0.48);
}

.qr-dialog__panel {
  padding: var(--s4) var(--s5) var(--s5);
}

.qr-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s3);
}

.qr-dialog__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.qr-dialog__close {
  width: 44px;
  height: 44px;
  margin-right: -10px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
}

.qr-dialog__close:hover {
  background: #f1f5f2;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  gap: 2px;
  border-radius: 10px;
  background: #eef3f0;
}

.tabs__tab {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.tabs__tab:hover:not([aria-selected="true"]) {
  color: var(--ink);
}

.tabs__tab[aria-selected="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(22, 48, 36, 0.12);
}

.tabs__panel {
  padding-top: var(--s4);
  text-align: center;
}

.tabs__panel:focus-visible {
  outline-offset: 4px;
  border-radius: 8px;
}

.qr-frame {
  width: min(100%, 264px);
  margin: 0 auto;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.qr-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qr-caption {
  margin-top: var(--s3);
  font-size: 15px;
  color: var(--ink);
}

.qr-status {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: 8px;
  background: #fbf5ea;
  color: #5c3f12;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.qr-url {
  margin-top: var(--s2);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.qr-note {
  margin-top: var(--s2);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}

.qr-dialog[open] .qr-dialog__panel {
  animation: dialog-in 200ms var(--ease-out);
}

.qr-dialog.is-closing .qr-dialog__panel {
  animation: dialog-out 160ms ease-in forwards;
}

@keyframes dialog-in {
  from {
    opacity: 0;
  }
}

@keyframes dialog-out {
  to {
    opacity: 0;
  }
}

/* ---- 操作提示 ---- */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--s5), calc(env(safe-area-inset-bottom) + var(--s4)));
  z-index: 20;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: var(--s3) var(--s4);
  border-radius: 10px;
  background: #18271f;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  box-shadow: 0 10px 30px rgba(17, 28, 23, 0.25);
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms var(--ease-out);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 需要使用者手動複製的失敗訊息：可點選、可選取文字 */
.toast.is-manual {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

.clipboard-proxy {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* ===== Classic／正式典雅：實體名片的數位化 =====
   暖白紙張、明體姓名、等寬分散對齊的欄位標題（「電　話」）、極淡的紙張陰影。
   動態只有 hover、focus 與操作回饋。 */

[data-mode="classic"] .ambient {
  display: none;
}

[data-mode="classic"] .card {
  background: var(--paper);
  border: 1px solid #e2e8e3;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgba(25, 45, 38, 0.05),
    0 14px 32px -20px rgba(25, 45, 38, 0.22);
}

[data-mode="classic"] .card__edge {
  display: none;
}

[data-mode="classic"] .card__name {
  font-family: var(--font-ming);
  font-weight: 600;
}

[data-mode="classic"] .contact__link:hover .contact__value {
  text-decoration: underline;
  text-decoration-color: rgba(40, 95, 68, 0.45);
  text-underline-offset: 4px;
}

[data-mode="classic"] .contact__icon {
  border: 1px solid var(--line);
}

/* 桌面：版面幾何與 Motion 相同（見 layout.css 雙欄格線），這裡只處理紙本名片的視覺細節：
   主色短線、欄位標題分散對齊成 4 字寬、虛線分隔、明體姓名 */
@media (min-width: 960px) {
  [data-mode="classic"] .card__brandline {
    background: linear-gradient(90deg, var(--primary) 0 72px, var(--line) 72px);
  }

  [data-mode="classic"] .contact__label {
    width: 4em;
    text-align: justify;
    text-align-last: justify;
    letter-spacing: 0;
    color: var(--muted);
  }

  [data-mode="classic"] .contact + .contact {
    border-top: 1px dotted #d3ddd6;
  }

  [data-mode="classic"] .card__name {
    letter-spacing: 0.22em;
    margin-right: -0.22em;
  }
}

/* ===== Motion／精緻動態：被光、細線與節奏喚醒的數位名片 =====
   Logo 永遠靜態；動態只作用於卡片容器、識別細線、資訊區塊、背景光層與工具圖示。
   只動 transform／opacity（邊光角度除外，僅進場播放一次）。 */

/* ---- 背景：兩道極淡柔光＋鈔券式扭索紋細線 ---- */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.ambient__light {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  will-change: transform;
}

.ambient__light--a {
  top: -38vmax;
  left: -30vmax;
  background: radial-gradient(closest-side, rgba(40, 95, 68, 0.11), rgba(40, 95, 68, 0) 72%);
  animation: drift-a 18s ease-in-out infinite alternate;
}

.ambient__light--b {
  right: -36vmax;
  bottom: -44vmax;
  background: radial-gradient(closest-side, rgba(166, 122, 67, 0.1), rgba(166, 122, 67, 0) 72%);
  animation: drift-b 22s ease-in-out infinite alternate;
}

.ambient__engraving {
  position: absolute;
  top: -300px;
  right: -360px;
  width: 1000px;
  height: 1000px;
  background: url("../assets/patterns/guilloche.svg") center / contain no-repeat;
  opacity: 0.09;
  -webkit-mask-image: radial-gradient(circle at center, #000 38%, transparent 68%);
  mask-image: radial-gradient(circle at center, #000 38%, transparent 68%);
}

@keyframes drift-a {
  to {
    transform: translate3d(6vmax, 4vmax, 0);
  }
}

@keyframes drift-b {
  to {
    transform: translate3d(-5vmax, -3vmax, 0);
  }
}

/* ---- 卡片：優雅投影、邊界細光、微幅懸浮 ---- */

[data-mode="motion"] .card {
  isolation: isolate; /* 讓身分面板背景層（z-index:-1）留在卡片之內 */
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff 0%, #fcfdfc 55%, #f5f8f6 100%);
  border: 1px solid rgba(40, 95, 68, 0.1);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 6px rgba(22, 48, 36, 0.05),
    var(--shadow-motion);
  transform: perspective(1400px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
  transition:
    transform 240ms var(--ease-out),
    box-shadow 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
  [data-mode="motion"] .card:hover {
    --lift: -3px;
    box-shadow:
      inset 0 1px 0 #ffffff,
      0 4px 10px rgba(22, 48, 36, 0.06),
      0 22px 56px rgba(22, 48, 36, 0.14);
  }

  [data-mode="motion"] .card:hover .card__edge {
    opacity: 0.85;
  }
}

.card__edge {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(
    from var(--edge-angle),
    transparent 0deg 240deg,
    rgba(166, 122, 67, 0.5) 290deg,
    rgba(255, 255, 255, 0.95) 315deg,
    rgba(40, 95, 68, 0.45) 340deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  opacity: 0.5;
  transition: opacity 260ms ease;
}

/* ---- 識別細線：從 Logo 下緣如筆觸般延展（Logo 本身不動） ---- */

[data-mode="motion"] .card__brandline {
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 38%, rgba(166, 122, 67, 0) 85%);
}

/* ---- 身分面板：從卡片左緣與下緣滿版延伸的淡色區塊，Motion 的結構性標誌 ---- */

[data-mode="motion"] .card__identity {
  margin: 0 calc(-1 * var(--card-pad-x));
  padding: var(--s6) var(--card-pad-x) var(--s5);
  background: linear-gradient(135deg, rgba(40, 95, 68, 0.06) 0%, rgba(40, 95, 68, 0.025) 55%, rgba(166, 122, 67, 0.045) 100%);
}

/* ---- 文字層次 ---- */

[data-mode="motion"] .card__role {
  color: var(--ink-2);
}

[data-mode="motion"] .card__title {
  color: var(--primary);
  font-weight: 500;
}

/* 手機姓名用 Medium（500）：仍是視覺焦點，但比 Semibold 輕，筆畫更清爽 */
[data-mode="motion"] .card__name {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.16em;
  margin-right: -0.16em;
}

[data-mode="motion"] .contact__icon {
  border: 1px solid rgba(40, 95, 68, 0.18);
  background: #fff;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 200ms var(--ease-out);
}

[data-mode="motion"] .contact__link:hover .contact__icon {
  background: rgba(40, 95, 68, 0.08);
  border-color: var(--primary);
  transform: translateY(-1px);
}

[data-mode="motion"] .contact__value {
  font-weight: 500;
}

/* ---- 工具列：dock 外觀，但留在文件流中（緊接名片之後），不浮在內容上方 ---- */

[data-mode="motion"] .actions {
  padding: 6px;
  gap: 4px;
  border: 1px solid rgba(40, 95, 68, 0.1);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(22, 48, 36, 0.12);
}

[data-mode="motion"] .action {
  border: 0;
  border-radius: 13px;
  background: transparent;
  transition:
    background-color 180ms ease,
    transform 140ms var(--ease-out);
}

[data-mode="motion"] .action:hover {
  background: rgba(40, 95, 68, 0.06);
}

[data-mode="motion"] .action:active {
  transform: scale(0.95);
}

[data-mode="motion"] .action .action__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transition: transform 200ms var(--ease-out);
}

[data-mode="motion"] .action:hover .action__icon {
  transform: translateY(-1px);
}

[data-mode="motion"] .action--primary {
  color: var(--ink);
}

[data-mode="motion"] .action--primary .action__icon {
  background: var(--primary);
  color: var(--primary-ink);
}

[data-mode="motion"] .action--primary:hover {
  background: rgba(40, 95, 68, 0.06);
}

/* 圖示勾選線條描繪（複製成功） */
[data-mode="motion"] .is-done .icon-check {
  stroke-dasharray: 22;
  animation: draw 240ms var(--ease-out) both;
}

@keyframes draw {
  from {
    stroke-dashoffset: 22;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ---- QR 對話框 ---- */

[data-mode="motion"] .qr-dialog {
  border-radius: 20px;
}

[data-mode="motion"] .qr-dialog[open] .qr-dialog__panel {
  animation: dialog-in-motion 240ms var(--ease-out);
}

@keyframes dialog-in-motion {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
}

/* ---- 桌面 ---- */

@media (min-width: 960px) {
  [data-mode="motion"] .card__name {
    font-size: 72px;
    letter-spacing: 0.12em;
    margin-right: -0.12em;
  }

  /* 身分面板改為獨立背景層：不改變版面幾何，與 Classic 的姓名、聯絡資訊位置完全相同。
     面板延伸到卡片左緣、下緣與識別線下方，右緣停在兩欄間距的中線並淡出 */
  [data-mode="motion"] .card__identity {
    margin: 0;
    padding: 0;
    background: none;
  }

  [data-mode="motion"] .card__identity::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-1 * var(--s5));
    bottom: calc(-1 * var(--card-pad-b));
    left: calc(-1 * var(--card-pad-x));
    right: calc(var(--s9) / -2);
    border-bottom-left-radius: 17px;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.55) 100%),
      linear-gradient(160deg, rgba(40, 95, 68, 0.065) 0%, rgba(40, 95, 68, 0.03) 50%, rgba(166, 122, 67, 0.05) 100%);
  }

  [data-mode="motion"] .actions {
    display: inline-flex;
    align-self: center;
  }

  [data-mode="motion"] .action {
    padding: 0 var(--s5) 0 var(--s3);
    min-height: 52px;
  }
}

@media (max-width: 559px) {
  .ambient__engraving {
    top: -330px;
    right: -560px;
    width: 820px;
    height: 820px;
  }
}

/* ---- 進場（只在一開始就是 Motion 時播放一次；總長約 1.3 秒） ---- */

[data-intro] .card {
  animation: card-in 650ms var(--ease-out) both;
}

[data-intro] .card__edge {
  animation: edge-sweep 1100ms var(--ease-out) 250ms both;
}

[data-intro] .card__agency-names {
  animation: rise 520ms var(--ease-out) 150ms both;
}

[data-intro] .card__brandline {
  animation: line-in 900ms var(--ease-in-out) 250ms both;
}

[data-intro] .card__role {
  animation: rise 600ms var(--ease-out) 300ms both;
}

[data-intro] .card__name {
  animation: rise 600ms var(--ease-out) 440ms both;
}

[data-intro] .contact:nth-child(1) {
  animation: rise 450ms var(--ease-out) 600ms both;
}

[data-intro] .contact:nth-child(2) {
  animation: rise 450ms var(--ease-out) 700ms both;
}

[data-intro] .contact:nth-child(3) {
  animation: rise 450ms var(--ease-out) 800ms both;
}

[data-intro] .actions {
  animation: rise 450ms var(--ease-out) 850ms both;
}

[data-intro] .ambient {
  animation: fade 900ms ease both;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes line-in {
  from {
    transform: scaleX(0);
  }
}

@keyframes edge-sweep {
  from {
    --edge-angle: 0deg;
    opacity: 0;
  }
  30% {
    opacity: 0.9;
  }
  to {
    --edge-angle: 360deg;
    opacity: 0.5;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 減少動態：關閉 Motion 的所有動畫與傾斜，但保留 Motion 的靜態視覺，不強制切回 Classic */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }

  .ambient__light {
    animation: none !important;
  }

  [data-mode="motion"] .card {
    transform: none;
  }
}

/* Windows 高對比模式 */
@media (forced-colors: active) {
  .card,
  .action,
  .mode-switch,
  .qr-dialog {
    border: 1px solid CanvasText;
  }

  .mode-switch__option[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }

  .ambient,
  .card__edge {
    display: none;
  }
}