/* ============================================================
   00 HERO · 首屏样式
   所有选择器以 #hero 开头，防止全局污染
   仅使用 tokens.css 中的设计令牌，禁止硬编码
   ============================================================ */

#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 覆盖 section 默认的上下大间距，改为居中撑满视口 */
  padding-block: clamp(6rem, 12vh, 9rem);
}

/* —— 斜向示波器扫描线（缓慢扫过的电光青细线） —— */
#hero .hero-scan {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#hero .hero-scan::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    var(--cyan-soft) 45%,
    var(--cyan-glow) 50%,
    var(--cyan-soft) 55%,
    transparent 100%
  );
  filter: blur(2px);
  animation: hero-scan-sweep 9s linear infinite;
}
@keyframes hero-scan-sweep {
  0%   { transform: translateX(0)      skewX(-14deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(280%)   skewX(-14deg); opacity: 0; }
}

/* —— 主布局：左文右仪表 —— */
#hero .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* ============================================================
   左侧 · 文案
   ============================================================ */
#hero .hero-tick { margin-bottom: clamp(1.5rem, 3vw, 2.4rem); }

#hero .hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  gap: 0.12em;
}

/* 英文品牌名：切角描边处理，制造记忆点 */
#hero .hero-brand {
  color: var(--cyan);
  text-shadow: 0 0 28px var(--cyan-glow);
  -webkit-text-stroke: 0.5px var(--cyan-deep);
}
/* 中文标题自动 fallback 到 Noto Sans SC，字重稍轻以平衡视觉密度 */
#hero .hero-cn {
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0;
}

#hero .hero-lead {
  font-size: var(--fs-lead);
  color: var(--text);
  margin-top: clamp(1.4rem, 3vw, 2rem);
  max-width: 22ch;
}
#hero .hero-desc {
  font-size: var(--fs-body);
  color: var(--text-dim);
  margin-top: 0.7rem;
  max-width: 34ch;
}

#hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* 主按钮辉光呼吸动画 */
#hero .hero-btn-primary { animation: hero-btn-breathe 3.2s var(--ease) infinite; }
#hero .hero-btn-primary:hover { animation-play-state: paused; }
@keyframes hero-btn-breathe {
  0%, 100% { box-shadow: 0 0 0 1px var(--cyan-soft), 0 0 22px -12px var(--cyan-glow); }
  50%      { box-shadow: 0 0 0 1px var(--cyan-soft), 0 0 44px -6px var(--cyan-glow); }
}

/* ============================================================
   右侧 · 仪表读数面板
   ============================================================ */
#hero .hero-gauge {
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: linear-gradient(160deg, var(--ink-2), var(--ink));
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

#hero .hero-gauge-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--text-mute);
}
#hero .hero-gauge-idx { color: var(--cyan); }
#hero .hero-gauge-status { margin-left: auto; color: var(--text-dim); }
#hero .hero-gauge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: hero-pulse 2s var(--ease) infinite;
}
@keyframes hero-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.82); }
}

/* 示波曲线 */
#hero .hero-wave {
  width: 100%;
  height: clamp(60px, 8vw, 90px);
  display: block;
}
#hero .hero-wave polyline {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px var(--cyan-glow));
  opacity: 0.85;
}

/* 读数列表 */
#hero .hero-readout {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
#hero .hero-readout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
#hero .hero-readout-row dt {
  color: var(--text-mute);
  letter-spacing: 0.14em;
}
#hero .hero-readout-row dd {
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
#hero .hero-num {
  color: var(--cyan);
  font-size: 1.1em;
}
#hero .hero-unit { color: var(--text-mute); margin-left: 0.15em; }

/* 底部刻度尺 */
#hero .hero-ruler {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 16px;
}
#hero .hero-ruler span {
  flex: 1;
  height: 6px;
  background: var(--line-bright);
}
#hero .hero-ruler span:nth-child(5n + 1) {
  height: 14px;
  background: var(--cyan-deep);
}

/* ============================================================
   背景描边大字
   ============================================================ */
#hero .hero-ghost {
  position: absolute;
  right: clamp(-1rem, 2vw, 4rem);
  bottom: clamp(-1.5rem, -1vw, 2rem);
  z-index: 0;
  font-size: clamp(8rem, 22vw, 20rem);
  opacity: 0.5;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1024px) {
  #hero .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #hero .hero-gauge { max-width: 480px; }
}

@media (max-width: 768px) {
  #hero {
    min-height: auto;
    padding-block: clamp(7rem, 18vh, 9rem) clamp(4rem, 10vh, 6rem);
  }
  #hero .hero-lead,
  #hero .hero-desc { max-width: none; }
  /* 手机端简化装饰：隐藏示波曲线与刻度尺，保留核心读数 */
  #hero .hero-wave,
  #hero .hero-ruler { display: none; }
  #hero .hero-ghost { display: none; }
}

/* —— 动效偏好：关闭扫描线与呼吸动画 —— */
@media (prefers-reduced-motion: reduce) {
  #hero .hero-scan::before,
  #hero .hero-btn-primary,
  #hero .hero-gauge-dot { animation: none; }
  #hero .hero-scan { display: none; }
}