/* ════════════════════════════════════════════════════════════════════════
   Rano 官网动效层 v1

   设计北极星：**知识向上浮**
     536,630 块向量碎片从深处升上来 → 检索。日常经验里海是往下沉的，
     这里知识往上浮——这一笔就是"超现实"。
     它是"检索"这件事本身的画法，不是星点背景。

   三处基本动效（oil-ui 动效 §每个界面先做三处）
     ① 主操作反馈 —— 按钮按下 1px 下沉 / 数字滚到新值
     ② 状态切换来路 —— 数值高亮脉冲、hover 位移
     ③ 首次进场的出场 —— hero 编排（窗口落位 → 侧栏 → 逐条消息 → 五步逐步点亮 → 结论落位）

   唯一动效记忆点：**窗口内 1px 竖线带亮点沿五步骨架向下走**（= 这条流水线的形状）

   纪律
     · 只动 transform / opacity（合成属性），不动布局属性
     · 离屏 / 切后台暂停逐帧循环；DPR 上限 2
     · prefers-reduced-motion 下全部停到终帧，信息完整
     · 单 rAF 驱动全部 canvas，不每条动画一个循环
   ════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1) 氛围层：知识向上浮（Canvas）+ 深海流动渐变（CSS）
   ══════════════════════════════════════════════════════════════════ */

/* 读屏可读、视觉不可见（给装饰画布一句说明） */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 深海流动渐变：多层大半径 radial-gradient 缓慢变相位（只动 transform） */
.sky::before {
  content: '';
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(closest-side, rgba(22, 66, 98, .40), transparent 72%),
    radial-gradient(closest-side, rgba(10, 40, 70, .34), transparent 70%);
  background-size: 62% 58%, 54% 50%;
  background-position: 18% 8%, 84% 92%;
  background-repeat: no-repeat;
  animation: skyDrift 46s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes skyDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.00); }
  100% { transform: translate3d(2.5%, 1.5%, 0) scale(1.07); }
}

/* 知识碎片画布（铺满视口，纯装饰 → aria-hidden） */
#drift {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════
   2) 首次出场：hero 编排（只在首访播放一次）
   —— 主角先动，其余被带动；每项间隔 40–80ms，总长不过 600ms
   ══════════════════════════════════════════════════════════════════ */
.stage-load .win-holder { animation: winLanding .62s cubic-bezier(.16, .84, .28, 1) both; }
@keyframes winLanding {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* 窗口内各层的出场顺序：侧栏 → 首问 → 思考/反问 → 答复 → 骨架 → 结论 */
.stage-load .win-side   { animation: fadeSlideL .44s cubic-bezier(.2, .7, .2, 1) .16s both; }
.stage-load .win-comp   { animation: fadeUp .40s cubic-bezier(.2, .7, .2, 1) .30s both; }
.stage-load .msg-a,
.stage-load .bub-user   { animation: fadeUp .44s cubic-bezier(.2, .7, .2, 1) both; }
/* 逐条消息错峰（第 n 条晚 80ms·n） */
.stage-load .win-flow > *:nth-child(1) { animation-delay: .22s; }
.stage-load .win-flow > *:nth-child(2) { animation-delay: .30s; }
.stage-load .win-flow > *:nth-child(3) { animation-delay: .38s; }
.stage-load .win-flow > *:nth-child(4) { animation-delay: .46s; }

@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeSlideL { from { opacity: 0; transform: translate3d(-10px, 0, 0); } to { opacity: 1; transform: none; } }

/* ── 五步骨架：逐行点亮（= 唯一动效记忆点）──
   一个 1px 竖线带亮点沿行向下走，走到哪行哪行的文字由灰变白。 */
.skel { position: relative; }
.skel-rail {
  position: absolute;
  left: 26px;               /* 对齐 .skel-row 的序号列右侧 */
  top: 30px;                /* 跳过卡片标题 */
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(94, 179, 191, .30) 12%, rgba(94, 179, 191, .30) 88%, transparent);
  opacity: 0;
}
.stage-load .skel-rail { animation: railIn .3s ease .60s both; }
@keyframes railIn { from { opacity: 0 } to { opacity: 1 } }

.skel-spark {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 4px; height: 16px;
  border-radius: 2px;
  background: var(--brand-strong);
  box-shadow: 0 0 9px 2px rgba(127, 199, 211, .8);
  opacity: 0;
}
.stage-load .skel-spark { animation: sparkRun 1.72s cubic-bezier(.5, 0, .5, 1) .66s both; }
@keyframes sparkRun {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, var(--rail-h, 96px), 0); }
}

/* 每行文字：灰 → 白（`--on` 由 spark 走到时点亮） */
.skel-row .body { color: var(--fg2); transition: color .22s ease; }
.stage-load .skel-row.lit .body { color: var(--fg1); }
.skel-row .no, .skel-row .act { transition: color .22s ease; }
.stage-load .skel-row.lit .no,
.stage-load .skel-row.lit .act { color: var(--brand); }

/* ── 结论落位：主因 → 依据 → 处置，依次落 ── */
.stage-load .msg-a .verdict,
.stage-load .msg-a .verify,
.stage-load .msg-a .act-line,
.stage-load .msg-a .ask { animation: fadeUp .40s cubic-bezier(.2, .7, .2, 1) both; }
.stage-load .msg-a .verdict  { animation-delay: 2.34s; }
.stage-load .msg-a .verify   { animation-delay: 2.44s; }
.stage-load .msg-a .act-line { animation-delay: 2.52s; }
.stage-load .msg-a .ask      { animation-delay: 2.60s; }

/* 结论关键词的一次性高亮（= 状态切换的来路） */
.stage-load .hl-pop { animation: hlPop .72s cubic-bezier(.2, .7, .2, 1) 2.44s both; }
@keyframes hlPop {
  0%   { background: rgba(94, 179, 191, 0); }
  38%  { background: rgba(94, 179, 191, .26); }
  100% { background: rgba(94, 179, 191, .10); }
}

/* ── hero 文案与数字带：主角先到，其余跟上 ── */
.stage-load .hero .eyebrow { animation: fadeUp .5s cubic-bezier(.2, .7, .2, 1) .06s both; }
.stage-load .hero h1        { animation: fadeUp .56s cubic-bezier(.2, .7, .2, 1) .10s both; }
.stage-load .hero .lede     { animation: fadeUp .5s cubic-bezier(.2, .7, .2, 1) .16s both; }
.stage-load .hero .cta      { animation: fadeUp .5s cubic-bezier(.2, .7, .2, 1) .34s both; }
.stage-load .hero .stats    { animation: fadeUp .5s cubic-bezier(.2, .7, .2, 1) .40s both; }

/* 数字带：落位时一格一格滚上来 */
.stats b { display: inline-block; }
.stage-load .stats > span { animation: statLand .5s cubic-bezier(.2, .7, .2, 1) both; }
.stage-load .stats > span:nth-child(1) { animation-delay: .44s; }
.stage-load .stats > span:nth-child(2) { animation-delay: .50s; }
.stage-load .stats > span:nth-child(3) { animation-delay: .56s; }
.stage-load .stats > span:nth-child(4) { animation-delay: .62s; }
.stage-load .stats > span:nth-child(5) { animation-delay: .68s; }
@keyframes statLand {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   3) 滚动揭示：一处方向性强调（其余保持安静的淡入）
   ══════════════════════════════════════════════════════════════════ */
.rv-d4 { transition-delay: .28s }
.rv-d5 { transition-delay: .35s }
.rv-d6 { transition-delay: .42s }

/* 工具卡：揭示时按阅读方向左→右依次落位 */
.tool { opacity: 0; transform: translate3d(-8px, 0, 0); }
.rv.in .tool { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s cubic-bezier(.2, .7, .2, 1), border-color .2s, background .2s; }
.rv.in .tool:nth-child(1) { transition-delay: .02s }
.rv.in .tool:nth-child(2) { transition-delay: .08s }
.rv.in .tool:nth-child(3) { transition-delay: .14s }
.rv.in .tool:nth-child(4) { transition-delay: .20s }
.rv.in .tool:nth-child(5) { transition-delay: .26s }
.rv.in .tool:nth-child(6) { transition-delay: .32s }

/* SOP 槽位：揭示时槽位原文先淡出、填实内容后到（表达"被填上了"） */
.slot .real { opacity: 0; transform: translate3d(-6px, 0, 0); }
.rv.in .slot .real { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.rv.in .slot:nth-child(1) .real { transition-delay: .06s }
.rv.in .slot:nth-child(2) .real { transition-delay: .14s }
.rv.in .slot:nth-child(3) .real { transition-delay: .22s }
.rv.in .slot:nth-child(4) .real { transition-delay: .30s }
.rv.in .slot:nth-child(5) .real { transition-delay: .38s }

/* 产物件：三件依次落，文件角标轻微上浮 */
.artifact { opacity: 0; transform: translate3d(0, 12px, 0); }
.rv.in .artifact { opacity: 1; transform: none; transition: opacity .46s ease, transform .46s cubic-bezier(.2, .7, .2, 1); }
.rv.in .artifact:nth-child(1) { transition-delay: .04s }
.rv.in .artifact:nth-child(2) { transition-delay: .12s }
.rv.in .artifact:nth-child(3) { transition-delay: .20s }

/* 分层两栏：左先右后（方向一致） */
.split .layer-col { opacity: 0; transform: translate3d(0, 14px, 0); }
.rv.in .split .layer-col,
.split.rv.in .layer-col { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.rv.in .layer-col:nth-child(1), .split.rv.in .layer-col:nth-child(1) { transition-delay: .04s }
.rv.in .layer-col:nth-child(2), .split.rv.in .layer-col:nth-child(2) { transition-delay: .14s }

/* ══════════════════════════════════════════════════════════════════
   4) 微交互：按下反馈 / 悬停位移 / 焦点
   ══════════════════════════════════════════════════════════════════ */
.btn { transition: transform .14s cubic-bezier(.2, .7, .2, 1), background .18s, border-color .18s, color .18s, box-shadow .18s; }
.btn:active { transform: translateY(1px) scale(.985); }        /* 按下立刻有回应 */
.btn-primary:hover { box-shadow: 0 6px 22px -8px rgba(242, 244, 245, .28); }
.btn-ghost:hover { box-shadow: 0 6px 22px -10px rgba(94, 179, 191, .35); }

.btn:focus-visible, .nav-link:focus-visible, .foot-link:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-btn);
}

/* 卡片 / 工具卡：悬停上浮（≤4px，超出会显轻浮） */
.tool:hover { transform: translate3d(0, -2px, 0); }
.card:hover { transform: translate3d(0, -2px, 0); }
.card { transition: transform .2s cubic-bezier(.2, .7, .2, 1), border-color .22s, background .22s; }

/* 窗口在 hero 里随指针轻微倾斜（只动 transform，幅度极小） */
.win-holder { perspective: 1200px; }
.win-scale { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }

/* ══════════════════════════════════════════════════════════════════
   5) 兜底：减少动态效果 → 全部停到终帧（信息不丢）
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .stage-load .win-holder,
  .stage-load .win-side,
  .stage-load .win-comp,
  .stage-load .msg-a,
  .stage-load .bub-user,
  .stage-load .skel-rail,
  .stage-load .skel-spark,
  .stage-load .msg-a .verdict,
  .stage-load .msg-a .verify,
  .stage-load .msg-a .act-line,
  .stage-load .msg-a .ask,
  .stage-load .hl-pop,
  .stage-load .hero .eyebrow,
  .stage-load .hero h1,
  .stage-load .hero .lede,
  .stage-load .hero .cta,
  .stage-load .hero .stats,
  .stage-load .stats > span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .stage-load .skel-spark { display: none; }
  .skel-row .body { color: var(--fg1) !important; }
  #drift, .sky::before { display: none; }
  .tool, .artifact, .slot .real, .layer-col { opacity: 1 !important; transform: none !important; }
}

/* 打印 / 无脚本：内容必须在 */
@media print {
  #drift, .sky::before, .skel-spark { display: none; }
  .tool, .artifact, .slot .real, .layer-col { opacity: 1 !important; transform: none !important; }
}