/*
 * 動態精緻化（參考 kittenjam Motion Library，編號為該收藏的效果編號）。
 * 原則：只動 transform / opacity / filter；減少動態時全部停用、直接顯示完成狀態；
 * 懸停效果只給有滑鼠的裝置。JS 在 motion.js、motion-ui.js。
 */

/* ---------- #117 導覽列捲動縮小＋毛玻璃 ---------- */
.topbar {
  transition: background-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}

.topbar__inner {
  transition: min-height var(--t-ui) var(--ease-out);
}

.topbar.is-scrolled {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent); /* taste-skill-ignore：毛玻璃導覽列的底部細線 */
}

.topbar.is-scrolled .topbar__inner {
  min-height: 56px;
}

/* 手機選單打開時維持實心底，選單文字才清楚 */
.topbar.nav[data-open="true"] {
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- #167 選單滑塊跟隨（桌機） ---------- */
.mo-pill {
  display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav__links.has-pill {
    position: relative;
  }

  .nav__links.has-pill > a,
  .nav__links.has-pill > .navdrop {
    position: relative;
    z-index: 1;
  }

  .nav__links.has-pill > a:hover {
    text-decoration: none;
  }

  .mo-pill {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    height: 36px;
    margin-top: -18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: transform 320ms var(--ease-expo), width 320ms var(--ease-expo), opacity 200ms ease;
  }

  .mo-pill.is-on {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---------- #248 下拉選單：選項依序滑入 ---------- */
  @media (min-width: 900px) {
    .js .navdrop[data-open="true"] .navdrop__menu li {
      animation: mo-item-in 360ms var(--ease-out) both;
    }

    .js .navdrop[data-open="true"] .navdrop__menu li:nth-child(2) { animation-delay: 40ms; }
    .js .navdrop[data-open="true"] .navdrop__menu li:nth-child(3) { animation-delay: 80ms; }
    .js .navdrop[data-open="true"] .navdrop__menu li:nth-child(4) { animation-delay: 120ms; }
  }

  /* ---------- #296 首頁標題逐字模糊浮現＋#125 其他元素依閱讀順序浮現 ---------- */
  /* JS 沒有拆字時，2.5 秒後一定會顯示，不會留下空白標題 */
  .js .intro__title {
    opacity: 0;
    animation: mo-show 1ms 2500ms forwards;
  }

  .js .intro__title.is-split {
    opacity: 1;
    animation: none;
  }

  /* 動畫只寫起點、用 backwards 填在延遲期間；播完回到元素本身的樣式（沒有殘留濾鏡） */
  .mo-char {
    display: inline-block;
    animation: mo-char-in 900ms var(--ease-expo) backwards;
    animation-delay: calc(var(--c, 0) * 38ms + 120ms);
  }

  .js .intro .intro__lead,
  .js .intro .intro__actions,
  .js .intro .intro__note,
  .js .intro .hub {
    animation: mo-rise 900ms var(--ease-expo) backwards;
  }

  .js .intro .hub { animation-delay: 300ms; }
  .js .intro .intro__lead { animation-delay: 620ms; }
  .js .intro .intro__actions { animation-delay: 760ms; }
  .js .intro .intro__note { animation-delay: 900ms; }

  /* ---------- #104 各段出場改成「由模糊變清楚」 ---------- */
  .js [data-reveal] {
    filter: blur(6px);
    transition:
      opacity 700ms var(--ease-out),
      transform 900ms var(--ease-expo),
      filter 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger-item));
  }

  .js [data-reveal].is-in {
    filter: none;
  }

  /* ---------- #262 手寫單縮圖：框內微放大 ---------- */
  .mo-thumb img {
    transition: transform 700ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .slipcta:hover .mo-thumb img {
      transform: scale(1.08);
    }
  }

  /* ---------- #205 彈窗：背景模糊變暗、視窗帶彈性浮出 ---------- */
  .svcbox[open],
  .slipbox[open] {
    animation: mo-pop 460ms cubic-bezier(0.2, 1.1, 0.3, 1);
  }

  .svcbox[open]::backdrop,
  .slipbox[open]::backdrop {
    animation: mo-fade 320ms ease-out;
  }

  /* ---------- #151 錯誤欄位左右震動、錯誤訊息滑出 ---------- */
  .mo-shake {
    animation: mo-shake 420ms var(--ease-out);
  }

  .field__error:not([hidden]) {
    animation: mo-drop 260ms var(--ease-out);
  }

  /* ---------- #140 表單整理完成：畫圓、打勾、輕彈 ---------- */
  .form__result:not([hidden]) .mo-check circle {
    stroke-dasharray: 64;
    stroke-dashoffset: 64;
    animation: mo-draw 520ms var(--ease-out) 80ms forwards;
  }

  .form__result:not([hidden]) .mo-check path {
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
    animation: mo-draw 320ms var(--ease-out) 520ms forwards;
  }

  .form__result:not([hidden]) .mo-check {
    animation: mo-tick 360ms cubic-bezier(0.3, 1.6, 0.5, 1) 760ms;
  }

  /* ---------- #130 行動按鈕提示：外圍擴散一圈光暈，只跑一次 ---------- */
  .mo-hint {
    animation: mo-hint 1300ms var(--ease-out) 2;
  }

  /* ---------- 頁尾大字：逐字浮上 ---------- */
  .js .footer__mark .mo-char {
    opacity: 0;
    animation: none;
  }

  .js .footer__mark.is-in .mo-char {
    opacity: 1;
    animation: mo-mark-in 1100ms var(--ease-expo) backwards;
    animation-delay: calc(var(--c, 0) * 70ms);
  }
}

/* ---------- #305 卡片群聚光：游標附近的卡片邊框與內部被照亮 ---------- */
@media (hover: hover) and (pointer: fine) {
  .mo-spot > li > a {
    position: relative;
    isolation: isolate;
  }

  .mo-spot > li > a::before,
  .mo-spot > li > a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
  }

  .mo-spot > li > a::before {
    background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 8%, transparent), transparent 62%);
  }

  .mo-spot > li > a::after {
    z-index: 0;
    padding: 1px;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
    -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);
  }

  .mo-spot:hover > li > a::after {
    opacity: 1;
  }

  .mo-spot > li > a:hover::before {
    opacity: 1;
  }
}

/* ---------- #162 連結底線：滑過時往右收走、再從左長出 ---------- */
.mo-u {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 0.07em;
  padding-bottom: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cap__more.has-u,
.story__more.has-u,
.text-button.has-u {
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cap__link:hover .mo-u,
  .story__link:hover .mo-u,
  .text-button:hover .mo-u,
  a.mo-u:hover {
    animation: mo-underline 620ms var(--ease-out);
  }
}

/* ---------- #237 箭頭接力：舊箭頭往右滑出、新箭頭從左滑入 ---------- */
.mo-arrow {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.3em;
  overflow: hidden;
  vertical-align: -0.14em;
}

.mo-arrow .icon {
  position: absolute;
  inset: 0;
  width: 1em;
  height: 1em;
  transition: transform 420ms var(--ease-expo);
}

.mo-arrow .icon + .icon {
  transform: translateX(-120%);
}

@media (hover: hover) and (pointer: fine) {
  .cap__link:hover .mo-arrow .icon,
  .story__link:hover .mo-arrow .icon {
    transform: translateX(120%);
  }

  .cap__link:hover .mo-arrow .icon + .icon,
  .story__link:hover .mo-arrow .icon + .icon {
    transform: none;
  }
}

/* ---------- #291 對照表十字高亮 ---------- */
.cmp tbody th,
.cmp tbody td,
.cmp thead th {
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}

.cmp tbody tr.mo-row > *,
.cmp tbody .mo-col {
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
}

.cmp tbody tr.mo-row > .mo-col {
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
}

.cmp thead .mo-col {
  color: var(--accent-text);
}

/* ---------- #243 分段控制器：選中的滑塊滑過去 ---------- */
.mo-seg {
  position: relative;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: nowrap;
  gap: 0;
  padding: 4px;
  background: var(--surface);
}

.mo-seg .radio span {
  position: relative;
  z-index: 1;
  min-height: 44px;
  background: transparent;
}

.mo-seg .radio input:checked + span {
  background: transparent;
  color: var(--bg);
}

.mo-seg__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms var(--ease-expo), width 380ms var(--ease-expo), opacity 200ms ease;
}

.mo-seg.has-value .mo-seg__thumb {
  opacity: 1;
}

/* ---------- 打勾圖示 ---------- */
.form__result-title.has-check {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mo-check {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 頁尾大字拆字後維持原本排版 ---------- */
.footer__mark .mo-char {
  display: inline-block;
}

/* ---------- 毛玻璃背景（彈窗） ---------- */
.svcbox::backdrop,
.slipbox::backdrop {
  background: rgb(0 0 0 / 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}

.mo-thumb {
  display: block;
  width: fit-content;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}

/* ---------- 共用關鍵影格 ---------- */
@keyframes mo-show {
  to { opacity: 1; }
}

@keyframes mo-item-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes mo-char-in {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.18em) scale(1.08);
  }
}

@keyframes mo-mark-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(40%);
  }
}

@keyframes mo-rise {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(14px);
  }
}

@keyframes mo-pop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
}

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

@keyframes mo-shake {
  0%, 100% { transform: none; }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

@keyframes mo-drop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

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

@keyframes mo-tick {
  50% { transform: scale(1.18); }
}

@keyframes mo-hint {
  from {
    outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    outline-offset: 0;
  }
  to {
    outline: 2px solid transparent;
    outline-offset: 14px;
  }
}

@keyframes mo-underline {
  0% { background-position: 100% 100%; background-size: 100% 0.07em; }
  45% { background-position: 100% 100%; background-size: 0 0.07em; }
  46% { background-position: 0 100%; background-size: 0 0.07em; }
  100% { background-position: 0 100%; background-size: 100% 0.07em; }
}