/* 首页原型专用:站点样式(theme.css + 设计稿 CSS)之外的动效与原型适配。
   设计稿只出浅色 —— theme.css 已在构建时改成总是取浅色令牌,浅色看板截图不会落在深色页面上。 */

html, body { background: var(--bg); color: var(--text); }

/* 顶部导航吸顶时让开手机状态栏 */
.nav { top: env(safe-area-inset-top, 0px); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 100; background: var(--bg); }

/* ── 首屏 / 结尾标题:「AI」左边的 logo 小方块轮换(PRD 3.2):淡出、转一下缩小,换图后淡入 ── */
.hx-eng__logo { transition: opacity .26s ease, transform .42s cubic-bezier(.22, .8, .24, 1); }
.hx-eng__logo.is-out { opacity: 0; transform: translateY(-.05em) rotate(-14deg) scale(.82); }

/* ── 产品区标签(PRD 3.4):进度线由 js 推进;切换时窗口淡入并上移 16px;滚动时整扇窗口缓慢放大(js 写 scale) ── */
.p7-tab { border-radius: 4px; }
.p7-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.p7-tab:hover span { color: var(--text); }
.p9-win.is-in { animation: p9-in .42s cubic-bezier(.22, .8, .24, 1) both; }
@keyframes p9-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── 客户正在问 AI 这些问题(PRD 3.5):三排循环滚动,一、三排向左,二排向右;停在一排上这一排暂停 ── */
.p9-row { transform: none; animation: p9-marquee var(--dur, 40s) linear infinite; }
.p9-row.is-rev { animation-direction: reverse; }
.p9-row:hover, .p9-row:focus-within { animation-play-state: paused; }
@keyframes p9-marquee { to { transform: translateX(calc(-50% - var(--gap, 12px) / 2)); } }  /* 半个卡片间距,接缝处不跳 */
.p9-q { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.p9-q:hover, .p9-q:focus-visible { border-color: #E5A338; box-shadow: 0 0 0 3px rgba(229, 163, 56, .16), 0 12px 28px -14px rgba(229, 163, 56, .55); transform: translateY(-2px); outline: none; }
.p9-q:hover em, .p9-q:focus-visible em { display: inline; }

/* 价格卡可点选(选中态沿用 theme.css 的 .plan--selected) */
.mk-pricing .plan { cursor: pointer; }
.mk-pricing .aud-cycle button { cursor: pointer; }

/* 常见问题展开时答案轻淡入 */
.faq__item[open] .faq__a { animation: faq-in .28s ease both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 检测框提示里的跳转链接(浏览器拦了新窗口时兜底) */
.hero-check__tip a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hx-eng__logo { transition: none; }
  .hb-prompt__text::after { animation: none; }
  .p9-win.is-in, .faq__item[open] .faq__a { animation: none; }
  .p9-row { animation: none; }
  .p9-rows { overflow-x: auto; }
}

/* ── 产品区:桌面上钉住,往下滚动切换功能(js 按滚动距离算当前标签、进度线和推近)── */
@media (min-width: 861px) {
  .p7-track { position: relative; }
  .p7-stick { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); }
}

/* ── 首屏看板进入视口(PRD 3.2):折线从左往右描出,KPI 小折线和排名条跟着长出来;js 去掉 is-pre 时开始 ── */
.hb .hb-lines { clip-path: inset(-14px 0 -14px 0); transition: clip-path 1.6s cubic-bezier(.45, 0, .2, 1) .15s; }
.hb.is-pre .hb-lines { clip-path: inset(-14px 100% -14px 0); transition: none; }
.hb .hb-spark { clip-path: inset(-4px 0 -4px 0); transition: clip-path 1.2s ease .25s; }
.hb.is-pre .hb-spark { clip-path: inset(-4px 100% -4px 0); transition: none; }
.hb .hb-row__bar::before { transition: width .9s cubic-bezier(.22, .8, .24, 1), background .3s ease, box-shadow .3s ease; }
.hb .hb-row:nth-child(2) .hb-row__bar::before { transition-delay: .06s, 0s, 0s; }
.hb .hb-row:nth-child(3) .hb-row__bar::before { transition-delay: .12s, 0s, 0s; }
.hb .hb-row:nth-child(4) .hb-row__bar::before { transition-delay: .18s, 0s, 0s; }
.hb .hb-row:nth-child(5) .hb-row__bar::before { transition-delay: .24s, 0s, 0s; }
.hb .hb-row:nth-child(6) .hb-row__bar::before { transition-delay: .3s, 0s, 0s; }
.hb.is-pre .hb-row__bar::before { width: 0; transition: none; }