/* 移动保持浏览器原生滚动；变量只调整锚点留白，不改变文档布局。 */
html { scroll-padding-top: calc(var(--scroll-header-height, var(--header-height)) + 24px); }
.brand-compact { display: none; }
.scroll-top {
  position: fixed; z-index: 30; right: 32px; bottom: 30px;
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; background: var(--paper); color: var(--ink);
  box-shadow: 0 8px 22px #081c3029;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
  transition: opacity 180ms ease, transform 300ms cubic-bezier(.16, 1, .3, 1), visibility 180ms;
}
.scroll-top[data-visible="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.scroll-top[data-surface="footer"] { --paper: #f4e8cd; --ink: #07366d; --blue: #173caf; }
.scroll-top svg { width: 56px; height: 56px; }
.scroll-top-track { stroke: currentColor; stroke-width: 1; opacity: .2; }
.scroll-top-progress { stroke: var(--blue); stroke-width: 1.5; transform-origin: 28px 28px; transform: rotate(-90deg); }
.scroll-top-arrow { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.scroll-top:hover .scroll-top-arrow { transform: translateY(-2px); }
.scroll-top-label {
  position: absolute; right: calc(100% + 12px); padding: 8px 12px;
  color: var(--ink); background: var(--paper); font-size: var(--type-caption); line-height: 1.5;
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.scroll-top:is(:hover, :focus-visible) .scroll-top-label { opacity: 1; }
.scroll-top:focus-visible { outline-color: var(--blue); }

.motion-reveal { transition: opacity 650ms ease, transform 750ms cubic-bezier(.16, 1, .3, 1), clip-path 750ms cubic-bezier(.16, 1, .3, 1); }
.motion-reveal.motion-direct { transition: none; }
.contact-inner.motion-pending { opacity: 0; }

@media (max-width: 460px) {
  .scroll-top { width: 52px; height: 52px; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .scroll-top svg { width: 52px; height: 52px; }
  /* 默认保持 116px 占位；字体放大时由内容撑高，收起仍只改变画面、不推动正文。 */
  .site-header {
    --nav-duration: 360ms; --nav-fade-duration: 160ms;
    --nav-ease: cubic-bezier(.16, 1, .3, 1);
    --nav-gutter: 24px; --nav-control-gap: 8px;
    --nav-logo-scale: .74074074; --nav-compact-logo: 80px;
    pointer-events: none; background: transparent; border-bottom-color: transparent;
  }
  .site-header :is(a, button, .mobile-nav) { pointer-events: auto; }
  .site-header::before, .site-header::after {
    content: ''; position: absolute; left: 0; right: 0; pointer-events: none;
  }
  .site-header::before {
    top: 0; height: 100%; background: var(--paper); transform-origin: top; pointer-events: auto;
    transition: transform var(--nav-duration) var(--nav-ease),
      background-color var(--theme-duration, 650ms) ease-in-out;
  }
  .site-header::after {
    top: calc(100% - 1px); height: 1px; background: var(--line);
    transition: transform var(--nav-duration) var(--nav-ease),
      background-color var(--theme-duration, 650ms) ease-in-out;
  }
  .site-header .header-inner { display: grid; position: relative; align-content: start; gap: 6px; padding-block: 10px 11px; }
  .site-header .brand {
    position: relative; min-height: 44px; justify-self: stretch;
    transition: transform var(--nav-duration) var(--nav-ease);
  }
  .site-header .brand-logo {
    pointer-events: none; transform-origin: left center;
    transition: transform var(--nav-duration) var(--nav-ease);
  }
  .site-header .brand-text {
    flex: 1 1 auto; opacity: 1; visibility: visible;
    transition: opacity var(--nav-fade-duration) ease, transform var(--nav-duration) var(--nav-ease),
      visibility 0s;
  }
  .site-header .header-actions {
    position: relative; min-height: 44px;
    width: 100%; gap: var(--nav-control-gap); container-type: inline-size;
    transition: transform var(--nav-duration) var(--nav-ease);
  }
  html .site-header .language-link { transition: transform var(--nav-duration) var(--nav-ease), color var(--theme-duration, 650ms) ease-in-out; }
  .site-header[data-compact="true"]::before { transform: scaleY(.586206897); }
  .site-header[data-compact="true"]::after { transform: translateY(-48px); }
  .site-header[data-compact="true"] .brand { transform: translateY(2px); pointer-events: none; }
  .site-header[data-compact="true"] .brand-logo { transform: scale(var(--nav-logo-scale)); pointer-events: auto; }
  .site-header[data-compact="true"] .brand-text {
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition-delay: 0s, 0s, var(--nav-fade-duration);
  }
  .site-header[data-compact="true"] .header-actions { transform: translateY(-48px); }
  /* 按实际容器宽度移动，排除占位滚动条；百分比扣除中英文入口自身宽度。 */
  .site-header[data-compact="true"] .language-link {
    transform: translateX(calc(100cqi - 132px - var(--nav-control-gap) * 2 - 100%));
  }
  @supports not (container-type: inline-size) {
    /* 旧浏览器保留纵向收起和完整控件，横向位置直接切换。 */
    .site-header[data-compact="true"] .header-actions { width: calc(100% - var(--nav-compact-logo) - 8px); justify-self: end; }
    .site-header[data-compact="true"] .language-link { transform: none; }
  }
}
@media (max-width: 360px) {
  .site-header { --nav-gutter: 16px; --nav-control-gap: 4px; --nav-logo-scale: .72; --nav-compact-logo: 72px; }
}
.motion-paused .site-header { --nav-duration: 0s; --nav-fade-duration: 0s; }
.motion-paused .motion-reveal { transition: none; }
.motion-paused .motion-pending { opacity: 1; transform: none; clip-path: none; }
.motion-paused .scroll-top { transition: none; transform: none; }
.motion-paused .scroll-top-arrow { transition: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion-reveal { transition: none; }
  .motion-pending { opacity: 1; transform: none; clip-path: none; }
  .scroll-top { transition: none; transform: none; }
  .scroll-top-arrow { transition: none; transform: none; }
}