/* ============================================================
   Prunus Landing 组件样式
   设计令牌见 tokens.css；F1 修复了 hero 标题选择器。
   滚动演示窗 = 与 LLM 对话的网页（windowStage/webWindow）。
   V9：滚动驱动「对话一直往下写 → 卷一直摊开变细 → 爆屏」。
   窗口高度恒占满屏高，对话越长自然高越大、等比缩放越小，于是
   自动变细变远（没有独立的“退远”阶段）。wrapper 800vh：摊卷与
   爆屏都要在粘性区间（约 0.889 释放）内走完。
   ============================================================ */

/* ------------------------------------------------------------
   固定导航栏
   ------------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  background: rgba(253, 252, 250, 0.92); /* cream-50 @ 92% */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hair);
  padding: 0 28px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-logo img.logo { width: 20px; height: 20px; flex-shrink: 0; }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links a { font-size: 13.5px; color: var(--text-2); text-decoration: none; transition: color 0.2s; }
.nav-links a:hover { color: var(--text-1); }
/* CTA：primary pill（对齐 guide §4.4 Primary） */
.nav-links .nav-cta {
  background: var(--primary);
  color: #fff;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 500;
}
.nav-links .nav-cta:hover { background: var(--primary-hover); color: #fff; }

/* ------------------------------------------------------------
   Hero 区域
   ------------------------------------------------------------ */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hero-content { max-width: 560px; width: 100%; padding: 0 20px; }
.hero-section h1 {
  font-size: clamp(38px, 5.5vw, 58px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 44px;
  color: var(--text-1);
}
.hero-section h1 span { color: var(--primary-hover); } /* 强调词「树」leaf-700 */

/* 模拟输入框（hero） */
.chat-input-box {
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  max-width: 480px;
  margin: 0 auto;
  cursor: pointer;
  text-align: left;
}
.chat-input-box:hover { border-color: var(--leaf-300); box-shadow: var(--shadow-card); }
.chat-input-box .fixed-text { flex: 1; font-size: 15px; color: var(--text-1); padding: 11px 0; }
.chat-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary);
  border: none; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0; transition: background 0.2s;
}
.chat-send-btn:hover { background: var(--primary-hover); }
.chat-send-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   滚动驱动动画区域
   ------------------------------------------------------------ */
.animation-wrapper {
  position: relative;
  height: 800vh;               /* V9：对话一路写到底、卷一路摊细，再爆屏 */
  flex-shrink: 0;
}

.sticky-viewport {
  position: sticky;
  top: 54px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 54px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  background: var(--cream-100);
}
.sticky-viewport > * { pointer-events: auto; }
.inner-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  will-change: padding;
}

/* 点击那些"看起来能点"的假控件时的反馈：整个窗口往上弹一下再落回，
   像页面真的滚了一小段又被拽回来。

   方向就是"往下滚"的方向（内容向上走）。而且**不创造也不销毁任何内容**
   —— 早先那版是让剧本时间往前"探"一点再弹回，结果是"冒出几个字又消失"，
   那正是文本编辑器出故障的样子，读起来就是 bug。 */
.inner-viewport.is-poked {
  animation: viewportPoke 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}
@keyframes viewportPoke {
  0%   { transform: translateY(0); }
  28%  { transform: translateY(-30px); }
  55%  { transform: translateY(8px); }
  76%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* —— 浏览器网页窗口 —— */
.window-stage {
  transform-origin: center center;
  width: 100%;
  max-width: none;
  height: auto;
  display: flex;
  justify-content: center;
  will-change: transform;
}
.web-window {
  position: relative;
  width: 100%;
  min-height: 320px;
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  border: 1px solid var(--border-card);
  display: flex;
  flex-direction: column;
  will-change: height;
  opacity: 1;
}

/* 浏览器顶栏：强化“一个与 LLM 对话的网页”的隐喻 */
.browser-bar {
  position: relative;
  flex-shrink: 0;
  height: 40px;
  background: #fff;
  border-bottom: 1px solid var(--border-hair);
  display: flex;
  align-items: center;
  justify-content: center;
}
.traffic-dots {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 7px;
}
.traffic-dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.traffic-dots i:nth-child(1) { background: #f06a55; }
.traffic-dots i:nth-child(2) { background: #f5bd4f; }
.traffic-dots i:nth-child(3) { background: #55c46a; }
.address-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 14px;
  max-width: 80%;
  border-radius: 999px;
  background: var(--cream-100);
  border: 1px solid var(--border-card);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.address-bar svg {
  width: 11px; height: 11px; flex-shrink: 0;
  fill: none; stroke: var(--primary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.address-actions {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: 15px;
  line-height: 1;
}

/* 网页产品头部 */
.page-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #fff;
  border-bottom: 1px solid var(--border-hair);
}
.page-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.page-brand .logo { width: 16px; height: 16px; flex-shrink: 0; }
.brand-name {
  font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em;
  color: var(--text-1);
}
.brand-model {
  font-size: 11px; color: var(--text-3);
  padding-left: 9px; border-left: 1px solid var(--border-card);
  white-space: nowrap;
}
.page-status {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-2);
  white-space: nowrap;
}
.page-status .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf-500); flex-shrink: 0; }

/* ------------------------------------------------------------
   消息流（底部锚定，像真实对话：最新内容贴近输入区）
   ------------------------------------------------------------ */
.messages-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* 内容从底部往上长 */
  gap: 12px;
  padding: 18px clamp(24px, 5vw, 96px) 14px;
  overflow-y: hidden;
  will-change: height;
  opacity: 1;
}

/* —— 单条消息行：AI 靠左带头像 / 用户靠右 —— */
.row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  flex-shrink: 0;
  animation: rowIn 0.32s ease both;
}
.row.user { justify-content: flex-end; }

.avatar {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--leaf-100);
  border: 1px solid var(--border-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.avatar img { width: 15px; height: 15px; }

.bubble {
  max-width: min(78%, 760px);
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
}
.bubble.ai {
  background: var(--cream-100);
  color: var(--gray-800);
  border: 1px solid var(--border-hair);
  border-bottom-left-radius: 6px;
}
.bubble.user {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* AI 消息内的 markdown 排版 */
.bubble.ai p { margin: 0.18em 0; }
.bubble.ai h1, .bubble.ai h2, .bubble.ai h3 {
  font-weight: 650;
  margin: 0.5em 0 0.2em;
  line-height: 1.4;
}
.bubble.ai h1 { font-size: 1.12em; }
.bubble.ai h2 { font-size: 1.04em; }
.bubble.ai h3 { font-size: 0.97em; }
.bubble.ai ul, .bubble.ai ol { padding-left: 1.3em; margin: 0.2em 0; }
.bubble.ai ul { list-style: disc; }
.bubble.ai ol { list-style: decimal; }
.bubble.ai li { margin: 0.1em 0; }
.bubble.ai strong { font-weight: 650; }
.bubble.ai code {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding: 0 5px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bubble.ai pre {
  background: #fff;
  border: 1px solid var(--border-hair);
  border-radius: 10px;
  padding: 9px 12px;
  overflow-x: auto;
  margin: 0.4em 0;
}
.bubble.ai pre code { background: none; padding: 0; font-size: 11.5px; line-height: 1.55; }
.bubble.ai blockquote {
  margin: 0.35em 0;
  padding: 3px 0 3px 12px;
  border-left: 3px solid var(--leaf-300);
  color: var(--text-2);
}

/* —— 思考中三点 —— */
.think-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 1px;
}
.think-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gray-400);
  animation: dotPulse 1.15s ease-in-out infinite;
}
.think-dots i:nth-child(2) { animation-delay: 0.18s; }
.think-dots i:nth-child(3) { animation-delay: 0.36s; }

/* —— 流式输出的行尾光标 —— */
.stream-caret {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -0.13em;
  background: var(--primary);
  border-radius: 1px;
  animation: caretBlink 0.85s steps(1) infinite;
}

/* —— 播完后的“继续滚动”提示 —— */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}
.scroll-cue.is-visible { opacity: 1; }
.scroll-cue .cue-arrow {
  color: var(--primary);
  font-weight: 700;
  animation: arrowBob 1.2s ease-in-out infinite;
}

/* ------------------------------------------------------------
   底部输入区（网页形态的圆角输入条）
   ------------------------------------------------------------ */
.composer-row {
  flex-shrink: 0;
  padding: 12px clamp(24px, 5vw, 96px) 14px;
}
.composer {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 40px;
  background: #fff;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow: var(--shadow-sm);
}
/* 空态占位文案 */
.composer.is-idle::before {
  content: attr(data-placeholder);
  color: var(--text-3);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  color: var(--gray-800);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.composer-caret {
  flex-shrink: 0;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background: var(--primary);
  visibility: hidden;
}
.composer.is-typing .composer-caret { animation: caretBlink 0.9s steps(1) infinite; }
.composer .send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.composer .send-btn.is-sending { background: var(--primary-hover); animation: sendPulse 0.16s ease; }
.composer .send-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ------------------------------------------------------------
   关键字碎片覆盖层（chaos）
   ------------------------------------------------------------ */
.chaos-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 20; overflow: hidden;
  opacity: 0; transition: opacity 0.2s ease;
  background: rgba(253, 252, 250, 0.95); /* cream-50 @ 95% */
}
/* 字号、颜色、倾斜都由 JS 逐个写（见 js/chaos.js 的分级逻辑）——
   这里只定"所有碎片共同的"那部分。字重刻意给到 650：这些字最小只有
   11px，细字重在这个尺寸上会糊成一片。 */
.chaos-fragment {
  position: absolute;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
  transform: rotate(var(--rot, 0deg));
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
/* 中间的大表情 */
.chaos-emoji {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 144px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 21;
}

/* ------------------------------------------------------------
   Slogan 区域
   ------------------------------------------------------------ */
/* 标语区：区块拉高到 180vh，内容 sticky 在视口里钉住 80vh。
   注意 —— **单纯把区块加高是没用的**：文字在文档里的位置是固定的，
   你滚多快它就走多快。只有 sticky 才能让它在滚动时停住。 */
.slogan-section {
  position: relative;
  height: 160vh; /* 内容 sticky 100vh → 停留 60vh */
  background: var(--bg);
  flex-shrink: 0;
}
.slogan-content {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}

.slogan-text {
  max-width: 700px;
  margin: 0;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--text-1);
}
.slogan-text span { color: var(--primary); }

/* ------------------------------------------------------------
   关键帧
   ------------------------------------------------------------ */
@keyframes caretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes dotPulse {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}
@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sendPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.82); }
  100% { transform: scale(1); }
}
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* ------------------------------------------------------------
   无障碍：减少动态偏好 —— 压短长滚动，展示静态对话
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .inner-viewport.is-poked { animation: none; }
  .animation-wrapper { height: calc(100vh - 54px); }
  .stream-caret, .composer.is-typing .composer-caret,
  .think-dots i, .scroll-cue .cue-arrow { animation: none; }
}

/* ------------------------------------------------------------
   响应式（断点 ≤ 600px）
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .nav { padding: 0 18px; height: 50px; }
  .nav-links a:not(.nav-cta) { display: none; }
  .hero-section { padding: 30px 16px 50px; }
  .hero-section h1 { font-size: 34px; margin-bottom: 32px; }
  .sticky-viewport { top: 50px; height: calc(100vh - 50px); }

  .window-stage { max-width: 100%; }
  .web-window { border-radius: 14px; min-height: 280px; }
  .browser-bar { height: 34px; }
  .traffic-dots { left: 10px; gap: 5px; }
  .traffic-dots i { width: 9px; height: 9px; }
  .address-bar { font-size: 11px; height: 22px; max-width: 68%; }
  .address-actions { display: none; }
  .page-header { padding: 8px 12px; }
  .brand-model { display: none; }
  .page-status { font-size: 11px; }
  .messages-scroll { padding: 12px 10px 10px; }
  .avatar { width: 22px; height: 22px; border-radius: 8px; }
  .avatar img { width: 13px; height: 13px; }
  .bubble { max-width: 86%; font-size: 12px; padding: 8px 12px; border-radius: 13px; }
  .composer-row { padding: 8px 10px 10px; }
  .composer { padding: 5px 5px 5px 14px; }
  .composer.is-idle::before, .composer-text { font-size: 12.5px; }
  .composer .send-btn { width: 30px; height: 30px; }
  .slogan-text { font-size: 26px; }
  .chaos-emoji { font-size: 96px; }
}