/* ═══════════════════════════════════════════════════════════════════════
   QRCard AI · 全站公共样式（site.css）—— 各页面共享的「站点 chrome」层
   ─────────────────────────────────────────────────────────────────────────
   职责边界：画布底色 / 全局动效（反馈·翻面·扇形·入场）/ 折叠面板 / 预览舞台 /
   滚动入场编排。所有页面（index / gen / template / how / login / mypage）引用。
   不属于这里：卡面视觉系统（card.css，独立可分享、不依赖本文件）、
   页面特有布局（写在各自页面的 <style>）。
   依赖：Tailwind Play CDN 负责全部 utility 类；此处只放它管不了的全局状态。 */

/* 画布底色：macOS 橡皮筋 overscroll 区域不露浏览器默认白底（与 theme-color 同值） */
html{scroll-behavior:smooth;background-color:#090A0B}
body{
  /* 深色站默认白字：index 等页由 #app 上的 text-white 提供，gen/login 页没有该容器——
     无显式颜色的文本（Header logo / h1 / 工作台标签）在此兜底，不再继承浏览器默认黑字隐入深底；
     卡面不受影响（card.css 的 .qrc-card 自带 color:var(--qrc-ink)，零依赖继承） */
  color:#fff;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1100px 480px at 50% -60px, rgba(139,92,246,.16), transparent 65%),
    radial-gradient(820px 420px at 88% 10%, rgba(62,116,246,.07), transparent 70%),
    linear-gradient(180deg,#0A0A0C 0%,#090A0B 55%,#0B0A10 100%);
}
::selection{background:rgba(139,92,246,.45);color:#fff}

/* 4.0 动效纪律：① hover 抬升（仅真实可交互卡）→ Tailwind hover: 实现 */
/* ② 点击翻面：仅码卡对照组（index S2） */
.flip-scene{perspective:1200px}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.flip-inner.flipped{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-back{transform:rotateY(180deg)}
/* ③ 层叠扇形展开：仅试玩区（index S3） */
.fan-card{transition:transform .55s cubic-bezier(.2,.7,.25,1), box-shadow .3s}
/* 生命周期状态机节点 */
.node-dot{transition:all .4s}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.55}}
.pulse-soft{animation:pulse-soft 2.2s ease-in-out infinite}
/* 预览卡 hover：抬升 + 微放大（动效纪律①，真实可交互卡） */
.preview-hover{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.preview-hover:hover{transform:translateY(-6px) scale(1.015)}
/* 浮层入场 */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.fade-in{animation:fade-in .2s ease-out backwards}
@keyframes zoom-in{from{opacity:0;transform:scale(.92) translateY(12px)}to{opacity:1;transform:none}}
.zoom-in{animation:zoom-in .3s cubic-bezier(.2,.7,.3,1) backwards}
/* 边填边变的证据：card 任一改动 → 品牌色扩散环（LIVE 圆点同步亮起） */
@keyframes change-ring{from{box-shadow:0 0 0 0 rgba(139,92,246,.55)}to{box-shadow:0 0 0 16px rgba(139,92,246,0)}}
.change-ring{animation:change-ring .65s ease-out}
/* 换风格回弹：卡面轻微 pop */
@keyframes pop-card{0%{transform:scale(1)}35%{transform:scale(1.025)}100%{transform:scale(1)}}
.pop-card{animation:pop-card .35s cubic-bezier(.2,.7,.3,1)}
/* Agent 归因高亮：改了哪一步，左栏对应步骤容器闪烁（黑盒动作翻译回可见步骤） */
@keyframes step-glow{0%{background-color:rgba(139,92,246,.14);box-shadow:0 0 0 1px rgba(139,92,246,.35)}100%{background-color:transparent;box-shadow:none}}
.step-glow{animation:step-glow .95s ease-out}
/* 场景卡行滑动提示：开场一次性左推回弹（演示「可以滑」） */
@keyframes sc-nudge{0%,100%{transform:translateX(0)}45%{transform:translateX(-14px)}75%{transform:translateX(0)}}
.sc-nudge{animation:sc-nudge .9s cubic-bezier(.3,.7,.3,1) .5s 1}
/* 横向滚动条隐藏（提示交给遮罩+箭头，滚动条本身是杂讯） */
.no-scrollbar{scrollbar-width:none;-ms-overflow-style:none}
.no-scrollbar::-webkit-scrollbar{display:none}
/* 场景舞台：浅色桌面 / 纸纹打印（深色用 bg-black/25，无需 CSS）——同一张卡在三种环境里检查 */
.scene-light{background-color:#ECECF1;background-image:radial-gradient(rgba(17,17,26,.05) 1px,transparent 1px);background-size:5px 5px}
.scene-paper{background-color:#F5F1E6;background-image:radial-gradient(rgba(120,100,60,.08) 1px,transparent 1px);background-size:6px 6px}
/* 滚动入场编排：区块进视口一次性 fade-up（8px/300ms，克制；动效纪律管卡内交互，编排只给区块容器） */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease}
.reveal.in-view{opacity:1;transform:none}
/* 动效降级：prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .flip-inner,.fan-card,.node-dot,.preview-hover{transition:none !important}
  .pulse-soft,.fade-in,.zoom-in,.change-ring,.pop-card,.step-glow,.sc-nudge,.animate-bounce{animation:none !important}
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}
/* 星空背景微动效：canvas 固定底层，内容层浮于其上（各页可选，无 canvas 自动跳过） */
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none}
/* 页面 Vue 根约定：所有页面的 app 根元素都是 #app，浮于星空之上 */
#app{position:relative;z-index:1}
/* Vue 未挂载前隐藏整页：in-DOM 模板防 {{ }} 插值闪现（配合 #app 上的 v-cloak） */
[v-cloak]{display:none}
/* 锚点跳转让出吸顶 Header（64px + 呼吸空间），区块标题不再被压住；
   article 亦覆盖：template 页六张行业模板卡可被 index S7 / 对比区深链直达 */
section[id],article[id]{scroll-margin-top:80px}