/* ==========================================================================
   Hero 原型演示 —— 用网页模拟 Eas-Term 的界面：左侧终端 + 右侧无限画布。
   替代原来那张静态截图 shot-hero.png。

   渐进增强：HTML 写死完整结构，没有 JS 时它就是一张能读的界面图
   （爬虫也读得到文字）。proto.js 只负责「自动导览 + 鼠标接管」。

   配色走站点自己的液态玻璃 token，节奏走 SPB 骨架层的 --spb-* 。
   ========================================================================== */

.proto {
  position: relative;
  margin-top: 46px;
  /* hero 整体是居中版式，这块是「界面」不是文案，必须显式拨回左对齐 ——
     否则终端里的命令行会飘到中间，一眼就假 */
  text-align: left;
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-xl);
  background: var(--glass-2);
  backdrop-filter: var(--blur);
  box-shadow: var(--glass-highlight), 0 30px 80px rgba(0, 0, 0, .5);
  overflow: hidden;
}

/* ── 窗口标题栏 ── */
.proto-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
}
.proto-dots { display: flex; gap: 6px; }
.proto-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--glass-border-strong);
}
.proto-title { flex: 1; text-align: center; }

/* ── 主体：左终端 + 右画布 ── */
.proto-body {
  display: grid;
  grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
  min-height: 340px;
}

.proto-pane { position: relative; padding: 14px; }
.proto-term { border-right: 1px solid var(--glass-border); }

.proto-label {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--fg-dim); opacity: .55; text-transform: uppercase;
}

/* 终端内容 */
.proto-lines { font-family: var(--mono); font-size: 11.5px; line-height: 1.85; }
.proto-lines .u { color: var(--accent); }
.proto-lines .c { color: var(--fg); }
.proto-lines .d { color: var(--fg-dim); }
.proto-caret {
  display: inline-block; width: 7px; height: 14px;
  background: var(--accent); vertical-align: -2px;
  animation: proto-blink 1.1s steps(1) infinite;
}
@keyframes proto-blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* ── 终端打字：hover 时逐字打出 claude ──
   用 width + steps() 而不是 JS 逐字追加：纯 CSS、可被 reduced-motion 一键关掉 */
.tw {
  display: inline-block; overflow: hidden; white-space: nowrap;
  vertical-align: bottom; width: 6ch;   /* 静态态：命令已经打完 */
}
.proto-pane[data-on] .tw { animation: tw-type .85s steps(6) both; }
@keyframes tw-type { from { width: 0 } to { width: 6ch } }

/* ── 仿 Claude Code 开屏（展开后露出）── */
.term-splash { font-family: var(--mono); font-size: 10.5px; line-height: 1.75; margin-top: 8px; }
.term-splash .cc-logo { color: var(--accent); font-size: 15px; line-height: 1.2; }
.term-splash .cc-hi { color: var(--fg); margin-top: 2px; }
.term-splash .cc-hi b { color: var(--accent); font-weight: 500; }
.term-splash .cc-dim { color: var(--fg-dim); opacity: .8; }
.term-splash .cc-cwd { color: var(--fg-dim); opacity: .6; margin-top: 3px; }
.term-splash .cc-sep {
  height: 1px; background: var(--glass-border); margin: 7px 0 5px;
}
.term-splash .cc-ph { opacity: .55; }
/* 开屏整体在展开时淡入，比 max-height 单独出现更像「启动完成」 */
.proto-pane[data-on] .term-splash { animation: cc-in .5s var(--spb-ease-out) .55s both; }
@keyframes cc-in { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* 画布：点阵底纹，呼应全站背景 */
.proto-canvas {
  background-image: radial-gradient(circle, var(--glass-border-strong) 1px, transparent 1px);
  background-size: 18px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

/* ── 画布上的模块 ── */
.proto-mod {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-3);
  padding: 10px 11px;
  min-height: 92px;
  /* min-height 可动画，grid 的行列重排不可 —— 所以「展开」走高度而不是改栅格，
     否则会瞬间跳一下 */
  transition:
    min-height   var(--spb-dur-base) var(--spb-ease-out),
    border-color var(--spb-dur-base) var(--spb-ease-out),
    box-shadow   var(--spb-dur-base) var(--spb-ease-out),
    transform    var(--spb-dur-base) var(--spb-ease-out),
    opacity      var(--spb-dur-base) var(--spb-ease-out);
}

/* ── 展开：hover / 被导览指到的模块长高，演示动画获得更大空间 ── */
.proto-mod[data-on] { min-height: 176px; }

/* 展开后才露出的细节。默认零高度并裁掉，展开时长出来 ——
   用 max-height 而不是 display:none，才有过渡 */
.proto-mod .more {
  max-height: 0; opacity: 0; overflow: hidden;
  transition:
    max-height var(--spb-dur-base) var(--spb-ease-out),
    opacity    var(--spb-dur-base) var(--spb-ease-out);
}
/* 终端是 .proto-pane 不是 .proto-mod，两个都要匹配，否则开屏永远出不来 */
.proto-mod[data-on] .more,
.proto-pane[data-on] .more { max-height: 96px; opacity: 1; }
/* Claude Code 开屏有六行，96px 装不下 */
.proto-pane[data-on] .term-splash { max-height: 130px; }

/* .more 是新的布局容器，父级的 grid gap 管不到里面，各自补上 */
.demo-browser .more { display: block; margin-top: 5px; }
.demo-git .more { display: grid; gap: 6px; margin-top: 6px; }
.proto-mod-head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim);
  margin-bottom: 8px;
}
.proto-mod-head b { color: var(--fg); font-weight: 500; }
.proto-mod-body { font-size: 10.5px; line-height: 1.7; color: var(--fg-dim); }

/* ==========================================================================
   模块演示动画
   每个模块 hover（或被导览指到）时，演示它自己在干什么。
   全部纯 CSS，零依赖。静止态也是完整可读的界面，动画只是叠加。
   ========================================================================== */

.demo { --d: 1.6s; }

/* ── 网页预览：地址栏进度条走一遍，页面内容逐块浮现 ── */
.demo-browser .db-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 5px; border-radius: 4px 4px 0 0;
  background: var(--glass-border);
  position: relative; overflow: hidden;
}
.demo-browser .db-bar i {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--glass-border-strong);
}
.demo-browser .db-url {
  flex: 1; height: 11px; margin-left: 3px; border-radius: 3px;
  background: var(--glass-border-strong); position: relative; overflow: hidden;
  display: flex; align-items: center;
}
.demo-browser .db-url em {
  font-style: normal; font-family: var(--mono); font-size: 8px;
  color: var(--fg-dim); padding-left: 4px; position: relative; z-index: 1;
}
.demo-browser .db-url::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(var(--accent-rgb), .35); transform: scaleX(0); transform-origin: left;
}
.demo-browser .db-page {
  border: 1px solid var(--glass-border); border-top: 0;
  border-radius: 0 0 4px 4px; padding: 7px 6px;
  min-height: 44px;
}

/* 预览里渲染的就是 eas.biily.top 自己 */
.db-site { font-size: 8px; line-height: 1.5; }
.db-site .ds-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 5px; border-bottom: 1px solid var(--glass-border);
}
.db-site .ds-brand { color: var(--fg); font-weight: 600; font-size: 8.5px; }
.db-site .ds-links {
  width: 46px; height: 3px; border-radius: 2px; background: var(--glass-border-strong);
}
.db-site .ds-hero {
  font-size: 15px; font-weight: 800; color: var(--fg);
  text-align: center; margin-top: 9px; letter-spacing: -.01em;
}
.db-site .ds-tag {
  text-align: center; color: var(--accent); font-size: 7.5px; margin-top: 2px;
}
.db-site .ds-btns { display: flex; justify-content: center; gap: 5px; margin-top: 7px; }
.db-site .ds-btn {
  width: 34px; height: 9px; border-radius: 5px;
  border: 1px solid var(--glass-border-strong);
}
.db-site .ds-btn.p { background: var(--accent); border-color: var(--accent); }

.proto-mod[data-on] .demo-browser .db-url::after {
  animation: db-load var(--d) var(--spb-ease-out) infinite;
}
.proto-mod[data-on] .demo-browser .db-site > * {
  animation: db-in var(--d) var(--spb-ease-out) infinite;
}
.proto-mod[data-on] .demo-browser .db-site > *:nth-child(2) { animation-delay: .14s; }
@keyframes db-load { 0% { transform: scaleX(0) } 45%,100% { transform: scaleX(1) } }
@keyframes db-in {
  0%, 35% { opacity: 0; transform: translateY(3px) }
  55%, 100% { opacity: 1; transform: none }
}

/* ── 代码：高亮条逐行扫过，光标跟着走 ── */
.demo-code { font-family: var(--mono); font-size: 9.5px; line-height: 1.9; position: relative; }
.demo-code .dc-line { position: relative; padding-left: 2px; white-space: nowrap; }
.demo-code .k { color: var(--accent); }
.demo-code .s { color: var(--fg); opacity: .75; }
.demo-code .dc-hl {
  position: absolute; left: -4px; right: -4px; height: 15px;
  border-radius: 3px; background: rgba(var(--accent-rgb), .12);
  top: 0; opacity: 0;
}
.proto-mod[data-on] .demo-code .dc-hl {
  animation: dc-scan calc(var(--d) * 1.4) steps(1) infinite;
}
@keyframes dc-scan {
  0%   { top: 0px;  opacity: 1 }
  33%  { top: 18px; opacity: 1 }
  66%  { top: 36px; opacity: 1 }
  99%  { top: 36px; opacity: 0 }
  100% { top: 0px;  opacity: 0 }
}

/* ── 图片：从模糊低清渐变到清晰（替代原 Markdown 模块）── */
.demo-img .di-frame {
  height: 56px; border-radius: 5px; overflow: hidden; position: relative;
  border: 1px solid var(--glass-border);
  background: linear-gradient(140deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .06));
  transition: height var(--spb-dur-base) var(--spb-ease-out);
}
/* 展开时画框长高，聚焦动画才看得清 */
.proto-mod[data-on] .demo-img .di-frame { height: 116px; }
.demo-img .di-meta {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 9px; color: var(--fg-dim);
  margin-top: 5px;
}
/* 真图轮播 —— 图是 Aurora（数字艺术软件）的效果输出 */
.demo-img .di-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
/* 静态态（没 hover、没 JS）显示第一张，不是空框 */
.demo-img .di-img.on { opacity: 1; }

.proto-mod[data-on] .demo-img .di-img {
  animation: di-cycle 4.8s var(--spb-ease-inout) infinite;
}
.proto-mod[data-on] .demo-img .di-img:nth-child(2) { animation-delay: 1.6s; }
.proto-mod[data-on] .demo-img .di-img:nth-child(3) { animation-delay: 3.2s; }
@keyframes di-cycle {
  0%   { opacity: 0 }
  5%   { opacity: 1 }
  29%  { opacity: 1 }
  34%  { opacity: 0 }
  100% { opacity: 0 }
}

/* ── Git：提交点逐个亮起，最新一条滑入 ── */
.demo-git { display: grid; gap: 6px; }
.demo-git .dg-row {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--fg-dim);
}
.demo-git .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  border: 1px solid var(--glass-border-strong); background: transparent;
}
/* 真的 commit 文本，不是骨架条 */
.demo-git .dg-row b {
  font-family: var(--mono); font-size: 9px; font-weight: 400;
  color: var(--accent); opacity: .8; flex: none;
}
.demo-git .dg-row span {
  font-size: 9px; color: var(--fg-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proto-mod[data-on] .demo-git .dot {
  animation: dg-fill calc(var(--d) * 1.5) var(--spb-ease-out) infinite;
}
.proto-mod[data-on] .demo-git .dg-row:nth-child(2) .dot { animation-delay: .18s; }
.proto-mod[data-on] .demo-git .dg-row:nth-child(3) .dot { animation-delay: .36s; }
.proto-mod[data-on] .demo-git .dg-row:nth-child(3) {
  animation: dg-slide calc(var(--d) * 1.5) var(--spb-ease-out) infinite;
}
@keyframes dg-fill {
  0%, 20%   { background: transparent; border-color: var(--glass-border-strong) }
  40%, 100% { background: var(--accent); border-color: var(--accent) }
}
@keyframes dg-slide {
  0%, 25% { opacity: 0; transform: translateY(-4px) }
  45%, 100% { opacity: 1; transform: none }
}

/* 降级：不播演示动画，静态态本身就是完整可读的界面 */
@media (prefers-reduced-motion: reduce) {
  .proto-mod[data-on] .demo-browser .db-url::after,
  .proto-mod[data-on] .demo-browser .db-site > *,
  .proto-mod[data-on] .demo-code .dc-hl,
  .proto-mod[data-on] .demo-img .di-img,
  .proto-mod[data-on] .demo-git .dot,
  .proto-mod[data-on] .demo-git .dg-row,
  .proto-pane[data-on] .tw,
  .proto-pane[data-on] .term-splash { animation: none !important; }
  /* 关掉轮播后要保证有一张图是可见的，否则画框会空 */
  .demo-img .di-img.on { opacity: 1 !important; }
  .demo-browser .db-url::after { transform: scaleX(1); }
}

/* 高亮态：被导览指到、或鼠标悬停 */
.proto-mod[data-on] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 34px rgba(var(--accent-rgb), .18);
  transform: translateY(-2px);
}
/* 有高亮目标时，其余模块退后 —— 引导视线，不靠箭头 */
.proto[data-guiding] .proto-mod:not([data-on]),
.proto[data-guiding] .proto-pane:not([data-on]) .proto-lines { opacity: .38; }
.proto-pane[data-on] { border-color: var(--accent); }
.proto-pane[data-on]::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--accent);
  pointer-events: none;
}

/* ── 说明条 ── */
.proto-tip {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid var(--glass-border);
  background: var(--glass-1);
  font-size: 12.5px; color: var(--fg-dim);
  min-height: 44px;
}
.proto-tip b { color: var(--fg); font-weight: 500; }
.proto-tip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.proto-steps { margin-left: auto; display: flex; gap: 5px; }
.proto-steps i {
  width: 16px; height: 3px; border-radius: 2px;
  background: var(--glass-border-strong);
  transition: background var(--spb-dur-fast) var(--spb-ease-inout);
}
.proto-steps i[data-on] { background: var(--accent); }

/* 无 JS 时：不显示导览进度条，说明条给一句静态介绍 */
.proto:not([data-ready]) .proto-steps { display: none; }

@media (max-width: 760px) {
  .proto-body { grid-template-columns: 1fr; }
  .proto-term { border-right: 0; border-bottom: 1px solid var(--glass-border); }
  .proto-canvas { grid-template-columns: 1fr; }
}

/* 降级：不做自动导览，全部模块保持清晰 */
@media (prefers-reduced-motion: reduce) {
  .proto[data-guiding] .proto-mod:not([data-on]),
  .proto[data-guiding] .proto-pane:not([data-on]) .proto-lines { opacity: 1; }
  .proto-caret { animation: none; }
}