/* ═══════════════════════════════════════════════════════════════
   v3 二开层 — 品牌 3D 模型 / 终端区块 / 模型生态轮播 / 微交互
   (独立于 styles.css 的 v2 复刻基线,便于同步上游)
   ═══════════════════════════════════════════════════════════════ */

/* ── hero 3D 模型(v1 管线,适配 v2 栅格:相对定位 + 宽高比盒)── */
/* v3: 平衡左右视觉重量 — 右列模型垂直居中,并允许溢出栅格框放大 */
@media (min-width: 1024px) {
  .hero-grid { align-items: center; }
}
.hero-model {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  aspect-ratio: 916 / 696;
  user-select: none;
}
@media (min-width: 1024px) {
  .hero-model { width: 118%; max-width: none; margin-left: -9%; }
}
.hero-model canvas,
.hero-model-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-model canvas {
  z-index: 2;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.hero-model-fallback {
  z-index: 1;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.45s ease;
}
.hero-model.is-loaded canvas { opacity: 1; }
.hero-model.is-loaded .hero-model-fallback { opacity: 0; }
.hero-model.is-error canvas { display: none; }
.hero-model.is-error .hero-model-fallback { opacity: 1; }
/* 桌面端(JS 可用,three.js 会加载)直接渲染模型,加载期不显示占位图;
   小屏/无 JS/加载失败仍回退到静态图 */
@media (min-width: 1024px) {
  html.js .hero-model.is-fallback .hero-model-fallback { opacity: 0; }
}
.hero-model-status {
  position: absolute;
  right: 12%;
  bottom: 10%;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--background) 72%, transparent);
  color: var(--muted-foreground);
  font-size: 12px;
  backdrop-filter: blur(6px);
}

/* ── hero 基础 URL 接入演示(单行胶囊,对齐 app-pill 设计语言)── */
.hero-url {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 8px;
  margin-bottom: 32px;
  padding: 8px 8px 8px 16px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-url:hover {
  border-color: color-mix(in oklab, var(--primary) 35%, transparent);
  box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--primary) 30%, transparent);
}
.hero-url-label {
  flex: none;
  font-size: 12px;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
}
.hero-url-label::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 10px;
  vertical-align: -2px;
  background: color-mix(in oklab, var(--border) 90%, transparent);
}
.hero-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.hero-url-base { color: var(--foreground); white-space: nowrap; }
.hero-url-path {
  width: 23ch; /* 锁定为最长端点宽度,轮换时胶囊总长不抖动 */
  text-align: center;
  padding: 3px 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.hero-url-path.is-swapping { opacity: 0; transform: translateY(6px); }
.hero-url-copy {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  border-radius: 999px;
  background: var(--background);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.hero-url-copy:hover {
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  color: var(--primary);
}
.hero-url-copy svg { width: 16px; height: 16px; }
.hero-url-copy.is-copied { color: var(--primary); }
@media (max-width: 560px) {
  .hero-url { flex-wrap: wrap; border-radius: 20px; }
}

/* ── 终端演示区块(自 hero 下沉)── */
.term-section { padding-block: 64px; }
.term-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
.term-section-desc {
  margin-top: 16px;
  max-width: 26rem;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.75;
}
.term-section .term-wrap { margin-top: 0; }
@media (min-width: 1024px) {
  .term-section { padding-block: 96px; }
  .term-section-grid { grid-template-columns: 5fr 7fr; gap: 48px; }
}

/* ── 模型生态区块 ── */
.eco { padding-block: 64px; }
.eco-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
.eco-desc {
  margin-top: 16px;
  max-width: 28rem;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.75;
}
.eco-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  align-items: center;
}
.eco-wall img {
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 12px;
  background: var(--card);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.eco-wall img:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--primary) 45%, transparent);
  box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--primary) 40%, transparent);
}
/* 暗色下 logo 底座保持浅色,保证彩色与纯黑 logo 均可辨识 */
.dark .eco-wall img { background: #eef1f4; border-color: transparent; }
.eco-wall-more {
  font-size: 12.5px;
  color: var(--muted-foreground);
  padding-left: 4px;
  letter-spacing: 0.04em;
}
.eco-stage-col { display: flex; justify-content: center; }
@media (min-width: 1024px) {
  .eco { padding-block: 96px; }
  .eco-grid { grid-template-columns: 6fr 6fr; }
}

/* ── pixel2motion 轮播(自 ailogo/pixel2motion/carousel 移植,p2m- 前缀无冲突)── */
.p2m-carousel {
  --p2m-stage: min(60vw, 280px);
  --p2m-exit: 420ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 36px 28px 28px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: calc(var(--radius) * 1.4);
  background: color-mix(in oklab, var(--card) 82%, transparent);
  box-shadow: 0 18px 50px -22px color-mix(in oklab, var(--primary) 22%, transparent);
}
.p2m-stage { position: relative; width: var(--p2m-stage); height: var(--p2m-stage); }
.p2m-slide {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  margin: 0;
}
.p2m-slide.active { display: flex; }
.p2m-slide.leaving { opacity: 0; transition: opacity var(--p2m-exit) cubic-bezier(0.4, 0, 0.7, 1); }
.p2m-slide svg { width: 72%; height: auto; display: block; overflow: visible; }
.p2m-caption {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  text-align: center; white-space: nowrap; opacity: 0;
}
.active .p2m-caption { animation: p2m-caption-in 700ms cubic-bezier(0.2, 0.85, 0.3, 1) 600ms both; }
.p2m-caption strong { display: block; font-size: 19px; letter-spacing: 0.04em; color: var(--foreground); }
.p2m-caption span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-foreground); letter-spacing: 0.12em; }
@keyframes p2m-caption-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.p2m-dots { display: flex; gap: 10px; margin-top: 6px; }
.p2m-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  background: color-mix(in oklab, var(--muted-foreground) 35%, transparent);
  transition: background 300ms, transform 300ms;
}
.p2m-dot.on { background: var(--primary); transform: scale(1.3); }

/* 暗色下深色 logo 提亮 */
.dark #oa-mark path { fill: #ececec; }
.dark #gk-mark path { fill: #ececec; }
.dark #km-mark path { fill: #f0f2f5; }

/* GPT · OpenAI — pie-sweep assembly (1400ms) */
.active #oa-mark {
  transform-box: fill-box; transform-origin: center;
  animation: oa-mark 1400ms cubic-bezier(0.33, 0, 0.3, 1) both;
}
.active #oa-sweep-arc { animation: oa-sweep 1400ms cubic-bezier(0.3, 0, 0.25, 1) both; }
@keyframes oa-mark {
  0%   { opacity: 0; transform: rotate(-70deg) scale(0.85); animation-timing-function: cubic-bezier(0.42, 0, 0.72, 0.9); }
  8%   { opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.72, 0.9); }
  20%  { transform: rotate(-58deg) scale(0.9); animation-timing-function: cubic-bezier(0.22, 0.9, 0.28, 1); }
  78%  { transform: rotate(1.8deg) scale(1.015); animation-timing-function: cubic-bezier(0.33, 0, 0.3, 1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes oa-sweep {
  0%, 14% { stroke-dashoffset: 1.02; animation-timing-function: cubic-bezier(0.3, 0, 0.25, 1); }
  72%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

/* Claude — sunburst bloom (1500ms) */
.active #cl-mark {
  transform-box: fill-box; transform-origin: center;
  animation: cl-mark 1500ms cubic-bezier(0.37, 0, 0.35, 1) both;
}
.active #cl-burst-r { animation: cl-burst 1500ms cubic-bezier(0.25, 0.7, 0.3, 1) both; }
@keyframes cl-mark {
  0%   { opacity: 0; transform: rotate(-26deg) scale(0.5); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  10%  { opacity: 1; transform: rotate(-24deg) scale(0.56); animation-timing-function: cubic-bezier(0.2, 0.85, 0.3, 1); }
  62%  { transform: rotate(3deg) scale(1.07); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  82%  { transform: rotate(-0.8deg) scale(0.985); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes cl-burst {
  0%, 8% { r: 0px; animation-timing-function: cubic-bezier(0.25, 0.7, 0.3, 1); }
  64%    { r: 19px; }
  100%   { r: 19px; }
}

/* Gemini — sparkle pop + satellite twinkle (1400ms) */
.active #gem-star, .active #gem-sparkle-a, .active #gem-sparkle-b {
  transform-box: fill-box; transform-origin: center;
}
.active #gem-star      { animation: gem-star 1400ms cubic-bezier(0.37, 0, 0.35, 1) both; }
.active #gem-sparkle-a { animation: gem-sparkle-a 1400ms cubic-bezier(0.37, 0, 0.35, 1) both; }
.active #gem-sparkle-b { animation: gem-sparkle-b 1400ms cubic-bezier(0.37, 0, 0.35, 1) both; }
@keyframes gem-star {
  0%   { opacity: 0; transform: rotate(-150deg) scale(0.001); animation-timing-function: cubic-bezier(0.45, 0, 0.7, 0.9); }
  12%  { opacity: 1; transform: rotate(-136deg) scale(0.12); animation-timing-function: cubic-bezier(0.18, 0.9, 0.28, 1); }
  66%  { transform: rotate(5deg) scale(1.1); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  84%  { transform: rotate(-1.2deg) scale(0.975); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes gem-sparkle-a {
  0%, 56% { opacity: 0; transform: rotate(-90deg) scale(0.2); animation-timing-function: cubic-bezier(0.18, 0.9, 0.28, 1); }
  66%  { opacity: 1; transform: rotate(-8deg) scale(1.15); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  78%  { opacity: 1; transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  92%, 100% { opacity: 0; transform: rotate(6deg) scale(0.55); }
}
@keyframes gem-sparkle-b {
  0%, 64% { opacity: 0; transform: rotate(-110deg) scale(0.2); animation-timing-function: cubic-bezier(0.18, 0.9, 0.28, 1); }
  74%  { opacity: 1; transform: rotate(-10deg) scale(1.1); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  84%  { opacity: 1; transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  96%, 100% { opacity: 0; transform: rotate(8deg) scale(0.5); }
}

/* Grok — diagonal slash convergence (1300ms) */
.active #gk-swoosh-main, .active #gk-swoosh-tail { transform-box: view-box; }
.active #gk-swoosh-main { animation: gk-main 1300ms cubic-bezier(0.34, 0, 0.36, 1) both; }
.active #gk-swoosh-tail { animation: gk-tail 1300ms cubic-bezier(0.34, 0, 0.36, 1) both; }
@keyframes gk-main {
  0%   { opacity: 0; transform: translate(6.5px, -6.5px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8%   { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  58%  { transform: translate(-0.35px, 0.35px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  76%  { transform: translate(0.08px, -0.08px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes gk-tail {
  0%, 12% { opacity: 0; transform: translate(-6.5px, 6.5px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  20%  { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  68%  { transform: translate(0.35px, -0.35px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  84%  { transform: translate(-0.08px, 0.08px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}

/* DeepSeek — dive-glide + head-to-tail wipe (1500ms) */
.active #ds-mark {
  transform-box: fill-box; transform-origin: center;
  animation: ds-glide 1500ms cubic-bezier(0.37, 0, 0.35, 1) both;
}
.active #ds-wipe-rect { animation: ds-wipe 1500ms cubic-bezier(0.25, 0.8, 0.3, 1) both; }
@keyframes ds-glide {
  0%   { opacity: 0; transform: translate(5px, -1.2px) rotate(-6deg); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  12%  { opacity: 1; transform: translate(4px, -0.8px) rotate(-5.2deg); animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1); }
  55%  { transform: translate(-0.3px, 0.35px) rotate(1.2deg); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  78%  { transform: translate(0.06px, -0.1px) rotate(-0.3deg); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: translate(0px, 0px) rotate(0deg); }
}
@keyframes ds-wipe {
  0%, 6% { width: 0px; animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1); }
  66%    { width: 30px; }
  100%   { width: 30px; }
}

/* Zhipu GLM — constellation lock cascade (1500ms) */
.active #zp-core, .active #zp-sat, .active #zp-ring, .active #zp-dust {
  transform-box: fill-box; transform-origin: center;
}
.active #zp-core { animation: zp-core 1500ms cubic-bezier(0.37, 0, 0.35, 1) both; }
.active #zp-sat  { animation: zp-sat  1500ms cubic-bezier(0.37, 0, 0.35, 1) both; }
.active #zp-ring { animation: zp-ring 1500ms cubic-bezier(0.37, 0, 0.35, 1) both; }
.active #zp-dust { animation: zp-dust 1500ms cubic-bezier(0.37, 0, 0.35, 1) both; }
@keyframes zp-core {
  0%   { opacity: 0; transform: rotate(-30deg) scale(0.55); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  10%  { opacity: 1; transform: rotate(-27deg) scale(0.6); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  55%  { transform: rotate(1.5deg) scale(1.04); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  75%  { transform: rotate(-0.4deg) scale(0.99); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes zp-sat {
  0%, 22% { opacity: 0; transform: rotate(-24deg) scale(0.55); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  32%  { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  62%  { transform: rotate(1deg) scale(1.03); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  80%  { transform: rotate(-0.3deg) scale(0.995); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes zp-ring {
  0%, 34% { opacity: 0; transform: rotate(-18deg) scale(0.6); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  44%  { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  74%  { transform: rotate(0.8deg) scale(1.04); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}
@keyframes zp-dust {
  0%, 46% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  62%  { opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.9, 0.3, 1); }
  80%  { transform: scale(1.15); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  92%  { transform: scale(0.95); animation-timing-function: cubic-bezier(0.37, 0, 0.35, 1); }
  100% { opacity: 1; transform: scale(1); }
}

/* Kimi Moonshot — ascending launch cascade (1500ms) */
.active #km-band-1, .active #km-band-2, .active #km-band-3, .active #km-band-4, .active #km-band-5 {
  transform-box: view-box;
}
.active #km-band-1 { animation: km-b1 1500ms cubic-bezier(0.34, 0, 0.36, 1) both; }
.active #km-band-2 { animation: km-b2 1500ms cubic-bezier(0.34, 0, 0.36, 1) both; }
.active #km-band-3 { animation: km-b3 1500ms cubic-bezier(0.34, 0, 0.36, 1) both; }
.active #km-band-4 { animation: km-b4 1500ms cubic-bezier(0.34, 0, 0.36, 1) both; }
.active #km-band-5 { animation: km-b5 1500ms cubic-bezier(0.34, 0, 0.36, 1) both; }
@keyframes km-b1 {
  0%   { opacity: 0; transform: translate(-7px, 1.6px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8%   { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  44%  { transform: translate(0.3px, -0.07px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  58%  { transform: translate(-0.06px, 0.015px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  72%, 100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes km-b2 {
  0%, 7% { opacity: 0; transform: translate(-7px, 1.6px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  15%  { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  51%  { transform: translate(0.3px, -0.07px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  65%  { transform: translate(-0.06px, 0.015px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  79%, 100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes km-b3 {
  0%, 14% { opacity: 0; transform: translate(-7px, 1.6px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  22%  { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  58%  { transform: translate(0.3px, -0.07px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  72%  { transform: translate(-0.06px, 0.015px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  86%, 100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes km-b4 {
  0%, 21% { opacity: 0; transform: translate(-7px, 1.6px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  29%  { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  65%  { transform: translate(0.3px, -0.07px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  79%  { transform: translate(-0.06px, 0.015px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  93%, 100% { opacity: 1; transform: translate(0px, 0px); }
}
@keyframes km-b5 {
  0%, 28% { opacity: 0; transform: translate(-7px, 1.6px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  36%  { opacity: 1; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  72%  { transform: translate(0.3px, -0.07px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  86%  { transform: translate(-0.06px, 0.015px); animation-timing-function: cubic-bezier(0.34, 0, 0.36, 1); }
  100% { opacity: 1; transform: translate(0px, 0px); }
}

/* ── bento 卡片 3D tilt(app.js 注入 --tilt-x/--tilt-y;触屏不生效)── */
@media (hover: hover) and (pointer: fine) {
  .bento-cell {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.18s ease-out;
    will-change: transform;
  }
}

/* ── v3 reduced-motion 补充 ── */
@media (prefers-reduced-motion: reduce) {
  .p2m-slide, .p2m-slide * { animation: none !important; transition: none !important; }
  .active .p2m-caption { opacity: 1; }
  .bento-cell { transform: none !important; }
}

/* ═══════════ v3 bento 卡片重设计 ═══════════ */
.bento-cell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.bento-cell[data-accent="teal"]    { --cell-accent: var(--primary); }
.bento-cell[data-accent="emerald"] { --cell-accent: oklch(0.72 0.15 162); }
.bento-cell[data-accent="violet"]  { --cell-accent: oklch(0.65 0.2 293); }
.bento-cell[data-accent="amber"]   { --cell-accent: oklch(0.76 0.14 70); }
/* 极淡品牌色打底 + 鼠标跟随光晕 */
.bento-cell[data-accent]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
      color-mix(in oklab, var(--cell-accent) 9%, transparent), transparent 70%),
    linear-gradient(155deg, color-mix(in oklab, var(--cell-accent) 5%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.bento-cell[data-accent]:hover::before { opacity: 1; }
/* 图标章 + 大号水印编号 */
.cell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--cell-accent) 12%, transparent);
  color: var(--cell-accent);
}
.cell-icon .icon { width: 16px; height: 16px; }
.cell-watermark {
  position: absolute;
  right: 14px;
  bottom: -18px;
  z-index: -1;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--cell-accent) 8%, transparent);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ── 01 极速:请求路由动画 ── */
.flow-visual {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  min-height: 148px;
}
.flow-node {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in oklab, var(--cell-accent) 35%, transparent);
  border-radius: 14px;
  background: var(--background);
  box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--cell-accent) 45%, transparent);
}
.flow-node img { border-radius: 6px; }
.flow-node-ring {
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in oklab, var(--cell-accent) 40%, transparent);
  border-radius: 18px;
  animation: flow-ring 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes flow-ring {
  0%   { opacity: 0.9; transform: scale(0.92); }
  70%, 100% { opacity: 0; transform: scale(1.28); }
}
.flow-lines {
  flex: 1;
  height: 148px;
  min-width: 60px;
  overflow: visible;
}
.fl-base {
  fill: none;
  stroke: color-mix(in oklab, var(--border) 90%, transparent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.fl-pulse {
  fill: none;
  stroke: var(--cell-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 0.1 0.9;
  stroke-dashoffset: 1.1;
  opacity: 0;
  animation: flow-pulse 4.2s linear var(--fd, 0s) infinite;
}
@keyframes flow-pulse {
  0%    { stroke-dashoffset: 1.1; opacity: 0; }
  4%    { opacity: 0.9; }
  30%   { stroke-dashoffset: 0.1; opacity: 0.9; }
  36%, 100% { stroke-dashoffset: -0.1; opacity: 0; }
}
.flow-targets {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 5px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 999px;
  background: var(--background);
  font-size: 11px;
  color: var(--muted-foreground);
}
.flow-chip img { width: 14px; height: 14px; }
.dark .flow-chip img { filter: invert(0.88) hue-rotate(180deg); }
.flow-latency {
  position: absolute;
  left: 58px;
  top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--cell-accent) 30%, transparent);
  background: color-mix(in oklab, var(--cell-accent) 8%, var(--background));
  color: var(--cell-accent);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.flow-latency b { font-weight: 700; }

/* ── 02 安全可靠:雷达扫描环 + 审计日志 ── */
.radar-ring {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklab, var(--cell-accent) 45%, transparent);
  border-radius: 999px;
  animation: radar 3.2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.radar-ring.r2 { animation-delay: 1.6s; }
@keyframes radar {
  0%   { opacity: 0.8; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(2.1); }
}
.sec-log {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted-foreground);
}
.sec-log li {
  opacity: 0.35;
  animation: sec-log 6s ease var(--ld, 0s) infinite;
}
@keyframes sec-log {
  0%, 8%   { opacity: 0.35; }
  16%, 46% { opacity: 1; color: var(--cell-accent); }
  58%, 100% { opacity: 0.35; }
}

/* ── 03 智能调度:三步顺序点亮 ── */
.route-step .route-num { transition: none; }
.route-step {
  --on: 0;
  animation: route-cycle 6s ease var(--rd, 0s) infinite;
}
@keyframes route-cycle { 0%, 100% { opacity: 1; } }
.route-step .route-num { animation: route-num-glow 6s ease var(--rd, 0s) infinite; }
.route-step .route-label { animation: route-label-glow 6s ease var(--rd, 0s) infinite; }
@keyframes route-num-glow {
  0%, 6% { background: var(--muted); color: var(--muted-foreground); border-color: color-mix(in oklab, var(--border) 40%, transparent); box-shadow: none; }
  14%, 42% {
    background: color-mix(in oklab, var(--cell-accent) 14%, var(--background));
    color: var(--cell-accent);
    border-color: color-mix(in oklab, var(--cell-accent) 45%, transparent);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--cell-accent) 10%, transparent);
  }
  56%, 100% { background: var(--muted); color: var(--muted-foreground); border-color: color-mix(in oklab, var(--border) 40%, transparent); box-shadow: none; }
}
@keyframes route-label-glow {
  0%, 6% { color: var(--muted-foreground); }
  14%, 42% { color: var(--foreground); }
  56%, 100% { color: var(--muted-foreground); }
}

/* ── 04 开发者友好:mini 代码片段 ── */
.mini-code {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--muted) 40%, var(--background));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.9;
  overflow-x: auto;
}
.mc-mut { color: var(--muted-foreground); }
.mc-op  { color: var(--muted-foreground); }
.mc-fn  { color: oklch(0.65 0.2 293); }
.mc-key { color: var(--foreground); }
.mc-acc { color: var(--primary); font-weight: 600; }
.mc-str { color: oklch(0.72 0.15 162); }
.dark .mc-fn { color: oklch(0.75 0.16 293); }
.dark .mc-str { color: oklch(0.8 0.14 162); }
.mc-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  background: var(--cell-accent);
  animation: mc-caret 1.1s steps(1) infinite;
}
@keyframes mc-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.bento-cell .dev-visual { margin-top: 16px; }

/* reduced-motion:bento 动效全部静止,展示完成态 */
@media (prefers-reduced-motion: reduce) {
  .fl-pulse, .flow-node-ring, .radar-ring, .mc-caret { animation: none !important; opacity: 0; }
  .sec-log li, .route-step .route-num, .route-step .route-label { animation: none !important; }
  .sec-log li { opacity: 1; }
}

/* ═══════════ v3 附加特性行 + 三步上手重设计 ═══════════ */
/* 通用 accent 变量(与 bento 同色系) */
.feat-tile[data-accent="teal"],    .how-step[data-accent="teal"]    { --cell-accent: var(--primary); }
.feat-tile[data-accent="emerald"], .how-step[data-accent="emerald"] { --cell-accent: oklch(0.72 0.15 162); }
.feat-tile[data-accent="violet"],  .how-step[data-accent="violet"]  { --cell-accent: oklch(0.65 0.2 293); }
.feat-tile[data-accent="amber"],   .how-step[data-accent="amber"]   { --cell-accent: oklch(0.76 0.14 70); }

/* ── 附加特性:居中竖排 → 卡片化横排 ── */
.feat-tile {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid color-mix(in oklab, var(--border) 55%, transparent);
  border-radius: calc(var(--radius) * 1.1);
  background: color-mix(in oklab, var(--card) 60%, transparent);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.feat-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--cell-accent) 40%, transparent);
  box-shadow: 0 10px 26px -14px color-mix(in oklab, var(--cell-accent) 45%, transparent);
}
.feat-tile .feat-icon {
  flex: none;
  margin-bottom: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: color-mix(in oklab, var(--cell-accent) 12%, transparent);
  color: var(--cell-accent);
}
.feat-tile .feat-icon { grid-row: span 2; }
.feat-tile h3 { grid-column: 2; margin: 2px 0 0; text-align: left; }
.feat-tile p  { grid-column: 2; margin: 0; text-align: left; }

/* ── 三步上手:虚线进度连接线 + accent 步骤 + 命令示意 chip ── */
.how-grid { position: relative; }
@media (min-width: 768px) {
  /* 贯穿三个图标中心的虚线,光点沿线流动 */
  .how-grid::before {
    content: "";
    position: absolute;
    top: 32px; /* 图标 64px 的中心 */
    left: 16.66%;
    right: 16.66%;
    height: 1px;
    background-image: linear-gradient(90deg, color-mix(in oklab, var(--border) 90%, transparent) 55%, transparent 45%);
    background-size: 12px 1px;
  }
  .how-grid::after {
    content: "";
    position: absolute;
    top: 30px;
    left: 16.66%;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--primary));
    filter: blur(0.4px);
    opacity: 0.85;
    animation: how-comet 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  }
  @keyframes how-comet {
    0%   { left: 16.66%; opacity: 0; }
    6%   { opacity: 0.85; }
    48%  { left: calc(83.33% - 44px); opacity: 0.85; }
    56%, 100% { left: calc(83.33% - 44px); opacity: 0; }
  }
}
.how-step { z-index: 1; }
.how-step .how-icon {
  background: var(--background);
  border-color: color-mix(in oklab, var(--cell-accent) 30%, transparent);
  color: var(--cell-accent);
  box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--cell-accent) 50%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.how-step:hover .how-icon {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--cell-accent) 60%, transparent);
}
.how-step .how-num {
  background: var(--cell-accent);
  color: #fff;
}
.how-chip {
  margin-top: 14px;
  padding: 5px 12px;
  border: 1px solid color-mix(in oklab, var(--cell-accent) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--cell-accent) 7%, transparent);
  color: color-mix(in oklab, var(--cell-accent) 80%, var(--foreground));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .how-grid::after { animation: none; opacity: 0; }
}

/* ═══════════ v3 hero 客户端无限滚动横带 ═══════════ */
.client-marquee {
  display: flex;
  width: 100%;
  max-width: 40rem;
  overflow: hidden;
  /* 两端淡出,滚动更柔和 */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-track {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px; /* 与 gap 等宽,保证两份内容无缝衔接 */
  animation: client-scroll 40s linear infinite;
}
.client-marquee:hover .client-track { animation-play-state: paused; }
@keyframes client-scroll {
  to { transform: translateX(-100%); }
}
.client-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 13px;
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 80%, transparent);
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
  white-space: nowrap;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.client-pill:hover {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--primary) 35%, transparent);
  transform: translateY(-1px);
}
.client-pill img { width: 24px; height: 24px; object-fit: contain; }
/* 仅对单色 logo 在暗色模式下反色,彩色 logo 保持原样 */
.dark .client-pill img.mono { filter: invert(0.9) brightness(1.15); }
@media (prefers-reduced-motion: reduce) {
  .client-track { animation: none; flex-wrap: wrap; }
  .client-track[aria-hidden="true"] { display: none; }
  .client-marquee { mask-image: none; -webkit-mask-image: none; }
}