/* ============================================================
   FanCloud · Agent 写代码 · 3D 展示动画 v4
   定位：统计条之后，固定高度（不拉长页面），自动循环播放

   构图：
     左侧  Proma  — 编辑器 + Agent 面板，代码逐行敲出
     右侧  Codex  — 终端式 CLI，diff 逐行应用
     底部  Agent Console — 真实 API 调用链路

   面板内容用 HTML/CSS 实时渲染（不是截图），所以能逐行打字，
   比静态截图更像「视频」。文件复用 token-anim.css，避免改 Nginx。
   ============================================================ */

#fc-agent-stage {
  --av-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --av-sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  position: relative;
  z-index: 10;
  height: clamp(620px, 76vh, 820px);
  overflow: hidden;
  isolation: isolate;
}

/* ---------- 场景 ---------- */
#fc-agent-stage .fc-av-scene {
  position: absolute;
  inset: 0;
  z-index: 2;
  perspective: 1600px;
  perspective-origin: 50% 44%;
  transform-style: preserve-3d;
}

/* 背景辉光独立成层，放在 3D 容器之外，
   否则在 preserve-3d 里会与面板按 3D 深度混排，把面板染色 */
#fc-agent-stage .fc-av-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 40% at 50% 40%, rgba(34, 211, 238, 0.12), transparent 70%),
    radial-gradient(40% 36% at 50% 54%, rgba(139, 92, 246, 0.10), transparent 72%);
}

html:not(.dark) #fc-agent-stage .fc-av-glow {
  background:
    radial-gradient(44% 40% at 50% 40%, rgba(13, 148, 136, 0.10), transparent 70%),
    radial-gradient(40% 36% at 50% 54%, rgba(79, 70, 229, 0.08), transparent 72%);
}

/* 地面网格 */
#fc-agent-stage .fc-av-floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -14%;
  height: 50%;
  z-index: 1;
  pointer-events: none;
  transform: perspective(780px) rotateX(67deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(to right, rgba(34, 211, 238, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(34, 211, 238, 0.14) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: radial-gradient(ellipse 50% 72% at 50% 100%, #000 8%, transparent 74%);
  mask-image: radial-gradient(ellipse 50% 72% at 50% 100%, #000 8%, transparent 74%);
  opacity: 0.5;
}

html:not(.dark) #fc-agent-stage .fc-av-floor {
  background-image:
    linear-gradient(to right, rgba(13, 148, 136, 0.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(13, 148, 136, 0.14) 1px, transparent 1px);
  opacity: 0.34;
}

/* ---------- 字体强制覆盖 ----------
   站点 site-font.css 用 body *:not(...) 带 !important 全站强制字体，
   这里用 ID 前缀 + 通配符把整段面板内的字体拉回等宽体 */
#fc-agent-stage,
#fc-agent-stage *,
#fc-agent-stage *::before,
#fc-agent-stage *::after {
  font-family: var(--av-mono) !important;
}

#fc-agent-stage .fc-av-title,
#fc-agent-stage .fc-av-title * {
  font-family: var(--av-sans) !important;
}

/* ============================================================
   屏幕面板（通用外壳）
   ============================================================ */
#fc-agent-stage .fc-av-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(37vw, 470px);
  border-radius: 13px;
  overflow: hidden;
  transform-style: preserve-3d;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: #0a1018;
  box-shadow:
    0 36px 84px -36px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  will-change: transform;
  font-family: var(--av-mono) !important;
}

html:not(.dark) #fc-agent-stage .fc-av-screen {
  border-color: rgba(15, 23, 42, 0.16);
  background: #0d1420;
  box-shadow:
    0 34px 72px -36px rgba(15, 23, 42, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* 窗口标题条 */
#fc-agent-stage .fc-av-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px;
  background: rgba(15, 23, 42, 0.96);
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.8);
}

#fc-agent-stage .fc-av-lights {
  display: flex;
  gap: 5px;
  margin-right: 4px;
}

#fc-agent-stage .fc-av-lights i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

#fc-agent-stage .fc-av-lights i:nth-child(1) { background: #ef4444; opacity: 0.8; }
#fc-agent-stage .fc-av-lights i:nth-child(2) { background: #eab308; opacity: 0.8; }
#fc-agent-stage .fc-av-lights i:nth-child(3) { background: #22c55e; opacity: 0.8; }

#fc-agent-stage .fc-av-app {
  font-weight: 700;
  letter-spacing: 0.02em;
}

#fc-agent-stage .fc-av-app.fc-proma { color: #a78bfa; }
#fc-agent-stage .fc-av-app.fc-codex { color: #34d399; }

#fc-agent-stage .fc-av-file {
  margin-left: auto;
  opacity: 0.55;
  font-size: 9px;
}

/* 面板位姿：左右对称，略向内倾 */
#fc-agent-stage .fc-av-s1 {
  transform: translate3d(-103%, -66%, 0) rotateY(17deg) rotateX(2.2deg);
}
#fc-agent-stage .fc-av-s2 {
  transform: translate3d(3%, -66%, 0) rotateY(-17deg) rotateX(2.2deg);
}

#fc-agent-stage .fc-av-s1 { animation: fc-av-drift-l 13s ease-in-out infinite; }
#fc-agent-stage .fc-av-s2 { animation: fc-av-drift-r 14.5s ease-in-out infinite; }

@keyframes fc-av-drift-l {
  0%, 100% { transform: translate3d(-103%, -66%, 0) rotateY(17deg) rotateX(2.2deg); }
  50%      { transform: translate3d(-103%, -68.2%, 14px) rotateY(14deg) rotateX(1.4deg); }
}

@keyframes fc-av-drift-r {
  0%, 100% { transform: translate3d(3%, -66%, 0) rotateY(-17deg) rotateX(2.2deg); }
  50%      { transform: translate3d(3%, -68.4%, 14px) rotateY(-14deg) rotateX(1.4deg); }
}

/* ============================================================
   Proma 编辑器内容
   ============================================================ */
#fc-agent-stage .fc-av-body {
  display: flex;
  height: 268px;
  font-size: 10px;
  line-height: 1.62;
}

/* 左侧文件树 */
#fc-agent-stage .fc-av-tree {
  width: 27%;
  flex: none;
  padding: 8px 6px;
  border-right: 1px solid rgba(148, 163, 184, 0.11);
  background: rgba(15, 23, 42, 0.5);
  color: rgba(148, 163, 184, 0.72);
  font-size: 9px;
  letter-spacing: 0.01em;
  overflow: hidden;
}

#fc-agent-stage .fc-av-tree b {
  display: block;
  font-weight: 600;
  color: rgba(203, 213, 225, 0.8);
  margin-bottom: 5px;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#fc-agent-stage .fc-av-tree span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1.5px 0 1.5px 8px;
  border-radius: 3px;
}

#fc-agent-stage .fc-av-tree span.is-active {
  background: rgba(129, 140, 248, 0.16);
  color: #c7d2fe;
}

/* 右侧代码区 */
#fc-agent-stage .fc-av-code {
  flex: 1;
  padding: 8px 8px 8px 0;
  overflow: hidden;
  position: relative;
}

#fc-agent-stage .fc-av-row {
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

#fc-agent-stage .fc-av-row.is-on {
  opacity: 1;
  transform: translateY(0);
}

#fc-agent-stage .fc-av-row.is-new {
  background: rgba(52, 211, 153, 0.1);
  box-shadow: inset 2px 0 0 rgba(52, 211, 153, 0.65);
}

#fc-agent-stage .fc-av-ln {
  width: 17px;
  flex: none;
  text-align: right;
  color: rgba(100, 116, 139, 0.55);
  font-size: 8.5px;
  user-select: none;
}

#fc-agent-stage .fc-av-src {
  flex: 1;
  color: rgba(203, 213, 225, 0.9);
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 语法配色 */
#fc-agent-stage .k { color: #c084fc; }   /* keyword */
#fc-agent-stage .f { color: #60a5fa; }   /* function */
#fc-agent-stage .s { color: #6ee7b7; }   /* string */
#fc-agent-stage .n { color: #fbbf24; }   /* number */
#fc-agent-stage .c { color: rgba(100, 116, 139, 0.8); font-style: italic; } /* comment */
#fc-agent-stage .v { color: #f0abfc; }   /* variable */
#fc-agent-stage .p { color: rgba(148, 163, 184, 0.8); } /* punctuation */

/* 光标 */
#fc-agent-stage .fc-av-cur {
  display: inline-block;
  width: 5px;
  height: 10px;
  vertical-align: -1px;
  background: #22d3ee;
  animation: fc-av-caret 1s steps(2) infinite;
}

@keyframes fc-av-caret {
  0%, 49.9%   { opacity: 1; }
  50%, 100%   { opacity: 0; }
}

/* Proma 底部状态条 */
#fc-agent-stage .fc-av-status {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.8);
  font-size: 9px;
  color: rgba(148, 163, 184, 0.8);
  letter-spacing: 0.02em;
}

#fc-agent-stage .fc-av-status i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
  animation: fc-av-blink 2.2s ease-in-out infinite;
}

@keyframes fc-av-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

#fc-agent-stage .fc-av-status b {
  font-weight: 600;
  color: rgba(52, 211, 153, 0.95);
}

/* ============================================================
   Codex 终端内容
   ============================================================ */
#fc-agent-stage .fc-av-term {
  padding: 9px 11px 11px;
  height: 268px;
  font-size: 9.8px;
  line-height: 1.72;
  overflow: hidden;
  color: rgba(203, 213, 225, 0.9);
}

#fc-agent-stage .fc-av-tl {
  display: block;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  font-size: 9.8px;
  letter-spacing: 0;
}

#fc-agent-stage .fc-av-tl.is-on {
  opacity: 1;
  transform: translateY(0);
}

#fc-agent-stage .fc-av-dim    { color: rgba(100, 116, 139, 0.85); }
#fc-agent-stage .fc-av-cyan   { color: #22d3ee; }
#fc-agent-stage .fc-av-violet { color: #a78bfa; }
#fc-agent-stage .fc-av-green  { color: #34d399; }
#fc-agent-stage .fc-av-amber  { color: #fbbf24; }

/* ============================================================
   底部 Agent Console
   ============================================================ */
#fc-agent-stage .fc-av-hud {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 2.6vh, 32px);
  transform: translateX(-50%);
  z-index: 6;
  width: min(84vw, 520px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.26);
  background: rgba(6, 12, 20, 0.9);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(34, 211, 238, 0.08) inset,
    0 0 44px -12px rgba(34, 211, 238, 0.28);
  font-family: var(--av-mono) !important;
}

html:not(.dark) #fc-agent-stage .fc-av-hud {
  border-color: rgba(13, 148, 136, 0.26);
  background: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 24px 52px -30px rgba(15, 23, 42, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.8) inset,
    0 0 38px -14px rgba(13, 148, 136, 0.22);
}

#fc-agent-stage .fc-av-hud-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
}

html:not(.dark) #fc-agent-stage .fc-av-hud-head {
  border-bottom-color: rgba(15, 23, 42, 0.08);
  color: rgba(100, 116, 139, 0.95);
}

#fc-agent-stage .fc-av-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.9);
  animation: fc-av-blink 2.4s ease-in-out infinite;
}

#fc-agent-stage .fc-av-hud-body {
  padding: 9px 13px 11px;
  min-height: 96px;
  font-size: 11px;
  line-height: 1.7;
}

#fc-agent-stage .fc-av-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 11px;
}

#fc-agent-stage .fc-av-line.is-on { opacity: 1; }

/* ============================================================
   顶部文案
   ============================================================ */
#fc-agent-stage .fc-av-copy {
  position: absolute;
  top: clamp(16px, 2.8vh, 34px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  width: min(90vw, 760px);
  text-align: center;
  pointer-events: none;
}

#fc-agent-stage .fc-av-kicker {
  font-family: var(--av-mono) !important;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(34, 211, 238, 0.9);
  margin-bottom: 9px;
}

html:not(.dark) #fc-agent-stage .fc-av-kicker {
  color: rgba(13, 148, 136, 0.95);
}

#fc-agent-stage .fc-av-title {
  font-family: var(--av-sans) !important;
  font-size: clamp(20px, 2.35vw, 29px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--foreground);
}

#fc-agent-stage .fc-av-title em {
  font-style: normal;
  background: linear-gradient(100deg, #60a5fa 0%, #a78bfa 42%, #f0abfc 62%, #a78bfa 82%, #60a5fa 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fc-av-grad 9s ease-in-out infinite;
}

@keyframes fc-av-grad {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1100px) {
  #fc-agent-stage .fc-av-screen { width: min(41vw, 430px); }
  #fc-agent-stage .fc-av-body { height: 240px; }
  #fc-agent-stage .fc-av-term { height: 265px; }
}

@media (max-width: 900px) {
  #fc-agent-stage { height: clamp(540px, 78vh, 660px); }

  /* 窄屏只留 Proma 那块 */
  #fc-agent-stage .fc-av-s2 { display: none; }

  #fc-agent-stage .fc-av-s1 {
    width: min(90vw, 440px);
    transform: translate3d(-50%, -74%, 0) rotateX(1deg);
    animation: none;
  }

  /* 代码字号收一档，减少右侧截断 */
  #fc-agent-stage .fc-av-src { font-size: 9.5px; line-height: 1.62; }
  #fc-agent-stage .fc-av-gutter { font-size: 8.5px; }
  #fc-agent-stage .fc-av-tree { font-size: 10px; }

  #fc-agent-stage .fc-av-hud {
    width: min(92vw, 460px);
    bottom: clamp(10px, 2vh, 22px);
  }
  #fc-agent-stage .fc-av-hud-body { font-size: 9.5px; min-height: 0; padding: 8px 11px 10px; }
  #fc-agent-stage .fc-av-line { font-size: 9.5px; line-height: 1.68; }
  #fc-agent-stage .fc-av-body { height: 232px; }
}

/* ============================================================
   减弱动效
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #fc-agent-stage .fc-av-s1,
  #fc-agent-stage .fc-av-s2,
  #fc-agent-stage .fc-av-dot,
  #fc-agent-stage .fc-av-status i,
  #fc-agent-stage .fc-av-cur,
  #fc-agent-stage .fc-av-title em {
    animation: none !important;
  }
  #fc-agent-stage .fc-av-row,
  #fc-agent-stage .fc-av-tl,
  #fc-agent-stage .fc-av-line {
    opacity: 1 !important;
    transform: none !important;
  }
}