/* 心宿二 官网 · 产品页公共模板样式（所有产品页共用；某个产品专属的样式写在 styles/<产品>.css，类名用 <产品>- 前缀）
 * 结构与规则见 docs/网站产品页规范.md；动画规范：只动 transform / opacity；滚动场景进度驱动（scripts/product.js）；小元素入场用 CSS 滚动时间线，不支持时由 IntersectionObserver 兜底 */
:root { --pp-ease: cubic-bezier(0.28, 0.11, 0.32, 1); --pp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

.pp-section { padding: 128px 0; }
.pp-narrow { max-width: 800px; }

/* ---------- 首屏 ---------- */
.pp-hero { position: relative; padding: 148px 32px 0; background: var(--input); overflow: hidden; border-bottom: 1px solid var(--border-strong); text-align: center; }
.pp-hero-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--grid-dot) 1.5px, transparent 1.6px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 100%); }
.pp-hero-inner { position: relative; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pp-appicon { position: relative; width: 74px; height: 60px; margin-bottom: 8px; }
.pp-appicon img { width: 100%; height: 100%; object-fit: contain; }
.pp-title { margin: 0; font-family: var(--font-display); font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.035em; }
.pp-lead { margin: 0; font-size: 21px; line-height: 1.55; color: var(--text-secondary); }
.pp-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; }
.pp-dl { height: 44px; padding: 0 24px; font-size: 15px; gap: 8px; }
.pp-dl .tf-ico { width: 16px; height: 16px; }
.pp-meta { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-tertiary); }
.pp-hero-shot { position: relative; margin: 72px auto 0; max-width: 960px; height: 260px; transform-origin: 50% 0; }
.pp-js .pp-hero-shot { will-change: transform, opacity; }
.pp-shot-inner { position: absolute; left: 0; right: 0; top: 24px; display: flex; justify-content: center; }

/* 首屏入场：加载后依次浮现（触发驱动，只用于小元素） */
.pp-js .pp-in { opacity: 0; transform: translate3d(0, 28px, 0); }
.pp-ready .pp-in { opacity: 1; transform: none; transition: opacity .9s var(--pp-ease), transform 1.1s var(--pp-ease-out); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.pp-ready .pp-shot-inner { transition-duration: 1.2s, 1.4s; }

/* ---------- 滚动场景（sticky 舞台） ---------- */
.pp-scene { position: relative; height: 300vh; background: var(--bg); }
.pp-scene-short { height: 240vh; }
.pp-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; box-sizing: border-box; padding: 88px 32px 48px; }
.pp-stage-inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 64px; }
.pp-col-text { flex: 1 1 360px; min-width: 0; }
.pp-col-shot { flex: 1 1 520px; min-width: 0; }
.pp-steps { margin: 40px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; border-left: 1px solid var(--border-strong); }
.pp-steps li { position: relative; padding-left: 20px; }
.pp-steps li::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--primary); transform-origin: 50% 0; transform: scaleY(0); transition: transform .5s var(--pp-ease); }
.pp-steps li.is-on::before { transform: scaleY(1); }
.pp-js .pp-steps li { opacity: .35; }

/* ---------- 功能 / 数字 ---------- */
.pp-grid { margin-top: 56px; }
.pp-stats .tf-stat-value small { margin-left: 4px; font-size: 16px; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }

/* ---------- 下载 ---------- */
.pp-download { padding: 128px 32px; scroll-margin-top: 0; }
.pp-dl-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.pp-dl-title { font-size: 44px; line-height: 1.1; letter-spacing: -0.025em; }
.pp-dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.pp-dl-meta { font-family: var(--font-mono); font-size: 12px; color: var(--on-band-muted); }
.pp-req { margin: 0; display: flex; flex-direction: column; }
.pp-req > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.pp-req > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pp-req dt { color: var(--on-band-muted); font-size: 13px; }
.pp-req dd { margin: 0; color: var(--on-band); text-align: right; }
.pp-download a:not(.tf-btn) { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.pp-download a:not(.tf-btn):hover { text-decoration-color: currentColor; }
.pp-thanks { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 45; max-width: 960px; margin: 0 auto; box-sizing: border-box; padding: 24px 28px;
  background: var(--band); color: var(--on-band); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .28), 0 2px 8px rgba(0, 0, 0, .16);
  animation: pp-thanks .7s var(--pp-ease-out) both; }
.pp-thanks.is-closing { animation: pp-thanks-out .28s var(--tf-ease-exit) both; }
@keyframes pp-thanks-out { to { opacity: 0; transform: translate3d(0, 16px, 0); } }
.pp-thanks a { color: var(--on-band); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.pp-thanks-x { margin-left: auto; align-self: flex-start; color: var(--on-band-muted); }
.pp-thanks-x:hover { background: rgba(255, 255, 255, .08); color: var(--on-band); }
.pp-thanks[hidden] { display: none; }
@keyframes pp-thanks { from { opacity: 0; transform: translate3d(0, 32px, 0) scale(.98); } to { opacity: 1; transform: none; } }
.pp-thanks-head { display: flex; align-items: center; gap: 14px; }
.pp-thanks-head > div { display: flex; flex-direction: column; }
.pp-thanks-head b { font-size: 18px; font-weight: 600; }
.pp-thanks-head span { color: var(--on-band-muted); font-size: 13px; }
.pp-thanks-mark { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--success); color: #fff; }
.pp-thanks-mark .tf-ico { width: 18px; height: 18px; stroke-width: 2; }
.pp-thanks-steps { margin: 24px 0 0; padding: 24px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.pp-thanks-steps li { display: flex; gap: 12px; animation: pp-thanks .7s var(--pp-ease-out) both; }
.pp-thanks-steps li:nth-child(1) { animation-delay: .12s; }
.pp-thanks-steps li:nth-child(2) { animation-delay: .2s; }
.pp-thanks-steps li:nth-child(3) { animation-delay: .28s; }
.pp-thanks-steps i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--on-band); }
.pp-thanks-steps div { display: flex; flex-direction: column; gap: 2px; }
.pp-thanks-steps span { color: var(--on-band-muted); font-size: 13px; }
@supports (corner-shape: superellipse(1.5)) { .pp-thanks { corner-shape: var(--corner-smooth); border-radius: calc(12px * var(--corner-smooth-scale)); } }

/* ---------- 更新说明 / 常见问题 ---------- */
.pp-log { margin: 40px 0 0; padding: 0; list-style: none; }
.pp-log li { padding: 24px 0; border-top: 1px solid var(--border); }
.pp-log p { margin: 8px 0 0; color: var(--text-secondary); }
.pp-log-head { display: flex; align-items: center; gap: 12px; }
.pp-log-head b { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }
.pp-log-head time { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
.pp-more { border-top: 1px solid var(--border); }
.pp-more .pp-log { margin-top: 0; }
.pp-more > .tf-arrow { margin: 16px 0 0; }
.pp-more summary, .pp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.pp-more summary::-webkit-details-marker, .pp-faq summary::-webkit-details-marker { display: none; }
.pp-more summary { padding: 20px 0; color: var(--link); font-weight: 500; }
.pp-more summary .tf-ico, .pp-faq summary .tf-ico { transition: transform .3s var(--pp-ease); color: var(--icon); }
.pp-more[open] summary .tf-ico, .pp-faq details[open] summary .tf-ico { transform: rotate(180deg); }
.pp-more summary:focus-visible, .pp-faq summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-tag); }
.pp-faq-sec { padding-top: 0; }
.pp-faq { margin-top: 40px; border-bottom: 1px solid var(--border); }
.pp-faq details { border-top: 1px solid var(--border); }
.pp-faq summary { justify-content: space-between; padding: 22px 0; font-size: 16px; font-weight: 600; }
.pp-faq p { margin: 0 0 24px; max-width: 40em; color: var(--text-secondary); }
.pp-faq details[open] p, .pp-more[open] .pp-log { animation: pp-open .5s var(--pp-ease-out) both; }
@keyframes pp-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* ---------- 滚动入场：优先 CSS 滚动时间线（不占主线程），不支持时 product.js 加 .pp-io 用 IntersectionObserver 兜底 ---------- */
@keyframes pp-reveal { from { opacity: 0; transform: translate3d(0, 48px, 0); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .pp-reveal { animation: pp-reveal var(--pp-ease) both; animation-timeline: view(); animation-range: entry 5% entry 75%; }
  .pp-grid .pp-reveal:nth-child(3n+2), .pp-stats .pp-reveal:nth-child(2) { animation-range: entry 12% entry 82%; }
  .pp-grid .pp-reveal:nth-child(3n), .pp-stats .pp-reveal:nth-child(3) { animation-range: entry 19% entry 89%; }
  .pp-stats .pp-reveal:nth-child(4) { animation-range: entry 26% entry 96%; }
}
.pp-io .pp-reveal { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .9s var(--pp-ease), transform 1.1s var(--pp-ease-out), background-color .12s var(--tf-ease-standard); }
.pp-io .pp-reveal.is-in { opacity: 1; transform: none; }
.pp-io .pp-grid .pp-reveal:nth-child(3n+2), .pp-io .pp-stats .pp-reveal:nth-child(2) { transition-delay: .08s, .08s, 0s; }
.pp-io .pp-grid .pp-reveal:nth-child(3n), .pp-io .pp-stats .pp-reveal:nth-child(3) { transition-delay: .16s, .16s, 0s; }
.pp-io .pp-stats .pp-reveal:nth-child(4) { transition-delay: .24s, .24s, 0s; }

/* ---------- 静态模式（减少动态效果）：直接给出各场景的关键画面 ---------- */
.hh-static .pp-scene { height: auto; }
.hh-static .pp-stage { position: relative; height: auto; min-height: 0; padding-top: 96px; padding-bottom: 96px; }
.hh-static .pp-steps li { opacity: 1; }
.hh-static .hh-progress { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pp-js .pp-in, .pp-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .pp-thanks, .pp-thanks-steps li, .pp-faq details[open] p, .pp-more[open] .pp-log { animation: none; }
  .pp-steps li::before, .pp-more summary .tf-ico, .pp-faq summary .tf-ico { transition: none; }
}

/* ---------- 移动端 ---------- */
@media (max-width: 760px) {
  .pp-section { padding: 88px 0; }
  .pp-hero { padding: 112px 16px 0; }
  .pp-title { font-size: 46px; }
  .pp-lead { font-size: 17px; }
  .pp-hero-shot { margin-top: 48px; height: 200px; }
  .pp-stage { padding: 72px 16px 40px; }
  .pp-stage-inner { gap: 24px; }
  .pp-col-shot { flex-basis: 100%; }
  .pp-steps { margin-top: 20px; gap: 12px; }
  .pp-steps .hh-cap-b { display: none; }
  .pp-grid { --tf-cols: 1; margin-top: 40px; }
  .pp-download { padding: 88px 16px; }
  .pp-dl-inner { grid-template-columns: 1fr; gap: 40px; }
  .pp-dl-title { font-size: 34px; }
  .pp-thanks { padding: 20px; left: 8px; right: 8px; bottom: 8px; max-height: calc(100vh - 96px); overflow: auto; }
  .pp-thanks-steps { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1000px) { .pp-grid { --tf-cols: 2; } }
@media (max-height: 640px) and (min-width: 761px) { .pp-steps .hh-cap-b { display: none; } }