/* ============================================================
 * Fish AI API 开发者平台 · 旗舰精修层(2026-09-13d)
 * 与主站 index-ui-v4 同源:深渊极光体系内的高级感打磨,零配色改动。
 *   1. 控制台:背光 conic 光环 + 青色准星角标 + 渐变发丝边
 *   2. Hero 标题流光 / 指标悬停 / 品牌徽标呼吸
 *   3. 全模型跑马灯(.model-marquee)
 *   4. 滚动显现 .rv/.io-in + 导航 scrollspy(内联 JS 驱动)
 *   动效全部 transform/opacity,含 reduced-motion 守卫
 * ============================================================ */

/* ===== 1. 控制台背光:品牌三色 conic 光环(缓旋,纯氛围) ===== */
.hero-console-wrap { position: relative; }
.hero-console-wrap::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: conic-gradient(from var(--ha, 0deg),
    rgba(var(--glow-cyan), .1), transparent 24%,
    rgba(var(--glow), .12) 48%, transparent 66%,
    rgba(var(--glow-violet), .09) 86%, rgba(var(--glow-cyan), .1));
  border-radius: 28px;
  filter: blur(28px);
  animation: haloSpin 16s linear infinite;
  pointer-events: none;
}
@property --ha {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes haloSpin { to { --ha: 360deg; } }

/* 准星角标:青色四角,悬停增亮 */
.hero-console-wrap::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  opacity: .45;
  transition: opacity .25s var(--ease-out);
  background:
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 top 0 / 18px 2px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 top 0 / 2px 18px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 top 0 / 18px 2px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 top 0 / 2px 18px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 bottom 0 / 18px 2px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 bottom 0 / 2px 18px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 bottom 0 / 18px 2px no-repeat,
    linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 bottom 0 / 2px 18px no-repeat;
}
.hero-console-wrap:hover::after { opacity: .9; }

/* 控制台渐变发丝描边(::before 已被径向氛围光占用) */
.console-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg,
    rgba(var(--glow-cyan), .45),
    rgba(var(--glow), .12) 38%,
    rgba(var(--glow-violet), .38) 82%,
    rgba(var(--glow-cyan), .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
.console-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--glow-cyan), .5), rgba(var(--glow), .3) 45%, transparent 90%);
  pointer-events: none;
}

/* ===== 2. Hero / 指标 / 徽标 ===== */
.title-accent {
  background-size: 220% 100%;
  animation: acDrift 8s ease-in-out infinite alternate;
}
@keyframes acDrift {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}
.metric-val {
  filter: drop-shadow(0 0 16px rgba(var(--glow), .3));
  transition: transform .2s var(--ease-out), filter .2s var(--ease-out);
}
.metric-item:hover .metric-val {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 0 24px rgba(var(--glow), .5));
}
.metric-lbl { letter-spacing: .04em; }
.brand img { animation: brandGlow 4.5s ease-in-out infinite; }
@keyframes brandGlow {
  0%, 100% { box-shadow: 0 0 16px rgba(var(--glow), .4); }
  50%      { box-shadow: 0 0 28px rgba(var(--glow), .6); }
}

/* ===== 3. 全模型跑马灯 ===== */
.mm-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 700 10.5px/1 var(--font-mono, ui-monospace, Consolas, monospace);
  letter-spacing: .22em;
  color: var(--text-muted);
}
.mm-head::before,
.mm-head::after {
  content: "";
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--glow), .45));
}
.mm-head::after { background: linear-gradient(90deg, rgba(var(--glow), .45), transparent); }
.model-marquee {
  position: relative;
  overflow: hidden;
  padding: 13px 0;
  margin-bottom: 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mm-track {
  display: flex;
  width: max-content;
  animation: mmScroll 52s linear infinite;
}
.model-marquee:hover .mm-track { animation-play-state: paused; }
@keyframes mmScroll { to { transform: translateX(-50%); } }
.mm-group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
}
.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  transition: color .2s var(--ease-out), text-shadow .2s var(--ease-out);
}
.mm-chip:hover {
  color: var(--text);
  text-shadow: 0 0 14px rgba(var(--glow), .45);
}
.mm-chip i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--d, var(--accent));
  box-shadow: 0 0 8px var(--d, rgba(var(--glow-cyan), .85));
  flex-shrink: 0;
}

/* ===== 4. 滚动显现 + 导航 scrollspy ===== */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
.rv.io-in { opacity: 1; transform: none; }
.features-row .rv:nth-child(2) { transition-delay: .08s; }
.features-row .rv:nth-child(3) { transition-delay: .16s; }
.features-row .rv:nth-child(4) { transition-delay: .24s; }
.versus-intro .rv:nth-child(2) { transition-delay: .1s; }
.versus-intro .rv:nth-child(3) { transition-delay: .2s; }
.client-cards-grid .rv:nth-child(2) { transition-delay: .1s; }
.client-cards-grid .rv:nth-child(3) { transition-delay: .2s; }
.topnav .nav-item.active { color: var(--text); }
.topnav .nav-item.active::after { transform: scaleX(1); }

/* ===== 5. reduced-motion 守卫 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-console-wrap::before,
  .brand img,
  .title-accent,
  .mm-track { animation: none !important; }
  .rv { opacity: 1; transform: none; transition: none !important; }
}

/* ===== 5b. 模型价格卡降噪(2026-09-13d) ===== */
/* 降价卡:去红框;顶线改柔和翠色(降价=利好),信息保留、视觉安静 */
.model-card.price-drop { border-color: var(--border); }
.model-card.price-drop::before {
  background: linear-gradient(90deg, transparent, rgba(52, 211, 153, .5) 30%, rgba(52, 211, 153, .5) 70%, transparent);
  opacity: 1;
}
/* 去掉每卡右上角的红色折角标(与下方优惠标签重复) */
.price-drop-ribbon { display: none; }
.model-title { padding-right: 6px; }
/* 优惠行:红药丸 → 翠色小标签,说明文字转灰 */
.price-drop-note {
  gap: 6px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.price-drop-note span {
  color: #059669;
  background: rgba(16, 185, 129, .09);
  border-color: rgba(16, 185, 129, .3);
}
html[data-theme="dark"] .price-drop-note span { color: #34d399; }
/* 上下文分档格:去橙青撞色 → 中性底,当前档用品牌靛描边 */
.schedule-price { background: var(--bg-soft); border-color: var(--border-soft); }
.schedule-grid.context-tier-grid .schedule-price { border-left: 0; }
.schedule-grid.context-tier-grid .schedule-price.active {
  border-color: rgba(var(--glow), .38);
  background: rgba(var(--glow), .06);
  box-shadow: none;
}
.schedule-grid.context-tier-grid .schedule-price.active b { color: var(--primary); }
/* 主价格行 / DeepSeek 峰谷格:边框发丝化、去辉光 */
.price-row { border-color: var(--border-soft); }
.price-row.current-price-row { border-color: rgba(var(--glow), .3); box-shadow: none; }
.schedule-grid:not(.context-tier-grid) .schedule-price.active:nth-child(1) {
  border-color: rgba(var(--amber-rgb), .38);
  background: rgba(var(--amber-rgb), .07);
  box-shadow: none;
}
.schedule-grid:not(.context-tier-grid) .schedule-price.active:nth-child(2) {
  border-color: rgba(var(--glow-cyan), .38);
  background: rgba(var(--glow-cyan), .06);
  box-shadow: none;
}

/* ===== 6. 移动端微调 ===== */
@media (max-width: 768px) {
  .hero-console-wrap::before { inset: -5%; filter: blur(20px); }
  .hero-console-wrap::after { inset: -5px; }
  .hero-console-wrap::after {
    background:
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 top 0 / 13px 2px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 top 0 / 2px 13px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 top 0 / 13px 2px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 top 0 / 2px 13px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 bottom 0 / 13px 2px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) left 0 bottom 0 / 2px 13px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 bottom 0 / 13px 2px no-repeat,
      linear-gradient(rgba(var(--glow-cyan), .9), rgba(var(--glow-cyan), .9)) right 0 bottom 0 / 2px 13px no-repeat;
  }
  .hero-metrics { padding: 20px 16px; }
  .mm-group { gap: 24px; padding-right: 24px; }
  .mm-chip { font-size: 11.5px; }
}