/* ============================================================================
   COMPONENT: CHAPTER-GATED FOOTER（章节门槛式页脚）
   职责：提供“正文结束 → 再次确认 → 页脚进入”的全站统一收束体验。
   逻辑：scroll-intent.js 归一手势，footer-gate.js 只消费页尾状态；原生滚动不被接管。
   依赖：design-tokens.css 的 --footer-*、字号、间距与颜色令牌。
   ============================================================================ */

/* 页脚门槛依赖明确的滚动边界；抑制 Safari 根滚动区的橡皮筋越界，
   但不改变页面内部的原生滚动、速度或惯性。 */
html:has(.site-footer-gate),
html:has(.site-footer-gate) body {
  overscroll-behavior-y: none;
}

/* 正文不再预留透明 margin；页脚由 gate 作为真实文档内容管理。 */
.site-main {
  background-color: var(--color-bg-body);
  margin-bottom: 0;
  transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.site-footer-gate {
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg-body);
  color: var(--color-text-main);
  transition: background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 真实的 1px 边界用于 IntersectionObserver，不承载任何可见说明。 */
.site-footer-gate__sentinel {
  width: 100%;
  height: 1px;
  pointer-events: none;
}

/* 门槛没有可见说明。辅助技术仍可发现按钮；键盘聚焦时才显示操作名称。 */
.site-footer-gate__prompt {
  position: absolute;
  top: 0;
  left: var(--page-gutter);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-footer-gate__prompt:focus-visible {
  z-index: 1;
  width: auto;
  height: auto;
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs) var(--space-sm);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--color-bg-surface);
  color: var(--color-text-main);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
}

.site-footer-gate__prompt:focus-visible::after {
  content: attr(aria-label);
}

/* 第二阶段：关闭时不占高度，也不能被 Tab 或辅助技术误入。 */
.site-footer-gate__reveal {
  height: 0;
  overflow: clip;
  visibility: hidden;
}

.site-footer-gate.is-open .site-footer-gate__reveal {
  height: auto;
  visibility: visible;
}

.site-footer {
  min-height: var(--footer-height);
  padding: var(--footer-padding-block) var(--page-gutter);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);

  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.75fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);

  opacity: 0;
  transform: translateY(var(--space-md));
  transition: opacity var(--footer-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
              transform var(--footer-reveal-duration) cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.site-footer-gate.is-open .site-footer {
  opacity: 1;
  transform: translateY(0);
}

.site-footer__intro {
  align-self: start;
  max-width: min(100%, var(--footer-statement-measure));
}

.site-footer__brand {
  margin: 0 0 var(--space-md);
  font-family: var(--font-brand);
  font-size: var(--type-body-emphasis);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.site-footer__statement {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--type-section-title);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
}

.site-footer__nav {
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs) var(--space-md);
}

.site-footer__link {
  width: fit-content;
  color: var(--color-text-main);
  font-size: var(--type-ui);
  line-height: var(--leading-normal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  border-bottom-color: currentColor;
}

.site-footer__closing {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-footer__meta,
.site-footer__top {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}

.site-footer__top {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-main);
  cursor: n-resize;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.site-footer__top:hover,
.site-footer__top:focus-visible {
  opacity: 0.65;
}

@media (max-width: 768px) {
  .site-footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    row-gap: var(--space-md);
  }

  .site-footer__intro {
    max-width: min(100%, var(--mobile-title-max));
  }

  .site-footer__statement {
    font-size: var(--type-lead);
  }

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer {
    transform: none;
  }
}