/* Finesse 交互层（全部 50 套模板共用，最后加载）
   原则：一次编排好的首屏入场 + 回应操作的精致反馈；所有颜色取自模板自身变量，
   因此同一套机制在每个模板上呈现各自的色彩性格。无 JS 或减少动态效果时，页面保持原状。 */
:root{
  --fx-ease:cubic-bezier(.16,1,.3,1);
  --fx-ease-io:cubic-bezier(.65,0,.35,1);
  --fx-tint:color-mix(in srgb,var(--accent,#555) 16%,transparent);
}

/* ── 阅读进度：页面顶端一条随滚动延展的强调色细线 ── */
.fx-progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:200;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent,#555) 55%,transparent),var(--accent,#555));opacity:0;transition:opacity .4s var(--fx-ease)}
.fx-progress.is-on{opacity:1}

/* ── 智能页眉：吸顶后转为毛玻璃，向下滚动时收起，向上滚动时滑回 ── */
.site-header.fx-glass,.site-header.fx-pinned{
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  background:color-mix(in srgb,var(--fx-glass,var(--bg,#fff)) 84%,transparent) !important;
  box-shadow:0 1px 0 color-mix(in srgb,var(--text,#111) 9%,transparent),0 22px 44px -30px color-mix(in srgb,var(--text,#111) 45%,transparent);
}
.site-header.fx-sticky{transition:translate .55s var(--fx-ease),background-color .4s,box-shadow .4s}
.site-header.fx-sticky.fx-tuck{translate:0 calc(-100% - 24px)}
.site-header.fx-pinned{position:fixed !important;top:0;left:0;right:0;z-index:150;translate:0 0;transition:translate .55s var(--fx-ease)}
.site-header.fx-pinned.fx-enter{animation:fx-header-in .6s var(--fx-ease) both}
.site-header.fx-pinned.fx-tuck{translate:0 calc(-100% - 24px)}
.site-header.menu-open.fx-tuck{translate:0 0}
@keyframes fx-header-in{from{translate:0 -100%}to{translate:0 0}}

/* ── 导航：悬停时一枚柔和的色块在链接间滑动 ── */
.fx-nav{isolation:isolate}
.fx-ink{position:absolute;left:0;top:0;z-index:-1;height:0;width:0;border-radius:999px;pointer-events:none;
  background:var(--fx-tint);opacity:0;transition:opacity .3s var(--fx-ease),transform .5s var(--fx-ease),width .5s var(--fx-ease),height .5s var(--fx-ease)}
.fx-nav.is-hover .fx-ink{opacity:1}

/* ── 按钮：磁吸位移 + 随光标流动的高光 + 按压回弹（位移由脚本写入 translate，不与模板 transform 冲突） ── */
.fx-btn{isolation:isolate}
.fx-shine{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(140px circle at var(--fx-x,50%) var(--fx-y,50%),color-mix(in srgb,currentColor 26%,transparent),transparent 72%);
  transition:opacity .35s var(--fx-ease)}
.fx-btn:hover>.fx-shine,.fx-btn:focus-visible>.fx-shine{opacity:1}
.fx-btn :is(svg,.arrow,[class*=arrow]){transition:translate .45s var(--fx-ease)}
.fx-btn:hover :is(svg,.arrow,[class*=arrow]){translate:3px 0}

/* ── 正文链接：下划线从左侧描出，离开时向右收起 ── */
main :is(p,li,dd) a:not([class]),.site-footer .footer-links a{
  text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 100% 100%/0 1px;
  transition:background-size .5s var(--fx-ease),color .3s}
main :is(p,li,dd) a:not([class]){background-size:100% 1px;background-position:0 100%}
main :is(p,li,dd) a:not([class]):hover{animation:fx-underline .7s var(--fx-ease)}
.site-footer .footer-links a:hover{background-size:100% 1px;background-position:0 100%}
@keyframes fx-underline{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}

/* ── 首屏标题逐词揭示（脚本临时包裹，动画结束后恢复原始文本节点） ── */
.fx-w{display:inline-block;vertical-align:top;overflow:clip;overflow-clip-margin:.06em;padding:0 .04em .14em 0;margin:0 -.04em -.14em 0}
.fx-wi{display:inline-block;will-change:transform}
.fx-split-line .fx-w{overflow:visible}
.fx-wipe-bar{position:absolute;inset:-.04em -.02em;background:var(--accent,#555);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;z-index:2}

/* ── 滚动揭示的预备态：仅在脚本确认可以播放动效时使用 ── */
.fx-on .fx-pre{opacity:0}

/* ── 折叠面板：原生 details 展开/收起时高度平滑过渡（支持的浏览器） ── */
@supports (interpolate-size:allow-keywords){
  body:not(.page-privacy):not(.page-terms){interpolate-size:allow-keywords}
  body:not(.page-privacy):not(.page-terms) main details::details-content{block-size:0;overflow:clip;opacity:0;
    transition:block-size .55s var(--fx-ease),opacity .4s var(--fx-ease),content-visibility .55s allow-discrete}
  body:not(.page-privacy):not(.page-terms) main details[open]::details-content{block-size:auto;opacity:1}
}
main summary{transition:color .3s}
main summary:hover{color:var(--accent)}

/* ── 表单：聚焦时以模板强调色描出柔和光晕 ── */
.contact-form :is(input:not([type=checkbox]):not([type=radio]),textarea,select){transition:border-color .3s,box-shadow .35s var(--fx-ease),background-color .3s}
.contact-form :is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--fx-tint)}
.contact-form input[type=checkbox]{accent-color:var(--accent)}

/* ── 选区与暂停按钮细节 ── */
::selection{background:color-mix(in srgb,var(--accent,#555) 30%,transparent)}
.motion-control{transition:translate .45s var(--fx-ease),opacity .3s,box-shadow .3s}
.motion-control:hover{translate:0 -2px}

/* ── 页面转场：页眉保持不动，旧页面轻微后退淡出，新页面从下方浮起 ── */
@media (prefers-reduced-motion:no-preference){
  .site-header{view-transition-name:fx-header}
  ::view-transition-old(root){animation:fx-page-out .32s var(--fx-ease-io) both}
  ::view-transition-new(root){animation:fx-page-in .7s var(--fx-ease) .08s both}
  ::view-transition-group(fx-header){animation-duration:.5s;animation-timing-function:var(--fx-ease)}
}
@keyframes fx-page-out{to{opacity:0;transform:scale(.985);filter:blur(4px)}}
@keyframes fx-page-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* 减少动态效果或手动暂停：取消全部 Finesse 位移与转场 */
@media (prefers-reduced-motion:reduce){
  .fx-ink,.fx-shine,.site-header.fx-sticky,.site-header.fx-pinned{transition:none}
  .site-header.fx-pinned.fx-enter{animation:none}
  .fx-btn :is(svg,.arrow,[class*=arrow]){transition:none;translate:none !important}
  main details::details-content{transition:none !important}
}
.motion-paused .fx-btn :is(svg,.arrow,[class*=arrow]){translate:none !important}
@media print{.fx-progress,.fx-ink,.fx-shine{display:none}.fx-on .fx-pre{opacity:1}}